project-afterlife/apps/web/src/components/documentary/AudioPlayer.tsx

"use client";

import { useTranslations } from "next-intl";

interface AudioPlayerProps {
  trackTitle: string | null;
  isPlaying: boolean;
  progress: number;
  duration: number;
  playbackRate: number;
  continuousMode: boolean;
  onToggle: () => void;
  onSeek: (seconds: number) => void;
  onChangeRate: (rate: number) => void;
  onToggleContinuous: () => void;
}

const RATES = [0.5, 0.75, 1, 1.25, 1.5, 2];

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

export function AudioPlayer({
  trackTitle,
  isPlaying,
  progress,
  duration,
  playbackRate,
  continuousMode,
  onToggle,
  onSeek,
  onChangeRate,
  onToggleContinuous,
}: AudioPlayerProps) {
  const t = useTranslations("audio");

  if (!trackTitle) return null;

  const progressPercent = duration > 0 ? (progress / duration) * 100 : 0;

  return (
    <div className="fixed bottom-0 left-0 right-0 z-50 bg-[#0a0a0f]/95 backdrop-blur-sm border-t border-[rgba(255,255,255,0.08)]">
      <div className="max-w-7xl mx-auto px-4 py-3">
        {/* Progress bar */}
        <div
          className="w-full h-1 bg-[#1a1a24] rounded-full mb-3 cursor-pointer"
          onClick={(e) => {
            const rect = e.currentTarget.getBoundingClientRect();
            const ratio = (e.clientX - rect.left) / rect.width;
            onSeek(ratio * duration);
          }}
        >
          <div
            className="h-full bg-[#d4a574] rounded-full transition-all"
            style={{ width: `${progressPercent}%` }}
          />
        </div>

        <div className="flex items-center gap-4">
          {/* Play/Pause */}
          <button
            onClick={onToggle}
            className="w-10 h-10 flex items-center justify-center bg-[#d4a574] rounded-full text-[#0a0a0f] hover:bg-[#e8c4a0] transition-colors"
            aria-label={isPlaying ? t("pause") : t("play")}
          >
            {isPlaying ? "\u23F8" : "\u25B6"}
          </button>

          {/* Track info */}
          <div className="flex-1 min-w-0">
            <p className="text-sm text-[#f5f5f7] truncate">{trackTitle}</p>
            <p className="text-xs text-[#6b6b75]">
              {formatTime(progress)} / {formatTime(duration)}
            </p>
          </div>

          {/* Speed selector */}
          <div className="flex items-center gap-2">
            <span className="text-xs text-[#6b6b75]">{t("speed")}:</span>
            <select
              value={playbackRate}
              onChange={(e) => onChangeRate(Number(e.target.value))}
              className="bg-[#12121a] border border-[rgba(255,255,255,0.08)] rounded px-2 py-1 text-xs text-[#f5f5f7]"
            >
              {RATES.map((r) => (
                <option key={r} value={r}>
                  {r}x
                </option>
              ))}
            </select>
          </div>

          {/* Continuous mode toggle */}
          <button
            onClick={onToggleContinuous}
            className={`text-xs px-3 py-1 rounded border transition-colors ${
              continuousMode
                ? "border-[#d4a574] text-[#d4a574]"
                : "border-[rgba(255,255,255,0.08)] text-[#6b6b75] hover:text-[#a0a0a8]"
            }`}
          >
            {continuousMode ? t("continuous_mode") : t("chapter_mode")}
          </button>
        </div>
      </div>
    </div>
  );
}