/* ===========================================================
   Reiktable — Characters: roster + full editable sheet
   Exposes (window): CharactersView
   =========================================================== */
(function () {
  const { useState } = React;
  const CHARS = window.WFRP.CHARS;

  function updateChar(id, mutator) {
    window.Store.update(s => {
      const c = s.characters.find(x => x.id === id);
      if (c) mutator(c);
    });
  }

  // ---------- Roster ----------
  function Roster({ chars, onOpen, onAdd }) {
    return (
      <div className="content fade-in">
        <div className="page-h">
          <div><h1>Characters</h1><p>The party roster. Open a sheet to view, roll, and edit.</p></div>
          <div className="sp"></div>
          <Btn className="pri" icon="plus" onClick={onAdd}>New Character</Btn>
        </div>
        <div className="grid g3">
          {chars.map(c => {
            const w = c.wounds || { cur: 0, max: 0 };
            const pct = w.max ? Math.round((w.cur / w.max) * 100) : 0;
            return (
              <div key={c.id} className="card hover" onClick={() => onOpen(c.id)}>
                <div className="card-b">
                  <div className="center g12">
                    <Avatar name={c.name} color={c.color} img={c.img} size="lg" />
                    <div className="grow">
                      <div className="center g8" style={{ flexWrap: "wrap" }}>
                        <h3 style={{ fontSize: 17 }}>{c.name}</h3>
                        {c.draft && <span className="tag amb">Draft</span>}
                      </div>
                      <div className="tx3" style={{ fontSize: 12.5, marginTop: 2 }}>{c.role || c.career}</div>
                      <div className="center g6" style={{ marginTop: 8, flexWrap: "wrap" }}>
                        <span className="tag acc">{c.career} · T{c.careerTier}</span>
                        {c.species && <span className="tag">{c.species}</span>}
                      </div>
                    </div>
                  </div>
                  <div className="between" style={{ marginTop: 14 }}>
                    <span className="eyebrow">Wounds {w.cur}/{w.max}</span>
                    <span className="eyebrow">{window.coin(c.wealth)}</span>
                  </div>
                  <div className="bar hp" style={{ marginTop: 6 }}><i style={{ width: pct + "%" }}></i></div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    );
  }

  // ---------- Vitals (always interactive) ----------
  function Vitals({ c }) {
    const id = c.id;
    const set = (k, v) => updateChar(id, ch => {
      if (k === "wcur") ch.wounds.cur = Math.max(0, Math.min(ch.wounds.max, v));
      else if (k === "fcur") ch.fate.cur = Math.max(0, v);
      else if (k === "rcur") ch.resilience.cur = Math.max(0, v);
      else if (k === "corr") ch.corruption = Math.max(0, v);
      else if (k === "ins") ch.insanity = Math.max(0, v);
    });
    return (
      <div className="strip">
        <div className="dstat good" style={{ paddingBottom: 10 }}>
          <div className="n">{c.wounds.cur}<span style={{ fontSize: 13, color: "var(--tx-3)" }}>/{c.wounds.max}</span></div>
          <div className="l">Wounds</div>
          <div className="center g6" style={{ justifyContent: "center", marginTop: 8 }}>
            <button className="btn icon sm" onClick={() => set("wcur", c.wounds.cur - 1)} title="Take 1 wound">−</button>
            <button className="btn icon sm" onClick={() => set("wcur", c.wounds.cur + 1)} title="Heal 1">+</button>
          </div>
        </div>
        <div className="dstat" style={{ paddingBottom: 10 }}>
          <div className="n">{c.fate.cur}<span style={{ fontSize: 13, color: "var(--tx-3)" }}>/{c.fate.max}</span></div>
          <div className="l">Fate</div>
          <div className="center g6" style={{ justifyContent: "center", marginTop: 8 }}>
            <button className="btn icon sm" onClick={() => set("fcur", c.fate.cur - 1)}>−</button>
            <button className="btn icon sm" onClick={() => set("fcur", c.fate.cur + 1)}>+</button>
          </div>
        </div>
        <div className="dstat" style={{ paddingBottom: 10 }}>
          <div className="n">{c.resilience.cur}<span style={{ fontSize: 13, color: "var(--tx-3)" }}>/{c.resilience.max}</span></div>
          <div className="l">Resilience</div>
          <div className="center g6" style={{ justifyContent: "center", marginTop: 8 }}>
            <button className="btn icon sm" onClick={() => set("rcur", c.resilience.cur - 1)}>−</button>
            <button className="btn icon sm" onClick={() => set("rcur", c.resilience.cur + 1)}>+</button>
          </div>
        </div>
        <div className="dstat"><div className="n">{c.move}</div><div className="l">Move</div></div>
        <div className="dstat warn" style={{ paddingBottom: 10 }}>
          <div className="n">{c.corruption}</div><div className="l">Corruption</div>
          <div className="center g6" style={{ justifyContent: "center", marginTop: 8 }}>
            <button className="btn icon sm" onClick={() => set("corr", c.corruption - 1)}>−</button>
            <button className="btn icon sm" onClick={() => set("corr", c.corruption + 1)}>+</button>
          </div>
        </div>
        <div className="dstat bad" style={{ paddingBottom: 10 }}>
          <div className="n">{c.insanity}</div><div className="l">Insanity</div>
          <div className="center g6" style={{ justifyContent: "center", marginTop: 8 }}>
            <button className="btn icon sm" onClick={() => set("ins", c.insanity - 1)}>−</button>
            <button className="btn icon sm" onClick={() => set("ins", c.insanity + 1)}>+</button>
          </div>
        </div>
      </div>
    );
  }

  // ---------- Characteristics ----------
  function Characteristics({ c, edit }) {
    return (
      <div className="card">
        <div className="card-h"><Icon name="shield" /><h3>Characteristics</h3><span className="x">click to test</span></div>
        <div className="card-b">
          <div className="chars">
            {CHARS.map(ck => {
              const cc = c.chars[ck.k] || { base: 0, adv: 0 };
              const tot = (cc.base || 0) + (cc.adv || 0);
              if (edit) return (
                <div key={ck.k} className="ch">
                  <div className="nm">{ck.k}</div>
                  <div className="center g6" style={{ justifyContent: "center", marginTop: 4 }}>
                    <input className="input num sm" style={{ width: 40 }} value={cc.base} onChange={e => updateChar(c.id, x => { x.chars[ck.k] = { ...x.chars[ck.k], base: parseInt(e.target.value || 0) }; })} />
                    <span className="tx3">+</span>
                    <input className="input num sm" style={{ width: 36 }} value={cc.adv} onChange={e => updateChar(c.id, x => { x.chars[ck.k] = { ...x.chars[ck.k], adv: parseInt(e.target.value || 0) }; })} />
                  </div>
                </div>
              );
              return (
                <div key={ck.k} className="ch click" title={`Test ${ck.name}`}
                  onClick={() => window.rollLog({ who: c.name, label: `${ck.name} (${tot})`, target: tot })}>
                  <div className="nm">{ck.k}</div>
                  <div className="v">{tot}</div>
                  <div className="b">+{window.WFRP.bonus(tot)}</div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    );
  }

  // ---------- Skills tab ----------
  function SkillsTab({ c, edit }) {
    const [q, setQ] = useState("");
    const skills = [...c.skills].sort((a, b) => window.skillTotal(c.chars, b) - window.skillTotal(c.chars, a));
    function add() {
      updateChar(c.id, x => x.skills.push({ name: "New Skill", char: "Int", adv: 0, pct: null, note: "" }));
    }
    return (
      <div className="card">
        <div className="card-h"><Icon name="bolt" /><h3>Skills</h3><span className="x">{c.skills.length}</span>
          {edit && <><div className="sp"></div><Btn className="sm" icon="plus" onClick={add}>Add</Btn></>}</div>
        <div className="card-b tight">
          {c.skills.length === 0 && <div className="empty" style={{ padding: 26 }}><div className="tx3">No skills yet.{edit ? " Use Add." : ""}</div></div>}
          {!edit && skills.map((sk, i) => {
            const tot = window.skillTotal(c.chars, sk);
            return (
              <div key={i} className="row click" style={{ cursor: "pointer" }} onClick={() => window.rollLog({ who: c.name, label: `${sk.name} (${tot})`, target: tot })}>
                <div className="grow">
                  <div>{sk.name} <span className="tx3" style={{ fontSize: 12 }}>· {sk.char}{sk.note ? " · " + sk.note : ""}</span></div>
                </div>
                <div className="pct">{tot}</div>
                <Icon name="dice" size={15} style={{ color: "var(--tx-3)" }} />
              </div>
            );
          })}
          {edit && c.skills.map((sk, i) => (
            <div key={i} className="row" style={{ gap: 6 }}>
              <input className="input sm" style={{ flex: 2 }} value={sk.name} list="skillnames" onChange={e => updateChar(c.id, x => { x.skills[i].name = e.target.value; const base = e.target.value.split(" (")[0]; if (window.WFRP.SKILLS[base]) x.skills[i].char = window.WFRP.SKILLS[base]; })} />
              <select className="input sm" style={{ width: 64 }} value={sk.char} onChange={e => updateChar(c.id, x => { x.skills[i].char = e.target.value; })}>
                {CHARS.map(ck => <option key={ck.k}>{ck.k}</option>)}
              </select>
              <input className="input num sm" style={{ width: 46 }} placeholder="adv" value={sk.adv} onChange={e => updateChar(c.id, x => { x.skills[i].adv = parseInt(e.target.value || 0); })} />
              <input className="input num sm" style={{ width: 52 }} placeholder="%" value={sk.pct ?? ""} onChange={e => updateChar(c.id, x => { x.skills[i].pct = e.target.value === "" ? null : parseInt(e.target.value); })} />
              <input className="input sm" style={{ flex: 1.4 }} placeholder="note" value={sk.note} onChange={e => updateChar(c.id, x => { x.skills[i].note = e.target.value; })} />
              <button className="btn icon sm danger" onClick={() => updateChar(c.id, x => x.skills.splice(i, 1))}><Icon name="trash" size={13} /></button>
            </div>
          ))}
          <datalist id="skillnames">{window.WFRP.SKILL_NAMES.map(n => <option key={n} value={n} />)}</datalist>
        </div>
      </div>
    );
  }

  // ---------- Talents tab ----------
  function TalentsTab({ c, edit }) {
    const [nv, setNv] = useState("");
    function add() { if (!nv.trim()) return; updateChar(c.id, x => x.talents.push({ name: nv.trim(), n: 1 })); setNv(""); }
    return (
      <div className="card">
        <div className="card-h"><Icon name="star" /><h3>Talents</h3><span className="x">{c.talents.length}</span></div>
        <div className="card-b">
          <div className="center wrap g8">
            {c.talents.map((t, i) => (
              <span key={i} className="tag sans" style={{ padding: "5px 11px" }}>
                {t.name}{t.n > 1 && <b className="hl"> ×{t.n}</b>}
                {edit && <span className="x" onClick={() => updateChar(c.id, x => x.talents.splice(i, 1))}><Icon name="x" size={11} /></span>}
              </span>
            ))}
            {c.talents.length === 0 && <span className="tx3">No talents yet.</span>}
          </div>
          {edit && (
            <div className="center g8 mt14">
              <input className="input sm" placeholder="Add talent…" value={nv} onChange={e => setNv(e.target.value)} onKeyDown={e => e.key === "Enter" && add()} />
              <Btn className="sm" icon="plus" onClick={add}>Add</Btn>
            </div>
          )}
        </div>
      </div>
    );
  }

  // ---------- Combat tab ----------
  function CombatTab({ c, edit }) {
    const a = c.armour || {};
    const locs = [["head", "Head"], ["body", "Body"], ["lArm", "L.Arm"], ["rArm", "R.Arm"], ["lLeg", "L.Leg"], ["rLeg", "R.Leg"]];
    function addW() { updateChar(c.id, x => x.weapons.push({ name: "New Weapon", group: "Basic", reach: "Average", dmg: "+SB", qual: "—" })); }
    return (
      <div className="col g14">
        <div className="card">
          <div className="card-h"><Icon name="sword" /><h3>Weapons</h3>{edit && <><div className="sp"></div><Btn className="sm" icon="plus" onClick={addW}>Add</Btn></>}</div>
          <div className="card-b tight" style={{ overflowX: "auto" }}>
            <table className="tbl">
              <thead><tr><th>Weapon</th><th>Group</th><th>Reach/Rng</th><th>Damage</th><th>Qualities</th>{edit && <th></th>}</tr></thead>
              <tbody>
                {c.weapons.map((w, i) => edit ? (
                  <tr key={i}>
                    {["name", "group", "reach", "dmg", "qual"].map(f => (
                      <td key={f}><input className="input sm" value={w[f]} onChange={e => updateChar(c.id, x => { x.weapons[i][f] = e.target.value; })} /></td>
                    ))}
                    <td><button className="btn icon sm danger" onClick={() => updateChar(c.id, x => x.weapons.splice(i, 1))}><Icon name="trash" size={13} /></button></td>
                  </tr>
                ) : (
                  <tr key={i}><td><b>{w.name}</b></td><td className="tx3">{w.group}</td><td className="mono">{w.reach}</td><td className="mono cyan">{w.dmg}</td><td className="tx3" style={{ fontSize: 12.5 }}>{w.qual}</td></tr>
                ))}
                {c.weapons.length === 0 && <tr><td colSpan={6}><span className="tx3">No weapons.</span></td></tr>}
              </tbody>
            </table>
          </div>
        </div>
        <div className="card">
          <div className="card-h"><Icon name="shield" /><h3>Armour</h3><span className="x">{a.note}</span></div>
          <div className="card-b">
            <div className="grid g6" style={{ gridTemplateColumns: "repeat(6,1fr)" }}>
              {locs.map(([k, lbl]) => (
                <div key={k} className="ch">
                  <div className="nm">{lbl}</div>
                  {edit ? <input className="input num sm" style={{ width: 44, margin: "4px auto 0" }} value={a[k] || 0} onChange={e => updateChar(c.id, x => { x.armour[k] = parseInt(e.target.value || 0); })} />
                    : <div className="v">{a[k] || 0}</div>}
                </div>
              ))}
            </div>
            {edit && <div className="mt10"><Field label="Armour note"><input className="input sm" value={a.note || ""} onChange={e => updateChar(c.id, x => { x.armour.note = e.target.value; })} /></Field></div>}
          </div>
        </div>
      </div>
    );
  }

  // ---------- Trappings & wealth ----------
  function TrappingsTab({ c, edit }) {
    const [nv, setNv] = useState("");
    const w = c.wealth || { gc: 0, ss: 0, bp: 0 };
    function add() { if (!nv.trim()) return; updateChar(c.id, x => x.trappings.push(nv.trim())); setNv(""); }
    return (
      <div className="col g14">
        <div className="card">
          <div className="card-h"><Icon name="coin" /><h3>Wealth</h3></div>
          <div className="card-b">
            <div className="grid g3">
              {[["gc", "Gold Crowns"], ["ss", "Silver Shillings"], ["bp", "Brass Pennies"]].map(([k, lbl]) => (
                <Field key={k} label={lbl}><input className="input num" value={w[k]} onChange={e => updateChar(c.id, x => { x.wealth[k] = parseInt(e.target.value || 0); })} /></Field>
              ))}
            </div>
          </div>
        </div>
        <div className="card">
          <div className="card-h"><Icon name="file" /><h3>Trappings</h3><span className="x">{(c.trappings || []).length}</span></div>
          <div className="card-b tight">
            {(c.trappings || []).map((t, i) => (
              <div key={i} className="row b">
                <Icon name="chevR" size={13} style={{ color: "var(--tx-4)" }} />
                <span className="grow">{t}</span>
                {edit && <button className="btn icon sm danger" onClick={() => updateChar(c.id, x => x.trappings.splice(i, 1))}><Icon name="trash" size={13} /></button>}
              </div>
            ))}
            {(c.trappings || []).length === 0 && <div className="tx3" style={{ padding: 10 }}>Empty pack.</div>}
            <div className="center g8" style={{ padding: 8 }}>
              <input className="input sm" placeholder="Add trapping…" value={nv} onChange={e => setNv(e.target.value)} onKeyDown={e => e.key === "Enter" && add()} />
              <Btn className="sm" icon="plus" onClick={add}>Add</Btn>
            </div>
          </div>
        </div>
      </div>
    );
  }

  // ---------- Spells tab (divine/arcane) ----------
  function SpellsTab({ c }) {
    const sp = c.spells; if (!sp) return null;
    const Group = ({ title, items, kind }) => (
      <div className="card">
        <div className="card-h"><Icon name="sparkles" /><h3>{title}</h3><span className="x">{items.length}</span></div>
        <div className="card-b"><div className="center wrap g8">
          {items.map((m, i) => <span key={i} className={cls("tag sans", kind)} style={{ padding: "5px 11px" }}>{m}</span>)}
        </div></div>
      </div>
    );
    return (
      <div className="col g14">
        {sp.blessings?.length > 0 && <Group title="Blessings" items={sp.blessings} kind="grn" />}
        {sp.miracles?.length > 0 && <Group title="Miracles known" items={sp.miracles} kind="viol" />}
        {sp.learning?.length > 0 && <Group title="Learning" items={sp.learning} kind="" />}
      </div>
    );
  }

  // ---------- Sheet ----------
  function Sheet({ c, onBack }) {
    const [tab, setTab] = useState("skills");
    const [edit, setEdit] = useState(false);
    const [confirmDel, setConfirmDel] = useState(false);
    const tabs = [
      { k: "skills", label: "Skills" }, { k: "talents", label: "Talents" },
      { k: "combat", label: "Combat" }, { k: "gear", label: "Trappings" },
    ];
    if (c.spells) tabs.push({ k: "spells", label: "Spells" });
    tabs.push({ k: "notes", label: "Background" });

    const set = (k, v) => updateChar(c.id, x => { x[k] = v; });

    return (
      <div className="content fade-in">
        <div className="center g10" style={{ marginBottom: 16 }}>
          <Btn className="ghost sm" icon="chevR" onClick={onBack} style={{ transform: "scaleX(-1)" }}></Btn>
          <span className="crumb mono tx3">Characters / <b className="tx2">{c.name}</b></span>
          <div className="sp"></div>
          {c.psychology?.map((p, i) => <span key={i} className="tag amb">{p}</span>)}
          <Btn className={edit ? "grn" : ""} icon={edit ? "check" : "edit"} onClick={() => setEdit(!edit)}>{edit ? "Done" : "Edit"}</Btn>
          {edit && <Btn className="danger icon" onClick={() => setConfirmDel(true)}><Icon name="trash" size={15} /></Btn>}
        </div>

        {/* header */}
        <div className="card" style={{ marginBottom: 14 }}>
          <div className="card-b">
            <div className="center g16">
              <Avatar name={c.name} color={c.color} img={c.img} size="xl" />
              <div className="grow">
                {edit ? (
                  <div className="grid g2" style={{ gap: 8 }}>
                    <input className="input" value={c.name} onChange={e => set("name", e.target.value)} placeholder="Name" />
                    <input className="input" value={c.role || ""} onChange={e => set("role", e.target.value)} placeholder="Role / subtitle" />
                    <input className="input sm" value={c.career} onChange={e => set("career", e.target.value)} placeholder="Career" />
                    <div className="center g8">
                      <input className="input sm" style={{ width: 70 }} value={c.careerTier} onChange={e => set("careerTier", parseInt(e.target.value || 1))} placeholder="Tier" />
                      <input className="input sm" value={c.god || ""} onChange={e => set("god", e.target.value)} placeholder="God" />
                      <input className="input sm" type="color" style={{ width: 44, padding: 2 }} value={c.color || "#4f8cff"} onChange={e => set("color", e.target.value)} />
                    </div>
                  </div>
                ) : (
                  <>
                    <h1 style={{ fontSize: 28 }}>{c.name}</h1>
                    <div className="tx2" style={{ marginTop: 3 }}>{c.role} {c.species && `· ${c.species}`} {c.age ? `· ${c.age}` : ""} {c.god && `· Devotee of ${c.god}`}</div>
                    <div className="center g6 wrap" style={{ marginTop: 10 }}>
                      <span className="tag acc">{c.career} · Tier {c.careerTier}</span>
                      {c.status && <span className="tag">{c.status}</span>}
                      <span className="tag">{window.coin(c.wealth)}</span>
                    </div>
                  </>
                )}
              </div>
              <div style={{ alignSelf: "stretch", minWidth: 220 }}>
                <Vitals c={c} />
              </div>
            </div>
          </div>
        </div>

        <div className="cols s">
          <div className="col g14">
            <Characteristics c={c} edit={edit} />
            {tab === "skills" && <SkillsTab c={c} edit={edit} />}
            {tab === "talents" && <TalentsTab c={c} edit={edit} />}
            {tab === "combat" && <CombatTab c={c} edit={edit} />}
            {tab === "gear" && <TrappingsTab c={c} edit={edit} />}
            {tab === "spells" && <SpellsTab c={c} />}
            {tab === "notes" && (
              <div className="card"><div className="card-h"><Icon name="journal" /><h3>Background & Notes</h3></div>
                <div className="card-b">
                  <textarea className="textarea" style={{ minHeight: 200 }} value={c.notes || ""} onChange={e => set("notes", e.target.value)} placeholder="Background, motivations, secrets…" />
                </div></div>
            )}
          </div>
          <div className="col g14">
            <div className="card" style={{ position: "sticky", top: 70 }}>
              <div className="card-h"><Icon name="dice" /><h3>Sheet</h3></div>
              <div className="card-b tight">
                <div className="tabs" style={{ flexDirection: "column", borderBottom: 0, gap: 0 }}>
                  {tabs.map(t => (
                    <button key={t.k} className={cls("nav-i", tab === t.k && "on")} onClick={() => setTab(t.k)}>{t.label}</button>
                  ))}
                </div>
              </div>
            </div>
            {c.companion && <div className="card"><div className="card-h"><Icon name="paw" /><h3>Companion</h3></div><div className="card-b tx2" style={{ fontSize: 13.5 }}>{c.companion}</div></div>}
          </div>
        </div>

        {confirmDel && <Confirm title="Delete character?" danger yes="Delete"
          body={`Permanently remove ${c.name} from the roster? This cannot be undone.`}
          onYes={() => { window.Store.update(s => { s.characters = s.characters.filter(x => x.id !== c.id); }); onBack(); }}
          onClose={() => setConfirmDel(false)} />}
      </div>
    );
  }

  // ---------- Root ----------
  window.CharactersView = function ({ param, setParam }) {
    const [s] = window.useStore();
    const open = param && s.characters.find(c => c.id === param);
    function add() {
      const id = window.WFRP.ID();
      window.Store.update(st => st.characters.push({
        id, kind: "pc", name: "New Adventurer", career: "Career", careerTier: 1, species: "Human",
        role: "", god: "", color: "#4f8cff",
        chars: Object.fromEntries(CHARS.map(c => [c.k, { base: 30, adv: 0 }])),
        wounds: { max: 12, cur: 12 }, fate: { max: 2, cur: 2 }, fortune: { cur: 2 },
        resilience: { max: 3, cur: 3 }, resolve: { cur: 1 }, move: 4, corruption: 0, insanity: 0,
        conditions: [], psychology: [], skills: [], talents: [], weapons: [], trappings: [],
        armour: { head: 0, body: 0, lArm: 0, rArm: 0, lLeg: 0, rLeg: 0, note: "" },
        wealth: { gc: 0, ss: 0, bp: 0 }, notes: "",
      }));
      setParam(id);
    }
    if (open) return <Sheet c={open} onBack={() => setParam(null)} />;
    return <Roster chars={s.characters} onOpen={setParam} onAdd={add} />;
  };
})();