/* ============================================================
   SETUP FLOW — 1) bepaal beide vloten  2) kies scenario  3) speel
   Renders before the battle board; hands a built game to App.
   ============================================================ */
const { useState: useStateSetup } = React;

const STEPS = [
  { key: "fleets",   n: "01", label: "Vloten" },
  { key: "scenario", n: "02", label: "Scenario" },
  { key: "play",     n: "03", label: "Spelen" },
];

function StepRail({ step }) {
  const idx = STEPS.findIndex((s) => s.key === step);
  return (
    <div className="step-rail">
      {STEPS.map((s, i) => (
        <React.Fragment key={s.key}>
          {i > 0 ? <span className="step-sep" data-done={i <= idx} /> : null}
          <div className="step-node" data-state={i < idx ? "done" : i === idx ? "active" : "todo"}>
            <span className="step-n">{i < idx ? "✓" : s.n}</span>
            <span className="step-lbl">{s.label}</span>
          </div>
        </React.Fragment>
      ))}
    </div>
  );
}

/* ---- one side's fleet builder column ---- */
function FleetColumn({ slot, side, onChange, onOpenImport, onOpenAdd, onOpenCatalog, onOpenSquadrons, onRandom, onOpenUpgrades, taken, maxPts, legality }) {
  const fc = side.faction ? FACTIONS[side.faction].color : "var(--text-dim)";
  const pts = side.ships.reduce((n, s) => n + s.points + s.upgrades.reduce((u, x) => u + x.points, 0), 0)
            + side.squadrons.reduce((n, q) => n + q.points * (q.count || 1), 0);
  const over = maxPts > 0 && pts > maxPts;

  return (
    <div className="fleet-col" style={{ "--fc": fc }}>
      <div className="fleet-col-head">
        <span className="lbl lbl-sm">Speler {slot}</span>
        <button className="btn btn-sq" style={{ width: "auto", height: 24, padding: "0 9px", fontSize: 10.5 }}
                title="Wissel tussen mens en computer" onClick={() => onChange({ isCpu: !side.isCpu })}>
          {side.isCpu ? "🖥 Computer" : "👤 Mens"}
        </button>
        <span className="fleet-col-name">{side.fleetName || "Naamloze vloot"}</span>
        {side.ships.length ? (
          <span className="fleet-col-pts mono" style={over ? { color: "var(--bad)" } : null} title={over ? `Boven de limiet van ${maxPts} pts` : undefined}>
            {pts}{maxPts > 0 ? `/${maxPts}` : ""} pts{over ? " · boven limiet" : ""}
          </span>
        ) : null}
      </div>

      <div className="fleet-faction-row">
        {FACTION_ORDER.map((f) => {
          const dis = taken === f && side.faction !== f;
          return (
            <button key={f} className="faction-opt" data-active={side.faction === f} disabled={dis}
                    style={{ "--fc": FACTIONS[f].color, opacity: dis ? 0.32 : 1 }}
                    onClick={() => onChange({ faction: f })}>
              <span className="fc-dot" style={{ background: FACTIONS[f].color }} />
              <span className="fo-name">{FACTIONS[f].name}</span>
            </button>
          );
        })}
      </div>

      <div className="fleet-actions">
        <button className="btn btn-accent" style={{ flex: 1.4 }} onClick={onOpenCatalog} disabled={!side.faction}>
          <svg width="14" height="14" viewBox="0 0 16 16"><path d="M8 2 L14 6 L8 10 L2 6 Z M2 10 L8 14 L14 10" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/></svg>
          Catalogus
        </button>
        <button className="btn" style={{ flex: 1 }} onClick={onOpenSquadrons} disabled={!side.faction}>Squadrons</button>
      </div>
      <div className="fleet-actions" style={{ marginTop: 6 }}>
        <button className="btn" style={{ flex: 1 }} onClick={onRandom} disabled={!side.faction}
                title={`Vul aan tot ${maxPts > 0 ? maxPts : 400} pts met een willekeurige, geldige selectie`}>🎲 Willekeurig</button>
      </div>
      <div className="fleet-actions" style={{ marginTop: 6 }}>
        <button className="btn btn-ghost" style={{ flex: 1 }} onClick={onOpenImport} disabled={!side.faction}>Importeer</button>
        <button className="btn btn-ghost" style={{ flex: 1 }} onClick={onOpenAdd} disabled={!side.faction}>Handmatig schip</button>
      </div>

      <div className="fleet-list">
        {side.ships.length === 0 && side.squadrons.length === 0 ? (
          <div className="fleet-empty">
            <ShipGlyph baseSize="large" color="var(--text-faint)" size={30} />
            <span>{side.faction ? "Importeer een vloot of voeg schepen toe." : "Kies eerst een factie."}</span>
          </div>
        ) : (
          <>
            {side.ships.map((s) => {
              const upPts = s.upgrades.reduce((n, u) => n + (u.points || 0), 0);
              const hasSlots = s.slots && s.slots.length;
              return (
                <div className="fleet-ship" key={s.id}>
                  <span style={{ color: fc, display: "grid", placeItems: "center" }}><ShipGlyph baseSize={s.baseSize} color={fc} size={18} /></span>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div className="fs-name">{s.name}</div>
                    <div className="fs-sub mono">{BASE_SIZES[s.baseSize].name} · {s.points + upPts} pts{s.upgrades.length ? ` · ${s.upgrades.length} upg` : ""}{s.statsMissing ? " · stats?" : ""}</div>
                  </div>
                  <button className="btn btn-sq" style={{ width: "auto", height: 26, padding: "0 8px", fontSize: 10.5 }}
                          title={hasSlots ? "Upgrades kiezen" : "Voeg via Catalogus toe voor upgrade-slots"}
                          onClick={() => onOpenUpgrades(s.id)}>
                    Upgrades{hasSlots ? ` ${s.upgrades.length}/${s.slots.length}` : ""}
                  </button>
                  <button className="fs-del" title="Verwijder" onClick={() => onChange({ removeShip: s.id })}>
                    <svg width="13" height="13" viewBox="0 0 14 14"><path d="M2 2 L12 12 M12 2 L2 12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>
                  </button>
                </div>
              );
            })}
            {side.squadrons.map((q) => (
              <div className="fleet-ship squad" key={q.id}>
                <svg width="14" height="14" 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>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div className="fs-name">{q.name}{q.unique ? " ◆" : ""}</div>
                  <div className="fs-sub mono">squadron · {q.points * (q.count || 1)} pts</div>
                </div>
                {!q.unique ? (
                  <div className="stepper" style={{ marginRight: 4 }}>
                    <button onClick={() => onChange({ setSquadronCount: { id: q.id, count: (q.count || 1) - 1 } })}>{"−"}</button>
                    <div className="val" style={{ minWidth: 30, height: 26 }}><span>{q.count || 1}</span></div>
                    <button onClick={() => onChange({ setSquadronCount: { id: q.id, count: (q.count || 1) + 1 } })}>+</button>
                  </div>
                ) : null}
                <button className="fs-del" title="Verwijder" onClick={() => onChange({ removeSquadron: q.id })}>
                  <svg width="13" height="13" viewBox="0 0 14 14"><path d="M2 2 L12 12 M12 2 L2 12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>
                </button>
              </div>
            ))}
          </>
        )}
      </div>
      {legality && side.faction && !legality.legal ? (
        <div className="fleet-illegal">
          <span className="lbl lbl-sm" style={{ color: "var(--bad)" }}>Nog niet legaal</span>
          <ul className="fleet-illegal-list mono">
            {legality.violations.map((v, i) => <li key={i}>{v}</li>)}
          </ul>
        </div>
      ) : legality && side.faction && legality.legal ? (
        <div className="fleet-legal mono">✓ Legale vloot</div>
      ) : null}
    </div>
  );
}

