// Display control for the LED ticker (spec v2). Mobile-first: big targets, high contrast,
// live preview, auto-send with "applied on the panel" confirmation.
// Used inside ProfileModal (Display tab) and standalone at /display (display.html).
(function () {
const DC = window.DisplaySpec;

const DC_CSS = `
.dc{--dc-bg:#0b0d12;--dc-card:#151923;--dc-line:#2a3142;--dc-fg:#f4f6fb;--dc-mute:#a9b3c7;--dc-ok:#22c55e;--dc-warn:#fbbf24;--dc-bad:#f87171;--dc-acc:#7cc4ff;
 color:var(--dc-fg);background:var(--dc-bg);font:16px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%}
.dc *{box-sizing:border-box}
.dc{max-width:100%;min-width:0;overflow-wrap:break-word}
@supports (overflow:clip){.dc{overflow-x:clip}}
.dc img,.dc canvas,.dc video{max-width:100%}
.dc img:not(.dc-canvas),.dc video{height:auto}
.dc input,.dc select,.dc textarea,.dc button{max-width:100%;min-width:0}
.dc-status{position:sticky;top:0;z-index:5;padding:10px 12px;border-bottom:2px solid var(--dc-line);background:#05070b;display:grid;grid-template-columns:minmax(0,1fr);gap:4px}
.dc-status>*{min-width:0}
.dc-status-row{display:flex;align-items:center;gap:8px;font-weight:700;font-size:17px}
.dc-dot{width:14px;height:14px;border-radius:50%;flex:0 0 14px}
.dc-sub{font-size:14px;color:var(--dc-mute)}
.dc-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:20px;line-height:20px}
.dc-status-row{min-height:24px}.dc-status-row>.dc-line{flex:1;min-width:0;line-height:24px}
.dc-err{color:#fff;background:#7f1d1d;border:2px solid var(--dc-bad);border-radius:10px;padding:8px 10px;font-size:15px;font-weight:600}
.dc-okbox{color:#04130a;background:var(--dc-ok);border-radius:10px;padding:8px 10px;font-size:16px;font-weight:800}
.dc-body{padding:12px;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;max-width:640px;margin:0 auto}
.dc-card{background:var(--dc-card);border:1px solid var(--dc-line);border-radius:14px;padding:12px;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.dc-h{font-size:18px;font-weight:800;margin:0}
.dc-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.dc-row>*{min-width:0}
.dc-btn{min-height:48px;padding:10px 14px;border-radius:12px;border:2px solid var(--dc-line);background:#222838;color:var(--dc-fg);font-size:16px;font-weight:700;cursor:pointer;touch-action:manipulation}
.dc-btn:active{transform:scale(.98)}
.dc-btn[disabled]{opacity:.45}
.dc-btn.big{width:100%;min-height:56px;font-size:19px}
.dc-btn.go{background:#16a34a;border-color:#22c55e;color:#fff}
.dc-btn.on{background:#1d4ed8;border-color:#60a5fa;color:#fff}
.dc-btn.danger{background:#3b0d0d;border-color:#b91c1c;color:#fecaca}
.dc-btn.sm{min-height:44px;min-width:44px;padding:6px 10px;font-size:15px}
.dc-tabs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}.dc-tabs>*{min-width:0}
.dc-tabs5{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.dc-tabs5 .dc-btn{padding:10px 4px;min-height:48px}
.dc-tabs5 .dc-lp-inherit{grid-column:1/-1}
.dc-lp{display:grid;gap:6px;font-weight:700;font-size:15px}.dc-lp .dc-sub{font-weight:400}.dc-lp.gated>span{opacity:.7}
.dc-lp-wrap{display:grid;gap:4px}
.dc-today{display:grid;gap:4px;min-width:0}.dc-today.gated .dc-check{opacity:.6}
.dc-check{display:flex;align-items:flex-start;gap:10px;min-height:48px;padding:10px 12px;border-radius:12px;border:2px solid var(--dc-line);background:#1b2030;font-weight:700;font-size:16px;cursor:pointer;min-width:0}
.dc-check input{width:22px;height:22px;flex:0 0 auto;margin:1px 0 0}.dc-check>span{display:grid;gap:2px;min-width:0}.dc-check .dc-sub{font-weight:500}
.dc-anim{display:grid;gap:8px;min-width:0}.dc-anim.gated .dc-toggle{opacity:.6;cursor:not-allowed}.dc-anim select{min-width:0;max-width:100%}
.dc-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:52px;padding:10px 12px;border-radius:12px;border:2px solid var(--dc-line);background:#1b2030;color:var(--dc-fg);font-size:16px;font-weight:700;text-align:left;min-width:0;gap:8px}.dc-toggle>*{min-width:0}.dc-toggle>.dc-pill{flex:0 0 auto}
.dc-auto{border-radius:12px;padding:10px 12px;border:2px solid var(--dc-line);background:#141a28;display:grid;gap:6px}
.dc-auto.on{border-color:var(--dc-ok)}
.dc-auto-h{font-size:15px;line-height:1.35}
.dc-auto-chips{display:flex;flex-wrap:wrap;gap:6px}
.dc-chip{padding:4px 10px;border-radius:999px;background:#25304a;font-size:13px;font-weight:700}
.dc-dim{opacity:.55;transition:opacity .15s}.dc-dim:focus-within,.dc-dim:hover{opacity:.85}
.dc-pill{min-width:64px;text-align:center;padding:6px 10px;border-radius:999px;font-weight:800;font-size:15px}
.dc-pill.on{background:var(--dc-ok);color:#04130a}.dc-pill.off{background:#3a4152;color:#e5e7eb}
.dc input[type=text],.dc input[type=time],.dc input[type=number],.dc input[type=password],.dc select,.dc textarea{width:100%;min-height:48px;padding:10px 12px;border-radius:10px;border:2px solid var(--dc-line);background:#0d1018;color:var(--dc-fg);font-size:16px}
.dc textarea{font-family:ui-monospace,Menlo,monospace;font-size:16px}
.dc input[type=range]{width:100%;height:36px;accent-color:#60a5fa}
.dc input[type=color]{width:52px;height:44px;border:2px solid var(--dc-line);border-radius:10px;background:none;padding:2px}
.dc div.dc-l{min-width:0}
.dc label.dc-l{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;font-weight:700;font-size:15px}
.dc-presets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.dc-preset{min-height:64px;border-radius:12px;border:3px solid transparent;font-weight:800;font-size:16px;cursor:pointer;padding:6px}
.dc-colors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.dc-color{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;min-width:0}.dc-color>*{min-width:0}
.dc-page{border:2px solid var(--dc-line);border-radius:12px;padding:10px;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;background:#11151f}
.dc-page.offp{opacity:.6}
.dc-page-head{display:flex;align-items:center;gap:6px;min-width:0}.dc-page-head>.dc-btn{flex:0 0 auto}
.dc-page-name{flex:1;font-weight:800;font-size:16px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc-canvas-wrap{background:#000;border-radius:12px;padding:8px;border:2px solid #333}
.dc-canvas{width:100%;max-width:100%;image-rendering:pixelated;image-rendering:crisp-edges;display:block;border-radius:4px}
.dc-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;min-width:0}
.dc-chip{max-width:100%;min-height:44px;padding:8px 14px;border-radius:22px;border:2px solid var(--dc-line);background:#11151f;color:#cfd6e4;font-weight:800;font-size:15px;cursor:pointer}
.dc-chip.on{background:#1f7a4d;border-color:#5cffac;color:#fff}
.dc-mono{font-family:ui-monospace,Menlo,monospace}
.dc-grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
/* two ON/OFF toggles side by side leave too little room for the label on a phone (Sora is wide), which broke "Reactio/ns": stack them */
@media (max-width:520px){.dc-grid2:has(>.dc-toggle){grid-template-columns:minmax(0,1fr)}}
.dc-panel-grid{display:grid;gap:6px}
.dc-panel-cell{display:grid;gap:4px;padding:6px;border:2px dashed var(--dc-line);border-radius:10px;background:#0d1018;min-width:0}
`;

// PANEL_W x PANEL_H = the logical screen drawPanel draws: 128x64 for one panel, wider/taller for a multi-panel
// wall (DC.panelsLogical: wide*128/scale x tall*64/scale, the same canvas the Pi's renderer lays out).
let PANEL_W = 128, PANEL_H = 64;
const HEADER_H = 12, FOOTER_H = 11;
const MOCK = {
  wagers: [["ROOSRER", "KC -3.5", "$50"], ["BILL", "NYY ML", "$20"], ["JAY", "O 47.5", "$25"], ["MIKE", "LAL +4", "$40"], ["SAM", "DAL ML", "$10"]],
  games: [{ head: "Bills @ Chiefs", bets: [["ROOSRER", "KC -3.5", "$50"], ["JAY", "O 47.5", "$25"]] },
          { head: "Red Sox @ Yankees", bets: [["BILL", "NYY ML", "$20"]] }, { head: "Lakers @ Celtics", bets: [["MIKE", "LAL +4", "$40"]] }],
  balances: [["ROOSRER", "+420", 1, "T +45  |  1 OPEN $50  |  Y +1.1k", 1, 0], ["BILL", "-85", -1, "T -20  |  Y -300", -1, 1],
             ["JAY", "+1.2k", 1, "T +0  |  Y +2.0k", 0, 2], ["MIKE", "-300", -1, "T +0  |  1 OPEN $40  |  Y -650", 0, 3]],
  results: [["KC 27 BUF 24", "ROOSRER WON +45", 1], ["NYY 3 BOS 5", "BILL LOST -20", -1], ["DAL 20 PHI 20", "JAY PUSH", 0]],
  reactions: ["BILL: NICE HIT", "JAY: LOL", "MIKE: PAY UP"],
  movers: ["ROOSRER +45 ▲"],
  live: false,
};

function dcApiBase(explicit) {
  // On a Blackbook SPA host (kinjar or app.bragwire.com) always use the same-origin proxy; else the explicit base.
  if (typeof window !== "undefined" && window.BBHosts) {
    const via = window.BBHosts.defaultApiBase(typeof location !== "undefined" ? location : null, typeof localStorage !== "undefined" ? localStorage : null);
    if (via === "/api/bb") return via;
  } else {
    const h = (typeof location !== "undefined" && location.hostname) || "";
    if (/blackbook/i.test(h) || h === "app.bragwire.com") return "/api/bb";
  }
  if (explicit) return String(explicit).replace(/\/$/, "");
  const saved = (typeof localStorage !== "undefined" && localStorage.getItem("bb_api_base")) || "";
  const fallback = (typeof window !== "undefined" && window.BBHosts && window.BBHosts.DEFAULT_REMOTE_API) || "https://api.blackbook.kinjar.com";
  return (saved || fallback).replace(/\/$/, "");
}

// ------------------------------------------------------------------ preview
function drawPanel(ctx, spec, defaults, t, now, popup, data) {
  const D = data || MOCK;
  const lsz = DC.panelsLogical(spec);
  PANEL_W = lsz.w; PANEL_H = lsz.h;
  ctx.imageSmoothingEnabled = false;
  const pages = DC.enabledPages(spec);
  const hdr = spec.header || {}, ftr = spec.footer || {};
  // same geometry as the Pi renderer's _layout(): ticker / title bar each top or bottom; on a shared edge the
  // title bar sits nearest the edge and the ticker next to the content
  const bands = DC.layoutBands(spec, PANEL_H);
  const hOn = !!bands.title, fOn = !!bands.ticker;
  const top = bands.top, bot = bands.bot;
  const mh = bot - top + 1;
  const font = (px) => `bold ${px}px "DejaVu Sans", Verdana, sans-serif`;
  const theme = DC.themeColors(spec, defaults);
  const off = DC.sleeping(spec, now);
  ctx.clearRect(0, 0, PANEL_W, PANEL_H);
  if (off || !pages.length) {
    ctx.fillStyle = "#000"; ctx.fillRect(0, 0, PANEL_W, PANEL_H);
    ctx.fillStyle = "#444"; ctx.font = font(9); ctx.textAlign = "center";
    ctx.fillText(spec.enabled === false ? "DISPLAY OFF" : "SLEEPING", PANEL_W / 2, Math.round(PANEL_H / 2) + 4); ctx.textAlign = "left";
    return { page: null, label: spec.enabled === false ? "Display off" : "Sleeping (schedule)" };
  }
  if (popup) return drawGamePopup(ctx, popup, theme, font, now);
  // per-page content size (px) for timing
  const gamesH = () => (D.games || []).reduce((a, g, i) => a + (i ? 2 : 0) + 13 + g.bets.length * 10, 0);
  const graph = (p) => p.type === "trend" ? DC.trendSeries(D.board || MOCK_BOARD, p.days || 30, p.limit || 6)
    : p.type === "pnl" ? DC.pnlRows(D.board || MOCK_BOARD, p.metric || "ytd", p.limit || 12) : null;
  const rowsOf = (p) => p.type === "wagers" ? (D.games ? gamesH() : D.wagers.length * 10) : p.type === "ticker" ? D.wagers.length * 10
    : p.type === "trend" ? mh + 2 + graph(p).series.length * 10 : p.type === "pnl" ? graph(p).length * 10 + 1
    : p.type === "balances" ? D.balances.length * 20 : (p.type === "results" || p.type === "scores") ? D.results.length * 18
    : p.type === "reactions" ? Math.min(p.limit || 8, D.reactions.length) * 10 : 0;
  ctx.font = font(Number(13));
  const marqW = (p) => { ctx.font = font(Math.min(24, p.size || 16)); return ctx.measureText(DC.renderTemplate(p.text || p.title || "", fieldsFor(spec, p, now))).width; };
  // trend style "each" (2.0.22, renderer.build_trend): one still page per bettor, each held for `hold`, never scrolled
  const trendEach = (p) => p.type === "trend" && DC.trendStyleOf(p) === "each";
  const durs = pages.map((p) => p.type === "marquee" ? DC.pageDuration(p, marqW(p), PANEL_W)
    : trendEach(p) ? Math.max(1, graph(p).series.length) * (Number(p.hold) || 2.2) : DC.pageDuration(p, rowsOf(p), mh));
  const { index, elapsed } = DC.pageAt(durs, t);
  const page = pages[index];
  const c = DC.pageColors(spec, page, defaults);
  ctx.fillStyle = c.background; ctx.fillRect(0, 0, PANEL_W, PANEL_H);
  // content
  ctx.save(); ctx.beginPath(); ctx.rect(0, top, PANEL_W, mh); ctx.clip();
  const hold = Number(page.hold) || 2.2;
  const scrollY = (contentPx) => {
    const over = Math.max(0, contentPx - mh);
    if (!over) return 0;
    const s = elapsed - hold;
    if (s <= 0) return 0;
    return Math.min(over, s * DC.scrollPxPerSec(page.speed));
  };
  const f = fieldsFor(spec, page, now);
  ctx.textBaseline = "alphabetic";
  const empty = (msg) => { ctx.font = font(9); ctx.fillStyle = c.dim; ctx.fillText(msg, 6, top + 20); };
  const emptyMsg = { wagers: "NO OPEN WAGERS", ticker: "NO OPEN WAGERS", balances: "NO ACTIVE PLAYERS",
                     results: "NO RESULTS YET", scores: "NO RESULTS YET", reactions: "NO REACTIONS" }[page.type];
  const list = { wagers: D.wagers, ticker: D.wagers, balances: D.balances, results: D.results, scores: D.results, reactions: D.reactions }[page.type];
  if (emptyMsg && !(list && list.length)) empty(emptyMsg);
  if (page.type === "wagers" && D.games) {
    // team-name row per game (colors.group_bg / group_text; unset = the stock dark row), bets below, no stripes
    let y = top - scrollY(rowsOf(page));
    D.games.forEach((g, gi) => {
      if (gi) y += 2;
      ctx.fillStyle = c.group_bg || DC.OPTIONAL_COLOR_STOCK.group_bg; ctx.fillRect(0, y, PANEL_W, 13);
      ctx.font = font(8); ctx.fillStyle = c.group_text || c.text; ctx.fillText(g.head, 4, y + 10);
      y += 13;
      g.bets.forEach((r) => {
        ctx.font = font(8); ctx.fillStyle = c.accent; ctx.fillText(r[0].slice(0, 9), 2, y + 8);
        ctx.fillStyle = c.pending; ctx.textAlign = "right"; ctx.fillText(r[2], PANEL_W - 2, y + 8);
        const sw = ctx.measureText(r[2]).width;
        ctx.fillStyle = c.text; ctx.fillText(r[1], PANEL_W - 6 - sw, y + 8); ctx.textAlign = "left";
        y += 10;
      });
    });
  } else if (page.type === "trend") {
    const { series } = graph(page);
    const y0 = top - scrollY(rowsOf(page));
    if (!series.length) empty("NO TREND DATA");
    else if (trendEach(page)) {
      // like the Pi: name (bettor colour) left, "<n>D change" (dim) + balance right on top, the line on its own scale below
      const { days } = graph(page);
      const sr = series[Math.min(series.length - 1, Math.floor(elapsed / hold))];
      const col = USER_COLORS[sr.index % USER_COLORS.length];
      ctx.font = font(8); ctx.textAlign = "right";
      const bs = DC.piCompact(sr.balance), bw = ctx.measureText(bs).width;
      ctx.fillStyle = sr.balance >= 0 ? c.win : c.loss; ctx.fillText(bs, PANEL_W - 2, top + 8);
      ctx.font = font(7); ctx.fillStyle = c.dim; const ch = `${days.length}D ${DC.piCompact(sr.change)}`;
      ctx.fillText(ch, PANEL_W - bw - 6, top + 8); const cw = ctx.measureText(ch).width; ctx.textAlign = "left";
      ctx.font = font(8); ctx.fillStyle = col;
      let name = String(sr.handle).toUpperCase();
      while (name.length > 1 && ctx.measureText(name).width > PANEL_W - bw - cw - 12) name = name.slice(0, -1);
      ctx.fillText(name, 2, top + 8);
      let lo = Math.min(...sr.values), hi = Math.max(...sr.values);
      if (hi - lo < 1) { lo -= 1; hi += 1; }
      const gt = top + 11, gb = top + mh - 2;
      const yOf = (v) => Math.max(gt, Math.min(gb, Math.round(gb - (v - lo) / (hi - lo) * (gb - gt))));
      if (lo < 0 && hi > 0) { ctx.fillStyle = c.dim; for (let x = 2; x <= PANEL_W - 3; x += 3) ctx.fillRect(x, yOf(0), 1, 1); }
      ctx.strokeStyle = col; ctx.lineWidth = 1; ctx.beginPath();
      const vs = sr.values.length > 1 ? sr.values : [sr.values[0], sr.values[0]];
      vs.forEach((v, k) => { const x = 2 + (PANEL_W - 5) * k / (vs.length - 1); k ? ctx.lineTo(x, yOf(v)) : ctx.moveTo(x, yOf(v)); });
      ctx.stroke();
    } else {
      const all = [].concat(...series.map((x) => x.values));
      const lo = Math.min(0, ...all), hi = Math.max(0, ...all), span = (hi - lo) || 1;
      const yOf = (v) => y0 + 2 + (mh - 5) * (1 - (v - lo) / span);
      ctx.fillStyle = c.dim; ctx.fillRect(0, Math.round(yOf(0)), PANEL_W, 1);
      series.forEach((sr) => {
        ctx.strokeStyle = USER_COLORS[sr.index % USER_COLORS.length]; ctx.lineWidth = 1; ctx.beginPath();
        sr.values.forEach((v, k) => { const x = 2 + (PANEL_W - 4) * (sr.values.length > 1 ? k / (sr.values.length - 1) : 1); k ? ctx.lineTo(x, yOf(v)) : ctx.moveTo(x, yOf(v)); });
        ctx.stroke();
      });
      series.forEach((sr, k) => {
        const y = y0 + mh + 2 + k * 10;
        ctx.font = font(8); ctx.fillStyle = USER_COLORS[sr.index % USER_COLORS.length]; ctx.fillText(String(sr.handle).toUpperCase().slice(0, 12), 2, y + 8);
        ctx.fillStyle = sr.balance >= 0 ? c.win : c.loss; ctx.textAlign = "right"; ctx.fillText(DC.piCompact(sr.balance), PANEL_W - 2, y + 8); ctx.textAlign = "left";
      });
    }
  } else if (page.type === "pnl") {
    const rows = graph(page);
    const y0 = top - scrollY(rowsOf(page));
    if (!rows.length) empty("NO P&L YET");
    const lo = Math.min(0, ...rows.map((r) => r.value)), hi = Math.max(0, ...rows.map((r) => r.value)), span = (hi - lo) || 1;
    const bx0 = 42, bx1 = PANEL_W - 29, zx = bx0 + Math.round((0 - lo) / span * (bx1 - bx0));
    rows.forEach((r, k) => {
      const y = y0 + 1 + k * 10, vx = bx0 + Math.round((r.value - lo) / span * (bx1 - bx0));
      ctx.font = font(8); ctx.fillStyle = USER_COLORS[r.index % USER_COLORS.length]; ctx.fillText(r.handle.toUpperCase().slice(0, 6), 1, y + 8);
      ctx.fillStyle = r.value >= 0 ? c.win : c.loss; ctx.fillRect(Math.min(zx, vx), y + 1, Math.max(1, Math.abs(vx - zx)), 7);
      ctx.textAlign = "right"; ctx.fillText(DC.piCompact(r.value), PANEL_W - 1, y + 8); ctx.textAlign = "left";
    });
  } else if (page.type === "wagers" || page.type === "ticker") {
    const y0 = top - scrollY(rowsOf(page));
    D.wagers.forEach((r, i) => {
      const y = y0 + i * 10;
      if (i % 2) { ctx.fillStyle = c.row_tint; ctx.fillRect(0, y, PANEL_W, 10); }
      ctx.font = font(8); ctx.fillStyle = c.accent; ctx.fillText(r[0].slice(0, 7), 2, y + 8);
      ctx.fillStyle = c.text; ctx.fillText(r[1], 50, y + 8);
      ctx.fillStyle = c.pending; ctx.textAlign = "right"; ctx.fillText(r[2], PANEL_W - 2, y + 8); ctx.textAlign = "left";
    });
  } else if (page.type === "balances") {
    const y0 = top - scrollY(rowsOf(page));
    // same rows as the Pi's build_board: name + balance, then "T today | n OPEN $x | Y ytd"
    D.balances.forEach((r, i) => {
      const y = y0 + i * 20;
      if (i % 2) { ctx.fillStyle = c.row_tint; ctx.fillRect(0, y, PANEL_W, 20); }
      ctx.font = font(9);
      ctx.fillStyle = r[4] > 0 ? c.win : r[4] < 0 ? c.loss : USER_COLORS[(r[5] || i) % USER_COLORS.length];
      ctx.fillText(r[0], 2, y + 9);
      ctx.fillStyle = r[2] > 0 ? c.win : r[2] < 0 ? c.loss : c.dim; ctx.textAlign = "right"; ctx.fillText(r[1], PANEL_W - 2, y + 9); ctx.textAlign = "left";
      if (r[3]) { ctx.font = `${7}px "DejaVu Sans", Verdana, sans-serif`; ctx.fillStyle = c.dim; ctx.fillText(r[3], 3, y + 18); }
    });
  } else if (page.type === "results" || page.type === "scores") {
    const y0 = top - scrollY(rowsOf(page));
    D.results.forEach((r, i) => {
      const y = y0 + i * 18;
      ctx.font = font(8); ctx.fillStyle = c.text; ctx.fillText(r[0], 2, y + 8);
      ctx.fillStyle = r[2] > 0 ? c.win : r[2] < 0 ? c.loss : c.dim; ctx.fillText(r[1], 2, y + 17);
    });
  } else if (page.type === "reactions") {
    const n = Math.min(page.limit || 8, D.reactions.length);
    const y0 = top - scrollY(n * 10);
    D.reactions.slice(0, n).forEach((r, i) => { ctx.font = font(8); ctx.fillStyle = c.text; ctx.fillText(r, 2, y0 + i * 10 + 8); });
  } else if (page.type === "text" || page.type === "clock") {
    const lines = page.type === "clock" ? [DC.strftime(page.format, tzNow(page.tz, now))]
      : (page.lines && page.lines.length ? page.lines : String(page.text || "").split("\n")).map((l) => DC.renderTemplate(l, f));
    const size = page.size || (page.type === "clock" ? 16 : Math.max(8, Math.min(16, Math.floor(mh / Math.max(1, lines.length)) - 2)));
    ctx.font = font(size); ctx.fillStyle = c.text;
    const align = page.align || "center";
    ctx.textAlign = align === "left" ? "left" : align === "right" ? "right" : "center";
    const x = align === "left" ? 2 : align === "right" ? PANEL_W - 2 : PANEL_W / 2;
    const lh = size + 2, total = lh * lines.length;
    lines.forEach((ln, i) => ctx.fillText(ln, x, top + (mh - total) / 2 + lh * i + size));
    ctx.textAlign = "left";
  } else if (page.type === "marquee") {
    const size = Math.min(24, page.size || 16);
    const txt = DC.renderTemplate(page.text || page.title || "", f);
    ctx.font = font(size); ctx.fillStyle = c.text;
    const x = PANEL_W - elapsed * DC.scrollPxPerSec(page.speed);
    ctx.fillText(txt, x, top + (mh + size) / 2 - 2);
  } else if (page.type === "live_games") {
    // placeholder: the board draws the live games itself (agent 2.0.54); the preview only marks the page
    ctx.font = font(9); ctx.fillStyle = c.dim; ctx.textAlign = "center";
    ctx.fillText("LIVE GAMES", PANEL_W / 2, top + mh / 2 + 3); ctx.textAlign = "left";
  } else if (page.type === "image") {
    const img = imageCache(page.image);
    if (img && img.complete && img.naturalWidth) {
      const k = Math.min(PANEL_W / img.naturalWidth, mh / img.naturalHeight);
      const w = img.naturalWidth * k, h = img.naturalHeight * k;
      ctx.drawImage(img, (PANEL_W - w) / 2, top + (mh - h) / 2, w, h);
    } else { ctx.font = font(8); ctx.fillStyle = c.dim; ctx.fillText("(no picture)", 30, top + mh / 2); }
  }
  ctx.restore();
  // title bar (layout title_position / ticker_on_top); header.content: both / title / page
  if (hOn) {
    const hy = bands.title.y0;
    ctx.fillStyle = c.header_bg; ctx.fillRect(0, hy, PANEL_W, HEADER_H);
    ctx.font = font(9);
    const content = hdr.content || (hdr.show_page_title !== false ? "both" : "title");
    const brandTxt = DC.headerBrand(spec);
    const brand = content === "page" ? "" : brandTxt;
    const title = content === "title" ? "" : (page.title || page.type.toUpperCase());
    const tw = title ? ctx.measureText(title).width : 0;
    if (brand) {
      ctx.save(); ctx.beginPath(); ctx.rect(0, hy, PANEL_W - tw - 6, HEADER_H); ctx.clip();
      ctx.fillStyle = c.accent; ctx.fillText(brand, 2, hy + 9); ctx.restore();
      if (title) { ctx.fillStyle = c.page_title; ctx.fillText(title, PANEL_W - tw - 3, hy + 9); }
    } else if (title) { ctx.fillStyle = c.page_title; ctx.textAlign = "center"; ctx.fillText(title, PANEL_W / 2, hy + 9); ctx.textAlign = "left"; }
    ctx.fillStyle = c.separator; ctx.fillRect(0, bands.title.div, PANEL_W, 1);
  }
  // ticker (layout ticker_position / ticker_on_top); colors.footer_* follow it
  if (fOn) {
    const fy = bands.ticker.y0, fdiv = bands.ticker.div;
    ctx.fillStyle = c.footer_bg; ctx.fillRect(0, Math.min(fy, fdiv), PANEL_W, FOOTER_H);
    ctx.fillStyle = c.footer_separator || c.separator; ctx.fillRect(0, fdiv, PANEL_W, 1);
    ctx.font = font(8);
    const txt = ftr.text ? DC.renderTemplate(ftr.text, fieldsFor(spec, null, now))
      : [ftr.reactions !== false ? (D.reactions || [])[0] || "" : "", ftr.movers !== false ? (D.movers || []).join("   ") : "", "BLACKBOOK"].filter(Boolean).join("   •   ");
    const w = ctx.measureText(txt + "     ").width;
    const mx = (t * DC.scrollPxPerSec(ftr.speed || 12)) % w;
    ctx.fillStyle = c.footer_text || c.accent;
    const by = fy + 8;
    ctx.fillText(txt, -mx, by); ctx.fillText(txt, -mx + w, by);
  }
  return { page, index, label: `Page ${index + 1}/${pages.length}: ${page.title || DC.PAGE_LABELS[page.type]}` };
}
const USER_COLORS = ["#78d2ff", "#ff9ad5", "#a0ff8c", "#ffcd5a", "#c8a0ff", "#5affe6", "#ff8c5a", "#e6e6ff"];
const MOCK_BOARD = { balances: [{ handle: "ROOSRER", balance: 420, today_pnl: 45, ytd_pnl: 1100 }, { handle: "BILL", balance: -85, today_pnl: -20, ytd_pnl: -300 },
  { handle: "JAY", balance: 1200, today_pnl: 0, ytd_pnl: 2000 }],
  trend: { days: ["d1", "d2", "d3", "d4", "d5"], pnl: { ROOSRER: [20, -40, 60, 0, 45], BILL: [-10, 30, -50, 0, -20], JAY: [100, 0, -80, 200, 0] } } };
/** Score/final popup like the Pi (2.0.6): header with both teams + score, then the bettors 3 full rows a
 *  page, each page held popups.page_seconds, with a 1/N indicator. */
function drawGamePopup(ctx, pop, theme, font, now) {
  const W = PANEL_W, band = pop.final ? theme.win : theme.accent;
  ctx.fillStyle = "#040814"; ctx.fillRect(0, 0, W, PANEL_H);
  ctx.fillStyle = band; ctx.fillRect(0, 0, W, 10);
  const n = DC.popupPages(pop.bettors.length), per = DC.POPUP_ROWS_PER_PAGE;
  const pg = n > 1 ? Math.floor((now.getTime() - pop.t0) / 1000 / (pop.pageSeconds || 3)) % n : 0;
  ctx.font = font(7); ctx.fillStyle = "#060a18"; ctx.textAlign = "center";
  ctx.fillText(`${pop.final ? "FINAL" : "SCORE"}  ${pop.league || ""}`, W / 2, 8);
  if (n > 1) { ctx.textAlign = "right"; ctx.fillText(`${pg + 1}/${n}`, W - 2, 8); }
  ctx.textAlign = "left";
  [[pop.away, pop.as, pop.hs], [pop.home, pop.hs, pop.as]].forEach(([name, sc, other], k) => {
    const y = 11 + k * 11, lead = sc > other;
    ctx.font = font(8); ctx.fillStyle = lead || sc === other ? theme.text : theme.dim; ctx.fillText(name, 3, y + 8);
    ctx.font = font(9); ctx.fillStyle = lead ? theme.win : theme.text; ctx.textAlign = "right"; ctx.fillText(String(sc), W - 2, y + 9); ctx.textAlign = "left";
  });
  ctx.fillStyle = band; ctx.fillRect(0, 33, W, 1);
  pop.bettors.slice(pg * per, pg * per + per).forEach((b, k) => {
    const y = 35 + k * 9;
    ctx.font = font(8); ctx.fillStyle = USER_COLORS[(pg * per + k) % USER_COLORS.length]; ctx.fillText(b[0], 1, y + 8);
    ctx.fillStyle = b[2] > 0 ? theme.win : b[2] < 0 ? theme.loss : theme.pending; ctx.textAlign = "right"; ctx.fillText(b[1], W - 1, y + 8); ctx.textAlign = "left";
  });
  return { page: null, label: n > 1 ? `Popup preview · page ${pg + 1}/${n}` : "Popup preview" };
}
const _imgs = {};
function imageCache(src) {
  if (!src || !/^data:image\//.test(src)) return null;
  if (!_imgs[src]) { const im = new Image(); im.src = src; _imgs[src] = im; }
  return _imgs[src];
}
function tzNow(tz, now) {
  if (!tz) return now;
  try { return new Date(now.toLocaleString("en-US", { timeZone: tz })); } catch (e) { return now; }
}
function fieldsFor(spec, page, now) {
  const user = (window.__dcHandle || "you");
  return { user, user_upper: user.toUpperCase(), group: "", date: DC.strftime("%-m/%-d", now), time: DC.strftime("%-I:%M %p", now),
           title: (page && page.title) || "" };
}

// One save per burst of edits: each change restarts this timer (slider drags, typing, colour picks).
// The live preview draws the local draft, so it stays instant; revision numbers stay internal.
const SAVE_DEBOUNCE_MS = 800;

/** The whole wall: one panel draws straight onto the canvas (unchanged); a multi-panel wall draws the logical screen
 *  off-screen, scales it up (nearest, centred, like panels.to_wall) and marks the seams + each panel's chain number. */
let _wallBuf = null;
function drawWall(ctx, spec, defaults, t, now, popup, data) {
  const sz = DC.panelsLogical(spec);
  if (sz.single) return drawPanel(ctx, spec, defaults, t, now, popup, data);
  if (typeof document === "undefined") return drawPanel(ctx, spec, defaults, t, now, popup, data);
  if (!_wallBuf) _wallBuf = document.createElement("canvas");
  if (_wallBuf.width !== sz.w || _wallBuf.height !== sz.h) { _wallBuf.width = sz.w; _wallBuf.height = sz.h; }
  const r = drawPanel(_wallBuf.getContext("2d"), spec, defaults, t, now, popup, data);
  const p = DC.panelsOf(spec);
  ctx.imageSmoothingEnabled = false;
  ctx.fillStyle = "#000"; ctx.fillRect(0, 0, sz.wallW, sz.wallH);
  const dw = sz.w * sz.scale, dh = sz.h * sz.scale;
  ctx.drawImage(_wallBuf, Math.floor((sz.wallW - dw) / 2), Math.floor((sz.wallH - dh) / 2), dw, dh);
  ctx.fillStyle = "rgba(255,255,255,0.35)";
  for (let c = 1; c < p.wide; c++) ctx.fillRect(c * 128, 0, 1, sz.wallH);
  for (let rr = 1; rr < p.tall; rr++) ctx.fillRect(0, rr * 64, sz.wallW, 1);
  ctx.font = 'bold 8px "DejaVu Sans", Verdana, sans-serif'; ctx.textAlign = "left";
  for (const m of p.map) {
    const tag = `#${m.chain_index}${m.rotate === 180 ? " ↻" : ""}`;
    ctx.fillStyle = "rgba(0,0,0,0.6)"; ctx.fillRect(m.col * 128 + 1, m.row * 64 + 1, 6 + tag.length * 5, 10);
    ctx.fillStyle = "#ffd75a"; ctx.fillText(tag, m.col * 128 + 3, m.row * 64 + 9);
  }
  return Object.assign({}, r, { label: `${p.wide}×${p.tall} wall · ${r.label}` });
}

// The preview is the REAL panel renderer: POST /display/v2/preview runs display_renderer on the server with
// this draft + the signed-in user's live data and answers a few seconds of animation (WebP). Clips chain via
// `next` so it plays continuously; a spec edit re-renders (debounced). The JS drawing below is only the
// fallback when the server preview fails, and the box keeps the wall's size either way (no layout jumps).
function preloadImage(src) {
  return new Promise((res, rej) => {
    const im = new Image();
    im.onload = () => (im.decode ? im.decode().catch(() => {}) : Promise.resolve()).then(() => res(src));
    im.onerror = () => rej(new Error("preview image failed"));
    im.src = src;
  });
}

function PanelPreview({ spec, defaults, popupAt, live, api }) {
  const ref = React.useRef(null);
  const [label, setLabel] = React.useState("");
  const [clip, setClip] = React.useState(null);          // last server clip on screen
  const [mode, setMode] = React.useState(api ? "loading" : "fallback");  // loading | server | fallback
  const [panelType, setPanelType] = React.useState(() => DC.previewPanelType(localStorage.getItem("bb_dc_preview_panel")));
  const specRef = React.useRef(spec);
  specRef.current = spec;
  const popRef = React.useRef(popupAt);
  popRef.current = popupAt;
  const dataRef = React.useRef(null);
  dataRef.current = live && live.data;
  const modeRef = React.useRef(mode);
  modeRef.current = mode;
  const clipRef = React.useRef(null);
  const genRef = React.useRef(0);
  const firstRef = React.useRef(true);
  const specKey = React.useMemo(() => JSON.stringify(spec || null), [spec]);

  React.useEffect(() => { localStorage.setItem("bb_dc_preview_panel", panelType); }, [panelType]);

  // server clips: debounced on spec / panel type changes, then chained clip after clip
  React.useEffect(() => {
    if (!api || !spec) return undefined;
    const gen = ++genRef.current;
    const live_ = () => gen === genRef.current;
    let timer = null;
    const later = (fn, ms) => { clearTimeout(timer); timer = setTimeout(fn, ms); };
    const fetchClip = async (page, t0) => {
      let res;
      try { res = await api("POST", "/display/v2/preview", DC.previewRequest(specRef.current, panelType, page, t0)); }
      catch (e) { e.status = 0; throw e; }
      const { ok, status, j } = res;
      if (!ok || !j || !j.ok || !j.image) { const e = new Error((j && j.error) || "preview failed"); e.status = status; throw e; }
      await preloadImage(j.image);
      return j;
    };
    let fails = 0;
    const play = async (pending, page, t0) => {
      let c;
      try { c = await pending; } catch (e) {
        if (!live_()) return;
        // 0 = network / 5xx / 429 = the API is restarting (a deploy) or busy: retry soon with backoff, keep the
        // last real clip looping meanwhile. Anything else (422 bad draft, 401) = the JS drawing until the next edit.
        const transient = !e.status || e.status >= 500 || e.status === 429;
        fails += 1;
        if (!transient) { clipRef.current = null; setClip(null); }
        if (!clipRef.current) setMode("fallback");
        if (transient) later(() => play(fetchClip(page, t0), page, t0), DC.previewRetryMs(fails));
        return;
      }
      fails = 0;
      if (!live_()) return;
      clipRef.current = c;
      setClip(c);
      setMode("server");
      if (c.blank || !c.next) { later(() => play(fetchClip(page, 0), page, 0), 30000); return; }
      const nx = c.next, pre = fetchClip(nx.page, nx.t0);
      pre.catch(() => {});
      const advance = () => { if (!live_()) return; if (document.hidden) { later(advance, 1000); return; } play(pre, nx.page, nx.t0); };
      later(advance, Math.max(500, c.duration_ms || DC.PREVIEW_SECONDS * 1000));
    };
    const onVis = () => { if (!document.hidden && modeRef.current === "fallback" && live_()) { fails = 0; later(() => play(fetchClip(0, 0), 0, 0), 0); } };
    document.addEventListener("visibilitychange", onVis);
    const startPage = clipRef.current && !clipRef.current.blank ? clipRef.current.page || 0 : 0;
    const delay = firstRef.current ? 0 : DC.PREVIEW_DEBOUNCE_MS;
    firstRef.current = false;
    later(() => play(fetchClip(startPage, 0), startPage, 0), delay);
    return () => { clearTimeout(timer); genRef.current++; document.removeEventListener("visibilitychange", onVis); };
  }, [api, specKey, panelType]);

  // JS fallback drawing (also used for the test-alert popup, which the server clip doesn't include)
  React.useEffect(() => {
    let raf, t0 = performance.now(), lastLabel = "";
    const loop = (ts) => {
      const pop = popRef.current;
      const showPop = pop && pop.until > Date.now() ? pop : null;
      const ctx = (modeRef.current !== "server" || showPop) && ref.current && ref.current.getContext("2d");
      if (ctx) {
        const r = drawWall(ctx, specRef.current, defaults, (ts - t0) / 1000, new Date(), showPop, dataRef.current);
        if (modeRef.current !== "server" && r.label !== lastLabel) { lastLabel = r.label; setLabel(r.label); }
      }
      if (modeRef.current === "server") lastLabel = "";
      raf = requestAnimationFrame(loop);
    };
    raf = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(raf);
  }, [defaults]);

  const wall = DC.panelsLogical(spec);
  const box = DC.previewWall(spec, panelType);  // the selected panel's wall in LED pixels: the box's aspect
  const pop = popupAt && popupAt.until > Date.now();
  const showImg = mode === "server" && !!clip && !pop;
  const shownLabel = mode === "server" ? DC.previewLabel(spec, clip) : label;
  const fill = { position: "absolute", inset: 0, width: "100%", height: "100%" };
  return (
    <div className="dc-canvas-wrap">
      <div className="dc-prev-box" data-testid="preview-box" style={{ position: "relative", width: "100%", aspectRatio: `${box.w} / ${box.h}` }}>
        <canvas ref={ref} width={wall.wallW} height={wall.wallH} className="dc-canvas" style={{ ...fill, visibility: showImg ? "hidden" : "visible" }}
          aria-label={wall.single ? "Live preview of the LED panel" : `Live preview of the ${wall.count}-panel wall`} />
        {clip && <img src={clip.image} alt={showImg ? "Live preview of the LED panel (real panel renderer)" : ""} data-testid="preview-server" className="dc-canvas"
          style={{ ...fill, objectFit: "fill", imageRendering: "pixelated", background: "#000", visibility: showImg ? "visible" : "hidden" }} />}
      </div>
      <div className="dc-sub dc-line" style={{ marginTop: 6, display: "flex", justifyContent: "space-between", gap: 8 }}>
        <span className="dc-line" title={mode === "server" && clip ? `Rendered by the panel renderer in ${clip.render_ms} ms` : undefined}>
          {mode === "server" ? <>Real panel renderer · your live data</>
            : mode === "loading" ? "Rendering on the server…"
            : live && live.data ? <>Approximate preview · your live data{live.at ? ` · ${live.at.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" })}` : ""}</>
            : live && live.err ? "Approximate preview · sample data" : "Approximate preview · sample data (loading live…)"}</span>
        <span className="dc-line" style={{ flexShrink: 0, maxWidth: "45%" }}>{shownLabel}</span>
      </div>
      {api && <div className="dc-tabs" role="radiogroup" aria-label="Preview panel type" data-testid="preview-panel-type" style={{ marginTop: 6 }}>
        {DC.PREVIEW_PANEL_TYPES.map(([v, l]) => (
          <button key={v} type="button" role="radio" aria-checked={panelType === v} className={"dc-btn sm" + (panelType === v ? " on" : "")}
            onClick={() => setPanelType(v)}>{l}</button>))}
      </div>}
    </div>
  );
}

// ------------------------------------------------------------------ small controls
function Toggle({ label, sub, on, onChange }) {
  return (
    <button type="button" className="dc-toggle" onClick={() => onChange(!on)} aria-pressed={!!on}>
      <span><div>{label}</div>{sub && <div className="dc-sub" style={{ fontWeight: 500 }}>{sub}</div>}</span>
      <span className={"dc-pill " + (on ? "on" : "off")}>{on ? "ON" : "OFF"}</span>
    </button>
  );
}
function Segmented({ label, value, options, onChange, disabled }) {
  // options: [[value, label]]; disabled(value) -> true greys that choice out
  return (
    <div className="dc-l" role="radiogroup" aria-label={label}>
      <span>{label}</span>
      <div className="dc-tabs">
        {options.map(([v, l]) => {
          const off = !!(disabled && disabled(v));
          return <button key={v} type="button" role="radio" aria-checked={value === v} disabled={off}
            className={"dc-btn" + (value === v ? " on" : "")} onClick={() => !off && onChange(v)}>{l}</button>;
        })}
      </div>
    </div>
  );
}
// "Pause on each line": Off / 1s / 2s / 3s / 5s (plus "Use display setting" on a page). Greyed out with
// "(needs <LINE_PAUSE_MIN>)" while a linked display is on an older agent (same rule as the theme picker).
function LinePauseControl({ label, value, onChange, devs, inherit, testid }) {
  const sup = DC.linePauseSupport(devs);
  const opts = (inherit ? [[null, inherit]] : []).concat(DC.LINE_PAUSE_CHOICES);
  return (
    <div className={"dc-l dc-lp" + (sup.ok ? "" : " gated")} role="radiogroup" aria-label={label} data-testid={testid}>
      <span>{label}{sup.ok ? "" : <span className="dc-sub"> (needs {sup.min})</span>}</span>
      <div className={"dc-tabs dc-tabs5" + (inherit ? " inherit" : "")}>
        {opts.map(([v, l]) => {
          const on = value === v, off = !sup.ok;
          return <button key={String(v)} type="button" role="radio" aria-checked={on} disabled={off}
            className={"dc-btn" + (on ? " on" : "") + (v === null ? " dc-lp-inherit" : "")} onClick={() => !off && onChange(v)}>{l}</button>;
        })}
      </div>
    </div>
  );
}
function Slider({ label, value, min, max, step, onChange, fmt }) {
  return (
    <label className="dc-l">
      <span className="dc-row"><span>{label}</span><span className="dc-mono">{fmt ? fmt(value) : value}</span></span>
      <input type="range" min={min} max={max} step={step || 1} value={value} onChange={(e) => onChange(Number(e.target.value))} />
    </label>
  );
}
function ColorField({ label, value, onChange, onClear }) {
  const v = /^#[0-9a-fA-F]{6}$/.test(value || "") ? value : "#000000";
  return (
    <div className="dc-color">
      <input type="color" value={v} onChange={(e) => onChange(e.target.value)} aria-label={label} />
      <span style={{ flex: 1 }}>{label}{onClear && value ? <button type="button" className="dc-btn sm" style={{ marginLeft: 6, minHeight: 32, padding: "2px 8px" }} onClick={onClear}>×</button> : null}</span>
    </div>
  );
}
function TextField({ label, value, onChange, max, placeholder }) {
  return (
    <label className="dc-l">{label}
      <input type="text" value={value || ""} maxLength={max} placeholder={placeholder} onChange={(e) => onChange(e.target.value)} />
    </label>
  );
}

// 2.0.52 per-page "Animate" (+ optional style). Shows the effective value while the page has no key (graph pages
// follow the display's animate_graphs, others are off); writes page.animate / page.animate_style only when touched.
// Greyed out with "(needs PAGE_ANIM_MIN)" while a linked display is on an older agent (same rule as line pause).
function PageAnimateControl({ spec, page, i, edit, devs }) {
  const sup = DC.pageAnimSupport(devs);
  const { on, set } = DC.pageAnimateOf(spec, page);
  const style = DC.pageAnimStyleOf(page);
  const off = !sup.ok;
  const sub = (set ? "" : "Default for this page · ") + (DC.isGraphPage(page) ? "the graph draws in before its hold" : "plays an entrance as the page appears");
  return (
    <div className={"dc-anim" + (off ? " gated" : "")} data-testid="page-animate">
      <button type="button" className="dc-toggle" disabled={off} aria-pressed={!!on} data-testid="page-animate-toggle"
        onClick={() => !off && edit((s) => DC.setPageAnimate(s, i, !on))}>
        <span><div>Animate{off ? <span className="dc-sub"> (needs {sup.min})</span> : null}</div><div className="dc-sub" style={{ fontWeight: 500 }}>{sub}</div></span>
        <span className={"dc-pill " + (on ? "on" : "off")}>{on ? "ON" : "OFF"}</span>
      </button>
      {on && (
        <label className="dc-l">Animation style
          <select data-testid="page-animate-style" value={style} disabled={off} onChange={(e) => edit((s) => DC.setPageAnimStyle(s, i, e.target.value))}>
            <option value="">{DC.pageAnimDefaultLabel(spec, page)}</option>
            {DC.pageAnimStyleChoices(page).map(([id, label]) => <option key={id} value={id}>{label}</option>)}
          </select>
        </label>
      )}
      {off && <div className="dc-sub" data-testid="page-animate-hint">Page animations: coming in the next display update ({sup.min}){sup.old.length ? ` · ${sup.old.map((d) => `${d.name} is on ${d.release_version || "an older version"}`).join(", ")}` : ""}</div>}
    </div>
  );
}

// spec.team_accents (agent 2.0.54): team-colour stripes + dividers on any theme. Unset = off and nothing is written
// until the user flips it; the team_colors background implies it (shown ON, locked). Greyed out until every linked
// display is on 2.0.54 and the server schema lists the key (unticking a saved true while gated removes the key).
function TeamAccentsControl({ spec, edit, devs, schema }) {
  const sup = DC.teamAccentsSupport(devs, schema);
  const { on, set, implied } = DC.teamAccentsOf(spec);
  const locked = implied || (!sup.ok && !on);
  const sub = implied ? "Always on with the Team colors background" : "Game header stripes and divider lines in the teams' colors";
  return (
    <div className={"dc-anim" + (sup.ok || implied ? "" : " gated")} data-testid="team-accents">
      <button type="button" className="dc-toggle" disabled={locked} aria-pressed={!!on} data-testid="team-accents-toggle"
        onClick={() => !locked && edit((s) => (sup.ok ? DC.setTeamAccents(s, !on) : DC.setIn(s, [DC.TEAM_ACCENTS_KEY], undefined)))}>
        <span><div>Team color accents{!sup.ok && !implied ? <span className="dc-sub"> (needs {sup.min})</span> : null}</div><div className="dc-sub" style={{ fontWeight: 500 }}>{sub}</div></span>
        <span className={"dc-pill " + (on ? "on" : "off")}>{on ? "ON" : "OFF"}</span>
      </button>
      {!sup.ok && !implied && <div className="dc-sub" data-testid="team-accents-hint">Coming in the next display update ({sup.min}){!sup.schema ? " · the server doesn't accept it yet" : ""}{sup.old.length ? ` · ${sup.old.map((d) => `${d.name} is on ${d.release_version || "an older version"}`).join(", ")}` : ""}</div>}
    </div>
  );
}

// ------------------------------------------------------------------ page editor
function PageEditor({ page, i, n, edit, open, setOpen, devs, linePause, spec, schema }) {
  const set = (k, v) => edit((s) => DC.setIn(s, ["pages", i, k], v));
  const t = page.type;
  const scrolls = ["wagers", "ticker", "balances", "results", "scores", "reactions", "marquee", "trend", "pnl", "text",
                   "scroll_text", "balance_graph", "record_graph", "live_games"].indexOf(t) >= 0;
  const onImage = (file) => {
    if (!file) return;
    const fr = new FileReader();
    fr.onload = () => {
      const im = new Image();
      im.onload = () => {
        const cv = document.createElement("canvas");
        const k = Math.min(128 / im.width, 40 / im.height, 1);
        cv.width = Math.max(1, Math.round(im.width * k)); cv.height = Math.max(1, Math.round(im.height * k));
        cv.getContext("2d").drawImage(im, 0, 0, cv.width, cv.height);
        let url = cv.toDataURL("image/png");
        if (url.length > 60000) url = cv.toDataURL("image/jpeg", 0.8);
        if (url.length > 60000) { alert("That picture is too big; try a smaller one."); return; }
        set("image", url);
      };
      im.src = fr.result;
    };
    fr.readAsDataURL(file);
  };
  return (
    <div className={"dc-page" + (page.enabled === false ? " offp" : "")}>
      <div className="dc-page-head">
        <button type="button" className="dc-btn sm" onClick={() => setOpen(open ? null : i)} aria-expanded={open}>{open ? "▾" : "▸"}</button>
        <div className="dc-page-name" onClick={() => setOpen(open ? null : i)}>{i + 1}. {page.title || DC.PAGE_LABELS[t]} <span className="dc-sub">· {DC.PAGE_LABELS[t]} · {page.hold || 2.2}s</span></div>
        <button type="button" className="dc-btn sm" disabled={i === 0} onClick={() => edit((s) => DC.movePage(s, i, -1))} aria-label="Move up">↑</button>
        <button type="button" className="dc-btn sm" disabled={i === n - 1} onClick={() => edit((s) => DC.movePage(s, i, 1))} aria-label="Move down">↓</button>
      </div>
      {open && (
        <div style={{ display: "grid", gap: 10 }}>
          <Toggle label="Show this page" on={page.enabled !== false} onChange={(v) => set("enabled", v ? undefined : false)} />
          <TextField label="Page title (top right)" value={page.title} max={24} onChange={(v) => set("title", v || undefined)} />
          <Slider label="Hold time" value={Number(page.hold || 2.2)} min={0.5} max={30} step={0.5} fmt={(v) => `${v}s`} onChange={(v) => set("hold", v)} />
          {scrolls && <Slider label="Scroll speed" value={Number(page.speed || 12)} min={1} max={20} onChange={(v) => set("speed", v)} />}
          {t === "text" && (
            <>
              <label className="dc-l">Text (one line per row, up to 6)
                <textarea rows={3} value={(page.lines || []).join("\n")} onChange={(e) => set("lines", e.target.value.split("\n").slice(0, 6).map((x) => x.slice(0, 80)))} />
              </label>
              <div className="dc-grid2">
                <label className="dc-l">Align<select value={page.align || "center"} onChange={(e) => set("align", e.target.value)}>
                  <option value="left">Left</option><option value="center">Center</option><option value="right">Right</option></select></label>
                <label className="dc-l">Text size<select value={page.size || ""} onChange={(e) => set("size", e.target.value ? Number(e.target.value) : undefined)}>
                  <option value="">Auto</option>{[8, 10, 12, 14, 16, 20, 24, 32].map((x) => <option key={x} value={x}>{x}px</option>)}</select></label>
              </div>
            </>
          )}
          {t === "marquee" && (
            <>
              <TextField label="Scrolling message" value={page.text} max={400} onChange={(v) => set("text", v)} />
              <label className="dc-l">Text size<select value={page.size || 16} onChange={(e) => set("size", Number(e.target.value))}>
                {[10, 12, 14, 16, 20, 24].map((x) => <option key={x} value={x}>{x}px</option>)}</select></label>
            </>
          )}
          {t === "clock" && (
            <div className="dc-grid2">
              <label className="dc-l">Format<select value={page.format || "%-I:%M %p"} onChange={(e) => set("format", e.target.value)}>
                <option value="%-I:%M %p">3:07 PM</option><option value="%-I:%M:%S">3:07:09</option><option value="%H:%M">15:07</option>
                <option value="%H:%M:%S">15:07:09</option><option value="%a %-I:%M">Thu 3:07</option></select></label>
              <label className="dc-l">Time zone<select value={page.tz || "America/New_York"} onChange={(e) => set("tz", e.target.value)}>
                {["America/New_York", "America/Chicago", "America/Denver", "America/Los_Angeles", "UTC"].map((z) => <option key={z} value={z}>{z.replace("America/", "")}</option>)}</select></label>
            </div>
          )}
          {t === "trend" && (
            <>
              <Slider label="Days" value={Number(page.days || 30)} min={3} max={30} onChange={(v) => set("days", v)} />
              <Slider label="Bettors (lines)" value={Number(page.limit || 6)} min={1} max={12} onChange={(v) => set("limit", v)} />
              {(() => {
                const st = DC.trendStyleOf(page), sup = DC.trendStyleSupport(devs);
                return (
                  <>
                    <label className="dc-l">Graph shows<select data-testid="trend-style" value={st} onChange={(e) => set("style", e.target.value === "each" ? "each" : undefined)}>
                      {DC.TREND_STYLES.map(([id, label]) => <option key={id} value={id} disabled={id === "each" && st !== "each" && !sup.ok}>{label}{id === "compare" ? " (default)" : ""}</option>)}</select></label>
                    {!sup.ok && <div className="dc-sub" data-testid="trend-style-hint">One bettor per page: coming in the next display update ({DC.TREND_STYLE_MIN}){sup.old.length ? ` · ${sup.old.map((d) => `${d.name} is on ${d.release_version || "an older version"}`).join(", ")}` : ""}</div>}
                  </>
                );
              })()}
            </>
          )}
          {t === "pnl" && (
            <label className="dc-l">Bars show<select value={page.metric || "ytd"} onChange={(e) => set("metric", e.target.value)}>
              <option value="today">Today</option><option value="ytd">Year to date</option><option value="balance">Balance</option></select></label>
          )}
          {t === "scroll_text" && (
            <label className="dc-l">Message (wraps and scrolls up until the last line has shown)
              <textarea rows={4} maxLength={400} value={page.text || ""} onChange={(e) => set("text", e.target.value)} />
            </label>
          )}
          {t === "balance_graph" && <Slider label="Days" value={Number(page.days || 30)} min={3} max={30} onChange={(v) => set("days", v)} />}
          {t === "record_graph" && <Slider label="Weeks" value={Number(page.weeks || 8)} min={2} max={12} onChange={(v) => set("weeks", v)} />}
          {DC.SKIP_EMPTY_TYPES.indexOf(t) >= 0 && <Toggle label="Skip when empty" on={page.skip_empty !== false} onChange={(v) => set("skip_empty", v ? undefined : false)} />}
          {scrolls && t !== "marquee" && (
            <Slider label="End pause (after the last line)" value={Number(page.scroll_end_pause_s ?? DC.END_PAUSE_DEFAULT)} min={0} max={10} step={0.5}
              fmt={(v) => `${v}s`} onChange={(v) => set("scroll_end_pause_s", v === DC.END_PAUSE_DEFAULT ? undefined : v)} />
          )}
          {DC.LINE_PAUSE_ENABLED && scrolls && t !== "marquee" && (
            <LinePauseControl label="Pause on each line" testid="page-line-pause" devs={devs}
              value={DC.pageLinePauseOf(page)} inherit={`Use display setting (${linePause ? `${linePause}s` : "Off"})`}
              onChange={(v) => edit((s) => DC.setPageLinePause(s, i, v))} />
          )}
          {t === "text" && (
            <label className="dc-l">Too much text<select value={page.scroll || "auto"} onChange={(e) => set("scroll", e.target.value === "auto" ? undefined : e.target.value)}>
              <option value="auto">Auto (scroll if it doesn't fit)</option><option value="vertical">Scroll up</option><option value="horizontal">Scroll sideways</option><option value="none">Don't scroll</option></select></label>
          )}
          {t === "wagers" && (() => {
            const sup = DC.todayOnlySupport(devs, schema), on = DC.todayOnlyOf(page);
            return (
              <div className={"dc-today" + (sup.ok ? "" : " gated")} data-testid="today-only">
                <label className="dc-check">
                  <input type="checkbox" checked={on} disabled={!sup.ok && !on} data-testid="today-only-box"
                    onChange={(e) => edit((s) => (e.target.checked || sup.ok ? DC.setTodayOnly(s, i, e.target.checked) : DC.setIn(s, ["pages", i, DC.TODAY_ONLY_KEY], undefined)))} />
                  <span><span>Today's games only</span><span className="dc-sub">Today's games and live games only</span></span>
                </label>
                {!sup.ok && <div className="dc-sub" data-testid="today-only-hint">Coming in the next display update ({sup.min}){!sup.schema ? " · the server doesn't accept it yet" : ""}{sup.old.length ? ` · ${sup.old.map((d) => `${d.name} is on ${d.release_version || "an older version"}`).join(", ")}` : ""}</div>}
              </div>
            );
          })()}
          <PageAnimateControl spec={spec} page={page} i={i} edit={edit} devs={devs} />
          {t === "reactions" && <Slider label="How many reactions" value={Number(page.limit || 8)} min={1} max={20} onChange={(v) => set("limit", v)} />}
          {t === "image" && (
            <label className="dc-l">Picture (shrunk to fit the panel)
              <input type="file" accept="image/png,image/jpeg,image/gif" onChange={(e) => onImage(e.target.files && e.target.files[0])} />
            </label>
          )}
          <div className="dc-sub">Page colors (blank = use theme)</div>
          <div className="dc-colors">
            {["background", "text", "title"].map((k) => (
              <ColorField key={k} label={DC.COLOR_LABELS[k]} value={(page.colors || {})[k]}
                onChange={(v) => edit((s) => DC.setIn(s, ["pages", i, "colors", k], v))}
                onClear={() => edit((s) => { let x = DC.setIn(s, ["pages", i, "colors", k], undefined); if (x.pages[i].colors && !Object.keys(x.pages[i].colors).length) x = DC.setIn(x, ["pages", i, "colors"], undefined); return x; })} />
            ))}
          </div>
          <button type="button" className="dc-btn danger" disabled={n <= 1} onClick={() => { if (confirm("Remove this page?")) { setOpen(null); edit((s) => DC.removePage(s, i)); } }}>Remove page</button>
        </div>
      )}
    </div>
  );
}

// ------------------------------------------------------------------ main
// Admin dashboard (/admin/bench Configure): specPath="/admin/fleet/devices/<id>/display" edits the spec of the
// account that Pi is signed in to (specs are per handle: every display on that handle changes), with the admin's
// own session; hideSetupMode drops the owner-only "Back to setup mode" card (the bench card has its own).
function DisplayControl({ apiBase, token: tokenProp, onAuth, specPath, hideSetupMode }) {
  const base = dcApiBase(apiBase);
  const adminMode = !!specPath;
  const [token, setToken] = React.useState(tokenProp || localStorage.getItem("bb_token") || "");
  const [handle, setHandle] = React.useState("");
  const [needLogin, setNeedLogin] = React.useState(false);
  const [schema, setSchema] = React.useState(null);
  const [server, setServer] = React.useState(null);     // last GET response
  const [draft, setDraft] = React.useState(null);
  const [history, setHistory] = React.useState([]);     // undo stack (previous drafts)
  const [tab, setTab] = React.useState("easy");
  const [autoSend, setAutoSend] = React.useState(() => localStorage.getItem("bb_dc_autosend") !== "0");
  const [phase, setPhase] = React.useState("idle");     // idle | pending | saving | waiting | applied | error
  const [savedRev, setSavedRev] = React.useState(null);
  const [sentAt, setSentAt] = React.useState(null);
  const [appliedInfo, setAppliedInfo] = React.useState(null);
  const [errors, setErrors] = React.useState([]);
  const [netErr, setNetErr] = React.useState("");
  const [jsonText, setJsonText] = React.useState("");
  const [jsonErr, setJsonErr] = React.useState([]);
  const [openPage, setOpenPage] = React.useState(null);
  const [clearPageColors, setClearPageColors] = React.useState(true);
  const [popupAt, setPopupAt] = React.useState(null);
  const [addType, setAddType] = React.useState("text");
  const [group, setGroup] = React.useState("");
  const [live, setLive] = React.useState({ data: null, at: null, err: "" });
  const [unclaimed, setUnclaimed] = React.useState(false); // admin mode: the Pi is not signed in to an account
  const [setupMsg, setSetupMsg] = React.useState({});    // device id -> "Sending…" / result (Back to setup mode)
  const [resSel, setResSel] = React.useState({});        // device id -> picked Rigid panel resolution ("64x32"...)
  const [resMsg, setResMsg] = React.useState({});        // device id -> { ok, text } of the last resolution save
  const [autoTheme, setAutoTheme] = React.useState(null);  // GET /display/auto-sport-theme/<handle> (what is active now)
  const saveTimer = React.useRef(null);
  const dirtyRef = React.useRef(false);   // draft has edits the server hasn't accepted yet
  const editGen = React.useRef(0);         // bumps on every edit
  const knownRev = React.useRef(null);     // server revision the draft is based on
  const draftRef = React.useRef(null);
  draftRef.current = draft;

  React.useEffect(() => { if (tokenProp && tokenProp !== token) setToken(tokenProp); }, [tokenProp]);
  React.useEffect(() => { localStorage.setItem("bb_dc_autosend", autoSend ? "1" : "0"); }, [autoSend]);

  const api = React.useCallback(async (method, path, body) => {
    const r = await fetch(base + path, {
      method, headers: { "Content-Type": "application/json", ...(token ? { Authorization: `Bearer ${token}` } : {}) },
      body: body === undefined ? undefined : JSON.stringify(body), cache: "no-store",
    });
    const j = await r.json().catch(() => ({}));
    if (r.status === 401) { setNeedLogin(true); }
    return { status: r.status, ok: r.ok, j };
  }, [base, token]);

  // schema + who am I
  React.useEffect(() => {
    fetch(base + "/display/v2/schema", { cache: "no-store" }).then((r) => r.json()).then(setSchema).catch(() => setSchema(null));
  }, [base]);
  React.useEffect(() => {
    if (!token) { setNeedLogin(true); return; }
    setNeedLogin(false);
    if (adminMode) return; // the target handle comes from the admin GET (below)
    api("GET", "/auth/me").then(({ j }) => {
      if (j && j.ok && j.handle) { setGroup(j.group_code || j.group || ""); setHandle(j.handle); window.__dcHandle = j.handle; localStorage.setItem("bb_handle", j.handle); }
      else setNeedLogin(true);
    }).catch(() => setNetErr("Can't reach the server"));
  }, [token]);

  const specUrl = adminMode ? specPath : (handle ? `/display/v2/spec/${encodeURIComponent(handle)}` : "");
  const refresh = React.useCallback(async () => {
    if (!specUrl) return null;
    try {
      const { ok, j } = await api("GET", specUrl);
      if (!ok) return null;
      setNetErr("");
      if (adminMode) {
        if (j.unclaimed) { setUnclaimed(true); return null; }
        setUnclaimed(false);
        if (j.handle && j.handle !== handle) setHandle(j.handle);
        if (j.group_code && j.group_code !== group) setGroup(j.group_code);
      }
      setServer(j);
      // first load, or someone else changed it and we have no unsent edits: follow the server
      if (!draftRef.current || (!dirtyRef.current && j.revision !== knownRev.current)) {
        knownRev.current = j.revision;
        setDraft(DC.clone(j.spec));
      }
      return j;
    } catch (e) { setNetErr("Can't reach the server — check your connection"); return null; }
  }, [api, specUrl, adminMode, handle, group]);
  React.useEffect(() => { refresh(); }, [refresh]);

  // polling: every 2 s while waiting for the panel, else every 10 s
  React.useEffect(() => {
    if (!specUrl) return;
    const fast = phase === "waiting";
    const id = setInterval(async () => {
      const j = await refresh();
      if (!j || phase !== "waiting") return;
      const st = DC.applyStatus(j, savedRev);
      if (st.state === "applied") {
        const secs = sentAt ? Math.round((Date.now() - sentAt) / 100) / 10 : null;
        setAppliedInfo({ rev: savedRev, at: new Date(), secs });
        setPhase("applied");
      } else if (sentAt && Date.now() - sentAt > 180000) setPhase("slow");
    }, fast ? 2000 : 10000);
    return () => clearInterval(id);
  }, [specUrl, phase, savedRev, sentAt, refresh]);

  // live preview data: the same board payload the Pi renders (wagers, balances, results, reactions); every 20 s
  React.useEffect(() => {
    if (!handle) return;
    let stop = false;
    const load = async () => {
      if (document.hidden) return;
      try {
        const q = group ? `?code=${encodeURIComponent(group)}` : "";
        const r = await fetch(`${base}/display/devices/${encodeURIComponent(handle.toLowerCase())}/payload${q}`, {
          cache: "no-store", headers: token ? { Authorization: `Bearer ${token}` } : {}, // task 50: payload auth
        });
        const j = await r.json();
        if (stop) return;
        let fresh = null; // the Pi overwrites each board balance with GET /balances: do the same so the numbers match
        try { const b = await api("GET", `/balances${group ? `?code=${encodeURIComponent(group)}` : ""}`); if (b.ok && b.j && Array.isArray(b.j.balances)) fresh = b.j.balances; } catch (e) { /* payload numbers */ }
        if (stop) return;
        if (r.ok && j && j.ok && j.board) setLive({ data: DC.boardToPreview(j.board, fresh), at: new Date(), err: "" });
        else setLive((x) => ({ ...x, err: "unavailable" }));
      } catch (e) { if (!stop) setLive((x) => ({ ...x, err: "unavailable" })); }
    };
    load();
    const id = setInterval(load, 20000);
    return () => { stop = true; clearInterval(id); };
  }, [base, handle, group, api, token]);

  const schemaDoc = schema && schema.schema;
  const tfields = schema && schema.template_fields;
  const defaults = schema && schema.default_spec;

  // auto sport theme: which sports / themes the server resolves from this handle's open bets right now
  const loadAutoTheme = React.useCallback(async () => {
    if (!handle || !token) return;
    try {
      const { ok, j } = await api("GET", `/display/auto-sport-theme/${encodeURIComponent(handle)}`);
      if (ok && j && j.ok) setAutoTheme(j);
    } catch (e) { /* the toggle still works; the summary just stays as it was */ }
  }, [api, handle, token]);
  React.useEffect(() => {
    loadAutoTheme();
    const id = setInterval(() => { if (!document.hidden) loadAutoTheme(); }, 30000);
    return () => clearInterval(id);
  }, [loadAutoTheme]);

  const send = React.useCallback(async (spec) => {
    spec = DC.trimHeaderTitle(spec || draftRef.current);  // "Title bar text" is saved trimmed
    if (!spec || !specUrl) return;
    const saveDevs = (server && server.devices) || [];  // line_pause is dropped from saves until every display is new enough
    const errs = DC.validate(DC.specForServer(spec, schemaDoc, saveDevs), schemaDoc, tfields);
    setErrors(errs);
    if (errs.length) { setPhase("error"); return; }
    setPhase("saving");
    const gen = editGen.current;
    try {
      const { status, j } = await api("PUT", specUrl, JSON.parse(JSON.stringify(DC.specForServer(spec, schemaDoc, saveDevs))));
      if (status === 200 && j.ok) {
        let rev = j.revision;
        // the server schema does not list auto_sport_theme yet: the PUT dropped it, so save the toggle on its own
        if (handle && DC.autoThemeNeedsPatch(spec, server && server.spec, schemaDoc)) {
          const p = await api("PATCH", `/display/auto-sport-theme/${encodeURIComponent(handle)}`, { enabled: DC.autoSportThemeOf(spec) });
          if (p.ok && p.j && p.j.ok) { rev = p.j.revision || rev; setAutoTheme(p.j); }
          else { setErrors([p.status === 409 ? DC.saveErrorMessage(409, p.j) : ((p.j && (p.j.detail || p.j.error)) || "Couldn't save Auto sport theme")]); setPhase("error"); return; }
        }
        knownRev.current = rev;
        if (editGen.current === gen) dirtyRef.current = false;
        setSavedRev(rev); setSentAt(Date.now()); setAppliedInfo(null); setPhase("waiting");
        setTimeout(refresh, 600);
        setTimeout(loadAutoTheme, 700);
      } else if (status === 422) {
        setErrors(j.errors || [j.error || "Invalid"]); setPhase("error");
      } else { setErrors([DC.saveErrorMessage(status, j)]); setPhase("error"); }
    } catch (e) { setErrors(["Couldn't send — check your connection and try again"]); setPhase("error"); }
  }, [api, specUrl, schemaDoc, tfields, refresh, handle, server, loadAutoTheme]);

  const edit = React.useCallback((fn) => {
    const cur = draftRef.current;
    if (!cur) return;
    const next = fn(cur);
    if (JSON.stringify(next) === JSON.stringify(cur)) return;
    setHistory((h) => [...h.slice(-49), cur]);
    setDraft(next); draftRef.current = next; dirtyRef.current = true; editGen.current += 1;
    const errs = DC.validate(DC.specForServer(next, schemaDoc), schemaDoc, tfields);
    setErrors(errs);
    clearTimeout(saveTimer.current);
    if (errs.length) { setPhase("error"); return; }
    setPhase("pending");
    if (autoSend) saveTimer.current = setTimeout(() => send(next), SAVE_DEBOUNCE_MS);
  }, [autoSend, send, schemaDoc, tfields]);

  const undo = () => {
    if (!history.length) return;
    const prev = history[history.length - 1];
    setHistory((h) => h.slice(0, -1));
    setDraft(prev); draftRef.current = prev; dirtyRef.current = true; editGen.current += 1;
    clearTimeout(saveTimer.current);
    const errs = DC.validate(DC.specForServer(prev, schemaDoc), schemaDoc, tfields);
    setErrors(errs);
    if (errs.length) { setPhase("error"); return; }
    setPhase("pending");
    if (autoSend) saveTimer.current = setTimeout(() => send(prev), SAVE_DEBOUNCE_MS);
  };
  const resetDefault = () => {
    if (!defaults || !confirm("Reset the display to the default Brag Wire look?")) return;
    edit(() => DC.clone(defaults));
  };

  // ---------- login ----------
  if (adminMode && needLogin) return (
    <div className="dc"><style>{DC_CSS}</style><div className="dc-body"><div className="dc-err">Admin session expired: sign in to Brag Wire again.</div></div></div>
  );
  if (adminMode && unclaimed) return (
    <div className="dc"><style>{DC_CSS}</style><div className="dc-body"><div className="dc-card" data-testid="dc-unclaimed">This display is not signed in to a Brag Wire account yet, so it has no display settings. Sign it in on its setup page first.</div></div></div>
  );
  if (needLogin) return <DcLogin base={base} onDone={(tok) => { localStorage.setItem("bb_token", tok); setToken(tok); onAuth && onAuth(tok); }} />;
  if (!draft) return (
    <div className="dc"><style>{DC_CSS}</style><div className="dc-body"><div className="dc-card">{netErr || "Loading your display…"}</div></div></div>
  );

  // ---------- status ----------
  const st = server ? DC.applyStatus(server, savedRev) : { state: "unknown", text: "" };
  const devs = (server && server.devices) || [];
  const online = devs.some((d) => DC.isOnline(d));
  let dot = online ? "var(--dc-ok)" : "var(--dc-bad)", line1, line2;
  if (!devs.length) { dot = "#6b7280"; line1 = "No display linked"; line2 = "Sign in on the Pi's setup page to link it"; }
  else line1 = `Display ${online ? "online" : "OFFLINE"} · ${DC.deviceLabels(devs).join(", ")}`;
  if (phase === "pending") line2 = autoSend ? "Change queued — sending in a moment…" : "Unsent changes — tap Send to display";
  else if (phase === "saving") line2 = "Sending…";
  else if (phase === "waiting") line2 = online ? `Saved · waiting for the panel… ${sentAt ? Math.round((Date.now() - sentAt) / 1000) + "s" : ""}` : "Saved · panel offline, it will apply when it reconnects";
  else if (phase === "slow") line2 = "Saved, the panel hasn't confirmed yet (it may be restarting)";
  else if (phase === "error") line2 = "Not sent — fix the problem below";
  else if (devs.length) line2 = st.state === "applied" ? "Saved · on the panel ✓" : st.text;
  const rendErr = st.error || null;  // online displays only (an offline one's last error is stale)
  // one fixed line for problems so the sticky header never changes height mid-edit
  const problem = netErr || (rendErr ? `Panel reports a problem: ${rendErr}` : "")
    || (errors.length ? `Can't send: ${DC.friendlyError(errors[0], draft)}${errors.length > 1 ? ` (+${errors.length - 1} more, listed at the bottom)` : ""}` : "");
  const spec = draft;
  const theme = spec.theme || {};
  const colors = DC.themeColors(spec, defaults);
  const pages = spec.pages || [];

  return (
    <div className="dc">
      <style>{DC_CSS}</style>
      <div className="dc-status" role="status" aria-live="polite">
        <div className="dc-status-row"><span className="dc-dot" style={{ background: dot }} /><span className="dc-line">{line1}</span></div>
        <div className="dc-sub dc-line" style={{ color: phase === "error" ? "var(--dc-bad)" : phase === "waiting" || phase === "saving" || phase === "pending" ? "var(--dc-warn)" : phase === "applied" && appliedInfo ? "var(--dc-ok)" : undefined, fontWeight: 700 }}>
          {phase === "applied" && appliedInfo
            ? `✓ Sent to panel at ${appliedInfo.at.toLocaleTimeString([], { hour: "numeric", minute: "2-digit", second: "2-digit" })}${appliedInfo.secs != null ? ` (${appliedInfo.secs}s)` : ""}`
            : (line2 || "\u00a0")}
        </div>
        <div className="dc-sub dc-line" data-testid="status-problem" title={problem || st.note || undefined} style={{ color: problem ? "var(--dc-bad)" : undefined, fontWeight: problem ? 700 : 400 }}>{problem || st.note || "\u00a0"}</div>
      </div>

      <div className="dc-body">
        {adminMode && (
          <div className={devs.length > 1 ? "dc-err" : "dc-card"} data-testid="dc-shared" style={{ fontWeight: 600 }}>
            {devs.length > 1
              ? `Shared settings: these belong to ${handle}'s account and change all ${devs.length} displays on it: ${devs.map((d) => `${d.name} #${d.id}`).join(", ")}.`
              : `Settings of ${handle}'s account (this is the only display on it).`}
          </div>
        )}
        <PanelPreview spec={DC.specForServer(spec, schemaDoc)} defaults={defaults} popupAt={popupAt} live={live} api={token ? api : null} />


        <div style={{ display: "grid", gap: 8 }}>
          <button type="button" className="dc-btn big go" disabled={phase === "saving" || errors.length > 0} onClick={() => { clearTimeout(saveTimer.current); send(); }}>
            {phase === "saving" ? "Sending…" : "Send to display"}
          </button>
          <div className="dc-grid2">
            <button type="button" className="dc-btn" disabled={!history.length} onClick={undo}>↶ Undo last change</button>
            <button type="button" className={"dc-btn" + (autoSend ? " on" : "")} onClick={() => setAutoSend(!autoSend)}>Auto-send: {autoSend ? "ON" : "OFF"}</button>
          </div>
        </div>

        {devs.length > 0 && !hideSetupMode && (
          <div className="dc-card" data-testid="setup-mode-card">
            <h3 className="dc-h">Wi-Fi setup</h3>
            {devs.map((d) => {
              const ok = DC.setupModeOk(d);
              const msg = setupMsg[d.id];
              return (
                <div key={d.id} style={{ display: "grid", gap: 4, marginBottom: 8 }}>
                  <button type="button" className="dc-btn" data-testid="setup-mode-btn" disabled={!ok || msg === "Sending…"}
                    onClick={async () => {
                      if (!confirm("This display will leave Wi-Fi and show its setup hotspot for 10 minutes.")) return;
                      setSetupMsg((m) => ({ ...m, [d.id]: "Sending…" }));
                      let text;
                      try {
                        const { ok: rOk, j } = await api("POST", `/display/v2/devices/${encodeURIComponent(d.id)}/setup-mode`);
                        text = rOk ? "Sent · the setup hotspot comes up within about a minute, for 10 minutes" : `Not sent: ${(j && j.detail) || "server error"}`;
                      } catch (e) { text = "Not sent: can't reach the server"; }
                      setSetupMsg((m) => ({ ...m, [d.id]: text }));
                    }}>Back to setup mode · {DC.deviceLabel(d, devs)}</button>
                  {!ok && <div className="dc-sub" data-testid="setup-mode-hint">Needs display update {DC.SETUP_MODE_MIN} · {DC.deviceLabel(d, devs)} is on {d.agent_version || "an older version"}</div>}
                  {msg && <div className="dc-sub">{msg}</div>}
                </div>
              );
            })}
          </div>
        )}

        {DC.rigidPanelDevices(devs, handle, adminMode).length > 0 && (
          // Rigid panels only (panel_type RUL6024 / RUL6024_*), the signed-in owner's own displays (admin: that account's): the picture is garbled until the Pi knows the size.
          // Endpoint + field: DC.PANEL_RES_API (one constant). Unknown / not reported yet = 64x32 (today's behaviour).
          <div className="dc-card" data-testid="panel-res-card">
            <h3 className="dc-h">Rigid panel resolution</h3>
            <div className="dc-sub">Pick the size of each Rigid panel. It applies on the display's next sync, no new setup needed.</div>
            {DC.rigidPanelDevices(devs, handle, adminMode).map((d) => {
              const cur = resSel[d.id] || DC.panelResolutionOf(d);
              const msg = resMsg[d.id];
              const busy = msg && msg.text === "Saving…";
              const canSet = DC.panelResolutionOk(d);   // API panel_resolution_ok: false = agent below 2.0.53.3
              const reported = d[DC.PANEL_RES_API.field] ? DC.panelResolutionOf(d) : "";
              return (
                <div key={d.id} className="dc-l" data-testid="panel-res" data-device={d.id} style={{ display: "grid", gap: 6 }}>
                  <label className="dc-l" style={{ overflowWrap: "anywhere" }}>Resolution · {DC.deviceLabel(d, devs)}
                    <select value={cur} aria-label={`Resolution for ${DC.deviceLabel(d, devs)}`} data-testid="panel-res-select" disabled={busy || !canSet}
                      onChange={(e) => { const v = e.target.value; setResSel((m) => ({ ...m, [d.id]: v })); setResMsg((m) => ({ ...m, [d.id]: null })); }}>
                      {DC.panelResolutionChoices(d).map(([v, l]) => <option key={v} value={v}>{l}</option>)}
                    </select>
                  </label>
                  {reported && <div className="dc-sub" data-testid="panel-res-reported">Display reports {reported.replace("x", "×")}</div>}
                  {!canSet && <div className="dc-sub" data-testid="panel-res-update" style={{ color: "var(--dc-warn)", fontWeight: 700 }}>{DC.PANEL_RES_UPDATE_MSG}</div>}
                  <button type="button" className="dc-btn" data-testid="panel-res-save" disabled={busy || !canSet}
                    onClick={async () => {
                      const req = DC.panelResolutionRequest(d.id, cur, adminMode);
                      setResMsg((m) => ({ ...m, [d.id]: { ok: true, text: "Saving…" } }));
                      let res;
                      try { const r = await api(req.method, req.path, req.body); res = DC.panelResolutionResult(r.status, r.j, cur); }
                      catch (e) { res = DC.panelResolutionResult(0, null, cur); }
                      setResMsg((m) => ({ ...m, [d.id]: res }));
                    }}>{busy ? "Saving…" : "Save resolution"}</button>
                  {msg && !busy && <div className={msg.ok ? "dc-sub" : "dc-err"} role={msg.ok ? "status" : "alert"} data-testid={msg.ok ? "panel-res-ok" : "panel-res-error"}
                    style={msg.ok ? { color: "var(--dc-ok)", fontWeight: 700 } : undefined}>{msg.text}</div>}
                </div>
              );
            })}
          </div>
        )}

        <div className="dc-tabs">
          <button type="button" className={"dc-btn" + (tab === "easy" ? " on" : "")} onClick={() => setTab("easy")}>Controls</button>
          <button type="button" className={"dc-btn" + (tab === "json" ? " on" : "")} onClick={() => { setJsonText(JSON.stringify(spec, null, 2)); setJsonErr([]); setTab("json"); }}>Advanced (JSON)</button>
        </div>

        {tab === "easy" && (
          <>
            <div className="dc-card">
              <Toggle label="Display" sub={spec.enabled === false ? "Panel is dark — tap to turn on" : "Panel is on — tap to turn off"} on={spec.enabled !== false} onChange={(v) => edit((s) => DC.setIn(s, ["enabled"], v))} />
              <Slider label="Brightness" value={Number(spec.brightness || 60)} min={3} max={100} fmt={(v) => `${v}%`} onChange={(v) => edit((s) => DC.setIn(s, ["brightness"], v))} />
              <Toggle label="Wife mode" sub="Hides your bets; your numbers show positive" on={!!spec.wife_mode} onChange={(v) => edit((s) => DC.setIn(s, ["wife_mode"], v))} />
            </div>

            <div className="dc-card" data-testid="panels-card">
              <h3 className="dc-h">Panels</h3>
              {(() => {
                // Several identical 128x64 panels on the same output act as one screen. Enter how many wide / tall,
                // then which chain-numbered panel sits where (#1 = plugged into the Pi, #2 next on the cable...).
                const pl = DC.panelsOf(spec), sz = DC.panelsLogical(spec), sup = DC.panelSupport(devs);
                const n = pl.wide * pl.tall, grid = DC.panelGrid(spec);
                const lock = !sup.ok && n === 1; // a multi-panel save would be refused (409) until every display updates
                const sizes = [];
                for (let k = 1; k <= Math.min(pl.wide, pl.tall); k++) sizes.push([k, `${k}× (${Math.floor(pl.wide * 128 / k)}×${Math.floor(pl.tall * 64 / k)})`]);
                return (
                  <>
                    <div className="dc-grid2">
                      <label className="dc-l">Panels wide
                        <select value={pl.wide} disabled={lock} aria-label="Panels wide"
                          onChange={(e) => edit((s) => DC.setPanelGrid(s, Number(e.target.value), pl.tall))}>
                          {Array.from({ length: DC.PANELS_MAX_SIDE }, (_, i) => i + 1).map((n) => <option key={n} value={n}>{n}</option>)}
                        </select>
                      </label>
                      <label className="dc-l">Panels tall
                        <select value={pl.tall} disabled={lock} aria-label="Panels tall"
                          onChange={(e) => edit((s) => DC.setPanelGrid(s, pl.wide, Number(e.target.value)))}>
                          {Array.from({ length: DC.PANELS_MAX_SIDE }, (_, i) => i + 1).map((n) => <option key={n} value={n}>{n}</option>)}
                        </select>
                      </label>
                    </div>
                    <div className="dc-sub">{n === 1 ? "One 128×64 panel." : `${n} panels (128×64 each) on one output, chained · screen ${sz.w}×${sz.h}${sz.scale > 1 ? `, shown ${sz.scale}× bigger` : ""}`} · up to {DC.PANELS_MAX}</div>
                    {!sup.ok && <div className="dc-sub" data-testid="panels-hint">Multiple panels: coming in the next display update ({DC.PANELS_MIN}){sup.old.length ? ` · ${sup.old.map((d) => `${d.name} is on ${d.release_version || "an older version"}`).join(", ")}` : ""}</div>}
                    {n > 1 && (
                      <>
                        <div className="dc-sub">Pick the panel number for each spot: #1 is the panel plugged into the Pi, #2 the next one on the cable, and so on. Flip any panel mounted upside down.</div>
                        <div className="dc-panel-grid" style={{ gridTemplateColumns: `repeat(${pl.wide}, minmax(0, 1fr))` }}>
                          {grid.map((row, r) => row.map((m, c) => (
                            <div key={r + "-" + c} className="dc-panel-cell" data-testid="panel-cell">
                              <div className="dc-sub">Row {r + 1} · Col {c + 1}</div>
                              <select aria-label={`Panel at row ${r + 1}, column ${c + 1}`} value={m.chain_index}
                                onChange={(e) => edit((s) => DC.setPanelAt(s, Number(e.target.value), r, c))}>
                                {pl.map.map((x) => <option key={x.chain_index} value={x.chain_index}>#{x.chain_index}</option>)}
                              </select>
                              <button type="button" className={"dc-btn sm" + (m.rotate === 180 ? " on" : "")} aria-pressed={m.rotate === 180}
                                onClick={() => edit((s) => DC.setPanelRotate(s, m.chain_index, m.rotate === 180 ? 0 : 180))}>{m.rotate === 180 ? "Upside down" : "Upright"}</button>
                            </div>
                          )))}
                        </div>
                        {sizes.length > 1 && <Segmented label="Content size" value={sz.scale} options={sizes}
                          onChange={(v) => edit((s) => DC.setPanelOption(s, "scale", v === Math.min(pl.wide, pl.tall) ? null : v))} />}
                        <Toggle label="Identify panels" sub="Each panel shows its number, row / column and which way is up" on={pl.identify}
                          onChange={(v) => edit((s) => DC.setPanelOption(s, "identify", v))} />
                      </>
                    )}
                  </>
                );
              })()}
            </div>

            <div className="dc-card">
              <h3 className="dc-h">Look</h3>
              <div className="dc-presets">
                {DC.PRESETS.map((p) => (
                  <button key={p.id} type="button" className="dc-preset" onClick={() => edit((s) => DC.applyPreset(s, p.id, clearPageColors))}
                    style={{ background: p.colors.background, color: p.colors.text, borderColor: p.colors.accent }}>
                    <div style={{ color: p.colors.accent }}>{p.name}</div>
                    <div style={{ fontSize: 12, fontWeight: 600 }}>{p.title || "keeps your title"}</div>
                  </button>
                ))}
              </div>
              <label className="dc-row dc-sub" style={{ gap: 8 }}>
                <input type="checkbox" checked={clearPageColors} onChange={(e) => setClearPageColors(e.target.checked)} style={{ width: 22, height: 22 }} />
                <span style={{ flex: 1 }}>Presets also reset per-page colors (so every page changes)</span>
              </label>
              <TextField label="Title (top left)" value={theme.title} max={24} placeholder="BLACKBOOK" onChange={(v) => edit((s) => DC.setIn(s, ["theme", "title"], v || undefined))} />
              {(() => {
                // animated background behind the content (text keeps a dark outline so it stays readable); "none" =
                // plain. Grouped by category; a theme a linked display is too old for is disabled. Picking one
                // re-renders the server preview (the real panel renderer), so the user sees it animate right away.
                const bgt = DC.bgThemeOf(spec), bsup = DC.bgThemeSupport(devs), cur = DC.bgThemeSupport(devs, bgt);
                const v2 = DC.bgThemeSupport(devs, "touchdown");
                const autoOn = DC.autoSportThemeOf(spec), asup = DC.autoThemeSupport(devs);
                const sum = DC.autoThemeSummary(autoTheme && autoTheme.enabled === autoOn ? autoTheme : (autoOn ? null : autoTheme));
                return (
                  <>
                    <div data-testid="auto-sport-theme">
                      <Toggle label="Auto sport theme" sub="Match themes to the sports you have bets on" on={autoOn}
                        onChange={(v) => edit((s) => DC.setAutoSportTheme(s, v))} />
                    </div>
                    {autoOn && (
                      <div className={"dc-auto " + (sum.active ? "on" : "idle")} data-testid="auto-sport-theme-status" aria-live="polite">
                        <div className="dc-auto-h">{sum.active ? <>Now showing: <b>{sum.text}</b></> : sum.text}</div>
                        {sum.active && <div className="dc-auto-chips">{sum.themes.map((t) => <span key={t} className="dc-chip">{t}</span>)}</div>}
                        <div className="dc-sub">Popups use the same theme.{!asup.ok ? ` Needs display update ${asup.min}${asup.old.length ? ` · ${asup.old.map((d) => `${d.name} is on ${d.release_version || "an older version"}`).join(", ")}` : ""}; until then your pick below shows.` : ""}</div>
                      </div>
                    )}
                    <div className={autoOn ? "dc-dim" : ""}>
                    <label className="dc-l" data-testid="bg-theme">{autoOn ? "Fallback background (no bets on a themed sport)" : "Animated background"}
                      <select value={bgt} disabled={!bsup.ok && bgt === "none"} aria-label="Animated background"
                        onChange={(e) => edit((s) => DC.setBgTheme(s, e.target.value))}>
                        <option value="none">None (plain)</option>
                        {DC.BG_THEME_GROUPS.map(([cat, items]) => (
                          <optgroup key={cat} label={cat}>
                            {items.map(([id, label]) => {
                              const sup = DC.bgThemeSupport(devs, id, schemaDoc), ok = sup.ok || id === bgt;
                              return <option key={id} value={id} disabled={!ok}>{label}{ok ? "" : sup.schema ? ` (needs ${DC.bgThemeMin(id)})` : " (server update pending)"}</option>;
                            })}
                          </optgroup>
                        ))}
                      </select>
                    </label>
                    </div>
                    {DC.BG_THEME_V3_FALLBACK[bgt] && <div className="dc-sub" data-testid="bg-theme-fallback">Displays before 2.0.53 show {DC.bgThemeLabel(DC.BG_THEME_V3_FALLBACK[bgt])} instead</div>}
                    {(() => {
                      const known = DC.schemaKnowsBgIntensity(schemaDoc), val = DC.bgIntensityOf(spec);
                      return (
                        <div data-testid="bg-intensity">
                          <Segmented label="Background intensity" value={val} options={DC.BG_INTENSITIES}
                            disabled={(v) => !known && v !== val} onChange={(v) => edit((s) => DC.setBgIntensity(s, v))} />
                          {!known && <div className="dc-sub" data-testid="bg-intensity-hint">Calm / Wild: coming with the next server update</div>}
                        </div>
                      );
                    })()}
                    <TeamAccentsControl spec={spec} edit={edit} devs={devs} schema={schemaDoc} />
                    {(!bsup.ok || !cur.ok || !v2.ok) && <div className="dc-sub" data-testid="bg-theme-hint">{bsup.ok ? "More animated backgrounds" : "Animated backgrounds"}: coming in the next display update ({(bsup.ok ? v2 : bsup).min}){(bsup.ok ? v2 : bsup).old.length ? ` · ${(bsup.ok ? v2 : bsup).old.map((d) => `${d.name} is on ${d.release_version || "an older version"}`).join(", ")}` : ""}</div>}
                  </>
                );
              })()}
              <div className="dc-colors">
                {["background", "text", "accent", "header_bg", "footer_bg", "separator", "win", "loss", "pending", "dim", "row_tint"].map((k) => (
                  <ColorField key={k} label={DC.COLOR_LABELS[k]} value={colors[k]} onChange={(v) => edit((s) => {
                    let x = DC.setIn(s, ["theme", "colors", k], v);
                    if (["accent", "background", "text"].indexOf(k) >= 0) x = DC.setIn(x, ["theme", k], undefined);
                    return x;
                  })} />
                ))}
              </div>
              <div className="dc-sub">Optional (× = back to the stock look)</div>
              <div className="dc-colors">
                {["group_bg", "group_text", "footer_text", "footer_separator"].map((k) => (
                  <ColorField key={k} label={DC.COLOR_LABELS[k]} value={colors[k] || DC.OPTIONAL_COLOR_STOCK[k] || (k === "footer_separator" ? colors.separator : k === "footer_text" ? colors.accent : colors.text)}
                    onChange={(v) => edit((s) => DC.setIn(s, ["theme", "colors", k], v))}
                    onClear={(spec.theme && spec.theme.colors && spec.theme.colors[k]) ? () => edit((s) => DC.setIn(s, ["theme", "colors", k], undefined)) : null} />
                ))}
              </div>
            </div>

            <div className="dc-card">
              <h3 className="dc-h">Ticker &amp; title bar</h3>
              {(() => {
                const pos = DC.layoutPositions(spec);
                const stack = DC.layoutStackSupport(devs);
                // a choice that would put both bars on the same edge needs 2.0.13 on every linked display
                const needsUpdate = (ticker, title) => ticker === title && !stack.ok;
                return (
                  <>
                    <Segmented label="Ticker" value={pos.ticker} options={[["top", "Top"], ["bottom", "Bottom"]]}
                      disabled={(v) => needsUpdate(v, pos.title)}
                      onChange={(v) => edit((s) => DC.setLayoutPositions(s, v, pos.title))} />
                    <Segmented label="Title bar" value={pos.title} options={[["top", "Top"], ["bottom", "Bottom"]]}
                      disabled={(v) => needsUpdate(pos.ticker, v)}
                      onChange={(v) => edit((s) => DC.setLayoutPositions(s, pos.ticker, v))} />
                    {(spec.header || {}).show !== false && (
                      <label className="dc-l">Title bar shows
                        <select value={(spec.header || {}).content || ((spec.header || {}).show_page_title !== false ? "both" : "title")}
                          onChange={(e) => edit((s) => { let x = DC.setIn(s, ["header", "content"], e.target.value); return DC.setIn(x, ["header", "show_page_title"], e.target.value !== "title"); })}>
                          {DC.HEADER_CONTENT.map(([v, l]) => <option key={v} value={v}>{l}</option>)}
                        </select>
                      </label>
                    )}
                    {(spec.header || {}).show !== false && (spec.header || {}).content !== "page" && (() => {
                      const ht = (spec.header || {}).title || "";
                      return (
                        <label className="dc-l" data-testid="header-title">
                          <span className="dc-row"><span>Title bar text</span><span className="dc-mono dc-sub">{ht.length}/{DC.HEADER_TITLE_MAX}</span></span>
                          <input type="text" value={ht} maxLength={DC.HEADER_TITLE_MAX} placeholder={(spec.theme && spec.theme.title) || "BLACKBOOK"}
                            aria-label="Title bar text" style={{ width: "100%", minWidth: 0, boxSizing: "border-box" }}
                            onChange={(e) => edit((s) => DC.setHeaderTitle(s, e.target.value))}
                            onBlur={() => { if (DC.trimHeaderTitle(spec) !== spec) edit((s) => DC.trimHeaderTitle(s)); }} />
                          <span className="dc-sub" style={{ fontWeight: 400 }}>Short titles fit best on Rigid. Blank = {(spec.theme && spec.theme.title) || "BLACKBOOK"}.</span>
                        </label>
                      );
                    })()}
                    {!stack.ok && (
                      <div className="dc-sub" data-testid="layout-stack-hint">Both on the same edge: coming in the next display update ({DC.LAYOUT_POSITIONS_MIN}){stack.old.length ? ` · ${stack.old.map((d) => `${d.name} is on ${d.release_version || "an older version"}`).join(", ")}` : ""}</div>
                    )}
                  </>
                );
              })()}
              <Toggle label="Show title bar" on={(spec.header || {}).show !== false} onChange={(v) => edit((s) => DC.setIn(s, ["header", "show"], v))} />
              <Toggle label="Show ticker" on={(spec.footer || {}).show !== false} onChange={(v) => edit((s) => DC.setIn(s, ["footer", "show"], v))} />
              {(spec.footer || {}).show !== false && (
                <>
                  <TextField label="Footer text (blank = live reactions & movers)" value={(spec.footer || {}).text} max={200} placeholder="e.g. GO CHIEFS * {date} {time}"
                    onChange={(v) => edit((s) => DC.setIn(s, ["footer", "text"], v || undefined))} />
                  <div className="dc-sub">You can use {"{date} {time} {user}"}</div>
                  <Slider label="Ticker speed" value={Number((spec.footer || {}).speed || 12)} min={1} max={20} onChange={(v) => edit((s) => DC.setIn(s, ["footer", "speed"], v))} />
                  {!(spec.footer || {}).text && (
                    <div className="dc-grid2">
                      <Toggle label="Reactions" on={(spec.footer || {}).reactions !== false} onChange={(v) => edit((s) => DC.setIn(s, ["footer", "reactions"], v))} />
                      <Toggle label="Movers" on={(spec.footer || {}).movers !== false} onChange={(v) => edit((s) => DC.setIn(s, ["footer", "movers"], v))} />
                    </div>
                  )}
                </>
              )}
            </div>

            <div className="dc-card">
              <h3 className="dc-h">Pages ({pages.length})</h3>
              <div className="dc-sub">They rotate top to bottom. Tap ▸ to edit; ↑ ↓ to reorder.</div>
              {DC.LINE_PAUSE_ENABLED && (() => {  // hidden entirely while the kill switch is off
                const lsup = DC.linePauseSupport(devs);
                return (
                  <div className="dc-lp-wrap">
                    <LinePauseControl label="Pause on each line" testid="line-pause" devs={devs} value={DC.linePauseOf(spec)}
                      onChange={(v) => edit((s) => DC.setLinePause(s, v))} />
                    <div className="dc-sub">Holds each line still so it's easier to read.</div>
                    {!lsup.ok && <div className="dc-sub" data-testid="line-pause-hint">Coming in the next display update ({lsup.min}){lsup.old.length ? ` · ${lsup.old.map((d) => `${d.name} is on ${d.release_version || "an older version"}`).join(", ")}` : ""}</div>}
                  </div>
                );
              })()}
              {pages.map((p, i) => <PageEditor key={i} page={p} i={i} n={pages.length} edit={edit} open={openPage === i} setOpen={setOpenPage} linePause={DC.linePauseOf(spec)} devs={devs} spec={spec} schema={schemaDoc} />)}
              <div className="dc-row">
                <select value={addType} onChange={(e) => setAddType(e.target.value)} style={{ flex: 1 }}>
                  {DC.PAGE_TYPES.map((t) => { const sup = DC.pageTypeSupport(devs, t); return <option key={t} value={t} disabled={!sup.ok}>{DC.PAGE_LABELS[t]}{sup.ok ? "" : ` (needs display ${sup.min})`}</option>; })}
                </select>
                <button type="button" className="dc-btn" disabled={pages.length >= 20 || addType === "image" || !DC.pageTypeSupport(devs, addType).ok} onClick={() => { edit((s) => DC.addPage(s, addType)); setOpenPage(pages.length); }}>+ Add</button>
              </div>
              {!DC.pageTypeSupport(devs, addType).ok && (
                <div className="dc-sub" data-testid="page-type-hint">{DC.PAGE_LABELS[addType]}: coming in the next display update ({DC.pageTypeSupport(devs, addType).min}) · {DC.pageTypeSupport(devs, addType).old.map((d) => `${d.name} is on ${d.release_version || "an older version"}`).join(", ")}</div>
              )}
              {addType === "image" && (
                <label className="dc-l">Pick a picture to add a picture page
                  <input type="file" accept="image/png,image/jpeg,image/gif" onChange={(e) => {
                    const f = e.target.files && e.target.files[0]; if (!f) return;
                    const n = pages.length;
                    const fr = new FileReader();
                    fr.onload = () => { const im = new Image(); im.onload = () => {
                      const cv = document.createElement("canvas"); const k = Math.min(128 / im.width, 40 / im.height, 1);
                      cv.width = Math.max(1, Math.round(im.width * k)); cv.height = Math.max(1, Math.round(im.height * k));
                      cv.getContext("2d").drawImage(im, 0, 0, cv.width, cv.height);
                      let url = cv.toDataURL("image/png"); if (url.length > 60000) url = cv.toDataURL("image/jpeg", 0.8);
                      if (url.length > 60000) { alert("That picture is too big"); return; }
                      edit((s) => { const x = DC.addPage(s, "image"); x.pages[x.pages.length - 1].image = url; return x; }); setOpenPage(n);
                    }; im.src = fr.result; };
                    fr.readAsDataURL(f);
                  }} />
                </label>
              )}
            </div>

            <div className="dc-card">
              <h3 className="dc-h">Popups</h3>
              <Toggle label="Popups (new wagers, results, messages)" on={(spec.popups || {}).enabled !== false} onChange={(v) => edit((s) => DC.setIn(s, ["popups", "enabled"], v))} />
              <Slider label="Popup length" value={Number((spec.popups || {}).seconds || 4)} min={1} max={30} step={0.5} fmt={(v) => `${v}s`} onChange={(v) => edit((s) => DC.setIn(s, ["popups", "seconds"], v))} />
              <Slider label="Seconds per page of bettors" value={Number((spec.popups || {}).page_seconds || 3)} min={1} max={15} step={0.5} fmt={(v) => `${v}s`} onChange={(v) => edit((s) => DC.setIn(s, ["popups", "page_seconds"], v))} />
              <div className="dc-sub">Score / final popups show 3 bettors at a time and flip pages (1/3, 2/3…). Every page is shown at least once.</div>
              <Toggle label="Score alerts" sub="Pop up when a game someone bet on changes score, with each bettor's status" on={(spec.popups || {}).score_alerts !== false} onChange={(v) => edit((s) => DC.setIn(s, ["popups", "score_alerts"], v))} />
              <Toggle label="Final alerts" sub="WON / LOST / PUSH and the amount when the game ends" on={(spec.popups || {}).final_alerts !== false} onChange={(v) => edit((s) => DC.setIn(s, ["popups", "final_alerts"], v))} />
              <Toggle label="Messages" sub="Messages other players send you" on={(spec.popups || {}).messages !== false} onChange={(v) => edit((s) => DC.setIn(s, ["popups", "messages"], v))} />
              <div className="dc-l">Sports for score / final alerts
                <div className="dc-chips">
                  {DC.SPORTS.map((sp) => {
                    const cur = Array.isArray((spec.popups || {}).sports) ? spec.popups.sports : DC.DEFAULT_ALERT_SPORTS;
                    const on = cur.indexOf(sp) >= 0;
                    return <button key={sp} type="button" className={"dc-chip" + (on ? " on" : "")} aria-pressed={on}
                      onClick={() => edit((s) => DC.setIn(s, ["popups", "sports"], DC.SPORTS.filter((x) => (x === sp ? !on : cur.indexOf(x) >= 0))))}>{sp[0].toUpperCase() + sp.slice(1)}</button>;
                  })}
                </div>
              </div>
              <button type="button" className="dc-btn" onClick={() => {
                const bettors = [["ROOSRER", "COVERING", 1], ["BILL", "LOSING", -1], ["JAY", "COVERING", 1], ["MIKE", "LOSING", -1], ["SAM", "COVERING", 1]];
                const secs = DC.popupDuration(spec.popups, bettors.length);
                setPopupAt({ until: Date.now() + 1000 * secs, t0: Date.now(), pageSeconds: Number((spec.popups || {}).page_seconds || 3), league: "NFL",
                             away: "Buffalo Bills", home: "Kansas City Chiefs", as: 7, hs: 14, bettors });
              }}>Preview a score alert (here only)</button>
            </div>

            <div className="dc-card">
              <h3 className="dc-h">Sleep schedule</h3>
              <Toggle label="Turn off overnight" on={!!(spec.sleep || {}).enabled} onChange={(v) => edit((s) => { let x = DC.setIn(s, ["sleep", "enabled"], v); if (v && !(x.sleep.start)) { x = DC.setIn(x, ["sleep", "start"], "23:00"); x = DC.setIn(x, ["sleep", "end"], "07:00"); x = DC.setIn(x, ["sleep", "tz"], "America/New_York"); } return x; })} />
              {(spec.sleep || {}).enabled && (
                <div className="dc-grid2">
                  <label className="dc-l">Off at<input type="time" value={(spec.sleep || {}).start || "23:00"} onChange={(e) => e.target.value && edit((s) => DC.setIn(s, ["sleep", "start"], e.target.value))} /></label>
                  <label className="dc-l">On at<input type="time" value={(spec.sleep || {}).end || "07:00"} onChange={(e) => e.target.value && edit((s) => DC.setIn(s, ["sleep", "end"], e.target.value))} /></label>
                </div>
              )}
            </div>

            <div className="dc-card">
              <button type="button" className="dc-btn danger" onClick={resetDefault}>Reset to default look</button>
            </div>
          </>
        )}

        {tab === "json" && (
          <div className="dc-card">
            <h3 className="dc-h">Whole spec (JSON)</h3>
            <div className="dc-sub">View, edit or paste a full display spec. It is checked before it is sent.</div>
            <textarea rows={18} value={jsonText} spellCheck={false} onChange={(e) => setJsonText(e.target.value)} />
            {jsonErr.length > 0 && <div className="dc-err"><ul style={{ margin: 0, paddingLeft: 18 }}>{jsonErr.slice(0, 8).map((e, k) => <li key={k}>{e}</li>)}</ul></div>}
            <div className="dc-grid2">
              <button type="button" className="dc-btn" onClick={() => {
                try { const s = JSON.parse(jsonText); const e = DC.validate(s, schemaDoc, tfields); setJsonErr(e.length ? e : ["✓ Looks good"]); } catch (e) { setJsonErr(["Not valid JSON: " + e.message]); }
              }}>Check</button>
              <button type="button" className="dc-btn go" onClick={() => {
                let s; try { s = JSON.parse(jsonText); } catch (e) { setJsonErr(["Not valid JSON: " + e.message]); return; }
                const e = DC.validate(s, schemaDoc, tfields); if (e.length) { setJsonErr(e); return; }
                setJsonErr([]); edit(() => s); clearTimeout(saveTimer.current); send(s);
              }}>Apply</button>
            </div>
            <button type="button" className="dc-btn" onClick={() => { setJsonText(JSON.stringify(spec, null, 2)); setJsonErr([]); }}>Reload from current draft</button>
          </div>
        )}
        {/* full list lives at the bottom: showing/hiding it above the controls shifted the field you were typing in */}
        {errors.length > 0 && (
          <div className="dc-err" role="alert">
            <div style={{ marginBottom: 4 }}>Can't send this yet:</div>
            <ul style={{ margin: 0, paddingLeft: 18 }}>{errors.slice(0, 6).map((e, k) => <li key={k}>{DC.friendlyError(e, spec)}</li>)}</ul>
          </div>
        )}
        <div className="dc-sub" style={{ textAlign: "center", paddingBottom: 24 }}>
          {handle ? (adminMode ? `Editing ${handle}'s display as admin` : `Signed in as ${handle}`) : ""}
        </div>
      </div>
    </div>
  );
}

function DcLogin({ base, onDone }) {
  const [h, setH] = React.useState(localStorage.getItem("bb_handle") || "");
  const [pin, setPin] = React.useState("");
  const [code, setCode] = React.useState(localStorage.getItem("bb_group_code") || "");
  const [err, setErr] = React.useState("");
  const [busy, setBusy] = React.useState(false);
  const go = async (e) => {
    e.preventDefault(); setErr(""); setBusy(true);
    try {
      const r = await fetch(base + "/ticker/auth", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ handle: h.trim(), pin, code: code.trim() }) });
      const j = await r.json().catch(() => ({}));
      if (!j.ok || !j.token) throw new Error(j.error || "Sign-in failed");
      localStorage.setItem("bb_handle", j.handle || h.trim()); localStorage.setItem("bb_group_code", code.trim());
      onDone(j.token);
    } catch (e2) { setErr(e2.message); } finally { setBusy(false); }
  };
  return (
    <div className="dc"><style>{DC_CSS}</style>
      <form className="dc-body" onSubmit={go}>
        <div className="dc-card">
          <h3 className="dc-h">Sign in to control your display</h3>
          <TextField label="Handle" value={h} onChange={setH} max={32} />
          <label className="dc-l">PIN<input type="password" inputMode="numeric" maxLength={4} value={pin} onChange={(e) => setPin(e.target.value.replace(/\D/g, ""))} /></label>
          <TextField label="Group code" value={code} onChange={setCode} max={64} />
          {err && <div className="dc-err">{err}</div>}
          <button className="dc-btn big go" disabled={busy}>{busy ? "Signing in…" : "Sign in"}</button>
        </div>
      </form>
    </div>
  );
}

window.DisplayControl = DisplayControl;
window.__dcDrawWall = drawWall;
window.__dcDrawPanel = drawPanel; // exposed for tests
})();