/* RADAR1 — director console (below the program monitor) */

function CBtn({ active, onClick, children, wide = false, momentary = false, title }) {
  return (
    <button onClick={onClick} title={title} style={{
      appearance: "none", cursor: "pointer",
      height: 34, padding: wide ? "0 16px" : "0 12px",
      background: active ? "var(--radar-red)" : "var(--grey-800)",
      color: active ? "#fff" : "var(--text-body)",
      border: `1px solid ${active ? "var(--radar-red)" : "var(--border-soft)"}`,
      borderRadius: "var(--sweep-sm)",
      fontFamily: "var(--font-ui)", fontWeight: "var(--fw-bold)", fontSize: 12.5,
      letterSpacing: "var(--ls-wider)", textTransform: "uppercase", whiteSpace: "nowrap",
      transition: "background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out)",
    }}
      onMouseEnter={(e) => { if (!active) e.currentTarget.style.background = "var(--grey-700)"; }}
      onMouseLeave={(e) => { if (!active) e.currentTarget.style.background = "var(--grey-800)"; }}
    >{children}</button>
  );
}

function CGroup({ label, children }) {
  return (
    <div style={{ flex: "none", display: "flex", flexDirection: "column", gap: 8, padding: "0 18px", borderRight: "1px solid var(--border-hairline)" }}>
      <Eyebrow color="var(--text-faint)" style={{ fontSize: 10.5 }}>{label}</Eyebrow>
      <div style={{ display: "flex", gap: 6, flexWrap: "wrap", alignItems: "center", maxWidth: 460, whiteSpace: "nowrap" }}>{children}</div>
    </div>
  );
}

const L3_ORDER = ["story", "weather", "live", "analysis"];

/* cam cells are chroma holes — the preset just picks which locator/tz metadata dresses each slot */
const CAM_PRESETS = { 1: ["field"], 2: ["field", "presser"] };

