"use client";

import { useState, useEffect } from "react";
import { subscribe, getPlaybackState, stopCurrent, PlaybackState } from "@/lib/player";

export function SoundPlayerBar() {
  const [s, setS] = useState<PlaybackState>(getPlaybackState());

  useEffect(() => {
    const unsub = subscribe(setS);
    return unsub;
  }, []);

  if (!s.isPlaying) return null;

  const pct = Math.min((s.elapsed / s.duration) * 100, 100);

  return (
    <div className="border-t border-slate-700/30 bg-slate-950/95 px-3 py-2">
      <div className="flex items-center gap-2 text-[10px] font-mono max-w-2xl mx-auto">
        <span className="text-cyan-400 shrink-0">🔊</span>
        <span className="text-slate-300 truncate max-w-[200px]">{s.name}</span>
        <div className="flex-1 h-1.5 bg-slate-800 rounded-full overflow-hidden min-w-[80px]">
          <div
            className="h-full bg-cyan-500 transition-all duration-100 rounded-full"
            style={{ width: `${pct}%` }}
          />
        </div>
        <span className="text-slate-500 shrink-0 w-16 text-right tabular-nums">
          {s.elapsed.toFixed(1)}s / {s.duration.toFixed(0)}s
        </span>
        <button
          type="button"
          onClick={stopCurrent}
          className="px-2 py-0.5 rounded bg-slate-800 hover:bg-red-800/60 text-slate-400 hover:text-red-300 cursor-pointer shrink-0"
        >
          ■
        </button>
      </div>
    </div>
  );
}