/* ============================================================
   GAME FLOW UI — phase rail, activation banner, log, score
   ============================================================ */

function PhaseRail({ phase }) {
  return (
    <div className="phase-rail">
      {PHASES.map((p) => (
        <div key={p} className="phase-node" data-state={p === phase ? "active" : PHASES.indexOf(p) < PHASES.indexOf(phase) ? "done" : "todo"}>
          <span className="phase-dot" />
          <span className="phase-name">{PHASE_LABEL[p]}</span>
        </div>
      ))}
    </div>
  );
}

// the action banner that drives the loop, sits above the board
function FlowBanner({ g, ships, squadrons, selected, cpuActing, onPlanCommands, onEndActivation, onRevealDial, onResolveDial, onStoreToken, onSpendToken, onPassSquadronTurn, onResolveSquadrons, onEndStatus, onAttack, onManeuver, maneuvering, onPick, onHelp }) {
  const { phase, round, activeFaction } = g;
  const HelpBtn = onHelp ? <button className="fb-help" title="Hoe werkt deze fase?" onClick={onHelp}>?</button> : null;

  // computer aan zet: passieve banner, geen actieknoppen voor de mens
  if (cpuActing) {
    const f = phase === "squadron" && g.sqTurn ? g.sqTurn.faction : activeFaction;
    const fc = f ? FACTIONS[f].color : "var(--accent)";
    return (
      <div className="flow-banner" style={{ "--fc": fc }}>
        <div className="fb-text">
          <span className="fb-phase lbl" style={{ color: fc }}><FactionDot faction={f} /> Computer speelt — {FACTIONS[f].name}</span>
          <span className="fb-main"><span className="cpu-thinking">De computer is aan zet…</span> volg de acties op het bord en in het logboek.</span>
        </div>
        {HelpBtn}
      </div>
    );
  }

  if (phase === "command") {
    return (
      <div className="flow-banner">
        <div className="fb-text">
          <span className="fb-phase lbl">Command · Ronde {round}</span>
          <span className="fb-main">Plan in het geheim wat elk schip dit ronde gaat doen.</span>
        </div>
        <button className="btn btn-accent btn-lg" onClick={onPlanCommands}>Plan commands →</button>
        {HelpBtn}
      </div>
    );
  }

  if (phase === "ship") {
    const fc = activeFaction ? FACTIONS[activeFaction].color : "var(--accent)";
    const myUnact = ships.filter((s) => s.faction === activeFaction && !s.activated && !s.destroyed);
    const activating = selected && !selected.activated && selected.faction === activeFaction ? selected : null;
    const inProgress = ships.find((s) => s.faction === activeFaction && s.activationStarted && !s.activated);
    const tokens = inProgress ? (inProgress.commandTokens || []) : [];

    return (
      <div className="flow-banner" style={{ "--fc": fc }}>
        <div className="fb-text">
          <span className="fb-phase lbl" style={{ color: fc }}><FactionDot faction={activeFaction} /> Jouw beurt: {FACTIONS[activeFaction].name}</span>
          {inProgress ? (
            <span className="fb-main">
              {inProgress.dialPending
                ? <>{inProgress.name}: onthuld <b>{DIALS[inProgress.revealedDial].name}</b> — gebruik de dial voluit, of bewaar hem als commandtoken voor later.</>
                : inProgress.revealedDial
                ? <>{inProgress.name}: onthuld <b>{DIALS[inProgress.revealedDial].name}</b>. Vuur, manoeuvreer, beëindig dan.</>
                : <>{inProgress.name}: geen dial gepland — vuur, manoeuvreer, beëindig dan.</>}
              {!inProgress.dialPending && inProgress.squadronPtsLeft > 0 ? <> Activeer nog <b>{inProgress.squadronPtsLeft}</b> squadron{inProgress.squadronPtsLeft !== 1 ? "s" : ""} via het bord.</> : null}
              {!inProgress.dialPending && tokens.length ? (
                <div className="fb-chips" style={{ marginTop: 6 }}>
                  <span className="mono" style={{ color: "var(--text-faint)", fontSize: 11, marginRight: 4, alignSelf: "center" }}>Tokens besteden:</span>
                  {tokens.map((k, i) => (
                    <button key={i} className="fb-chip" style={{ "--fc": fc }} title={`Besteed ${DIALS[k].name}-token (gereduceerd effect)`}
                            onClick={() => onSpendToken(inProgress.id, k)}>
                      {DIALS[k].short}
                    </button>
                  ))}
                </div>
              ) : null}
            </span>
          ) : activating ? (
            <span className="fb-main">Klaar om <b>{activating.name}</b> te activeren.</span>
          ) : (
            <span className="fb-main">Kies één van je schepen om te activeren ({myUnact.length} over).</span>
          )}
          {!inProgress && myUnact.length ? (
            <div className="fb-chips">
              {myUnact.map((s) => (
                <button key={s.id} className="fb-chip" data-sel={selected && selected.id === s.id} style={{ "--fc": fc }} onClick={() => onPick(s.id)}>
                  <ShipGlyph baseSize={s.baseSize} color={fc} size={14} /> {s.name}
                </button>
              ))}
            </div>
          ) : null}
        </div>
        <div className="fb-actions">
          {inProgress && inProgress.dialPending ? (
            <>
              <button className="btn btn-accent" onClick={() => onResolveDial(inProgress.id)}>Gebruik dial</button>
              <button className="btn" onClick={() => onStoreToken(inProgress.id)}>Bewaar als token</button>
            </>
          ) : inProgress ? (
            <>
              <button className="btn" disabled={inProgress.attacksMade >= 2} onClick={() => onAttack(inProgress.id)}>⚔ Aanval{inProgress.attacksMade > 0 ? ` ${inProgress.attacksMade}/2` : ""}</button>
              <button className="btn" onClick={() => onManeuver(inProgress.id)}>{maneuvering ? "✕ Stop" : "↪ Manoeuvre"}</button>
              <button className="btn btn-accent" onClick={() => onEndActivation(inProgress.id)}>Beëindig →</button>
            </>
          ) : activating ? (
            <button className="btn btn-accent btn-lg" onClick={() => onRevealDial(activating.id)}>Activeer — onthul dial</button>
          ) : null}
          {HelpBtn}
        </div>
      </div>
    );
  }

  if (phase === "squadron") {
    const unact = squadrons.filter((q) => !q.activated && !q.destroyed);
    const turn = g.sqTurn;
    const fc = turn ? FACTIONS[turn.faction].color : "var(--accent)";
    return (
      <div className="flow-banner" style={{ "--fc": fc }}>
        <div className="fb-text">
          <span className="fb-phase lbl" style={turn ? { color: fc } : null}>
            {turn ? <><FactionDot faction={turn.faction} /> Squadron-beurt: {FACTIONS[turn.faction].name}</> : `Squadron · Ronde ${round}`}
          </span>
          <span className="fb-main">
            {turn
              ? <>Nog <b>{turn.left}</b> activatie{turn.left !== 1 ? "s" : ""} deze beurt — tik een squadron, beweeg, rol de aanval en rond af. ({unact.length} totaal over)</>
              : (unact.length ? `${unact.length} squadron${unact.length !== 1 ? "s" : ""} over.` : "Geen squadrons meer — ga door.")}
          </span>
        </div>
        <div className="fb-actions">
          {turn ? <button className="btn" onClick={onPassSquadronTurn}>Pas beurt</button> : null}
          {unact.length ? <button className="btn btn-ghost" onClick={onResolveSquadrons} title="Alles in één keer activeren">Sla fase over</button> : null}
          {!unact.length ? <button className="btn btn-accent btn-lg" onClick={onResolveSquadrons}>Naar status-fase →</button> : null}
          {HelpBtn}
        </div>
      </div>
    );
  }

  if (phase === "status") {
    return (
      <div className="flow-banner">
        <div className="fb-text">
          <span className="fb-phase lbl">Status · Ronde {round}</span>
          <span className="fb-main">Ready tokens & dials. {round >= 6 ? "Laatste ronde — bepaal de eindstand." : "Initiatief wisselt naar de volgende ronde."}</span>
        </div>
        <button className="btn btn-accent btn-lg" onClick={onEndStatus}>{round >= 6 ? "Eindig het potje →" : `Naar ronde ${round + 1} →`}</button>
        {HelpBtn}
      </div>
    );
  }
  return null;
}