function ControlStrip({ st, set, swapNow, playBreakout, nextSwapIn, breakout, scale, fit, setFit }) {
  const ins = st.insets;
  const setIns = (k, v) => set("insets", (prev) => ({ ...prev, [k]: v }));
  const mmss = (s) => `${String(Math.floor(s / 60)).padStart(2, "0")}:${String(s % 60).padStart(2, "0")}`;
  return (
    <div style={{
      flex: "none", display: "flex", alignItems: "stretch", gap: 0,
      background: "var(--grey-900)", borderTop: "2px solid var(--radar-red)",
      padding: "12px 6px 14px", overflowX: "auto", fontFamily: "var(--font-ui)",
    }}>
      <div style={{ display: "flex", flexDirection: "column", justifyContent: "center", gap: 4, padding: "0 18px", borderRight: "1px solid var(--border-hairline)" }}>
        <Eyebrow color="var(--text-body)" style={{ fontSize: 12 }}>PROGRAM</Eyebrow>
        <Eyebrow color="var(--text-faint)" style={{ fontSize: 10.5 }}>CONTROL</Eyebrow>
      </div>

      <CGroup label="Frame layout">
        <CBtn active={st.layout === "A"} onClick={() => st.layout !== "A" && swapNow("A")}>L + BOTTOM</CBtn>
        <CBtn active={st.layout === "B"} onClick={() => st.layout !== "B" && swapNow("B")}>TOP + R</CBtn>
        <CBtn active={st.auto} onClick={() => set("auto", !st.auto)} title="Auto-rotate layouts to prevent burn-in">
          AUTO {st.auto ? "· " + mmss(nextSwapIn) : "OFF"}
        </CBtn>
        <CBtn momentary onClick={() => swapNow()}>SWAP NOW</CBtn>
      </CGroup>

      <CGroup label="Mode">
        <CBtn active={st.mode === "normal"} onClick={() => set("mode", "normal")}>NORMAL</CBtn>
        <CBtn active={st.mode === "situation"} onClick={() => set("mode", "situation")}>SITUATION</CBtn>
      </CGroup>

      <CGroup label="Hero feed">
        <CBtn active={!st.tile && !st.boxes} onClick={() => { set("tile", null); set("boxes", 0); }} title="Clean chroma hole — live video keyed in downstream">CHROMA</CBtn>
        <CBtn active={st.boxes === 2} onClick={() => { set("tile", null); set("boxes", st.boxes === 2 ? 0 : 2); }}>2-BOX</CBtn>
        <CBtn active={st.boxes === 3} onClick={() => { set("tile", null); set("boxes", st.boxes === 3 ? 0 : 3); }}>3-BOX</CBtn>
      </CGroup>

      <CGroup label="Tile package">
        <CBtn active={!st.tile} onClick={() => set("tile", null)}>OFF</CBtn>
        {Object.entries(window.TILES).map(([k, v]) => (
          <CBtn key={k} active={st.tile === k} onClick={() => { set("boxes", 0); set("tile", k); }}>{v.label}</CBtn>
        ))}
      </CGroup>

      <CGroup label="Rail cams">
        <CBtn active={!(st.cams || []).length} onClick={() => set("cams", [])}>OFF</CBtn>
        <CBtn active={(st.cams || []).length === 1} onClick={() => set("cams", CAM_PRESETS[1])}>1</CBtn>
        <CBtn active={(st.cams || []).length === 2} onClick={() => set("cams", CAM_PRESETS[2])}>2</CBtn>
        {(st.cams || []).map((k, i) => (
          <CBtn key={"t-" + k} active={(st.camTimes || {})[k] !== false} title="Toggle the clock on this cam"
            onClick={() => set("camTimes", (p) => ({ ...(p || {}), [k]: (p || {})[k] === false }))}>
            CAM {i + 1} · TIME
          </CBtn>
        ))}
      </CGroup>

      <CGroup label="Rail widget">
        <CBtn active={st.countdown} onClick={() => set("countdown", !st.countdown)}>COUNTDOWN</CBtn>
      </CGroup>

      <CGroup label="Insets">
        <CBtn active={ins.l3} onClick={() => setIns("l3", !ins.l3)}>LOWER THIRD</CBtn>
        <CBtn active={false} onClick={() => set("l3Variant", L3_ORDER[(L3_ORDER.indexOf(st.l3Variant) + 1) % L3_ORDER.length])} title="Cycle lower-third style">
          L3 · {st.l3Variant}
        </CBtn>
        <CBtn active={ins.loc} onClick={() => setIns("loc", !ins.loc)}>LOCATION</CBtn>
        <CBtn active={ins.ots} onClick={() => setIns("ots", !ins.ots)}>OTS</CBtn>
        <CBtn active={ins.phone} onClick={() => setIns("phone", !ins.phone)}>PHONE</CBtn>
        <CBtn active={ins.map} onClick={() => setIns("map", !ins.map)}>MAP</CBtn>
        <CBtn active={ins.source} onClick={() => setIns("source", !ins.source)}>SOURCE</CBtn>
      </CGroup>

      <CGroup label="Breakouts">
        <CBtn active={breakout === "opener"} onClick={() => playBreakout("opener")}>OPENER</CBtn>
        <CBtn active={breakout === "bumper"} onClick={() => playBreakout("bumper")}>BUMPER</CBtn>
        <CBtn active={breakout === "stationid"} onClick={() => playBreakout("stationid")}>STATION ID</CBtn>
      </CGroup>

      <CGroup label="Clock">
        <CBtn active={st.h24} onClick={() => set("h24", true)}>24H</CBtn>
        <CBtn active={!st.h24} onClick={() => set("h24", false)}>12H</CBtn>
      </CGroup>

      <div style={{ flex: "none", display: "flex", flexDirection: "column", gap: 8, padding: "0 18px", marginLeft: "auto" }}>
        <Eyebrow color="var(--text-faint)" style={{ fontSize: 10.5 }}>MONITOR</Eyebrow>
        <div style={{ display: "flex", gap: 6, alignItems: "center", whiteSpace: "nowrap" }}>
          <span style={{ color: "var(--text-muted)", fontFamily: "var(--font-ui)", fontWeight: "var(--fw-semibold)", fontSize: 12.5, letterSpacing: "var(--ls-wider)", fontVariantNumeric: "tabular-nums" }}>
            1920×1080 · {Math.round(scale * 100)}%
          </span>
          <CBtn active={fit === "exact"} onClick={() => setFit(fit === "exact" ? "fit" : "exact")} title="Render at exact 1:1 pixels (scroll to pan)">1:1</CBtn>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ControlStrip, CBtn, CGroup });