Media Player

"use client";

import { useState, useRef, useEffect } from "react";
import { cn } from "@/lib";

interface Track {
  title: string;
  artist: string;
  duration: number; // seconds
  src: string;
}

export function AudioPlayer({ tracks }: { tracks: Track[] }) {
  const [trackIdx, setTrackIdx] = useState(0);
  const [playing, setPlaying]   = useState(false);
  const [progress, setProgress] = useState(0); // 0–1
  const [volume, setVolume]     = useState(0.8);
  const audioRef = useRef<HTMLAudioElement>(null);

  const track = tracks[trackIdx];

  // Sync progress from real <audio> element
  useEffect(() => {
    const audio = audioRef.current;
    if (!audio) return;

    const onTimeUpdate = () => {
      if (audio.duration) setProgress(audio.currentTime / audio.duration);
    };
    const onEnded = () => { setPlaying(false); setProgress(0); };

    audio.addEventListener("timeupdate", onTimeUpdate);
    audio.addEventListener("ended",      onEnded);
    return () => {
      audio.removeEventListener("timeupdate", onTimeUpdate);
      audio.removeEventListener("ended",      onEnded);
    };
  }, []);

  useEffect(() => {
    const audio = audioRef.current;
    if (!audio) return;
    playing ? audio.play() : audio.pause();
  }, [playing]);

  useEffect(() => {
    if (audioRef.current) audioRef.current.volume = volume;
  }, [volume]);

  function seek(ratio: number) {
    const audio = audioRef.current;
    if (audio?.duration) audio.currentTime = ratio * audio.duration;
    setProgress(ratio);
  }

  function changeTrack(dir: 1 | -1) {
    setTrackIdx((i) => (i + dir + tracks.length) % tracks.length);
    setProgress(0);
    setPlaying(false);
  }

  const elapsed = Math.round(progress * track.duration);

  return (
    <div className="rounded-2xl border border-border bg-surface overflow-hidden shadow-lg">
      {/* Hidden audio element */}
      <audio ref={audioRef} src={track.src} />

      {/* Controls */}
      <div className="p-4 space-y-4">
        <div className="flex items-center justify-between">
          <div>
            <p className="font-semibold text-text-primary">{track.title}</p>
            <p className="text-sm text-text-secondary">{track.artist}</p>
          </div>
        </div>

        {/* Scrubber */}
        <input
          type="range" min={0} max={1} step={0.001}
          value={progress}
          onChange={(e) => seek(parseFloat(e.target.value))}
          className="w-full accent-accent cursor-pointer"
        />

        <div className="flex items-center justify-between">
          <span className="text-xs text-text-tertiary font-mono">{formatTime(elapsed)}</span>
          <span className="text-xs text-text-tertiary font-mono">{formatTime(track.duration)}</span>
        </div>

        {/* Playback */}
        <div className="flex items-center justify-center gap-6">
          <button onClick={() => changeTrack(-1)}>⏮</button>
          <button
            onClick={() => setPlaying(!playing)}
            className="w-12 h-12 rounded-full bg-accent text-white flex items-center justify-center"
          >
            {playing ? "⏸" : "▶"}
          </button>
          <button onClick={() => changeTrack(1)}>⏭</button>
        </div>

        {/* Volume */}
        <input
          type="range" min={0} max={1} step={0.01}
          value={volume}
          onChange={(e) => setVolume(parseFloat(e.target.value))}
          className="w-full accent-accent"
        />
      </div>
    </div>
  );
}

function formatTime(s: number) {
  const m = Math.floor(s / 60);
  return `${m}:${String(Math.floor(s % 60)).padStart(2, "0")}`;
}