// punten voor factie f = objectiefpunten + vernietigde vijandige schepen + squadrons
function factionTotal(g, ships, squadrons, f) {
  const shipPts = ships.filter((s) => s.faction !== f && s.destroyed).reduce((n, s) => n + s.points, 0);
  const sqPts = (squadrons || []).filter((q) => q.faction !== f && q.destroyed).reduce((n, q) => n + (q.points || 0), 0);
  return (g.score[f] || 0) + shipPts + sqPts;
}

function ScorePanel({ g, sides, ships, squadrons, scenarioObj, onAddScore, onOpenObjectiveHelp }) {
  const shipSqPts = (f) => {
    const shipPts = ships.filter((s) => s.faction !== f && s.destroyed).reduce((n, s) => n + s.points, 0);
    const sqPts = (squadrons || []).filter((q) => q.faction !== f && q.destroyed).reduce((n, q) => n + (q.points || 0), 0);
    return shipPts + sqPts;
  };
  const reminder = scenarioObj ? (findObjectiveDetail(scenarioObj.id) || {}).end_of_game || scenarioObj.objective : "";
  return (
    <div className="score-panel">
      <div className="score-panel-head">
        <span className="lbl lbl-sm">Objectief-punten</span>
        {scenarioObj && onOpenObjectiveHelp ? (
          <button className="btn btn-ghost" style={{ height: 24, padding: "0 8px", fontSize: 10.5 }} onClick={onOpenObjectiveHelp}>Objectief-regels</button>
        ) : null}
      </div>
      {reminder ? <div className="score-reminder mono">{reminder}</div> : null}
      {sides.map((f) => (
        <div className="score-row" key={f} style={{ "--fc": FACTIONS[f].color }}>
          <FactionDot faction={f} />
          <span className="score-name">{FACTIONS[f].name}</span>
          {onAddScore ? (
            <span className="stepper score-stepper" style={{ marginLeft: "auto", marginRight: 8 }}>
              <button onClick={() => onAddScore(f, -5)} disabled={!(g.score[f] > 0)} title="−5">−5</button>
              <button onClick={() => onAddScore(f, -1)} disabled={!(g.score[f] > 0)} title="−1">−1</button>
              <div className="val"><span>{g.score[f] || 0}</span></div>
              <button onClick={() => onAddScore(f, 1)} title="+1">+1</button>
              <button onClick={() => onAddScore(f, 5)} title="+5">+5</button>
            </span>
          ) : null}
          <span className="score-pts mono" title={`Objectief ${g.score[f] || 0} + vloot ${shipSqPts(f)}`}>{factionTotal(g, ships, squadrons, f)}</span>
        </div>
      ))}
    </div>
  );
}

