/* ========================================================================
   LUMINA — Floating BPM Clock + MIDI Status Panel
   Master clock with tap tempo · snap mode · beat indicator · MIDI learn UI
   ======================================================================== */
(function () {
  const { useState, useEffect, useRef } = React;

  function ClockPanel() {
    const [open, setOpen] = useState(false);
    const [, tick] = useState(0);
    const C = window.LuminaClock;
    const M = window.LuminaMidi;

    useEffect(() => {
      const id = setInterval(() => tick(n => n + 1), 50);
      return () => clearInterval(id);
    }, []);
    useEffect(() => {
      return M?.on?.(() => tick(n => n + 1));
    }, []);

    if (!C) return null;
    const info = C.tickInfo();
    const beatPhase = info.phase;

    if (!open) {
      return (
        <button
          onClick={() => setOpen(true)}
          style={{
            padding: "8px 14px", border: "none", borderRadius: 8,
            background: "linear-gradient(180deg, #2a1f0e, #1a120a)",
            color: "var(--accent)",
            fontFamily: "var(--font-mono)", fontWeight: 700, fontSize: 11,
            letterSpacing: "0.1em",
            cursor: "pointer",
            boxShadow: "var(--nshadow-out-sm)",
            display: "flex", alignItems: "center", gap: 8,
          }}>
          <span style={{
            width: 9, height: 9, borderRadius: "50%",
            background: beatPhase < 0.15 ? "var(--accent)" : "var(--ink-faint)",
            boxShadow: beatPhase < 0.15 ? "0 0 8px var(--accent-glow)" : "none",
            transition: "background 60ms, box-shadow 60ms",
          }} />
          ♩ {C.bpm}
          <span style={{ fontSize: 9, color: "var(--ink-faint)" }}>BPM</span>
          {M?.enabled && (
            <span style={{ fontSize: 8, color: "var(--led-cyan)",
              textShadow: "0 0 3px var(--led-cyan-glow)",
              padding: "0 4px", borderLeft: "1px solid rgba(255,255,255,0.1)" }}>
              {M.inputs.length}M
            </span>
          )}
        </button>
      );
    }

    return (
      <div style={{
        width: 280,
        background: "linear-gradient(180deg, var(--panel-hi), var(--panel-lo))",
        borderRadius: 10,
        boxShadow: "0 20px 50px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,174,58,0.3)",
        padding: 12,
      }}>
        <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(--accent)",
            textShadow: "0 0 4px var(--accent-glow)", flex: 1,
          }}>♩ Master Clock</span>
          <button data-lum-close="1" className="nbtn compact" onClick={() => setOpen(false)} style={{ padding: "2px 7px" }}>×</button>
        </div>

        {/* BPM display */}
        <div style={{
          background: "linear-gradient(180deg, #0a0a0c, #14141a)",
          borderRadius: 6,
          padding: "10px 14px",
          textAlign: "center",
          boxShadow: "var(--nshadow-in-sm)",
          marginBottom: 8,
        }}>
          <div style={{
            fontFamily: "var(--font-mono)", fontSize: 32, fontWeight: 700,
            color: "var(--accent)", textShadow: "0 0 8px var(--accent-glow)",
            lineHeight: 1,
          }}>{C.bpm}</div>
          <div style={{ fontSize: 9, color: "var(--ink-faint)", letterSpacing: "0.2em",
            textTransform: "uppercase", marginTop: 4 }}>
            BPM · BAR {info.bar} · BEAT {info.beatInBar + 1}/4
          </div>
        </div>

        {/* Beat indicator */}
        <div style={{ display: "flex", gap: 4, marginBottom: 8 }}>
          {[0, 1, 2, 3].map(i => (
            <div key={i} style={{
              flex: 1, height: 6, borderRadius: 3,
              background: i === info.beatInBar
                ? "var(--accent)" : "rgba(0,0,0,0.5)",
              boxShadow: i === info.beatInBar ? "0 0 8px var(--accent-glow)" : "var(--nshadow-in-sm)",
              transition: "background 80ms, box-shadow 80ms",
            }} />
          ))}
        </div>

        {/* Tap + BPM slider */}
        <div style={{ display: "flex", gap: 6, marginBottom: 8 }}>
          <button className="nbtn glow pressed" style={{ flex: 1, padding: "10px", fontWeight: 700 }}
            onClick={() => C.tap()}>TAP</button>
          <button className="nbtn compact" onClick={() => C.setBpm(120)}>120</button>
          <button className="nbtn compact" onClick={() => C.setBpm(128)}>128</button>
          <button className="nbtn compact" onClick={() => C.setBpm(140)}>140</button>
        </div>
        <input type="range" min="60" max="200" step="1" value={C.bpm}
          onChange={e => C.setBpm(Number(e.target.value))}
          style={{ width: "100%", marginBottom: 8 }} />

        {/* Snap mode */}
        <div className="cap" style={{ marginBottom: 4 }}>Beat Snap</div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 3, marginBottom: 10 }}>
          {["off", "1/4", "1/2", "1bar", "2bar", "4bar"].map(s => (
            <button key={s}
              className={`nbtn compact ${C.snap === s ? "glow pressed" : ""}`}
              style={{ padding: "5px 0", fontSize: 9 }}
              onClick={() => { C.snap = s; tick(n => n+1); }}>
              {s}
            </button>
          ))}
        </div>

        {/* MIDI section */}
        <div style={{
          padding: 8, borderRadius: 6,
          background: "linear-gradient(180deg, #0a0a0c, #14141a)",
          boxShadow: "var(--nshadow-in-sm)",
        }}>
          <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 6 }}>
            <span style={{
              width: 6, height: 6, borderRadius: "50%",
              background: M?.enabled ? "var(--led-green)" : "var(--ink-faint)",
              boxShadow: M?.enabled ? "0 0 6px var(--led-green-glow)" : "none",
            }} />
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--led-cyan)",
              flex: 1 }}>
              MIDI · {M?.enabled ? `${M.inputs.length} input${M.inputs.length === 1 ? "" : "s"}` : "off"}
            </span>
            {!M?.enabled && (
              <button className="nbtn compact" style={{ padding: "2px 6px", fontSize: 9 }}
                onClick={() => M?.init()}>Enable</button>
            )}
          </div>
          {M?.inputs.map(i => (
            <div key={i.id} style={{ fontFamily: "var(--font-mono)", fontSize: 9,
              color: "var(--ink-dim)", paddingLeft: 12, marginTop: 2,
              whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
              • {i.name}
            </div>
          ))}
          {M?.learnTarget && (
            <div style={{
              marginTop: 6, padding: "5px 8px", borderRadius: 4,
              background: "rgba(255,174,58,0.15)",
              border: "1px solid var(--accent)",
              fontSize: 9, color: "var(--accent)",
              textShadow: "0 0 3px var(--accent-glow)",
              animation: "pulse 1s infinite",
              display: "flex", justifyContent: "space-between", alignItems: "center",
            }}>
              <span>LEARN: move a controller</span>
              <button onClick={() => M.cancelLearn()}
                style={{ background: "transparent", border: "none", color: "inherit",
                  cursor: "pointer", padding: 0 }}>×</button>
            </div>
          )}
          {M?.lastEvent && (
            <div style={{
              marginTop: 6, fontFamily: "var(--font-mono)", fontSize: 8.5,
              color: "var(--ink-faint)",
            }}>
              Last: {M.lastEvent.key.split("-").slice(1).join(" ")} = {M.lastEvent.value.toFixed(2)}
            </div>
          )}
          <div style={{ marginTop: 6, fontSize: 8, color: "var(--ink-faint)" }}>
            {Object.keys(M?.bindings || {}).length} bindings saved
          </div>
        </div>
      </div>
    );
  }

  function FloatingClockButton() {
    return (
      <div style={{ position: "fixed", zIndex: 596 }}>
        <ClockPanel />
      </div>
    );
  }

  function mount() {
    if (!window.React || !window.ReactDOM) { setTimeout(mount, 100); return; }
    let host = document.getElementById("__clock_panel");
    if (!host) {
      host = document.createElement("div");
      host.id = "__clock_panel";
      document.body.appendChild(host);
    }
    ReactDOM.createRoot(host).render(<FloatingClockButton />);
  }
  if (document.readyState === "complete" || document.readyState === "interactive") setTimeout(mount, 1100);
  else document.addEventListener("DOMContentLoaded", () => setTimeout(mount, 1100));
})();