/* ========================================================================
   LUMINA — Sidebar rack (visualizer presets) + Param dock (right panel)
   ======================================================================== */
const { useState: useStateR } = React;

function PresetRack({ vizId, setVizId }) {
  return (
    <div className="panel" style={{ overflow: "hidden", display: "flex", flexDirection: "column" }}>
      <Screws />
      <div className="panel-title">
        <span style={{ display: "inline-block", width: 6, height: 6, borderRadius: "50%",
          background: "var(--led-cyan)", boxShadow: "0 0 6px var(--led-cyan-glow)" }} />
        Visualizer Rack
      </div>
      <div style={{
        display: "flex", gap: 6, marginBottom: 10,
        background: "linear-gradient(180deg,#0a0a0c,#16161a)",
        padding: 4, borderRadius: 8, boxShadow: "var(--nshadow-in-sm)"
      }}>
        <button className="chip active" style={{ flex: 1 }}>All</button>
        <button className="chip">Audio</button>
        <button className="chip">Motion</button>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 6, overflowY: "auto", flex: 1, paddingRight: 4 }}>
        {window.VISUALIZERS.map(v => (
          <div key={v.id}
            className={`preset-card ${v.id === vizId ? "active" : ""}`}
            onClick={() => setVizId(v.id)}>
            <div className="preset-icon" style={{ color: v.id === vizId ? "var(--accent)" : "var(--ink-dim)" }}>
              <span style={{ width: 24, height: 24, display: "block" }}>{v.icon}</span>
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div className="preset-name">{v.name}</div>
              <div className="preset-tag">{v.tag}</div>
            </div>
            <Led on={v.id === vizId} color="amber" />
          </div>
        ))}
      </div>

      {/* Library footer */}
      <div style={{ marginTop: 10, paddingTop: 10, borderTop: "1px solid rgba(255,255,255,0.04)" }}>
        <div className="cap" style={{ marginBottom: 6 }}>Project</div>
        <div className="brushed-strip" style={{ padding: "6px 8px", display: "flex", gap: 6, alignItems: "center" }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"
            style={{ color: "var(--ink-dim)" }}>
            <path d="M3 7v13h18V7M3 7l2-4h14l2 4M3 7h18M10 12h4" />
          </svg>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--ink-dim)", flex: 1 }}>
            Untitled.luminaset
          </span>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 4, marginTop: 6 }}>
          <button className="nbtn compact">Save</button>
          <button className="nbtn compact">Load</button>
        </div>
      </div>
    </div>
  );
}

