/* ============================================================
   DIALOGS — Add ship (manual) · Fleet import (paste)
   ============================================================ */
const { useState: useStateDlg } = React;

function Dialog({ title, onClose, children, foot }) {
  return (
    <div className="scrim" onPointerDown={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="dialog">
        <div className="dialog-head">
          <span className="sec-accent" />
          <span className="dh-title">{title}</span>
          <span className="sec-head-spacer" style={{ flex: 1 }} />
          <button className="icon-btn" onClick={onClose} aria-label="sluit">
            <svg width="14" height="14" viewBox="0 0 14 14"><path d="M2 2 L12 12 M12 2 L2 12" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>
          </button>
        </div>
        <div className="dialog-body">{children}</div>
        {foot ? <div className="dialog-foot">{foot}</div> : null}
      </div>
    </div>
  );
}

/* ---------------- Add ship ---------------- */
function AddShipDialog({ onClose, onAdd, lockFaction }) {
  const [faction, setFaction] = useStateDlg(lockFaction || "empire");
  const [size, setSize] = useStateDlg("medium");
  const [name, setName] = useStateDlg("");
  const def = BASE_SIZES[size];
  const fc = FACTIONS[faction].color;

  const submit = () => {
    onAdd(makeShip({
      name: name.trim() || `${FACTIONS[faction].name} ${def.name} Vessel`,
      faction, baseSize: size,
    }));
    onClose();
  };

  return (
    <Dialog title="Schip toevoegen" onClose={onClose}
      foot={<><button className="btn btn-ghost" onClick={onClose}>Annuleer</button>
             <button className="btn btn-accent" onClick={submit}>{lockFaction ? "Voeg toe" : "Plaats op bord"}</button></>}>
      {lockFaction ? null : (
        <div className="field">
          <span className="lbl">Factie</span>
          <div className="faction-choose">
            {FACTION_ORDER.map((f) => (
              <button key={f} className="faction-opt" data-active={faction === f}
                      style={{ "--fc": FACTIONS[f].color }} onClick={() => setFaction(f)}>
                <span className="fc-dot" style={{ background: FACTIONS[f].color }} />
                <span className="fo-name">{FACTIONS[f].name}</span>
              </button>
            ))}
          </div>
        </div>
      )}

      <div className="field">
        <span className="lbl">Base size</span>
        <div className="size-choose" style={{ "--accent": fc }}>
          {BASE_SIZE_ORDER.map((s) => (
            <button key={s} className="size-opt" data-active={size === s} onClick={() => setSize(s)}>
              <div style={{ display: "grid", placeItems: "center", marginBottom: 4, color: size === s ? fc : "var(--text-dim)" }}>
                <ShipGlyph baseSize={s} color="currentColor" size={22} />
              </div>
              <div className="so-name">{BASE_SIZES[s].name}</div>
              <div className="so-sub">{BASE_SIZES[s].hull} hull</div>
            </button>
          ))}
        </div>
      </div>

      <div className="field">
        <span className="lbl">Naam</span>
        <input className="input" value={name} placeholder={`bv. ${FACTIONS[faction].name} ${def.name} Vessel`}
               onChange={(e) => setName(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") submit(); }} autoFocus />
      </div>

      <div className="field" style={{ marginBottom: 0 }}>
        <span className="lbl">Defaults (bewerkbaar na plaatsen)</span>
        <div className="mono" style={{ fontSize: 12, color: "var(--text-dim)", background: "var(--bg)", border: "1px solid var(--line)", borderRadius: "var(--r-md)", padding: "10px 12px", lineHeight: 1.7 }}>
          <div>hull <b style={{ color: "var(--text)" }}>{def.hull}</b> &nbsp; command <b style={{ color: "var(--text)" }}>{def.command}</b></div>
          <div>shields F/R/L/R <b style={{ color: "var(--text)" }}>{def.shields.front}/{def.shields.rear}/{def.shields.left}/{def.shields.right}</b></div>
          <div>tokens <b style={{ color: "var(--text)" }}>{def.defaults.join(", ")}</b></div>
        </div>
      </div>
    </Dialog>
  );
}

/* ---------------- Import ---------------- */
function ImportDialog({ onClose, onImport }) {
  const [text, setText] = useStateDlg("");
  const [result, setResult] = useStateDlg(null); // {ok, fleet|error}

  const doParse = (raw) => setResult(parseFleet(raw));
  const loadExample = () => { setText(EXAMPLE_EXPORT); setResult(parseFleet(EXAMPLE_EXPORT)); };

  const confirm = () => {
    if (result && result.ok) { onImport(result.fleet); onClose(); }
  };

  const f = result && result.ok ? result.fleet : null;

  return (
    <Dialog title="Fleet importeren" onClose={onClose}
      foot={<><button className="btn btn-ghost" onClick={onClose}>Annuleer</button>
             <button className="btn btn-accent" onClick={confirm} disabled={!f}>Voeg toe aan roster</button></>}>
      <div className="import-actions">
        <button className="btn" onClick={loadExample}>Plak voorbeeld</button>
        <button className="btn btn-accent" onClick={() => doParse(text)} disabled={!text.trim()}>Verwerk</button>
        {text ? <button className="btn btn-ghost" onClick={() => { setText(""); setResult(null); }}>Wis</button> : null}
      </div>

      {result && !result.ok ? <div className="import-error">{result.error}</div> : null}
      {f ? (
        <div className="import-ok">
          <b>{f.name || "Naamloze vloot"}</b> · {FACTIONS[f.faction].name}
          {f.commander ? ` · ${f.commander}` : ""} — {f.ships.length} schepen, {f.squadrons.length} squadrons · {f.totalPoints} pts
          <div className="mono" style={{ fontSize: 11, marginTop: 6, opacity: .85 }}>
            Schepen krijgen geschatte base size; gevechtsstats blijven leeg (markeer als "stats?").
          </div>
        </div>
      ) : null}

      <div className="field" style={{ marginBottom: 0 }}>
        <span className="lbl">Text Export (plak hier)</span>
        <textarea className="textarea" value={text} spellCheck={false}
                  placeholder={"Plak hier de Text Export uit je fleet builder\n(Kingston / Warlords / Flagship-formaat)…"}
                  onChange={(e) => { setText(e.target.value); if (result) setResult(null); }} />
      </div>

      {f && f.ships.length ? (
        <div className="field" style={{ marginTop: 14, marginBottom: 0 }}>
          <span className="lbl">Herkend</span>
          <div style={{ border: "1px solid var(--line)", borderRadius: "var(--r-md)", overflow: "hidden" }}>
            {f.ships.map((s, i) => (
              <div key={i} style={{ display: "flex", alignItems: "center", gap: 8, padding: "8px 11px", borderTop: i ? "1px solid var(--line)" : "none" }}>
                <span className="mono" style={{ fontSize: 13, flex: 1 }}>{s.name}</span>
                {s.upgrades.length ? <span className="mono" style={{ fontSize: 10.5, color: "var(--text-faint)" }}>{s.upgrades.length} upg</span> : null}
                <span className="mono" style={{ fontSize: 12, color: "var(--text-dim)" }}>{s.points}</span>
              </div>
            ))}
          </div>
        </div>
      ) : null}
    </Dialog>
  );
}

Object.assign(window, { AddShipDialog, ImportDialog, Dialog, StatsDatasetDialog });

/* ---------------- gedeelde detail-weergave-bouwstenen ---------------- */
const CAT_DIE_HEX = { red: "#ffb4ae", blue: "#aed6ff", black: "#cfd6e2" };
// dobbelstenen-pool ({red,blue,black}) compact met gekleurde stip + aantal
function DicePips({ pool }) {
  const parts = (typeof DICE_ORDER !== "undefined" ? DICE_ORDER : ["red", "blue", "black"]).filter((c) => ((pool && pool[c]) || 0) > 0);
  if (!parts.length) return <span className="mono cat-stat-none">—</span>;
  return (
    <span style={{ display: "inline-flex", gap: 8 }}>
      {parts.map((c) => (
        <span key={c} className="mono" style={{ display: "inline-flex", alignItems: "center", gap: 3 }}>
          <span style={{ width: 9, height: 9, borderRadius: 2, background: CAT_DIE_HEX[c], display: "inline-block" }} />{pool[c]}
        </span>
      ))}
    </span>
  );
}
// één "label : waarde"-regel in het detailraster
function CatStat({ label, children }) {
  return (
    <div className="cat-stat">
      <span className="cat-stat-label lbl">{label}</span>
      <span className="cat-stat-val">{children}</span>
    </div>
  );
}
function DefTokenList({ tokens }) {
  if (!tokens || !tokens.length) return <span className="mono cat-stat-none">geen</span>;
  return (
    <span style={{ display: "inline-flex", gap: 8, flexWrap: "wrap" }}>
      {tokens.map((t, i) => (
        <span key={i} style={{ display: "inline-flex", alignItems: "center", gap: 3 }}>
          <DefTokenIcon type={t} /> <span className="mono" style={{ fontSize: 11 }}>{t}</span>
        </span>
      ))}
    </span>
  );
}

/* ---------------- Ship catalog (echte schepen) ---------------- */
function ShipCatalogDialog({ faction, onClose, onAdd }) {
  const [q, setQ] = useStateDlg("");
  const [detail, setDetail] = useStateDlg(null);   // schip in detailweergave
  const list = shipsForFaction(faction).filter((s) => (s.title || "").toLowerCase().includes(q.toLowerCase()));
  const bySize = BASE_SIZE_ORDER.map((size) => ({ size, ships: list.filter((s) => s.size === size) })).filter((g) => g.ships.length);
  const fc = FACTIONS[faction] ? FACTIONS[faction].color : "var(--accent)";

  // ---- detailweergave van één schip ----
  if (detail) {
    const s = detail;
    const st = s.stats || {};
    return (
      <Dialog title={s.title} onClose={onClose}
        foot={<><button className="btn btn-ghost" onClick={() => setDetail(null)}>← Terug</button>
               <button className="btn btn-accent" onClick={() => { onAdd(s); setDetail(null); }}>Voeg toe ({s.points} pts)</button></>}>
        <div className="up-detail" style={{ "--fc": fc }}>
          <div className="up-detail-facts">
            <span className="up-tag" style={{ "--fc": fc }}>{BASE_SIZES[s.size] ? BASE_SIZES[s.size].name : s.size}</span>
            <span className="up-tag">{s.points} pts</span>
            {s.unique ? <span className="up-tag">◆ Uniek</span> : null}
            <span className="up-tag">{s.slots.length} upgrade-slots</span>
          </div>
          <div className="field" style={{ marginTop: 12 }}>
            <span className="lbl">Stats</span>
            <div className="cat-stats">
              <CatStat label="Hull">{st.hull != null ? st.hull : "—"}</CatStat>
              <CatStat label="Command">{st.command != null ? st.command : "—"}</CatStat>
              <CatStat label="Squadron">{st.squadron != null ? st.squadron : "—"}</CatStat>
              <CatStat label="Engineering">{st.engineering != null ? st.engineering : "—"}</CatStat>
              <CatStat label="Speed">{st.speed != null ? st.speed : "—"}</CatStat>
            </div>
          </div>
          {st.shields ? (
            <div className="field"><span className="lbl">Shields</span>
              <div className="cat-stats">
                {ARCS.map((arc) => (
                  <CatStat key={arc} label={<><ArcSwatch arc={arc} /> {ARC_LABEL[arc]}</>}>{st.shields[arc] != null ? st.shields[arc] : 0}</CatStat>
                ))}
              </div>
            </div>
          ) : null}
          {st.attackDice ? (
            <div className="field"><span className="lbl">Aanvalsdice per arc</span>
              <div className="cat-arclist">
                {ARCS.map((arc) => (
                  <div className="cat-arcrow" key={arc}>
                    <span className="lbl" style={{ color: fc, minWidth: 62 }}><ArcSwatch arc={arc} /> {ARC_LABEL[arc]}</span>
                    <DicePips pool={st.attackDice[arc]} />
                  </div>
                ))}
              </div>
            </div>
          ) : null}
          <div className="field" style={{ marginBottom: 0 }}>
            <span className="lbl">Defense tokens</span>
            <DefTokenList tokens={st.defenseTokens} />
          </div>
        </div>
      </Dialog>
    );
  }

  return (
    <Dialog title={`Schepen — ${FACTIONS[faction] ? FACTIONS[faction].name : ""}`} onClose={onClose}
      foot={<button className="btn btn-accent" onClick={onClose}>Klaar</button>}>
      <div className="field"><input className="input" placeholder="Zoek schip…" value={q} autoFocus onChange={(e) => setQ(e.target.value)} /></div>
      {bySize.map((g) => (
        <div className="field" key={g.size} style={{ marginBottom: 12 }}>
          <span className="lbl">{BASE_SIZES[g.size].name}</span>
          <div className="cat-list">
            {g.ships.map((s) => (
              <button key={s.id} className="cat-row" style={{ "--fc": fc }} title="Klik voor stats" onClick={() => setDetail(s)}>
                <ShipGlyph baseSize={s.size} color={fc} size={18} />
                <span className="cat-name">{s.title}</span>
                <span className="cat-slots mono">{s.slots.length} slots</span>
                <span className="cat-pts mono">{s.points}</span>
                <span className="cat-add">ℹ</span>
              </button>
            ))}
          </div>
        </div>
      ))}
      {list.length === 0 ? <div className="mono" style={{ color: "var(--text-faint)", fontSize: 12 }}>Geen schepen gevonden.</div> : null}
    </Dialog>
  );
}

/* ---------------- Squadron catalog ---------------- */
function SquadronCatalogDialog({ faction, current = [], onClose, onAdd }) {
  const [q, setQ] = useStateDlg("");
  const [detail, setDetail] = useStateDlg(null);   // squadron in detailweergave
  const list = squadronsForFaction(faction).filter((s) => (s.title || "").toLowerCase().includes(q.toLowerCase()));
  const fc = FACTIONS[faction] ? FACTIONS[faction].color : "var(--accent)";
  const taken = (sq) => current.some((c) => c.id === sq.id);

  // ---- detailweergave van één squadron ----
  if (detail) {
    const s = detail;
    const st = s.stats || {};
    const dis = s.unique && taken(s);
    const eff = (typeof squadronEffect === "function") ? squadronEffect(s.title) : null;
    return (
      <Dialog title={s.title} onClose={onClose}
        foot={<><button className="btn btn-ghost" onClick={() => setDetail(null)}>← Terug</button>
               <button className="btn btn-accent" disabled={dis} title={dis ? "uniek — al in de vloot" : undefined} onClick={() => { onAdd(s); setDetail(null); }}>Voeg toe ({s.points} pts)</button></>}>
        <div className="up-detail" style={{ "--fc": fc }}>
          <div className="up-detail-facts">
            <span className="up-tag" style={{ "--fc": fc }}>{FACTIONS[s.faction] ? FACTIONS[s.faction].name : s.faction}</span>
            <span className="up-tag">{s.points} pts</span>
            {s.unique ? <span className="up-tag">◆ Uniek</span> : null}
            {(s.keywords || []).map((k) => <span className="up-tag" key={k}>{k}</span>)}
          </div>
          {dis ? <div className="import-error" style={{ marginTop: 10 }}>uniek — al in de vloot</div> : null}
          <div className="field" style={{ marginTop: 12 }}>
            <span className="lbl">Stats</span>
            <div className="cat-stats">
              <CatStat label="Hull">{st.hull != null ? st.hull : "—"}</CatStat>
              <CatStat label="Speed">{st.speed != null ? st.speed : "—"}</CatStat>
            </div>
          </div>
          <div className="field">
            <span className="lbl">Aanvalsdice</span>
            <div className="cat-arclist">
              <div className="cat-arcrow"><span className="lbl" style={{ minWidth: 90 }}>vs Squadron</span><DicePips pool={st.antiSquad} /></div>
              <div className="cat-arcrow"><span className="lbl" style={{ minWidth: 90 }}>vs Schip</span><DicePips pool={st.antiShip} /></div>
            </div>
          </div>
          <div className="field"><span className="lbl">Defense tokens</span><DefTokenList tokens={st.defenseTokens} /></div>
          <div className="field" style={{ marginBottom: 0 }}>
            <span className="lbl">Effect</span>
            {eff ? <div className="up-effect-text">{eff}</div>
                 : <div className="mono up-note-info">Geen effect-tekst beschikbaar voor dit squadron.</div>}
          </div>
        </div>
      </Dialog>
    );
  }

  return (
    <Dialog title={`Squadrons — ${FACTIONS[faction] ? FACTIONS[faction].name : ""}`} onClose={onClose}
      foot={<button className="btn btn-accent" onClick={onClose}>Klaar</button>}>
      <div className="field"><input className="input" placeholder="Zoek squadron…" value={q} autoFocus onChange={(e) => setQ(e.target.value)} /></div>
      <div className="cat-list">
        {list.map((s) => {
          const dis = s.unique && taken(s);
          return (
            <button key={s.id} className="cat-row" style={{ "--fc": fc }} title={dis ? "uniek — al in de vloot" : "Klik voor stats"} onClick={() => setDetail(s)}>
              <svg width="15" height="15" viewBox="0 0 14 14" style={{ color: fc }}><circle cx="3.5" cy="7" r="2" fill="currentColor"/><circle cx="10.5" cy="4" r="2" fill="currentColor"/><circle cx="10.5" cy="10" r="2" fill="currentColor"/></svg>
              <span className="cat-name">{s.title}{s.unique ? " ◆" : ""}{dis ? " · in vloot" : ""}</span>
              {s.keywords.length ? <span className="cat-slots mono">{s.keywords.join(", ")}</span> : null}
              <span className="cat-pts mono">{s.points}</span>
              <span className="cat-add">ℹ</span>
            </button>
          );
        })}
      </div>
      {list.length === 0 ? <div className="mono" style={{ color: "var(--text-faint)", fontSize: 12 }}>Geen squadrons gevonden.</div> : null}
    </Dialog>
  );
}

Object.assign(window, { ShipCatalogDialog, SquadronCatalogDialog });

/* ---------------- Ship-stats dataset loader ---------------- */
function StatsDatasetDialog({ ships, onClose, onApply }) {
  const [text, setText] = useStateDlg("");
  const [result, setResult] = useStateDlg(null);

  const run = () => setResult(applyStatsDataset(text, ships));
  const confirm = () => { if (result && result.ok) onApply(result.ships); };

  return (
    <Dialog title="Stats-dataset laden" onClose={onClose}
      foot={<><button className="btn btn-ghost" onClick={onClose}>Annuleer</button>
             <button className="btn btn-accent" onClick={confirm} disabled={!(result && result.ok)}>Pas toe</button></>}>
      <p style={{ margin: "0 0 12px", fontSize: 13, color: "var(--text-dim)", lineHeight: 1.5 }}>
        Plak een <span className="mono">ship-stats.json</span> volgens het schema hieronder. Namen worden genormaliseerd gematcht op je roster-schepen. Geen AMG-data meegeleverd — je levert je eigen dataset.
      </p>
      <div className="import-actions">
        <button className="btn" onClick={() => { setText(STATS_SCHEMA_EXAMPLE); setResult(null); }}>Toon voorbeeld-schema</button>
        <button className="btn btn-accent" onClick={run} disabled={!text.trim()}>Verwerk</button>
      </div>
      {result && !result.ok ? <div className="import-error">{result.error}</div> : null}
      {result && result.ok ? <div className="import-ok">{result.matched} van {result.total} schepen gematcht en bijgewerkt.</div> : null}
      <div className="field" style={{ marginBottom: 0 }}>
        <span className="lbl">ship-stats.json</span>
        <textarea className="textarea" value={text} spellCheck={false}
                  placeholder={"Plak hier je ship-stats.json…"}
                  onChange={(e) => { setText(e.target.value); if (result) setResult(null); }} />
      </div>
    </Dialog>
  );
}