function LogPanel({ log }) {
  if (!log.length) return <div className="log-empty mono">Nog geen acties dit potje.</div>;
  return (
    <div className="log-list">
      {log.map((e) => (
        <div className="log-entry" key={e.id} data-kind={e.kind}>
          <span className="log-meta mono">R{e.round}·{PHASE_LABEL[e.phase].slice(0, 3)}</span>
          <span className="log-text">{e.text}</span>
        </div>
      ))}
    </div>
  );
}

function EndScreen({ g, sides, ships, squadrons, scenarioObj, onRestart, onSetup }) {
  const total = (f) => factionTotal(g, ships, squadrons, f);
  const objPts = (f) => g.score[f] || 0;
  const fleetPts = (f) => {
    const shipPts = ships.filter((s) => s.faction !== f && s.destroyed).reduce((n, s) => n + s.points, 0);
    const sqPts = (squadrons || []).filter((q) => q.faction !== f && q.destroyed).reduce((n, q) => n + (q.points || 0), 0);
    return shipPts + sqPts;
  };
  const ranked = [...sides].sort((a, b) => total(b) - total(a));
  const winner = ranked.length && total(ranked[0]) !== total(ranked[1] || ranked[0]) ? ranked[0] : null;
  const margin = ranked.length > 1 ? total(ranked[0]) - total(ranked[1]) : total(ranked[0] || null) || 0;
  const reminder = scenarioObj ? (findObjectiveDetail(scenarioObj.id) || {}).end_of_game || scenarioObj.objective : "";
  return (
    <div className="scrim">
      <div className="dialog end-dialog">
        <div className="end-head">
          <div className="end-eyebrow lbl">Potje afgelopen · 6 rondes</div>
          <h1>{winner ? <>Winnaar: <span style={{ color: FACTIONS[winner].color }}>{FACTIONS[winner].name}</span></> : "Gelijkspel"}</h1>
          {winner ? <div className="end-margin mono">Overwinningsmarge: {margin} punten</div> : null}
        </div>
        {reminder ? <div className="score-reminder mono" style={{ marginBottom: 12 }}>{reminder}</div> : null}
        <div className="end-scores">
          {ranked.map((f) => (
            <div className="end-score" key={f} style={{ "--fc": FACTIONS[f].color }} data-win={f === winner}>
              <FactionDot faction={f} size={12} />
              <span className="end-score-name">{FACTIONS[f].name}</span>
              <span className="end-score-breakdown mono">obj {objPts(f)} + vloot {fleetPts(f)}</span>
              <span className="end-score-pts mono">{total(f)}</span>
            </div>
          ))}
        </div>
        <div className="dialog-foot" style={{ justifyContent: "center" }}>
          <button className="btn btn-ghost" onClick={onSetup}>Nieuwe opstelling</button>
          <button className="btn btn-accent" onClick={onRestart}>Speel opnieuw</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PhaseRail, FlowBanner, ScorePanel, LogPanel, EndScreen });