${(title || 'Character').replace(/[<>&]/g, '')}

{title}

{onChange ?

onChange(e.target.value)} placeholder="Click here to write …" aria-label={title} />
        : <div className="plines pwrite">{value}</div>}
    </div>
  )
}

// Scales the A4 pages down when the space is narrower than the paper
function Fit({ children, rootRef, dark }) {
  const wrap = useRef(null)
  const [z, setZ] = useState(1)
  useLayoutEffect(() => {
    const f = () => wrap.current && setZ(Math.min(1, wrap.current.clientWidth / PAPER_PX))
    f()
    const ro = new ResizeObserver(f)
    ro.observe(wrap.current)
    return () => ro.disconnect()
  }, [])
  return <div ref={wrap} className="paperfit"><div ref={rootRef} className={`papers${dark ? ' dark' : ''}`} style={{ zoom: z }}>{children}</div></div>
}

const Pips = ({ n, locked }) => (
  <span className={`ppips ${locked ? 'locked' : ''}`} aria-label={n === 2 ? 'Expertise' : n === 1 ? 'Proficient' : locked ? 'Locked' : ''}>
    <i className={n >= 1 ? 'on' : ''} /><i className={n >= 2 ? 'on' : ''} />
  </span>
)

// The character sheet as A4 pages (page 1: attributes and skills, page 2: talents, mutations, equipment, notes).
export default function PaperSheet({ data, baseRules, tools, bare, onRoll, onNotes }) {
  const ch = useMemo(() => normalize(data, baseRules), [data, baseRules])
  const rules = useMemo(() => effectiveRules(baseRules, ch), [baseRules, ch])
  const c = useMemo(() => compute(ch, rules), [ch, rules])
  const x = { ch, rules, c }
  const root = useRef(null)
  const [dark] = useSheetTheme()

const prof = rules.professions.find((p) => p.id === ch.profession)
  const cls = rules.classes.find((k) => k.id === ch.class_id)
  const sub = cls?.subclasses.find((s) => s.id === ch.subclass_id)
  const preset = ch.preset === 'custom' ? 'Custom' : baseRules.presets?.find((p) => p.id === ch.preset)?.name || 'Custom'
  const short = (s) => rules.attributes.filter((a) => s.attrs.includes(a.id)).map((a) => a.short).join('/')
  const talents = rules.talents.filter((t) => ch.talents.includes(t.id))
  const augments = rules.augments.filter((a) => ch.augments.includes(a.id))
  const gear = kitItems(ch, rules)
  const name = ch.name || 'Nameless'
  const sign = (n) => (n > 0 ? `+${n}` : `${n}`)
  // With onRoll (own character in a lobby) attributes and usable skills can be clicked to roll a check
  const roll = (kind, id, label, ok = true) => (onRoll && ok ? {
    className: 'rollable', role: 'button', tabIndex: 0,
    onClick: () => onRoll(kind, id, label), onKeyDown: (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onRoll(kind, id, label) } },
  } : {})

const Field = ({ label, children }) => <div className="pfield"><span>{label}</span><b>{children || '–'}</b></div>
  const Foot = ({ n }) => <div className="pfoot"><span>Arcane Wasteland</span><span>{name}</span><span>Page {n} / 2</span></div>

