/* ============================================================
   STATS EDITOR — per-ship combat stats (attack dice per arc,
   engineering, squadron, command) + ship-stats.json loader.
   No AMG data bundled; user supplies their own JSON.
   ============================================================ */
const { useState: useStateSE } = React;

function DiceArcEditor({ arc, dice, onChange }) {
  return (
    <div className="se-arc">
      <span className="lbl" style={{ marginBottom: 6, display: "flex", alignItems: "center", gap: 5 }}><ArcSwatch arc={arc} />{ARC_LABEL[arc]}</span>
      <div className="se-arc-dice">
        {DICE_ORDER.map((c) => (
          <div className="se-die" key={c}>
            <DieChip color={c} size={22} />
            <div className="se-die-step">
              <button onClick={() => onChange(c, Math.max(0, (dice[c] || 0) - 1))} disabled={(dice[c] || 0) <= 0}>−</button>
              <span className="mono">{dice[c] || 0}</span>
              <button onClick={() => onChange(c, Math.min(6, (dice[c] || 0) + 1))}>+</button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function StatsEditor({ ship, onSave, onClose }) {
  const [hull, setHull] = useStateSE(ship.maxHull);
  const [shields, setShields] = useStateSE({ ...ship.maxShields });
  const [command, setCommand] = useStateSE(ship.command);
  const [engineering, setEngineering] = useStateSE(ship.engineering);
  const [squadronValue, setSquadronValue] = useStateSE(ship.squadronValue);
  const [dice, setDice] = useStateSE(cloneArm(ship.attackDice));
  const [tokens, setTokens] = useStateSE(ship.defenseTokens.map((d) => d.type));

  const setDie = (arc, c, v) => setDice((d) => ({ ...d, [arc]: { ...d[arc], [c]: v } }));
  const toggleTok = (type) => setTokens((ts) => ts.includes(type) ? ts.filter((t) => t !== type) : [...ts, type]);

  const save = () => {
    onSave(ship.id, {
      maxHull: hull, hull: Math.min(ship.hull, hull),
      maxShields: { ...shields }, shields: ARCS.reduce((o, a) => (o[a] = Math.min(ship.shields[a], shields[a]), o), {}),
      command, engineering, squadronValue,
      attackDice: cloneArm(dice),
      defenseTokens: tokens.map((t) => { const ex = ship.defenseTokens.find((d) => d.type === t); return ex || { id: uid("dt"), type: t, state: "ready" }; }),
      statsMissing: false,
    });
    onClose();
  };

  return (
    <Dialog title={`Stats — ${ship.name}`} onClose={onClose}
      foot={<><button className="btn btn-ghost" onClick={onClose}>Annuleer</button><button className="btn btn-accent" onClick={save}>Opslaan</button></>}>
      <div className="se-grid4">
        <div className="se-field"><span className="lbl">Hull</span><Stepper value={hull} min={1} max={20} onChange={setHull} /></div>
        <div className="se-field"><span className="lbl">Command</span><Stepper value={command} min={1} max={4} onChange={setCommand} /></div>
        <div className="se-field"><span className="lbl">Engineering</span><Stepper value={engineering} min={0} max={12} onChange={setEngineering} /></div>
        <div className="se-field"><span className="lbl">Squadron</span><Stepper value={squadronValue} min={0} max={6} onChange={setSquadronValue} /></div>
      </div>

      <div className="field" style={{ marginTop: 14 }}>
        <span className="lbl">Max shields per arc</span>
        <div className="se-grid4">
          {ARCS.map((a) => (
            <div className="se-field" key={a}><span className="lbl lbl-sm"><ArcSwatch arc={a} />{ARC_LABEL[a]}</span><Stepper value={shields[a]} min={0} max={8} onChange={(v) => setShields((s) => ({ ...s, [a]: v }))} /></div>
          ))}
        </div>
      </div>

      <div className="field">
        <span className="lbl">Attack dice per arc</span>
        <div className="se-arcs">
          {ARCS.map((a) => <DiceArcEditor key={a} arc={a} dice={dice[a]} onChange={(c, v) => setDie(a, c, v)} />)}
        </div>
      </div>

      <div className="field" style={{ marginBottom: 0 }}>
        <span className="lbl">Defense tokens</span>
        <div className="dtok-row">
          {DEFENSE_TOKENS.map((t) => (
            <button key={t} className="dtok" data-state={tokens.includes(t) ? "ready" : "discarded"} onClick={() => toggleTok(t)}>
              <span className="dtok-ico"><DefTokenIcon type={t} /></span>{t}
            </button>
          ))}
        </div>
      </div>
    </Dialog>
  );
}

/* ---- ship-stats.json loader ---- */
const STATS_SCHEMA_EXAMPLE = `{
  "ships": [
    {
      "name": "Vigil-Class Cruiser",
      "baseSize": "medium",
      "hull": 5,
      "shields": { "front": 3, "rear": 1, "left": 2, "right": 2 },
      "command": 2,
      "engineering": 3,
      "squadronValue": 2,
      "defenseTokens": ["Brace", "Redirect", "Evade"],
      "attackDice": {
        "front": { "red": 1, "blue": 1, "black": 1 },
        "rear":  { "red": 0, "blue": 1, "black": 0 },
        "left":  { "red": 1, "blue": 1, "black": 0 },
        "right": { "red": 1, "blue": 1, "black": 0 }
      }
    }
  ]
}`;

function normName(s) { return (s || "").toLowerCase().replace(/[^a-z0-9]/g, ""); }

function applyStatsDataset(json, ships) {
  let parsed;
  try { parsed = typeof json === "string" ? JSON.parse(json) : json; }
  catch (e) { return { ok: false, error: "Ongeldige JSON: " + e.message }; }
  const list = parsed.ships || parsed;
  if (!Array.isArray(list)) return { ok: false, error: "Verwacht een 'ships' array." };
  const byName = {};
  list.forEach((s) => { byName[normName(s.name)] = s; });
  let matched = 0;
  const updated = ships.map((sh) => {
    const d = byName[normName(sh.name)];
    if (!d) return sh;
    matched++;
    const size = d.baseSize && BASE_SIZES[d.baseSize] ? d.baseSize : sh.baseSize;
    const maxShields = d.shields ? { ...sh.maxShields, ...d.shields } : sh.maxShields;
    return {
      ...sh, baseSize: size,
      maxHull: d.hull != null ? d.hull : sh.maxHull, hull: d.hull != null ? d.hull : sh.hull,
      maxShields, shields: { ...maxShields },
      command: d.command != null ? d.command : sh.command,
      engineering: d.engineering != null ? d.engineering : sh.engineering,
      squadronValue: d.squadronValue != null ? d.squadronValue : sh.squadronValue,
      attackDice: d.attackDice ? cloneArm({ ...DEFAULT_ARMAMENT[size], ...d.attackDice }) : sh.attackDice,
      defenseTokens: d.defenseTokens ? d.defenseTokens.map((t) => ({ id: uid("dt"), type: t, state: "ready" })) : sh.defenseTokens,
      statsMissing: false,
    };
  });
  return { ok: true, ships: updated, matched, total: ships.length };
}

Object.assign(window, { StatsEditor, applyStatsDataset, STATS_SCHEMA_EXAMPLE, normName });