/* ============================================================
   HOTSEAT BAR — brand, setup btn, scenario, player pills, round
   ============================================================ */
function HotseatBar({ sides, active, onActive, round, onRound, scenarioName, onSetup, phase, guided, onGuided, cpuFactions = [], coachOn, onCoach }) {
  // in begeleide modus regelt de fase-machine beurt & ronde — handmatig schakelen dan uit
  const flowLocked = guided && !!phase;
  const confirmRound = (r) => {
    if (flowLocked) return;
    if (window.confirm("Ronde handmatig wijzigen? Dials en activaties blijven staan.")) onRound(r);
  };
  return (
    <div className="hotseat">
      <div className="brand">
        <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>

      <button className="btn btn-ghost desktop-only" onClick={onSetup} title="Hoofdmenu">
        <svg width="14" height="14" viewBox="0 0 16 16"><path d="M2 4 H14 M2 8 H14 M2 12 H10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>
        Menu
      </button>

      {phase ? <div className="desktop-only" style={{ marginLeft: 4 }}><PhaseRail phase={phase} /></div> : null}

      {scenarioName ? (
        <div className="scenario-chip desktop-only">
          <span className="lbl lbl-sm">Scenario</span>
          <span className="sc-chip-name">{scenarioName}</span>
        </div>
      ) : null}

      <div className="hotseat-spacer" />

      <div className="player-pills">
        {sides.length === 0 ? (
          <span className="mono" style={{ fontSize: 11.5, color: "var(--text-faint)" }}>geen vloten</span>
        ) : sides.map((f) => (
          <button key={f} className="pill" data-active={active === f} disabled={flowLocked}
                  title={flowLocked ? "Wordt door de fasen geregeld — zet Begeleid uit om vrij te schakelen" : undefined}
                  style={{ "--fc": FACTIONS[f].color }} onClick={() => onActive(f)}>
            <span className="dot" /> {FACTIONS[f].name}{cpuFactions.includes(f) ? " 🖥" : ""}
          </button>
        ))}
      </div>

      {onGuided ? (
        <button className="guided-toggle desktop-only" data-on={guided} onClick={onGuided}
                title={guided ? "Begeleid aan — alleen relevante acties klikbaar" : "Begeleid uit — vrij klikken"}>
          <svg width="13" height="13" viewBox="0 0 16 16">{guided
            ? <path d="M5 8 V5.5 a3 3 0 0 1 6 0 V8 M3.5 8 H12.5 V14 H3.5 Z" fill="none" stroke="currentColor" strokeWidth="1.4"/>
            : <path d="M5 8 V5.5 a3 3 0 0 1 5.8 -1 M3.5 8 H12.5 V14 H3.5 Z" fill="none" stroke="currentColor" strokeWidth="1.4"/>}
          </svg>
          Begeleid
        </button>
      ) : null}

      {onCoach && guided ? (
        <button className="guided-toggle desktop-only" data-on={coachOn} onClick={onCoach}
                title={coachOn ? "Coach aan — stap-voor-stap begeleiding" : "Coach uit"}>
          <svg width="13" height="13" viewBox="0 0 16 16"><circle cx="8" cy="5" r="3" fill="none" stroke="currentColor" strokeWidth="1.4"/><path d="M3 14 c0 -3 2.2 -4.5 5 -4.5 s5 1.5 5 4.5" fill="none" stroke="currentColor" strokeWidth="1.4"/></svg>
          Coach
        </button>
      ) : null}

      <div className="round-box desktop-only" title={flowLocked ? "Wordt door de fasen geregeld — zet Begeleid uit om vrij te schakelen" : undefined}>
        <span className="lbl lbl-sm">Ronde</span>
        <button className="icon-btn" style={{ width: 28, height: 28, border: "none", background: "transparent" }}
                onClick={() => confirmRound(Math.max(1, round - 1))} disabled={flowLocked || round <= 1}>{"−"}</button>
        <span className="round-num">{round}</span>
        <button className="icon-btn" style={{ width: 28, height: 28, border: "none", background: "transparent" }}
                onClick={() => confirmRound(Math.min(6, round + 1))} disabled={flowLocked || round >= 6}>+</button>
      </div>
    </div>
  );
}

Object.assign(window, { HotseatBar });