function ParamDock({ params, onParam, vizId }) {
  return (
    <div className="panel" style={{ overflowY: "auto" }}>
      <Screws />
      <div className="panel-title">
        <span style={{ display: "inline-block", width: 6, height: 6, borderRadius: "50%",
          background: "var(--led-amber)", boxShadow: "0 0 6px var(--led-amber-glow)" }} />
        Parameters
      </div>

      <Lcd tone="cyan" style={{ marginBottom: 12, fontSize: 11 }}>
        {window.VISUALIZERS.find(v => v.id === vizId)?.name?.toUpperCase() || "—"}
        <span style={{ float: "right", opacity: 0.6 }}>EDIT</span>
      </Lcd>

      {/* AUDIO REACTION */}
      <div className="dock-section">
        <div className="dock-label">Audio Reaction</div>
        <div className="knob-grid cols-2">
          <Knob value={params.intensity} onChange={v => onParam("intensity", v)}
            min={0} max={2} step={0.01} label="Drive" midiId="param.intensity" />
          <Knob value={params.smoothness} onChange={v => onParam("smoothness", v)}
            min={0.5} max={0.98} step={0.01} label="Smooth" midiId="param.smoothness" />
        </div>
      </div>

      {/* MOTION */}
      <div className="dock-section">
        <div className="dock-label">Motion</div>
        <div className="knob-grid cols-3">
          <Knob value={params.motion} onChange={v => onParam("motion", v)}
            min={0} max={3} step={0.01} label="Speed" midiId="param.motion" />
          <Knob value={params.density} onChange={v => onParam("density", v)}
            min={0.1} max={1.5} step={0.01} label="Density" midiId="param.density" />
          <Knob value={params.lineWidth} onChange={v => onParam("lineWidth", v)}
            min={0.5} max={6} step={0.1} label="Stroke" midiId="param.lineWidth" />
        </div>
      </div>

      {/* COLOR */}
      <div className="dock-section">
        <div className="dock-label">Color</div>
        <div className="knob-grid cols-3">
          <Knob value={params.hue} onChange={v => onParam("hue", v)}
            min={0} max={360} step={1} label="Hue" midiId="param.hue"
            display={v => `${v.toFixed(0)}°`} />
          <Knob value={params.glow} onChange={v => onParam("glow", v)}
            min={0} max={2} step={0.01} label="Glow" midiId="param.glow" />
          <Knob value={params.bgAlpha} onChange={v => onParam("bgAlpha", v)}
            min={0.02} max={0.6} step={0.01} label="Trails" midiId="param.trails"
            display={v => (1 - v).toFixed(2)} />
        </div>
        <div style={{ marginTop: 10, display: "flex", gap: 4 }}>
          {[
            { name: "Sunset", hue: 18 },
            { name: "Aqua", hue: 190 },
            { name: "Magenta", hue: 320 },
            { name: "Acid", hue: 80 },
            { name: "Royal", hue: 260 },
          ].map(p => (
            <button key={p.name} className="nbtn compact" style={{ flex: 1, padding: "5px 4px", fontSize: 9 }}
              onClick={() => onParam("hue", p.hue)}>
              <span style={{
                width: 10, height: 10, borderRadius: "50%",
                background: `hsl(${p.hue}, 90%, 60%)`,
                boxShadow: `0 0 6px hsl(${p.hue}, 90%, 60%)`,
              }} />
            </button>
          ))}
        </div>
      </div>

      {/* SHAPE */}
      <div className="dock-section">
        <div className="dock-label">Composition</div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 8 }}>
          <span className="cap lit">Mirror</span>
          <Flip value={!!params.mirror} onChange={v => onParam("mirror", v)} />
        </div>
        <div style={{ marginTop: 8 }}>
          <div className="cap lit" style={{ marginBottom: 6 }}>Kaleido Segments</div>
          <Chips value={params.kaleidoSegs}
            onChange={v => onParam("kaleidoSegs", v)}
            options={[
              { value: 4, label: "×4" },
              { value: 6, label: "×6" },
              { value: 8, label: "×8" },
              { value: 12, label: "×12" },
            ]} />
        </div>
      </div>

      {/* MACRO LFO (decorative knobs that still affect motion) */}
      <div className="dock-section">
        <div className="dock-label">Macro · LFO</div>
        <div className="knob-grid">
          <Knob value={params.macro1} onChange={v => onParam("macro1", v)}
            min={0} max={1} step={0.01} label="A" size="sm" midiId="param.macro1" />
          <Knob value={params.macro2} onChange={v => onParam("macro2", v)}
            min={0} max={1} step={0.01} label="B" size="sm" midiId="param.macro2" />
          <Knob value={params.macro3} onChange={v => onParam("macro3", v)}
            min={0} max={1} step={0.01} label="C" size="sm" midiId="param.macro3" />
          <Knob value={params.macro4} onChange={v => onParam("macro4", v)}
            min={0} max={1} step={0.01} label="D" size="sm" midiId="param.macro4" />
        </div>
      </div>

      {/* Text input for CRT Type viz */}
      {vizId === "type" && (
        <div className="dock-section">
          <div className="dock-label">Text</div>
          <input
            value={params.text || "LUMINA"}
            onChange={e => onParam("text", e.target.value.slice(0, 12))}
            style={{
              width: "100%", marginTop: 8, padding: "8px 10px",
              background: "linear-gradient(180deg,#0a0a0c,#14141a)",
              border: "none", borderRadius: 6,
              boxShadow: "var(--nshadow-in-sm)",
              color: "var(--led-amber)",
              textShadow: "0 0 4px var(--led-amber-glow)",
              fontFamily: "var(--font-mono)", fontSize: 12,
              letterSpacing: "0.1em", textTransform: "uppercase",
              outline: "none",
            }}
          />
        </div>
      )}
    </div>
  );
}

window.PresetRack = PresetRack;
window.ParamDock = ParamDock;