/* ============================================================
   SHIP STATUS PANEL — live state of selected ship
   ============================================================ */
function SecHead({ children, accent, right }) {
  return (
    <div className="sec-head">
      {accent !== false ? <span className="sec-accent" /> : null}
      <span className="lbl">{children}</span>
      {right ? <><span className="sec-head-spacer" />{right}</> : null}
    </div>
  );
}

function ShipPanel({ ship, maneuvering, phase, activeFaction, guided, cpuControlled, onUpdate, onRotate, onRemove, onCycleToken, onFillDefaults, onManeuver, onEditStats, onAttack, onSpendEng }) {
  if (!ship) {
    return (
      <div className="empty-state">
        <div className="es-icon">
          <svg width="20" height="20" viewBox="0 0 22 22"><path d="M11 3 L18 19 L11 15 L4 19 Z" fill="none" stroke="currentColor" strokeWidth="1.3"/></svg>
        </div>
        <div className="es-title">Geen schip geselecteerd</div>
        <div className="es-sub">Tik een schip op het bord of in het roster om de status te bekijken en aan te passen.</div>
      </div>
    );
  }
  const fc = FACTIONS[ship.faction].color;
  const setShield = (arc, v) => onUpdate(ship.id, { shields: { ...ship.shields, [arc]: v } });
  const isActiveSide = phase === "ship" && ship.faction === activeFaction;
  const revealed = ship.revealedDial;
  // begeleide modus: alleen het actieve (gecommitte) schip is bestuurbaar; vrije modus = sandbox
  // een door de CPU bestuurd schip is nooit door de mens bewerkbaar
  const editable = !cpuControlled && (!guided || (phase === "ship" && ship.activationStarted && !ship.activated));

  return (
    <div style={{ "--fc": fc }}>
      <div className="sec-head" style={{ "--sec-accent": fc }}>
        <span className="sec-accent" style={{ background: fc }} />
        <div style={{ minWidth: 0, flex: 1 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
            <span style={{ color: fc, display: "grid", placeItems: "center" }}><ShipGlyph baseSize={ship.baseSize} color={fc} size={16} /></span>
            <span className="lbl" style={{ color: "var(--text)", fontSize: 13, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{ship.name}</span>
            {ship.critical ? <span className="crit-flag" title="Critical opgelopen">✦</span> : null}
            {ship.activated ? <span className="act-flag mono">geact.</span> : null}
          </div>
          <div className="mono" style={{ fontSize: 10.5, color: "var(--text-faint)", marginTop: 2 }}>
            {FACTIONS[ship.faction].name} · {BASE_SIZES[ship.baseSize].name} · {ship.points} pts
          </div>
        </div>
        <button className="icon-btn" title="Stats bewerken" onClick={() => onEditStats && onEditStats(ship.id)}>
          <svg width="15" height="15" viewBox="0 0 16 16"><path d="M3 11 L11 3 L13 5 L5 13 L2 14 Z" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round"/></svg>
        </button>
        <button className="icon-btn btn-danger" title="Verwijder schip" onClick={() => onRemove(ship.id)} style={{ color: "var(--bad)", borderColor: "color-mix(in oklab, var(--bad), transparent 55%)" }}>
          <svg width="15" height="15" viewBox="0 0 16 16"><path d="M3 4 H13 M6.5 4 V2.5 H9.5 V4 M4.5 4 L5 13.5 H11 L11.5 4" fill="none" stroke="currentColor" strokeWidth="1.3"/></svg>
        </button>
      </div>

      {/* ACTIVATION / COMMAND */}
      {phase === "ship" || ship.commandQueue.length || revealed || (ship.commandTokens && ship.commandTokens.length) ? (
        <div className="activation-block" data-active={isActiveSide}>
          <div className="ab-row">
            <span className="lbl">Command dials</span>
            <span className="ab-queue mono">
              {ship.commandQueue.length ? ship.commandQueue.map((d, i) => (
                <span key={i} className="ab-dial" data-next={i === 0}>{DIALS[d].short}</span>
              )) : <span style={{ color: "var(--text-faint)" }}>geen gepland</span>}
            </span>
          </div>
          {ship.commandTokens && ship.commandTokens.length ? (
            <div className="ab-row">
              <span className="lbl">Command tokens</span>
              <span className="ab-queue mono" title="Bewaarde dials (gereduceerd effect) — cap = command-waarde">
                {ship.commandTokens.map((k, i) => <span key={i} className="ab-dial">{DIALS[k].short}</span>)}
                <span style={{ color: "var(--text-faint)", marginLeft: 4 }}>({ship.commandTokens.length}/{ship.command})</span>
              </span>
            </div>
          ) : null}
          {revealed ? (
            <div className="ab-revealed" style={{ "--fc": fc }}>
              <span className="ab-revealed-dial">{DIALS[revealed].name}{ship.dialPending ? " — kies: gebruiken of bewaren" : ""}</span>
              <span className="ab-revealed-desc">{DIALS[revealed].desc}</span>
            </div>
          ) : null}
          {revealed === "repair" && ship.engineeringPts > 0 ? (
            <div className="ab-eng">
              <span className="lbl lbl-sm">Engineering: <b className="mono">{ship.engineeringPts}</b></span>
              <div className="ab-eng-btns">
                <button className="btn btn-sq" style={{ width: "auto", padding: "0 9px", height: 28 }} disabled={ship.engineeringPts < 2 || ship.hull >= ship.maxHull} onClick={() => onSpendEng(ship.id, "hull")}>+1 hull (2)</button>
                {ARCS.map((a) => (
                  <button key={a} className="btn btn-sq" style={{ width: "auto", padding: "0 8px", height: 28 }} disabled={ship.shields[a] >= ship.maxShields[a]} onClick={() => onSpendEng(ship.id, "shield", a)}>+{ARC_LABEL[a][0]} (1)</button>
                ))}
              </div>
            </div>
          ) : null}
          {isActiveSide ? (
            <button className="btn btn-accent" style={{ width: "100%", marginTop: 8 }}
                    disabled={!ship.attackDice || ship.attacksMade >= 2 || ship.dialPending || (guided && !(ship.activationStarted && !ship.activated))}
                    title={ship.dialPending ? "Kies eerst: gebruik dial of bewaar als token" : (guided && !(ship.activationStarted && !ship.activated) ? "Onthul eerst de dial" : undefined)}
                    onClick={() => onAttack(ship.id)}>
              ⚔ Aanval{ship.attacksMade > 0 ? ` (${ship.attacksMade}/2)` : ""}
            </button>
          ) : null}
        </div>
      ) : null}

      <div className="sec-body">
        {ship.statsMissing ? (
          <div className="import-error" style={{ display: "flex", alignItems: "center", gap: 9, justifyContent: "space-between" }}>
            <span>Stats ontbreken — ingevuld op nul.</span>
            <button className="btn btn-sq" style={{ height: 26, width: "auto", padding: "0 8px", fontSize: 10 }} onClick={() => onFillDefaults(ship.id)}>Defaults</button>
          </div>
        ) : null}

        {!editable ? (
          <div className="mono" style={{ fontSize: 11, color: "var(--text-faint)", marginBottom: 8 }}>Activeer dit schip om het te besturen.</div>
        ) : null}

        {/* HULL */}
        <div className="stat-row">
          <div className="stat-label"><span className="lbl">Hull</span><span className="stat-sub">romp-integriteit</span></div>
          <Stepper value={ship.hull} min={0} max={Math.max(ship.maxHull, ship.hull)} showMax={ship.maxHull} disabled={!editable}
                   onChange={(v) => onUpdate(ship.id, { hull: v })} />
        </div>
      </div>

      {/* SHIELDS */}
      <div className="panel-sec">
        <SecHead>Shields per arc</SecHead>
        <div className="sec-body" style={{ paddingTop: 4 }}>
          <div className="shield-grid">
            {ARCS.map((arc) => (
              <div className="shield-cell" key={arc}>
                <span className="lbl" style={{ color: fc }}><ArcSwatch arc={arc} />{ARC_LABEL[arc]}</span>
                <Stepper value={ship.shields[arc]} min={0} max={Math.max(ship.maxShields[arc], ship.shields[arc])}
                         showMax={ship.maxShields[arc]} disabled={!editable} onChange={(v) => setShield(arc, v)} />
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* DEFENSE TOKENS */}
      <div className="panel-sec">
        <SecHead right={<span className="mono" style={{ fontSize: 10, color: "var(--text-faint)" }}>tik = ready→exh→disc</span>}>Defense tokens</SecHead>
        <div className="sec-body" style={{ paddingTop: 4 }}>
          {ship.defenseTokens.length ? (
            <div className="dtok-row">
              {ship.defenseTokens.map((dt) => (
                <button className="dtok" key={dt.id} data-state={dt.state} disabled={!editable} title={TOKEN_EFFECT[dt.type]} onClick={() => onCycleToken(ship.id, dt.id)}>
                  <span className="dtok-ico"><DefTokenIcon type={dt.type} /></span>{dt.type}
                </button>
              ))}
            </div>
          ) : <div className="mono" style={{ fontSize: 11.5, color: "var(--text-faint)" }}>Geen defense tokens.</div>}
        </div>
      </div>

      {/* MANEUVER */}
      <div className="panel-sec">
        <SecHead>Facing &amp; manoeuvre</SecHead>
        <div className="sec-body" style={{ paddingTop: 4 }}>
          <div className="facing-row">
            <div className="facing-dial">
              <div className="needle" style={{ transform: `translate(-50%,-100%) rotate(${ship.facing}deg)` }} />
              <div className="deg">{ship.facing}°</div>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 8, flex: 1 }}>
              <div style={{ display: "flex", gap: 7 }}>
                <button className="btn btn-ghost" style={{ flex: 1 }} disabled={!editable} onClick={() => onRotate(ship.id, -45)}>
                  <svg width="15" height="15" viewBox="0 0 16 16"><path d="M11 3 A5.5 5.5 0 1 1 5 4" fill="none" stroke="currentColor" strokeWidth="1.4"/><path d="M3 1 L5.5 4.5 L1.5 5 Z" fill="currentColor"/></svg>
                  45°
                </button>
                <button className="btn btn-ghost" style={{ flex: 1 }} disabled={!editable} onClick={() => onRotate(ship.id, 45)}>
                  45°
                  <svg width="15" height="15" viewBox="0 0 16 16"><path d="M5 3 A5.5 5.5 0 1 0 11 4" fill="none" stroke="currentColor" strokeWidth="1.4"/><path d="M13 1 L10.5 4.5 L14.5 5 Z" fill="currentColor"/></svg>
                </button>
              </div>
              <div className="stat-row" style={{ margin: 0 }}>
                <div className="stat-label"><span className="lbl">Speed</span>{phase === "ship" ? <span className="stat-sub">via Navigate of manoeuvre</span> : null}</div>
                <Stepper value={ship.speed} min={0} max={4} disabled={!editable} onChange={(v) => onUpdate(ship.id, { speed: v })} />
              </div>
            </div>
          </div>
          <button className={"btn btn-lg" + (maneuvering ? " btn-danger" : " btn-accent")} style={{ width: "100%", marginTop: 12 }}
                  disabled={!editable} title={!editable ? "Activeer eerst dit schip" : undefined}
                  onClick={() => onManeuver(ship.id)}>
            {maneuvering ? "✕ Stop manoeuvre" : (
              <>
                <svg width="16" height="16" viewBox="0 0 16 16"><path d="M3 13 Q3 6 8 6 Q13 6 13 3" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/><path d="M13 6 L13 3 L10 3" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/><circle cx="3" cy="13" r="1.6" fill="currentColor"/></svg>
                Plan manoeuvre
              </>
            )}
          </button>
        </div>
      </div>

      {/* SCHADE (CRIT) — face-up schadekaarten getrokken bij een critical, blijven tot het schip vernietigd is */}
      {ship.critCards && ship.critCards.length ? (
        <div className="panel-sec">
          <SecHead right={<span className="mono" style={{ fontSize: 10, color: "var(--text-faint)" }}>{ship.critCards.length} kaart{ship.critCards.length === 1 ? "" : "en"}</span>}>Schade (crit)</SecHead>
          <div className="sec-body" style={{ paddingTop: 4, display: "flex", flexDirection: "column", gap: 8 }}>
            {ship.critCards.map((c, i) => (
              <div className="up-mini" key={c.effect_id ? c.effect_id + i : i} style={{ borderColor: "color-mix(in oklab, var(--bad), transparent 55%)" }}>
                <div className="up-mini-head">
                  <span className="up-mini-name" style={{ color: "var(--bad)" }}>{c.title}</span>
                  {c.trait ? <span className="mono up-mini-slot">{c.trait}</span> : null}
                </div>
                {c.effect_text ? <div className="up-mini-note">{c.effect_text}</div> : null}
              </div>
            ))}
          </div>
        </div>
      ) : null}

      {/* UPGRADES */}
      {ship.upgrades && ship.upgrades.length ? (
        <div className="panel-sec">
          <SecHead>Upgrades</SecHead>
          <div className="sec-body" style={{ paddingTop: 4 }}>
            {ship.upgrades.map((u, i) => (
              <div className="up-mini" key={u.id || i}>
                <div className="up-mini-head">
                  <span className="up-mini-name">{u.name}{u.unique ? " ◆" : ""}</span>
                  {u.slot ? <span className="mono up-mini-slot">{SLOT_LABEL[u.slot] || u.slot}</span> : null}
                  <span className="mono up-mini-pts">{u.points}</span>
                </div>
                {u.note ? <div className="up-mini-note">{u.note}</div> : null}
              </div>
            ))}
          </div>
        </div>
      ) : null}

      {/* ACTIEVE UPGRADE-EFFECTEN (mechanisch geïmplementeerd) */}
      {(() => {
        const activeFx = activeUpgradeEffects(ship);
        return activeFx.length ? (
          <div className="panel-sec">
            <SecHead>Actieve upgrade-effecten</SecHead>
            <div className="sec-body" style={{ paddingTop: 4 }}>
              {activeFx.map((fx) => (
                <div className="up-mini" key={fx.id}>
                  <div className="up-mini-head">
                    <span className="up-mini-name">{fx.name}</span>
                  </div>
                  <div className="up-mini-note">{fx.effect}</div>
                </div>
              ))}
            </div>
          </div>
        ) : null;
      })()}

      {/* COMMAND */}
      <div className="panel-sec">
        <div className="sec-body">
          <div className="stat-row" style={{ margin: 0 }}>
            <div className="stat-label"><span className="lbl">Command value</span><span className="stat-sub">aantal command dials</span></div>
            <Stepper value={ship.command} min={1} max={4} disabled={!editable} onChange={(v) => onUpdate(ship.id, { command: v })} />
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ShipPanel, SecHead });