return (
    <div className="papersheet">
      {!bare && (
        <div className="papertools">
          {tools}
          <span className="toolright">
            <ThemeSwitch />
            <button className="ghost" onClick={() => printSheet(root.current, name)} title="Opens the pages for printing, choose Save as PDF there">Print / PDF (A4)</button>
          </span>
        </div>
      )}
      <Fit rootRef={root} dark={dark}>
        <section className="paper">
          {(() => {
            const head = (
              <header className="phead">
                <div className="pname">{name}</div>
                <div className="pbrand">Arcane Wasteland<span>Character sheet</span></div>
              </header>
            )
            const fields = (
              <div className="pfields">
                <Field label="Player">{ch.player}</Field>
                <Field label="Concept">{ch.concept}</Field>
                <Field label="Class">{cls && [cls.name, sub?.name].filter(Boolean).join(' / ')}</Field>
                <Field label="Profession">{prof?.name}</Field>
                <Field label="Rules">{preset}</Field>
              </div>
            )
            return ch.portrait
              ? <div className="pidentity"><img className="pportrait" src={ch.portrait} alt="" /><div className="pidright">{head}{fields}</div></div>
              : <>{head}{fields}</>
          })()}

<div className="pattrs">
            {rules.attributes.map((a) => (
              <div key={a.id} {...roll('attr', a.id, a.name)} className={`pattr${onRoll ? ' rollable' : ''}`}>
                <Tip text={explainAttr(a, x)}><span className="pattr-n">{a.name}</span></Tip>
                <b className="pattr-v">{c.attrs[a.id]}</b>
                <span className="pattr-m">Mod {sign(c.mods[a.id])}</span>
              </div>
            ))}
          </div>
          <div className="pderived">
            {rules.derived.map((d) => (
              <div key={d.id} className="pstat">
                <Tip text={explainDerived(d, x)}><span>{d.name}</span></Tip>
                <b>{c.derived[d.id]}</b>
              </div>
            ))}
          </div>

<div className="psec">
            <h3>Skills <small>● proficient · ●● expertise · attribute · points · total</small></h3>
            <div className="pskills">
              {rules.skill_groups.map((g) => (
                <div key={g.id} className="pgroup">
                  <h4>{g.name}</h4>
                  {c.skills.filter((s) => s.group === g.id).map((s) => (
                    <div key={s.id} {...roll('skill', s.id, s.name, s.usable)} className={`prow ${s.usable ? '' : 'locked'}${onRoll && s.usable ? ' rollable' : ''}`}>
                      <Pips n={s.pips} locked={!s.usable} />
                      <Tip text={explainSkill(s, x)}><span className="pn">{s.name}{s.type === 'advanced' && <em> adv</em>}</span></Tip>
                      <span className="pa">{short(s)}</span>
                      <span className="pp">{s.points || ''}</span>
                      <b className="pt">{s.total}</b>
                    </div>
                  ))}
                </div>
              ))}
            </div>
          </div>
          {data.npc && (data.abilities || data.loot || data.background) && (
            <div className="psec pnpc">
              {data.background && <><h3>Description</h3><p className="pre">{data.background}</p></>}
              {data.abilities && <><h3>Abilities and attacks</h3><p className="pre">{data.abilities}</p></>}
              {data.loot && <><h3>Loot</h3><p className="pre">{data.loot}</p></>}
            </div>
          )}
          <Notes title="Conditions & notes" value={ch.conditions} onChange={onNotes && ((v) => onNotes({ conditions: v }))} />
          <Foot n={1} />
        </section>

<section className="paper">
          <header className="phead small">
            <div className="pname">{name}</div>
            <div className="pbrand">{[cls?.name, prof?.name].filter(Boolean).join(' · ')}</div>
          </header>

<div className="psec">
            <h3>Talents</h3>
            {talents.length === 0 && <p className="pnone">–</p>}
            <div className="pcols">
              {talents.map((t) => <div key={t.id} className="pitem"><b>{t.name}</b><p>{t.desc}</p></div>)}
            </div>
          </div>

<div className="psec">
            <h3><Tip text={explainCapacity(x)}>Mutations & implants</Tip> <small>Capacity {c.capacityUsed} / {c.capacityMax}</small></h3>
            {augments.length === 0 && <p className="pnone">–</p>}
            <div className="pcols">
              {augments.map((a) => (
                <div key={a.id} className="pitem"><b>{a.name}</b> <span className="ptag">{a.kind === 'implant' ? 'Implant' : 'Mutation'} · cost {a.cost}</span><p>{a.desc}</p></div>
              ))}
            </div>
          </div>

<div className="psec">
            <h3><Tip text={explainCarry(x)}>Equipment</Tip> <small>Carried {c.weight} / {c.carryMax} kg</small></h3>
            {gear.length === 0 && <p className="pnone">–</p>}
            {gear.length > 0 && (
              <table className="pgear"><thead><tr><th>Item</th><th>Type</th><th>Stats</th><th>Qty</th><th>kg</th></tr></thead>
                <tbody>{gear.map((g) => (
                  <tr key={g.item.id}><td><b>{g.item.name}</b>{g.item.note && <span className="pnote"> {g.item.note}</span>}</td><td>{g.label}</td><td>{g.item.stat}</td>
                    <td>{g.qty}</td><td>{Math.round(g.item.kg * g.qty * 10) / 10}</td></tr>
                ))}</tbody></table>
            )}
            {ch.gear?.other && <p className="pother"><b>Other:</b> {ch.gear.other}</p>}
          </div>

{ch.background && <div className="psec"><h3>Background</h3><p className="pbg">{ch.background}</p></div>}

<Notes title="Notes" value={ch.notes} onChange={onNotes && ((v) => onNotes({ notes: v }))} />
          <Foot n={2} />
        </section>
      </Fit>
    </div>
  )
}