audio-ui/components/editor/PlaybackControls.tsx

'use client';

import * as React from 'react';
import { Play, Pause, Square, SkipBack, Circle, AlignVerticalJustifyStart, AlignVerticalJustifyEnd, Layers, Repeat } from 'lucide-react';
import { Button } from '@/components/ui/Button';
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;
  punchInEnabled?: boolean;
  punchInTime?: number;
  punchOutTime?: number;
  onPunchInEnabledChange?: (enabled: boolean) => void;
  onPunchInTimeChange?: (time: number) => void;
  onPunchOutTimeChange?: (time: number) => void;
  overdubEnabled?: boolean;
  onOverdubEnabledChange?: (enabled: boolean) => void;
  loopEnabled?: boolean;
  loopStart?: number;
  loopEnd?: number;
  onToggleLoop?: () => void;
  onSetLoopPoints?: (start: number, end: number) => void;
  playbackRate?: number;
  onPlaybackRateChange?: (rate: number) => void;
}

export function PlaybackControls({
  isPlaying,
  isPaused,
  currentTime,
  duration,
  volume,
  onPlay,
  onPause,
  onStop,
  onSeek,
  onVolumeChange,
  disabled = false,
  className,
  currentTimeFormatted,
  durationFormatted,
  isRecording = false,
  onStartRecording,
  onStopRecording,
  punchInEnabled = false,
  punchInTime = 0,
  punchOutTime = 0,
  onPunchInEnabledChange,
  onPunchInTimeChange,
  onPunchOutTimeChange,
  overdubEnabled = false,
  onOverdubEnabledChange,
  loopEnabled = false,
  loopStart = 0,
  loopEnd = 0,
  onToggleLoop,
  onSetLoopPoints,
  playbackRate = 1.0,
  onPlaybackRateChange,
}: PlaybackControlsProps) {
  const handlePlayPause = () => {
    if (isPlaying) {
      onPause();
    } else {
      onPlay();
    }
  };

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

  return (
    <div className={cn('space-y-4 w-full max-w-2xl', 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>

      {/* Punch In/Out Times - Show when enabled */}
      {punchInEnabled && onPunchInTimeChange && onPunchOutTimeChange && (
        <div className="flex items-center gap-3 text-xs bg-muted/50 rounded px-3 py-2">
          <div className="flex items-center gap-2 flex-1">
            <label className="text-muted-foreground flex items-center gap-1 flex-shrink-0">
              <AlignVerticalJustifyStart className="h-3 w-3" />
              Punch In
            </label>
            <input
              type="number"
              min={0}
              max={punchOutTime || duration}
              step={0.1}
              value={punchInTime.toFixed(2)}
              onChange={(e) => onPunchInTimeChange(parseFloat(e.target.value))}
              className="flex-1 px-2 py-1 bg-background border border-border rounded text-xs font-mono"
            />
            <Button
              variant="ghost"
              size="sm"
              onClick={() => onPunchInTimeChange(currentTime)}
              title="Set punch-in to current time"
              className="h-6 px-2 text-xs"
            >
              Set
            </Button>
          </div>

          <div className="flex items-center gap-2 flex-1">
            <label className="text-muted-foreground flex items-center gap-1 flex-shrink-0">
              <AlignVerticalJustifyEnd className="h-3 w-3" />
              Punch Out
            </label>
            <input
              type="number"
              min={punchInTime}
              max={duration}
              step={0.1}
              value={punchOutTime.toFixed(2)}
              onChange={(e) => onPunchOutTimeChange(parseFloat(e.target.value))}
              className="flex-1 px-2 py-1 bg-background border border-border rounded text-xs font-mono"
            />
            <Button
              variant="ghost"
              size="sm"
              onClick={() => onPunchOutTimeChange(currentTime)}
              title="Set punch-out to current time"
              className="h-6 px-2 text-xs"
            >
              Set
            </Button>
          </div>
        </div>
      )}

      {/* Transport Controls */}
      <div className="flex items-center justify-center 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>

              {/* Recording Options */}
              <div className="flex items-center gap-1 border-l border-border pl-2 ml-1">
                {/* Punch In/Out Toggle */}
                {onPunchInEnabledChange && (
                  <Button
                    variant="ghost"
                    size="icon-sm"
                    onClick={() => onPunchInEnabledChange(!punchInEnabled)}
                    title="Toggle Punch In/Out Recording"
                    className={cn(
                      punchInEnabled && 'bg-primary/20 hover:bg-primary/30'
                    )}
                  >
                    <AlignVerticalJustifyStart className={cn('h-3.5 w-3.5', punchInEnabled && 'text-primary')} />
                  </Button>
                )}

                {/* Overdub Mode Toggle */}
                {onOverdubEnabledChange && (
                  <Button
                    variant="ghost"
                    size="icon-sm"
                    onClick={() => onOverdubEnabledChange(!overdubEnabled)}
                    title="Toggle Overdub Mode (layer recordings)"
                    className={cn(
                      overdubEnabled && 'bg-primary/20 hover:bg-primary/30'
                    )}
                  >
                    <Layers className={cn('h-3.5 w-3.5', overdubEnabled && 'text-primary')} />
                  </Button>
                )}
              </div>
            </>
          )}

          {/* Loop Toggle */}
          {onToggleLoop && (
            <div className="flex items-center gap-1 border-l border-border pl-2 ml-1">
              <Button
                variant="ghost"
                size="icon-sm"
                onClick={onToggleLoop}
                title="Toggle Loop Playback"
                className={cn(
                  loopEnabled && 'bg-primary/20 hover:bg-primary/30'
                )}
              >
                <Repeat className={cn('h-3.5 w-3.5', loopEnabled && 'text-primary')} />
              </Button>
            </div>
          )}

          {/* Playback Speed Control */}
          {onPlaybackRateChange && (
            <div className="flex items-center gap-1 border-l border-border pl-2 ml-1">
              <select
                value={playbackRate}
                onChange={(e) => onPlaybackRateChange(parseFloat(e.target.value))}
                className="h-7 px-2 py-0 bg-background border border-border rounded text-xs cursor-pointer hover:bg-muted/50 focus:outline-none focus:ring-2 focus:ring-ring"
                title="Playback Speed"
              >
                <option value={0.25}>0.25x</option>
                <option value={0.5}>0.5x</option>
                <option value={0.75}>0.75x</option>
                <option value={1.0}>1x</option>
                <option value={1.25}>1.25x</option>
                <option value={1.5}>1.5x</option>
                <option value={2.0}>2x</option>
              </select>
            </div>
          )}
        </div>
      </div>

      {/* Loop Points - Show when enabled */}
      {loopEnabled && onSetLoopPoints && (
        <div className="flex items-center gap-3 text-xs bg-muted/50 rounded px-3 py-2">
          <div className="flex items-center gap-2 flex-1">
            <label className="text-muted-foreground flex items-center gap-1 flex-shrink-0">
              <AlignVerticalJustifyStart className="h-3 w-3" />
              Loop Start
            </label>
            <input
              type="number"
              min={0}
              max={loopEnd || duration}
              step={0.1}
              value={loopStart.toFixed(2)}
              onChange={(e) => onSetLoopPoints(parseFloat(e.target.value), loopEnd)}
              className="flex-1 px-2 py-1 bg-background border border-border rounded text-xs font-mono"
            />
            <Button
              variant="ghost"
              size="sm"
              onClick={() => onSetLoopPoints(currentTime, loopEnd)}
              title="Set loop start to current time"
              className="h-6 px-2 text-xs"
            >
              Set
            </Button>
          </div>

          <div className="flex items-center gap-2 flex-1">
            <label className="text-muted-foreground flex items-center gap-1 flex-shrink-0">
              <AlignVerticalJustifyEnd className="h-3 w-3" />
              Loop End
            </label>
            <input
              type="number"
              min={loopStart}
              max={duration}
              step={0.1}
              value={loopEnd.toFixed(2)}
              onChange={(e) => onSetLoopPoints(loopStart, parseFloat(e.target.value))}
              className="flex-1 px-2 py-1 bg-background border border-border rounded text-xs font-mono"
            />
            <Button
              variant="ghost"
              size="sm"
              onClick={() => onSetLoopPoints(loopStart, currentTime)}
              title="Set loop end to current time"
              className="h-6 px-2 text-xs"
            >
              Set
            </Button>
          </div>
        </div>
      )}
    </div>
  );
}