AWCharacterCreator/frontend/src/Creator.jsx

import PortraitEditor from './Portrait.jsx'
import { useEffect, useMemo, useRef, useState } from 'react'
import { applyPreset, applyProfession, compute, effectiveRules, emptyCharacter, kitItems, normalize, resetStep, setProfessionPicks } from './calc.js'
import SheetPanel from './SheetPanel.jsx'
import Tip from './Tip.jsx'
import PaperSheet from './PaperSheet.jsx'
import { explainAttr, explainAttrPool, explainCapacity, explainCarry, explainDerived, explainProfPool, explainSkill, explainSkillPool } from './explain.js'

const STEPS = ['Concept', 'Attributes', 'Profession', 'Skills', 'Talents', 'Mutations', 'Equipment', 'Summary']
const SOURCE = { noxium: 'Noxium', diesium: 'Diesium', hybrid: 'Hybrid', precyber: 'Pre-meteor cybernetics' }
const Badge = () => <span className="badge" title="Not yet worked out in the brainstorm">Placeholder</span>

function readDraft(key) {
  try { return JSON.parse(localStorage.getItem(key)) } catch { return null }
}

export default function Creator({ rules: baseRules, user, loadRequest, clearLoad, onName }) {
  const DRAFT = `aw_draft:${user}` // drafts are kept per account
  const freshCharacter = () => applyPreset(emptyCharacter(baseRules), baseRules, baseRules.default_preset || 'standard')
  const [ch, setCh] = useState(() => {
    const d = readDraft(DRAFT)
    return d?.ch ? normalize(d.ch, baseRules) : freshCharacter()
  })
  // `ch` is the working copy the pages edit; `committed` is the applied state shown as "before" in the side panel
  const [committed, setCommitted] = useState(() => {
    const d = readDraft(DRAFT)
    const src = d?.committed || d?.ch
    return src ? normalize(src, baseRules) : freshCharacter()
  })
  const setBoth = (x) => { setCh(x); setCommitted(x) }
  const pending = JSON.stringify(ch) !== JSON.stringify(committed)
  const apply = () => setCommitted(ch)
  const discard = () => setCh(committed)
  const [saved, setSaved] = useState(() => readDraft(DRAFT)?.saved || null) // {id}
  const [step, setStep] = useState(0)
  const [msg, setMsg] = useState('')
  const fileRef = useRef(null)

  // Rules for this character: base rules plus the creation numbers of the chosen preset
  const rules = useMemo(() => effectiveRules(baseRules, ch), [baseRules, ch.creation]) // eslint-disable-line
  const c = useMemo(() => compute(ch, rules), [ch, rules])
  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((x) => x.id === ch.subclass_id)
  const set = (patch) => setCh((x) => ({ ...x, ...patch }))
  const cr = rules.creation
  const ctx = { ch, rules, c }

  useEffect(() => { onName?.(ch.name) }, [ch.name]) // eslint-disable-line

  // Keep the draft in this browser
  useEffect(() => {
    try { localStorage.setItem(DRAFT, JSON.stringify({ ch, committed, saved })) } catch { /* ignore */ }
  }, [ch, committed, saved])

  // Load a character picked in "My characters"
  useEffect(() => {
    if (!loadRequest) return
    if (loadRequest.new) { // "New character" button on the My characters page
      const untouched = JSON.stringify(ch) === JSON.stringify(freshCharacter()) && !saved
      if (untouched || window.confirm('Start a new character? Your current draft is discarded unless you saved it.')) {
        setBoth(freshCharacter()); setSaved(null); setStep(0)
      }
      clearLoad()
      return
    }
    fetch(`/api/characters/${loadRequest.id}`).then((r) => { if (!r.ok) throw new Error(); return r.json() })
      .then((data) => { setBoth(normalize(data, baseRules)); setSaved(loadRequest.owner ? null : { id: loadRequest.id }); setStep(7)
        if (loadRequest.owner) setMsg(`This is ${loadRequest.owner}'s character. You can look at it; "Save" creates your own copy.`) })
      .catch(() => setMsg('Could not load the character.'))
      .finally(clearLoad)
  }, [loadRequest]) // eslint-disable-line

  // Direct link #creator/<id> (read only; saving creates a copy)
  useEffect(() => {
    const id = window.location.hash.split('/')[1]
    if (!id || loadRequest) return
    fetch(`/api/characters/${id}`).then((r) => { if (!r.ok) throw new Error(); return r.json() })
      .then((data) => { setBoth(normalize(data, baseRules)); setSaved(null); setStep(7); setMsg('Shared character loaded. "Save" creates your own copy.') })
      .catch(() => setMsg('Character not found, or it is not shared with you.'))
  }, []) // eslint-disable-line

  // Moving between pages: pending edits are applied first (Next applies silently, other jumps ask).
  const go = (i, silent) => {
    if (i === step) return
    if (pending) {
      if (!silent && !window.confirm('You have changes that are not applied yet.\nOK = apply them and continue, Cancel = stay on this page.')) return
      apply()
    }
    setStep(Math.max(0, Math.min(STEPS.length - 1, i)))
  }

  const flash = (t) => { setMsg(t); setTimeout(() => setMsg(''), 4000) }

  const resetAll = () => {
    if (!window.confirm('Discard all input and start over?')) return
    setBoth({ ...emptyCharacter(rules), preset: ch.preset, creation: ch.creation }); setSaved(null); setStep(0)
  }
  const resetThisStep = () => {
    if (!window.confirm(`Reset only the "${STEPS[step]}" page? Everything else is kept.`)) return
    setCh((x) => resetStep(x, rules, step))
  }

  const save = async () => {
    try {
      if (saved) {
        const r = await fetch(`/api/characters/${saved.id}`, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(ch) })
        if (!r.ok) throw new Error()
        flash('Saved.')
      } else {
        const r = await fetch('/api/characters', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(ch) })
        if (!r.ok) throw new Error()
        const { id } = await r.json()
        setSaved({ id })
        flash('Saved. The share link is shown below.')
      }
    } catch { flash('Saving failed.') }
  }

  const fileName = (ext) => `${(ch.name || 'Character').replace(/[^\w-]+/g, '_')}.${ext}`
  const download = async (fmt) => {
    const r = await fetch(`/api/export/${fmt}`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(ch) })
    if (!r.ok) return flash('Export failed.')
    const url = URL.createObjectURL(await r.blob())
    const a = document.createElement('a'); a.href = url; a.download = fileName(fmt); a.click(); URL.revokeObjectURL(url)
  }
  const exportJson = () => {
    const url = URL.createObjectURL(new Blob([JSON.stringify(ch, null, 2)], { type: 'application/json' }))
    const a = document.createElement('a'); a.href = url; a.download = fileName('json'); a.click(); URL.revokeObjectURL(url)
  }
  const importJson = (e) => {
    const f = e.target.files[0]; if (!f) return
    f.text().then((t) => { setBoth(normalize(JSON.parse(t), baseRules)); setSaved(null); flash('Imported.') }).catch(() => flash('Invalid file.'))
    e.target.value = ''
  }

  // Click on pip k (1 = Proficient, 2 = Expertise) of a skill: sets the skill's total pips to k, or one lower if already there.
  const clickPip = (s, k) => {
    if (!s.usable) return flash('Unlock this advanced skill first.')
    const target = s.pips >= k ? k - 1 : k
    const wantFree = Math.max(0, target - s.profPip)
    if (wantFree - s.freePips > c.profLeft) return flash('No proficiency picks left.')
    set({ proficiency_picks: { ...ch.proficiency_picks, [s.id]: wantFree } })
  }

  const toggle = (key, id, max) => {
    const cur = ch[key]
    if (cur.includes(id)) return set({ [key]: cur.filter((x) => x !== id) })
    if (max && cur.length >= max) return flash(`At most ${max} can be chosen.`)
    set({ [key]: [...cur, id] })
  }

  // ---------- Steps ----------
  const stepConcept = (
    <>
      <h2>Concept</h2>
      <div className="card presetbox">
        <label>Rules preset
          <select value={ch.preset} onChange={(e) => e.target.value !== 'custom' && setCh((x) => applyPreset(x, baseRules, e.target.value))}>
            {(baseRules.presets || []).map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}
            {ch.preset === 'custom' && <option value="custom">Custom</option>}
          </select>
        </label>
        <p className="small muted">{ch.preset === 'custom' ? 'Custom values (from an older version of this character).' : baseRules.presets?.find((p) => p.id === ch.preset)?.desc}</p>
        {(() => {
          const diff = (baseRules.tunables || []).filter((x) => cr[x.key] !== baseRules.creation[x.key])
          return diff.length > 0 && <p className="small muted">Differs from Standard: {diff.map((x) => `${x.label} ${cr[x.key]}`).join(' · ')}</p>
        })()}
        <p className="small">Create or edit presets on the <a href="#presets">Presets</a> page.</p>
      </div>
      <div className="card portraitbox"><PortraitEditor value={ch.portrait} onChange={(p) => set({ portrait: p })} /></div>
      <div className="grid2">
        <label>Character name<input value={ch.name} onChange={(e) => set({ name: e.target.value })} /></label>
        <label>Player<input value={ch.player} onChange={(e) => set({ player: e.target.value })} /></label>
      </div>
      <div className="grid2">
        <label>Class (optional)
          <select value={ch.class_id} onChange={(e) => set({ class_id: e.target.value, subclass_id: '' })}>
            <option value="">–</option>
            {rules.classes.map((k) => <option key={k.id} value={k.id}>{k.name}</option>)}
          </select>
        </label>
        <label>Sub-class
          <select value={ch.subclass_id} disabled={!ch.class_id} onChange={(e) => set({ subclass_id: e.target.value })}>
            <option value="">–</option>
            {(cls?.subclasses || []).map((x) => <option key={x.id} value={x.id}>{x.name}</option>)}
          </select>
        </label>
      </div>
      {sub && <p className="small muted">{sub.desc}</p>}
      <label>Concept in one sentence<input value={ch.concept} onChange={(e) => set({ concept: e.target.value })} placeholder="e.g. Former militia fighter searching for his family" /></label>
      <label>Background<textarea rows="5" value={ch.background} onChange={(e) => set({ background: e.target.value })} /></label>
    </>
  )

  const stepAttrs = (
    <>
      <h2>Attributes</h2>
      <p className="muted">All attributes start at {cr.attr_start}. Distribute {cr.attr_points} points (at most +{cr.attr_max_raise} per attribute, cap {cr.attr_max}).</p>
      <div className={`pool ${c.attrLeft < 0 ? 'over' : ''}`}><Tip text={explainAttrPool(ctx)}>Points left</Tip>: <strong>{c.attrLeft}</strong> / {cr.attr_points}</div>
      <div className="attrs">
        {rules.attributes.map((a) => {
          const v = ch.attributes[a.id]
          const cap = Math.min(cr.attr_max, cr.attr_start + cr.attr_max_raise)
          const setV = (n) => set({ attributes: { ...ch.attributes, [a.id]: n } })
          return (
            <div key={a.id} className="attr card">
              <div><strong>{a.name}</strong> <span className="muted small">{a.short}</span><Tip icon text={explainAttr(a, ctx)} /><div className="small muted">{a.desc}</div></div>
              <div className="stepper">
                <button onClick={() => setV(Math.max(v - 5, cr.attr_start))} aria-label={`${a.name} minus 5`}>−5</button>
                <button onClick={() => setV(Math.max(v - 1, cr.attr_start))} aria-label={`${a.name} minus 1`}>−</button>
                <span className="val">{v}</span>
                <button onClick={() => setV(Math.min(v + 1, cap))} disabled={c.attrLeft <= 0} aria-label={`${a.name} plus 1`}>+</button>
                <button onClick={() => setV(Math.min(v + Math.min(5, c.attrLeft), cap))} disabled={c.attrLeft <= 0} aria-label={`${a.name} plus 5`}>+5</button>
                <Tip text={explainAttr(a, ctx)}><span className="mod">Mod {c.mods[a.id]}</span></Tip>
              </div>
            </div>
          )
        })}
      </div>
    </>
  )

  const stepProfession = (
    <>
      <h2>Profession</h2>
      <p className="muted">Your profession gives +{cr.profession_attr_bonus} to one attribute and proficiencies (+{cr.proficiency_bonus} to the skill).</p>
      <div className="cards">
        {rules.professions.map((p) => (
          <button key={p.id} className={`card choice ${ch.profession === p.id ? 'on' : ''}`} onClick={() => setCh(applyProfession(ch, rules, p.id))}>
            <strong>{p.name}</strong> {p.placeholder && <Badge />}
            <span className="small">{p.desc}</span>
            {p.note && <span className="small muted">{p.note}</span>}
          </button>
        ))}
      </div>
      {prof && (
        <>
          <label>+{cr.profession_attr_bonus} to:
            <select value={ch.profession_bonus_attr} onChange={(e) => set({ profession_bonus_attr: e.target.value })}>
              {prof.bonus_attrs.length !== 1 && <option value="">Please choose</option>}
              {rules.attributes.filter((a) => !prof.bonus_attrs.length || prof.bonus_attrs.includes(a.id)).map((a) => <option key={a.id} value={a.id}>{a.name}</option>)}
            </select>
          </label>
          {prof.picks > 0 && (
            <>
              <h3>Choose {prof.picks} basic skills ({ch.profession_picks.length}/{prof.picks})</h3>
              <div className="chips">
                {rules.skills.filter((s) => s.type === 'basic').map((s) => {
                  const on = ch.profession_picks.includes(s.id)
                  const next = on ? ch.profession_picks.filter((x) => x !== s.id) : [...ch.profession_picks, s.id]
                  return (
                    <button key={s.id} className={`chip ${on ? 'on' : ''}`} disabled={!on && ch.profession_picks.length >= prof.picks}
                      onClick={() => setCh(setProfessionPicks(ch, rules, next))}>{s.name}</button>
                  )
                })}
              </div>
            </>
          )}
        </>
      )}
    </>
  )

  const stepSkills = (
    <>
      <h2>Skills</h2>
      <p className="muted">
        At most half the attribute per skill. Advanced skills must be unlocked first for {c.unlockCost} points from the pool
        (free if your profession grants proficiency in them). The pool size comes from the rules preset.
      </p>
      <div className="pools">
        <div className={`pool ${c.skillLeft < 0 ? 'over' : ''}`}>
          <Tip text={[...explainSkillPool(ctx), 'The pool size comes from the rules preset (Concept page).']}>Points left</Tip>: <strong>{c.skillLeft}</strong> / {cr.skill_points_default}
        </div>
        <div className={`pool ${c.profLeft < 0 ? 'over' : ''}`}>
          <Tip text={explainProfPool(ctx)}>Proficiency picks left</Tip>: <strong>{c.profLeft}</strong> / {c.profAllowed}
        </div>
      </div>
      <p className="small muted">
        Proficiency adds +{cr.proficiency_bonus}. Two picks on the same skill make it Expertise (+{cr.expertise_bonus}); a profession proficiency counts as one of them.
        Proficiency picks only work on skills you can use, so unlock an advanced skill first. The talent "Versatile Training" grants 2 more picks.
      </p>
      {rules.skill_groups.map((g) => (
        <div key={g.id}>
          <h3>{g.name}</h3>
          <div className="skills">
            {c.skills.filter((s) => s.group === g.id).map((s) => {
              const setPts = (n) => set({ skill_points: { ...ch.skill_points, [s.id]: Math.max(0, Math.min(n, s.max)) } })
              return (
                <div key={s.id} className={`skill ${s.usable ? '' : 'locked'}`} title={s.desc}>
                  <div>
                    <strong>{s.name}</strong> {s.placeholder && <Badge />}<Tip icon text={explainSkill(s, ctx)} />
                    <div className="small muted">
                      {s.attrs.map((id) => rules.attributes.find((a) => a.id === id).short).join('/')} · {s.type === 'basic' ? 'Basic' : s.usable ? 'Advanced (unlocked)' : 'Advanced (locked)'}
                      {s.pips === 1 && ' · Proficient'}{s.pips === 2 && ' · Expertise'}
                    </div>
                    <div className="pips" title={`Proficiency: ${s.pips === 2 ? 'Expertise' : s.pips === 1 ? 'Proficient' : 'none'}`}>
                      <span className="small muted">Training</span>
                      {[1, 2].map((k) => (
                        <button key={k} className={`pip ${s.pips >= k ? 'on' : ''} ${s.profPip >= k ? 'from-prof' : ''}`}
                          disabled={s.profPip >= k || !s.usable} onClick={() => clickPip(s, k)}
                          title={!s.usable ? 'Unlock the skill first' : s.profPip >= k ? 'From your profession' : k === 2 ? 'Expertise (uses 2 picks in total)' : 'Proficiency'}
                          aria-label={`${s.name} proficiency ${k}`}>{s.pips >= k ? '◆' : '◇'}</button>
                      ))}
                    </div>
                  </div>
                  {!s.usable ? (
                    <button className="unlock" onClick={() => set({ unlocked: [...ch.unlocked, s.id] })} disabled={c.skillLeft < c.unlockCost}
                      title={c.skillLeft < c.unlockCost ? 'Not enough points left' : 'Unlock this advanced skill'}>
                      Unlock ({c.unlockCost} pts)
                    </button>
                  ) : (
                    <div className="stepper">
                      {s.type === 'advanced' && !s.free && (
                        <button className="ghost small-btn" title={`Lock again: you get ${c.unlockCost} points back, its points and proficiency picks are returned`}
                          onClick={() => setCh((x) => ({ ...x, unlocked: x.unlocked.filter((id) => id !== s.id), skill_points: { ...x.skill_points, [s.id]: 0 }, proficiency_picks: { ...x.proficiency_picks, [s.id]: 0 } }))}>Lock</button>
                      )}
                      <button className="step5" onClick={() => setPts(s.points - 5)} disabled={s.points <= 0} aria-label={`${s.name} minus 5`}>−5</button>
                      <button onClick={() => setPts(s.points - 1)} disabled={s.points <= 0} aria-label={`${s.name} minus`}>−</button>
                      <span className="val">{s.points}</span>
                      <button onClick={() => setPts(Math.min(s.points + 1, s.max, s.points + c.skillLeft))} disabled={s.points >= s.max || c.skillLeft <= 0} aria-label={`${s.name} plus`}>+</button>
                      <button className="step5" onClick={() => setPts(Math.min(s.points + 5, s.max, s.points + c.skillLeft))} disabled={s.points >= s.max || c.skillLeft <= 0} aria-label={`${s.name} plus 5`}>+5</button>
                      <Tip text={explainSkill(s, ctx)}><span className="mod">{s.total}</span></Tip><span className="small muted" title="Most points you can add"> max {s.max}</span>
                    </div>
                  )}
                </div>
              )
            })}
          </div>
        </div>
      ))}
    </>
  )

  const stepTalents = (
    <>
      <h2>Talents</h2>
      <p className="muted">Choose {cr.talents_min}-{cr.talents_max} starting talents. Chosen: {ch.talents.length}</p>
      {rules.talent_categories.map((cat) => {
        const ts = rules.talents.filter((t) => t.category === cat.id)
        if (!ts.length) return null
        return (
          <div key={cat.id}><h3>{cat.name}</h3>
            <div className="cards">{ts.map((t) => (
              <button key={t.id} className={`card choice ${ch.talents.includes(t.id) ? 'on' : ''}`} onClick={() => toggle('talents', t.id, cr.talents_max)}>
                <strong>{t.name}</strong> {t.placeholder && <Badge />}
                <span className="small">{t.desc}</span>
              </button>
            ))}</div>
          </div>
        )
      })}
    </>
  )

  const over = c.capacityUsed > c.capacityMax
  const stepAugments = (
    <>
      <h2>Mutations and implants</h2>
      <p className="muted">Optional. Both share the Augmentation Capacity. Exceeding it risks corruption or rejection.</p>
      <div className={`pool ${over ? 'over' : ''}`}>Capacity: <strong>{c.capacityUsed}</strong> / {c.capacityMax}{over && ' – exceeded, talk to your GM'}</div>
      {['mutation', 'implant'].map((kind) => (
        <div key={kind}><h3>{kind === 'mutation' ? 'Mutations' : 'Implants'}</h3>
          <div className="cards">{rules.augments.filter((a) => a.kind === kind).map((a) => (
            <button key={a.id} className={`card choice ${ch.augments.includes(a.id) ? 'on' : ''}`} onClick={() => toggle('augments', a.id)}>
              <strong>{a.name}</strong> {a.placeholder && <Badge />}
              <span className="small muted">{SOURCE[a.source] ? `${SOURCE[a.source]} · ` : ''}Cost {a.cost}</span>
              <span className="small">{a.desc}</span>
            </button>
          ))}</div>
        </div>
      ))}
    </>
  )

  // --- Equipment ---
  const items = rules.equipment
  const catName = (id) => rules.equipment_categories.find((x) => x.id === id).name
  const setExtra = (id, qty) => {
    const extras = { ...ch.kit.extras }
    if (qty <= 0) delete extras[id]; else extras[id] = qty
    set({ kit: { ...ch.kit, extras } })
  }
  const overWeight = c.weight > c.carryMax

  const stepGear = (
    <>
      <h2>Equipment</h2>
      <p className="muted">Pick everything your character carries. Ask your GM what is allowed. Use + and − on a tile to change the amount.</p>
      <div className={`pool ${overWeight ? 'over' : ''}`}><Tip text={explainCarry(ctx)}>Carried</Tip>: <strong>{c.weight}</strong> / {c.carryMax} kg (Strength Mod x {cr.carry_per_strength_mod}){overWeight && ' – overloaded'}</div>
      {rules.equipment_categories.map((cat) => {
        const list = items.filter((e) => e.cat === cat.id)
        const n = list.reduce((sum, e) => sum + (ch.kit.extras[e.id] || 0), 0)
        return (
          <div key={cat.id}>
            <h4>{cat.name} {n > 0 && <span className="muted small">({n} chosen)</span>}</h4>
            <div className="cards">{list.map((e) => {
              const qty = ch.kit.extras[e.id] || 0
              return (
                <div key={e.id} className={`card tile ${qty > 0 ? 'on' : ''}`}>
                  <strong>{e.name}</strong>
                  <span className="small muted">{e.stat}{e.tier ? ` (${e.tier})` : ''} · {e.kg} kg</span>
                  {e.note && <span className="small">{e.note}</span>}
                  <div className="stepper tilestepper">
                    <button className="ghost" onClick={() => setExtra(e.id, qty - 1)} disabled={qty === 0} aria-label={`${e.name} minus`}>−</button>
                    <span className="val">{qty}</span>
                    <button onClick={() => setExtra(e.id, qty + 1)} aria-label={`${e.name} plus`}>+</button>
                  </div>
                </div>
              )
            })}</div>
          </div>
        )
      })}
      <label>Other items (free text)<textarea rows="3" value={ch.gear.other} onChange={(e) => set({ gear: { ...ch.gear, other: e.target.value } })} placeholder="Anything not in the lists, e.g. a unique starter multi-tool" /></label>
      <label>Notes<textarea rows="4" value={ch.notes} onChange={(e) => set({ notes: e.target.value })} /></label>
    </>
  )

  const warnings = []
  if (c.attrLeft < 0) warnings.push('Too many attribute points spent.')
  if (c.attrLeft > 0) warnings.push(`${c.attrLeft} attribute points left.`)
  if (!ch.profession) warnings.push('No profession chosen.')
  else {
    if (!ch.profession_bonus_attr) warnings.push('No attribute chosen for the profession bonus.')
    if ((prof?.picks || 0) > ch.profession_picks.length) warnings.push('Profession proficiencies not fully chosen.')
  }
  if (c.skillLeft < 0) warnings.push('More skill points spent than the pool allows.')
  if (c.profLeft < 0) warnings.push('More proficiency picks used than you have.')
  if (c.profLeft > 0) warnings.push(`${c.profLeft} proficiency pick${c.profLeft > 1 ? 's' : ''} left.`)
  if (ch.talents.length < cr.talents_min) warnings.push('No starting talent chosen.')
  if (over) warnings.push('Augmentation Capacity exceeded.')
  if (overWeight) warnings.push('Carrying more than the carry capacity.')

  const gearLines = kitItems(ch, rules)
  const stepSummary = (
    <>
      <h2>Summary</h2>
      {warnings.length > 0 && <ul className="warn">{warnings.map((w) => <li key={w}>{w}</li>)}</ul>}
      <PaperSheet data={ch} baseRules={baseRules} />
      <div className="actions wrap">
        <button onClick={() => download('pdf')}>Download as PDF</button>
        <button onClick={() => download('docx')}>Download as Word</button>
        <button className="ghost" onClick={save}>{saved ? 'Save changes' : 'Save on server'}</button>
        <button className="ghost" onClick={exportJson}>JSON backup</button>
        <button className="ghost" onClick={() => fileRef.current.click()}>Import JSON</button>
        <input ref={fileRef} type="file" accept="application/json" hidden onChange={importJson} />
      </div>
      {saved && (
        <p className="small muted">Share link (view only): <code>{`${window.location.origin}/#creator/${saved.id}`}</code></p>
      )}
    </>
  )

  const views = [stepConcept, stepAttrs, stepProfession, stepSkills, stepTalents, stepAugments, stepGear, stepSummary]

  return (
    <div className="page creator">
      <p className="small muted presetchip">Rules: <button className="linklike" onClick={() => go(0)} title="Change on the Concept page">{ch.preset === 'custom' ? 'Custom' : baseRules.presets?.find((p) => p.id === ch.preset)?.name}</button></p>
      <ol className="steps">
        {STEPS.map((s, i) => (
          <li key={s}><button className={`${i === step ? 'on' : ''} ${i < step ? 'done' : ''}`} onClick={() => go(i)}>
            <span className="n">{i + 1}</span><span className="t">{s}</span></button></li>
        ))}
      </ol>
      <div className={`creator-body ${step === STEPS.length - 1 ? 'wide' : ''}`}>
        <section className="step">
          {views[step]}
          {msg && <p className="toast" role="status">{msg}</p>}
          <div className="nav">
            <button className="ghost" onClick={() => go(step - 1)} disabled={step === 0}>Back</button>
            <span className="resets">
              {step < STEPS.length - 1 && <button className="ghost danger" onClick={resetThisStep}>Reset this page</button>}
              <button className="ghost danger" onClick={resetAll}>Start over</button>
            </span>
            <button onClick={() => go(step + 1, true)} disabled={step === STEPS.length - 1}>{pending ? 'Apply & next' : 'Next'}</button>
          </div>
        </section>
        {step < STEPS.length - 1 && <SheetPanel ch={ch} committed={committed} baseRules={baseRules} onApply={apply} onDiscard={discard} />}
      </div>
    </div>
  )
}