/* ========================================================================
   LUMINA — Composition Banks (Cues) UI
   16 numbered slots. Click empty to save, click filled to recall.
   Shift+click to rename, right-click to delete.
   ======================================================================== */
(function () {
  const { useState, useEffect, useRef } = React;

  function BanksButton() {
    const [open, setOpen] = useState(false);
    const [, tick] = useState(0);
    useEffect(() => {
      const B = window.LuminaBanks;
      return B?.on?.(() => tick(n => n + 1));
    }, []);

    const B = window.LuminaBanks;
    if (!B) return null;
    const used = Object.keys(B.banks).length;

    if (!open) {
      return (
        <button
          onClick={() => setOpen(true)}
          style={{
            padding: "8px 14px", border: "none", borderRadius: 8,
            background: used
              ? "linear-gradient(180deg, var(--led-violet), #6028a0)"
              : "linear-gradient(180deg, var(--panel-hi), var(--panel))",
            color: used ? "#1a0a30" : "var(--led-violet)",
            fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 11,
            letterSpacing: "0.18em", textTransform: "uppercase",
            cursor: "pointer",
            boxShadow: used
              ? "inset 0 1px 0 rgba(255,255,255,0.3), 0 0 12px rgba(183,133,255,0.5)"
              : "var(--nshadow-out-sm)",
            display: "flex", alignItems: "center", gap: 6,
          }}>
          ⌘ Cues {used ? `· ${used}` : ""}
        </button>
      );
    }

    return (
      <div style={{
        width: 320,
        background: "linear-gradient(180deg, var(--panel-hi), var(--panel-lo))",
        borderRadius: 10, padding: 12,
        boxShadow: "0 20px 50px rgba(0,0,0,0.7), 0 0 0 1px rgba(183,133,255,0.3)",
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 10 }}>
          <span style={{
            fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 12,
            letterSpacing: "0.18em", textTransform: "uppercase",
            color: "var(--led-violet)", flex: 1,
          }}>⌘ Composition Cues</span>
          <button data-lum-close="1" className="nbtn compact" onClick={() => setOpen(false)} style={{ padding: "2px 7px" }}>×</button>
        </div>

        <div style={{ fontSize: 9, color: "var(--ink-faint)", marginBottom: 8, lineHeight: 1.5 }}>
          Click empty slot to SAVE · Click filled to RECALL ·
          Shift+click to rename · Right-click to clear<br/>
          Shortcuts: <b>1-8</b> recall · <b>⌘1-8</b> save · <b>Shift+1-8</b> = slots 9-16
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 6 }}>
          {Array.from({ length: B.SLOTS }, (_, i) => {
            const b = B.banks[i];
            const filled = !!b;
            return (
              <button key={i}
                onClick={(e) => {
                  if (e.shiftKey && filled) {
                    const newName = prompt("Rename cue:", b.name);
                    if (newName) B.rename(i, newName);
                    return;
                  }
                  if (filled) B.load(i);
                  else {
                    const name = prompt(`Save cue ${i + 1} as:`, `Cue ${i + 1}`);
                    if (name) B.save(i, name);
                  }
                }}
                onContextMenu={(e) => {
                  e.preventDefault();
                  if (filled && confirm(`Delete cue "${b.name}"?`)) B.remove(i);
                }}
                style={{
                  position: "relative", padding: "10px 4px", border: "none", borderRadius: 6,
                  background: filled
                    ? `linear-gradient(180deg, var(--led-violet), #6028a0)`
                    : "linear-gradient(180deg, #1a1a1e, #0a0a0c)",
                  color: filled ? "#1a0a30" : "var(--ink-faint)",
                  fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 700,
                  cursor: "pointer",
                  boxShadow: filled
                    ? "inset 0 1px 0 rgba(255,255,255,0.3), 0 0 8px rgba(183,133,255,0.4)"
                    : "var(--nshadow-in-sm)",
                  textAlign: "center",
                }}>
                <div style={{ fontSize: 13, fontWeight: 800 }}>{i + 1}</div>
                <div style={{
                  fontSize: 7.5, lineHeight: 1.2, marginTop: 2,
                  whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis",
                }}>{filled ? b.name : "—"}</div>
              </button>
            );
          })}
        </div>

        <button className="nbtn compact" onClick={() => {
          if (confirm("Clear ALL cues?")) {
            Object.keys(B.banks).forEach(k => B.remove(parseInt(k)));
          }
        }} style={{ width: "100%", marginTop: 10, padding: "6px", fontSize: 9 }}>
          Clear All Cues
        </button>
      </div>
    );
  }

  function mount() {
    if (!window.React || !window.ReactDOM) { setTimeout(mount, 100); return; }
    let host = document.getElementById("__banks_panel");
    if (!host) {
      host = document.createElement("div");
      host.id = "__banks_panel";
      host.style.cssText = "position: fixed; z-index: 596;";
      document.body.appendChild(host);
    }
    ReactDOM.createRoot(host).render(<BanksButton />);
  }
  if (document.readyState === "complete" || document.readyState === "interactive") setTimeout(mount, 1200);
  else document.addEventListener("DOMContentLoaded", () => setTimeout(mount, 1200));
})();