audio-ui/components/editor/PlaybackControls.tsx

'use client';

import * as React from 'react';
import { Play, Pause, Square, SkipBack, Volume2, VolumeX, Circle } from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Slider } from '@/components/ui/Slider';
import { cn } from '@/lib/utils/cn';

export interface PlaybackControlsProps {
  isPlaying: boolean;
  isPaused: boolean;
  currentTime: number;
  duration: number;
  volume: number;
  onPlay: () => void;
  onPause: () => void;
  onStop: () => void;
  onSeek: (time: number, autoPlay?: boolean) => void;
  onVolumeChange: (volume: number) => void;
  disabled?: boolean;
  className?: string;
  currentTimeFormatted?: string;
  durationFormatted?: string;
  isRecording?: boolean;
  onStartRecording?: () => void;
  onStopRecording?: () => void;
}

export function PlaybackControls({
  isPlaying,
  isPaused,
  currentTime,
  duration,
  volume,
  onPlay,
  onPause,
  onStop,
  onSeek,
  onVolumeChange,
  disabled = false,
  className,
  currentTimeFormatted,
  durationFormatted,
  isRecording = false,
  onStartRecording,
  onStopRecording,
}: PlaybackControlsProps) {
  const [isMuted, setIsMuted] = React.useState(false);
  const [previousVolume, setPreviousVolume] = React.useState(volume);

  const handlePlayPause = () => {
    if (isPlaying) {
      onPause();
    } else {
      onPlay();
    }
  };

  const handleMuteToggle = () => {
    if (isMuted) {
      onVolumeChange(previousVolume);
      setIsMuted(false);
    } else {
      setPreviousVolume(volume);
      onVolumeChange(0);
      setIsMuted(true);
    }
  };

  const handleVolumeChange = (newVolume: number) => {
    onVolumeChange(newVolume);
    if (newVolume === 0) {
      setIsMuted(true);
    } else {
      setIsMuted(false);
    }
  };

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

  return (
    <div className={cn('space-y-4', className)}>
      {/* Timeline Slider */}
      <div className="space-y-2">
        <input
          type="range"
          min={0}
          max={duration || 100}
          step={0.01}
          value={currentTime}
          onChange={(e) => onSeek(parseFloat(e.target.value), false)}
          onMouseUp={(e) => onSeek(parseFloat((e.target as HTMLInputElement).value), true)}
          onTouchEnd={(e) => onSeek(parseFloat((e.target as HTMLInputElement).value), true)}
          disabled={disabled || duration === 0}
          className={cn(
            'w-full h-2 bg-secondary rounded-lg appearance-none cursor-pointer',
            'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
            'disabled:opacity-50 disabled:cursor-not-allowed',
            '[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4',
            '[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-primary',
            '[&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:transition-colors',
            '[&::-webkit-slider-thumb]:hover:bg-primary/90',
            '[&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:rounded-full',
            '[&::-moz-range-thumb]:bg-primary [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:cursor-pointer'
          )}
          style={{
            background: `linear-gradient(to right, var(--color-primary) ${progress}%, var(--color-secondary) ${progress}%)`,
          }}
        />
        <div className="flex items-center justify-between text-xs text-muted-foreground">
          <span>{currentTimeFormatted || '00:00'}</span>
          <span>{durationFormatted || '00:00'}</span>
        </div>
      </div>

      {/* Transport Controls */}
      <div className="flex items-center justify-between gap-4">
        <div className="flex items-center gap-2">
          <Button
            variant="outline"
            size="icon"
            onClick={onStop}
            disabled={disabled || (!isPlaying && !isPaused)}
            title="Stop"
          >
            <SkipBack className="h-4 w-4" />
          </Button>

          <Button
            variant="default"
            size="icon"
            onClick={handlePlayPause}
            disabled={disabled}
            title={isPlaying ? 'Pause' : 'Play'}
            className="h-12 w-12"
          >
            {isPlaying ? (
              <Pause className="h-6 w-6" />
            ) : (
              <Play className="h-6 w-6 ml-0.5" />
            )}
          </Button>

          <Button
            variant="outline"
            size="icon"
            onClick={onStop}
            disabled={disabled || (!isPlaying && !isPaused)}
            title="Stop"
          >
            <Square className="h-4 w-4" />
          </Button>

          {/* Record Button */}
          {(onStartRecording || onStopRecording) && (
            <Button
              variant="outline"
              size="icon"
              onClick={isRecording ? onStopRecording : onStartRecording}
              disabled={disabled}
              title={isRecording ? 'Stop Recording' : 'Start Recording'}
              className={cn(
                isRecording && 'bg-red-500/20 hover:bg-red-500/30 border-red-500/50',
                isRecording && 'animate-pulse'
              )}
            >
              <Circle className={cn('h-4 w-4', isRecording && 'text-red-500 fill-red-500')} />
            </Button>
          )}
        </div>

        {/* Volume Control */}
        <div className="flex items-center gap-3 min-w-[200px]">
          <Button
            variant="ghost"
            size="icon"
            onClick={handleMuteToggle}
            title={isMuted ? 'Unmute' : 'Mute'}
          >
            {isMuted || volume === 0 ? (
              <VolumeX className="h-5 w-5" />
            ) : (
              <Volume2 className="h-5 w-5" />
            )}
          </Button>

          <Slider
            value={volume}
            onChange={handleVolumeChange}
            min={0}
            max={1}
            step={0.01}
            className="flex-1"
          />
        </div>
      </div>
    </div>
  );
}