/* ---- full objective rules, verbatim from the dataset (§ non-goal: never enforced, only shown) ---- */
const OBJ_SECTIONS = [
  ["setup", "Setup"],
  ["special_rule", "Special rule"],
  ["end_of_round", "End of round"],
  ["end_of_game", "End of game"],
];
function ObjectiveRules({ scenario }) {
  if (!scenario) return null;
  const full = findObjectiveDetail(scenario.id);
  // fallback list (no baked catalogus) has no per-field split — show what we have
  const fields = full || { setup: scenario.setup, special_rule: scenario.blurb, end_of_round: "", end_of_game: scenario.objective };
  const sections = OBJ_SECTIONS.map(([k, label]) => [label, (fields[k] || "").trim()]).filter(([, v]) => v);
  if (!sections.length) return <div className="obj-rules-empty mono">Geen aanvullende regeltekst voor dit objectief.</div>;
  return (
    <div className="obj-rules">
      {sections.map(([label, text]) => (
        <div className="obj-rule-block" key={label}>
          <div className="obj-rule-label lbl lbl-sm">{label}</div>
          <div className="obj-rule-text">{text}</div>
        </div>
      ))}
    </div>
  );
}

/* ---- "Objectief-regels" reference dialog, opened during play (PhaseHelp-style scrim) ---- */
function ObjectiveHelp({ scenario, onClose }) {
  if (!scenario) return null;
  return (
    <div className="scrim" onPointerDown={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="dialog" style={{ maxWidth: 460 }}>
        <div className="dialog-head"><span className="sec-accent" /><span className="dh-title">{scenario.name} — objectiefregels</span><span style={{ flex: 1 }} />
          <button className="icon-btn" onClick={onClose}><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">
          <span className="sc-type" data-type={scenario.type}>{scenario.type}</span>
          <div style={{ marginTop: 12 }}><ObjectiveRules scenario={scenario} /></div>
        </div>
        <div className="dialog-foot"><button className="btn btn-accent" onClick={onClose}>Begrepen</button></div>
      </div>
    </div>
  );
}

/* ---- scenario picker — grouped by type so it stays browsable ---- */
function ScenarioStep({ chosen, onChoose }) {
  const chosenSc = SCENARIOS.find((s) => s.id === chosen) || null;
  const groups = [];
  SCENARIOS.forEach((sc) => {
    let g = groups.find((x) => x.type === sc.type);
    if (!g) { g = { type: sc.type, items: [] }; groups.push(g); }
    g.items.push(sc);
  });
  return (
    <div className="scenario-groups">
      {groups.map((g) => (
        <div className="scenario-group" key={g.type}>
          <div className="scenario-group-head">
            <span className="sc-type" data-type={g.type}>{g.type}</span>
            <span className="mono" style={{ color: "var(--text-faint)", fontSize: 11 }}>{g.items.length} objectief{g.items.length > 1 ? "ven" : ""}</span>
          </div>
          <div className="scenario-grid">
            {g.items.map((sc) => (
              <button key={sc.id} className="scenario-card" data-active={chosen === sc.id} onClick={() => onChoose(sc.id)}>
                <div className="sc-top">
                  <span className="sc-type" data-type={sc.type}>{sc.type}</span>
                  {chosen === sc.id ? <span className="sc-check">✓</span> : null}
                </div>
                <div className="sc-name">{sc.name}</div>
                <div className="sc-blurb">{sc.blurb}</div>
                <div className="sc-meta">
                  <span className="mono"><b>Setup</b> · {sc.setup}</span>
                  <span className="mono"><b>Scoren</b> · {sc.objective}</span>
                  {sc.tokens > 0 ? <span className="sc-tokens mono">{sc.tokens} token{sc.tokens > 1 ? "s" : ""}</span> : null}
                </div>
              </button>
            ))}
          </div>
        </div>
      ))}
      {chosenSc ? (
        <div className="scenario-detail">
          <div className="scenario-detail-head">
            <span className="lbl lbl-sm">Volledige regels</span>
            <span className="sc-name" style={{ fontSize: 16 }}>{chosenSc.name}</span>
          </div>
          <ObjectiveRules scenario={chosenSc} />
        </div>
      ) : null}
    </div>
  );
}

function Setup({ step, setStep, sideA, sideB, scenario, mutateSide, openDialog, onChoose, onStart, onQuickSeed, onRandomFill, onMenu }) {
  const [maxPts, setMaxPts] = useStateSetup(400); // puntenlimiet; 0 = uit
  const legA = fleetLegality(sideA, maxPts);
  const legB = fleetLegality(sideB, maxPts);
  const aReady = sideA.faction && sideA.ships.length > 0 && legA.legal;
  const bReady = sideB.faction && sideB.ships.length > 0 && legB.legal;
  const fleetsReady = aReady && bReady;

  return (
    <div className="setup">
      <div className="setup-bar">
        <div className="brand">
          <button className="setup-back" onClick={onMenu} title="Hoofdmenu" aria-label="Menu">←</button>
          <div className="brand-mark"><svg width="11" height="11" viewBox="0 0 24 24"><path d="M12 3 L21 21 L3 21 Z" fill="currentColor" /></svg></div>
          <div className="brand-name">Armada <b>Command</b></div>
        </div>
        <div className="setup-bar-center"><StepRail step={step} /></div>
        <div style={{ minWidth: 120, display: "flex", justifyContent: "flex-end" }}>
          {step === "fleets" ? <button className="btn btn-ghost" onClick={onQuickSeed}>Voorbeeld-potje</button> : null}
        </div>
      </div>

      <div className="setup-body">
        {step === "fleets" ? (
          <div className="setup-stage">
            <div className="setup-head">
              <h1>Bepaal beide vloten</h1>
              <p>Kies per speler een factie en stel de vloot samen — plak een Text Export of voeg schepen handmatig toe.</p>
            </div>
            <div className="fleet-cols">
              <FleetColumn slot="A" side={sideA} taken={sideB.faction} maxPts={maxPts} legality={legA}
                           onChange={(p) => mutateSide("A", p)}
                           onOpenImport={() => openDialog("A", "import")} onOpenAdd={() => openDialog("A", "add")}
                           onOpenCatalog={() => openDialog("A", "catalog")} onOpenSquadrons={() => openDialog("A", "squadrons")}
                           onRandom={() => onRandomFill && onRandomFill("A", maxPts > 0 ? maxPts : 400)}
                           onOpenUpgrades={(shipId) => openDialog("A", "upgrades", { shipId })} />
              <FleetColumn slot="B" side={sideB} taken={sideA.faction} maxPts={maxPts} legality={legB}
                           onChange={(p) => mutateSide("B", p)}
                           onOpenImport={() => openDialog("B", "import")} onOpenAdd={() => openDialog("B", "add")}
                           onOpenCatalog={() => openDialog("B", "catalog")} onOpenSquadrons={() => openDialog("B", "squadrons")}
                           onRandom={() => onRandomFill && onRandomFill("B", maxPts > 0 ? maxPts : 400)}
                           onOpenUpgrades={(shipId) => openDialog("B", "upgrades", { shipId })} />
            </div>
          </div>
        ) : null}

        {step === "scenario" ? (
          <div className="setup-stage">
            <div className="setup-head">
              <h1>Kies een scenario</h1>
              <p>Bepaalt deployment, objectief en eventuele tokens. De app houdt dit bij — je dwingt de regels zelf af.</p>
            </div>
            <ScenarioStep chosen={scenario} onChoose={onChoose} />
          </div>
        ) : null}
      </div>

      <div className="setup-foot">
        {step === "fleets" ? (
          <>
            <div className="setup-foot-status mono">
              <span data-ok={aReady}>{aReady ? "✓" : "○"} Speler A</span>
              <span data-ok={bReady}>{bReady ? "✓" : "○"} Speler B</span>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 5 }}>
                <span className="lbl lbl-sm">Limiet</span>
                <input className="mono" type="number" min="0" step="50" value={maxPts}
                       onChange={(e) => setMaxPts(Math.max(0, +e.target.value || 0))}
                       style={{ width: 64, background: "transparent", border: "1px solid var(--line, #333)", borderRadius: 4, color: "var(--text)", padding: "2px 6px", fontSize: 11 }} />
                <span style={{ color: "var(--text-faint)", fontSize: 10.5 }}>pts (0 = uit)</span>
              </span>
            </div>
            <button className="btn btn-accent btn-lg" disabled={!fleetsReady} onClick={() => setStep("scenario")}>
              Naar scenario →
            </button>
          </>
        ) : (
          <>
            <button className="btn btn-lg" onClick={() => setStep("fleets")}>← Vloten</button>
            <div style={{ flex: 1 }} />
            <button className="btn btn-accent btn-lg" disabled={!scenario} onClick={onStart}>
              Begin het potje →
            </button>
          </>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { Setup, StepRail, ObjectiveRules, ObjectiveHelp });