// HERO PLAYER — inline audio player placeholder
const { useState: useStatePl, useRef: useRefPl, useEffect: useEffectPl } = React;

// When you're ready, drop mp3s into assets/preview/ and fill this queue.
// Set `src: "assets/preview/your-file.mp3"` on any track to activate it.
const QUEUE = [
  { title: "Neon Memories",  album: "Digital Blade",  src: "assets/preview/neon-memories.mp3", cover: "assets/albums/03-digital-blade.png" },
];

function HeroPlayer() {
  const [ix, setIx] = useStatePl(0);
  const [playing, setPlaying] = useStatePl(false);
  const [prog, setProg] = useStatePl(0);
  const [dur, setDur] = useStatePl(0);
  const [cur, setCur] = useStatePl(0);
  const [vol, setVol] = useStatePl(0.8);
  const [muted, setMuted] = useStatePl(false);
  const audioRef = useRefPl(null);

  const track = QUEUE[ix];
  const ready = !!track.src;

  useEffectPl(() => {
    const a = audioRef.current;
    if (!a) return;
    setPlaying(false);
    setProg(0); setCur(0);
    if (ready) { a.load(); }
  }, [ix, ready]);

  useEffectPl(() => {
    const a = audioRef.current;
    if (!a) return;
    a.volume = muted ? 0 : vol;
  }, [vol, muted]);

  const toggle = () => {
    if (!ready) return;
    const a = audioRef.current;
    if (!a) return;
    if (a.paused) { a.play(); setPlaying(true); }
    else          { a.pause(); setPlaying(false); }
  };

  const prev = () => setIx((ix - 1 + QUEUE.length) % QUEUE.length);
  const next = () => setIx((ix + 1) % QUEUE.length);

  const onTime = () => {
    const a = audioRef.current; if (!a) return;
    setCur(a.currentTime); setDur(a.duration || 0);
    setProg(a.duration ? (a.currentTime / a.duration) * 100 : 0);
  };

  const seek = (e) => {
    if (!ready) return;
    const a = audioRef.current; if (!a || !a.duration) return;
    const r = e.currentTarget.getBoundingClientRect();
    const p = (e.clientX - r.left) / r.width;
    a.currentTime = p * a.duration;
  };

  const fmt = (s) => {
    if (!isFinite(s) || s < 0) s = 0;
    const m = Math.floor(s / 60);
    const sec = Math.floor(s % 60);
    return `${String(m).padStart(2,"0")}:${String(sec).padStart(2,"0")}`;
  };

  // Animated equalizer bars (purely visual)
  const bars = Array.from({length: 40});

  return (
    <div className="panel bracket-4" style={pl.wrap}>
      <span className="bk tl"></span><span className="bk tr"></span>
      <span className="bk bl"></span><span className="bk br"></span>

      <audio ref={audioRef} src={track.src || undefined} onTimeUpdate={onTime}
             onEnded={next} onLoadedMetadata={onTime} preload="metadata" />

      <div style={pl.head}>
        <span className="chip"><span className={`dot ${playing ? "pulse" : ""}`}></span>
          {ready ? (playing ? "NOW PLAYING" : "READY") : "PLAYER // STANDBY"}
        </span>
        <span className="mono" style={{fontSize: 10, color: "var(--ink-faint)", letterSpacing: "0.2em"}}>
          TRK {String(ix+1).padStart(2,"0")}/{String(QUEUE.length).padStart(2,"0")}
        </span>
      </div>

      <div style={pl.main}>
        {/* Spinning disc */}
        <div style={pl.disc}>
          <div className={playing ? "spin" : ""} style={{
            width: "100%", height: "100%", borderRadius: "50%",
            background: track.cover
              ? `url('${track.cover}') center/cover, radial-gradient(circle, var(--bg-0) 16%, oklch(0.12 0.04 300) 18%, oklch(0.08 0.04 300))`
              : "radial-gradient(circle, var(--bg-0) 16%, oklch(0.12 0.04 300) 18%, oklch(0.08 0.04 300) 42%, oklch(0.12 0.04 300) 44%, oklch(0.08 0.04 300) 70%, oklch(0.14 0.04 300) 72%, oklch(0.06 0.04 300))",
            border: "2px solid var(--magenta)",
            boxShadow: playing ? "0 0 24px var(--magenta)" : "0 0 10px var(--magenta)",
            position: "relative",
          }}>
            <div style={{
              position: "absolute", left: "50%", top: "50%", transform: "translate(-50%, -50%)",
              width: "22%", aspectRatio: "1/1", borderRadius: "50%",
              background: "var(--magenta)", boxShadow: "0 0 10px var(--magenta)",
              border: "2px solid var(--bg-0)",
            }}></div>
          </div>
        </div>

        <div style={pl.info}>
          <div className="mono" style={{fontSize: 10, color: "var(--cyan)", letterSpacing: "0.25em"}}>
            {track.album.toUpperCase()}
          </div>
          <div className="display" style={{fontSize: 22, letterSpacing: "0.04em", marginTop: 4, textWrap: "balance"}}>
            {track.title}
          </div>
          <div className="jp" style={{fontSize: 11, color: "var(--ink-faint)", marginTop: 4, letterSpacing: "0.15em"}}>
            DJ GAIA
          </div>

          {/* Equalizer */}
          <div style={pl.eq}>
            {bars.map((_, i) => {
              const env = Math.sin((i / bars.length) * Math.PI);
              const base = 8 + env * 70;
              return <i key={i} style={{
                display: "block", width: 2, flex: "0 0 2px",
                height: `${base}%`,
                background: "var(--magenta)",
                opacity: playing ? (0.5 + env * 0.5) : 0.22,
                animation: playing ? `eqbar ${0.6 + (i % 5) * 0.12}s ease-in-out ${i * 0.03}s infinite alternate` : "none",
                transformOrigin: "bottom",
              }}/>;
            })}
          </div>

          {/* Progress */}
          <div onClick={seek} style={{
            ...pl.track,
            cursor: ready ? "pointer" : "not-allowed",
            opacity: ready ? 1 : 0.5,
          }}>
            <div style={{...pl.trackFill, width: `${prog}%`}}></div>
            <div style={{...pl.trackDot, left: `calc(${prog}% - 4px)`, opacity: ready ? 1 : 0}}></div>
          </div>
          <div style={pl.times}>
            <span className="mono" style={{fontSize: 10, color: "var(--ink-dim)"}}>{fmt(cur)}</span>
            <span className="mono" style={{fontSize: 10, color: "var(--ink-faint)"}}>{ready ? fmt(dur) : "--:--"}</span>
          </div>

          {/* Controls */}
          <div style={pl.ctrls}>
            <button onClick={prev} style={pl.btn} title="Previous">◀◀</button>
            <button onClick={toggle} disabled={!ready} style={{
              ...pl.btn, ...pl.play,
              opacity: ready ? 1 : 0.5,
              cursor: ready ? "pointer" : "not-allowed",
            }} title={ready ? (playing ? "Pause" : "Play") : "Upload an mp3 to assets/preview/"}>
              {playing ? "❚❚" : "▶"}
            </button>
            <button onClick={next} style={pl.btn} title="Next">▶▶</button>
            <div style={{flex: 1}}></div>
            {/* Volume */}
            <div style={pl.volWrap}>
              <button onClick={() => setMuted(!muted)} style={{
                ...pl.btn, width: 28, height: 28,
              }} title={muted ? "Unmute" : "Mute"}>
                {muted || vol === 0 ? "🔇" : vol < 0.4 ? "🔈" : vol < 0.75 ? "🔉" : "🔊"}
              </button>
              <input type="range" min="0" max="1" step="0.01" value={muted ? 0 : vol}
                onChange={(e) => { setVol(parseFloat(e.target.value)); setMuted(false); }}
                style={pl.volSlider} title="Volume"
              />
              <span className="mono" style={{fontSize: 9, color: "var(--ink-faint)", letterSpacing: "0.15em", width: 28, textAlign: "right"}}>
                {String(Math.round((muted ? 0 : vol) * 100)).padStart(2, "0")}
              </span>
            </div>
          </div>
        </div>
      </div>

      {/* Queue */}
      <div style={pl.queue}>
        {QUEUE.map((t, i) => (
          <button key={i} onClick={() => setIx(i)} style={{
            ...pl.qItem,
            borderColor: i === ix ? "var(--magenta)" : "transparent",
            background: i === ix ? "oklch(0.16 0.08 340 / 0.4)" : "transparent",
            color: i === ix ? "var(--ink)" : "var(--ink-dim)",
          }}>
            <span className="mono" style={{fontSize: 10, color: i === ix ? "var(--magenta)" : "var(--ink-faint)", width: 24}}>
              {String(i+1).padStart(2,"0")}
            </span>
            <span style={{flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap"}}>
              {t.title}
            </span>
            <span className="mono" style={{fontSize: 9, color: "var(--ink-faint)", letterSpacing: "0.15em"}}>{t.album.toUpperCase()}</span>
          </button>
        ))}
      </div>
    </div>
  );
}

const pl = {
  wrap: {
    marginTop: 8,
    padding: 20,
    position: "relative",
  },
  head: {
    display: "flex", justifyContent: "space-between", alignItems: "center",
    marginBottom: 14,
  },
  main: {
    display: "grid", gridTemplateColumns: "90px 1fr", gap: 18, alignItems: "flex-start",
  },
  disc: {
    width: 90, height: 90, position: "relative",
  },
  info: { minWidth: 0 },
  eq: {
    marginTop: 12,
    display: "flex", alignItems: "flex-end", gap: 2,
    height: 32,
    borderBottom: "1px solid var(--panel-stroke)",
    paddingBottom: 2,
  },
  track: {
    marginTop: 12,
    height: 4,
    background: "oklch(0.2 0.06 300)",
    position: "relative",
    transition: "opacity .2s",
  },
  trackFill: {
    height: "100%",
    background: "linear-gradient(90deg, var(--magenta), var(--cyan))",
    boxShadow: "0 0 8px var(--magenta)",
    transition: "width .1s linear",
  },
  trackDot: {
    position: "absolute", top: -3, width: 10, height: 10, borderRadius: "50%",
    background: "var(--magenta)", boxShadow: "0 0 10px var(--magenta)",
    transition: "left .1s linear",
  },
  times: {
    display: "flex", justifyContent: "space-between", marginTop: 4,
  },
  ctrls: {
    display: "flex", alignItems: "center", gap: 8, marginTop: 10,
  },
  btn: {
    width: 32, height: 32,
    border: "1px solid var(--panel-stroke)",
    background: "oklch(0.12 0.04 300 / 0.6)",
    color: "var(--ink)",
    cursor: "pointer",
    fontFamily: "Orbitron, sans-serif",
    fontSize: 10,
  },
  play: {
    width: 44, height: 32,
    background: "var(--magenta)",
    color: "var(--bg-0)",
    border: "none",
    fontSize: 12, fontWeight: 900,
  },
  queue: {
    marginTop: 14,
    borderTop: "1px solid var(--panel-stroke)",
    paddingTop: 12,
    display: "flex", flexDirection: "column", gap: 2,
  },
  qItem: {
    display: "flex", alignItems: "center", gap: 10,
    padding: "6px 10px",
    border: "1px solid transparent",
    background: "transparent",
    fontFamily: "inherit",
    fontSize: 12,
    textAlign: "left",
    cursor: "pointer",
    transition: "all .15s",
  },
  volWrap: {
    display: "flex", alignItems: "center", gap: 8,
    padding: "0 4px 0 0",
  },
  volSlider: {
    width: 90,
    height: 4,
    appearance: "none",
    WebkitAppearance: "none",
    background: "oklch(0.2 0.06 300)",
    outline: "none",
    cursor: "pointer",
    accentColor: "var(--magenta)",
  },
};

// Equalizer keyframes
const _plStyle = document.createElement("style");
_plStyle.textContent = `@keyframes eqbar { from { transform: scaleY(0.3); } to { transform: scaleY(1); } }`;
document.head.appendChild(_plStyle);

window.HeroPlayer = HeroPlayer;