/* ========================================================================
   LUMINA — Layer Stack Panel (floating, Arena-style mixer)
   Per-layer opacity slider, blend mode, mute/solo/FX-bypass, drag reorder.
   ======================================================================== */
(function () {
  const { useState, useEffect, useRef } = React;

  function StackPanel() {
    const [open, setOpen] = useState(false);
    const [, tick] = useState(0);
    const dragId = useRef(null);
    useEffect(() => {
      const S = window.LuminaStack;
      return S?.on?.(() => tick(n => n + 1));
    }, []);

    const S = window.LuminaStack;
    if (!S) return null;

    if (!open) {
      const onCount = S.layers.filter(l => l.enabled).length;
      return (
        <button
          onClick={() => setOpen(true)}
          style={{
            padding: "8px 14px", border: "none", borderRadius: 8,
            background: "linear-gradient(180deg, var(--panel-hi), var(--panel))",
            color: "var(--led-green)",
            fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 11,
            letterSpacing: "0.18em", textTransform: "uppercase",
            cursor: "pointer",
            boxShadow: "var(--nshadow-out-sm)",
            display: "flex", alignItems: "center", gap: 6,
            textShadow: "0 0 4px var(--led-green-glow)",
          }}>
          ☰ Layers · {onCount}/{S.layers.length}
        </button>
      );
    }

    const onDragStart = (id) => (e) => {
      dragId.current = id;
      e.dataTransfer.effectAllowed = "move";
    };
    const onDragOver = (e) => e.preventDefault();
    const onDrop = (targetId) => (e) => {
      e.preventDefault();
      const src = dragId.current;
      if (src == null || src === targetId) return;
      const ids = S.layers.map(l => l.id);
      const from = ids.indexOf(src), to = ids.indexOf(targetId);
      ids.splice(to, 0, ids.splice(from, 1)[0]);
      S.setOrder(ids);
      dragId.current = null;
    };

    return (
      <div style={{
        width: 380,
        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(124,255,79,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-green)", flex: 1,
          }}>☰ Layer Stack</span>
          <button className="nbtn compact" onClick={() => S.add()}
            style={{ padding: "2px 8px" }}>+</button>
          <button data-lum-close="1" className="nbtn compact" onClick={() => setOpen(false)}
            style={{ padding: "2px 7px" }}>×</button>
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 4, maxHeight: "60vh", overflowY: "auto" }}>
          {S.layers.map(l => (
            <div key={l.id}
              draggable
              onDragStart={onDragStart(l.id)}
              onDragOver={onDragOver}
              onDrop={onDrop(l.id)}
              style={{
                background: l.enabled
                  ? `linear-gradient(180deg, var(--panel-hi), var(--panel))`
                  : "linear-gradient(180deg, rgba(40,40,46,0.5), rgba(20,20,24,0.5))",
                opacity: l.enabled ? 1 : 0.55,
                borderRadius: 6, padding: 7,
                borderLeft: l.solo ? "3px solid var(--led-amber)" : "3px solid transparent",
                cursor: "grab",
                boxShadow: "var(--nshadow-out-sm)",
              }}>
              {/* Row 1: name + buttons */}
              <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 4 }}>
                <span style={{
                  fontFamily: "var(--font-mono)", fontSize: 9, color: "var(--ink-faint)",
                  width: 14, textAlign: "right",
                }}>{S.layers.indexOf(l) + 1}</span>
                <input value={l.name}
                  onChange={(e) => S.update(l.id, { name: e.target.value })}
                  onMouseDown={(e) => e.stopPropagation()}
                  draggable={false}
                  style={{
                    flex: 1, background: "transparent", border: "none", outline: "none",
                    color: l.enabled ? "var(--ink)" : "var(--ink-faint)",
                    fontFamily: "var(--font-display)", fontSize: 11, fontWeight: 600,
                  }} />
                <button className={`nbtn compact ${l.enabled ? "glow pressed" : ""}`}
                  style={{ padding: "2px 7px", fontSize: 8 }}
                  onClick={() => S.update(l.id, { enabled: !l.enabled })}>
                  {l.enabled ? "ON" : "OFF"}
                </button>
                <button className={`nbtn compact ${l.solo ? "glow pressed" : ""}`}
                  style={{ padding: "2px 7px", fontSize: 8 }}
                  onClick={() => l.solo ? S.clearSolo() : S.soloOnly(l.id)}>S</button>
                <button className={`nbtn compact ${l.fxBypass ? "danger pressed" : ""}`}
                  style={{ padding: "2px 7px", fontSize: 8 }}
                  onClick={() => S.update(l.id, { fxBypass: !l.fxBypass })}
                  title="Bypass FX chain on this layer">FX</button>
                <button className="nbtn compact danger"
                  style={{ padding: "2px 6px", fontSize: 8 }}
                  onClick={() => S.remove(l.id)}>×</button>
              </div>
              {/* Row 2: source */}
              <div style={{ display: "grid", gridTemplateColumns: "32px 1fr", gap: 6, alignItems: "center", marginBottom: 4 }}>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 8, color: "var(--ink-faint)" }}>SRC</span>
                <select value={l.source || "stage"}
                  onChange={(e) => S.update(l.id, { source: e.target.value })}
                  onMouseDown={(e) => e.stopPropagation()}
                  draggable={false}
                  style={{
                    padding: "3px 4px", borderRadius: 3, border: "none", outline: "none",
                    background: "linear-gradient(180deg,#0a0a0c,#14141a)",
                    color: "var(--led-green)", textShadow: "0 0 3px var(--led-green-glow)",
                    fontFamily: "var(--font-mono)", fontSize: 9, width: "100%",
                    boxShadow: "var(--nshadow-in-sm)",
                  }}>
                  <option value="stage">▶ Stage (selected)</option>
                  {(window.VISUALIZERS || []).map(v => <option key={v.id} value={v.id}>{v.name}</option>)}
                </select>
              </div>
              {/* Row 3: opacity + blend */}
              <div style={{ display: "grid", gridTemplateColumns: "1fr 100px 38px", gap: 6, alignItems: "center" }}>
                <input type="range" min="0" max="1" step="0.001" value={l.opacity}
                  onChange={(e) => S.update(l.id, { opacity: Number(e.target.value) })}
                  onMouseDown={(e) => e.stopPropagation()}
                  draggable={false}
                  style={{ width: "100%" }} />
                <select value={l.blend}
                  onChange={(e) => S.update(l.id, { blend: e.target.value })}
                  onMouseDown={(e) => e.stopPropagation()}
                  draggable={false}
                  style={{
                    padding: "3px 4px", borderRadius: 3, border: "none", outline: "none",
                    background: "linear-gradient(180deg,#0a0a0c,#14141a)",
                    color: "var(--led-cyan)", textShadow: "0 0 3px var(--led-cyan-glow)",
                    fontFamily: "var(--font-mono)", fontSize: 9,
                    boxShadow: "var(--nshadow-in-sm)",
                  }}>
                  {S.BLEND_MODES.map(m => <option key={m} value={m}>{m}</option>)}
                </select>
                <span style={{
                  fontFamily: "var(--font-mono)", fontSize: 9,
                  color: l.enabled ? "var(--accent)" : "var(--ink-faint)",
                  textShadow: l.enabled ? "0 0 3px var(--accent-glow)" : "none",
                  textAlign: "right",
                }}>{Math.round(l.opacity * 100)}%</span>
              </div>
            </div>
          ))}
        </div>

        <div style={{ fontSize: 9, color: "var(--ink-faint)", lineHeight: 1.5, marginTop: 8,
          textAlign: "center" }}>
          Drag rows to reorder · Solo isolates a single layer · FX bypass disables FX on that layer
        </div>
      </div>
    );
  }

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