import { Play, Pause, SkipForward, SkipBack, Repeat, Repeat1 } from 'lucide-react';
import { Button } from '../ui/button';

interface PlaybackControlsProps {
  isPlaying: boolean;
  playbackSpeed: number;
  loopMode: 'none' | 'sentence' | 'word';
  onPlayPause: () => void;
  onNext: () => void;
  onPrevious: () => void;
  onSpeedChange: (speed: number) => void;
  onLoopModeChange: (mode: 'none' | 'sentence' | 'word') => void;
  canGoNext: boolean;
  canGoPrevious: boolean;
}

const SPEED_OPTIONS = [0.5, 0.75, 1.0, 1.25, 1.5, 2.0];

export function PlaybackControls({
  isPlaying,
  playbackSpeed,
  loopMode,
  onPlayPause,
  onNext,
  onPrevious,
  onSpeedChange,
  onLoopModeChange,
  canGoNext,
  canGoPrevious,
}: PlaybackControlsProps) {
  const handleLoopToggle = () => {
    const modes: Array<'none' | 'sentence' | 'word'> = ['none', 'sentence', 'word'];
    const currentIndex = modes.indexOf(loopMode);
    const nextIndex = (currentIndex + 1) % modes.length;
    onLoopModeChange(modes[nextIndex]);
  };

  const getLoopIcon = () => {
    if (loopMode === 'word') {
      return <Repeat1 className="h-5 w-5" />;
    }
    return <Repeat className="h-5 w-5" />;
  };

  const getLoopLabel = () => {
    switch (loopMode) {
      case 'word':
        return 'Ponavljanje riječi';
      case 'sentence':
        return 'Ponavljanje rečenice';
      default:
        return 'Bez ponavljanja';
    }
  };

  return (
    <div className="bg-white rounded-lg shadow-md p-6 mt-4">
      <div className="flex flex-col gap-4">
        {/* Main playback controls */}
        <div className="flex items-center justify-center gap-4">
          <Button
            variant="outline"
            size="lg"
            onClick={onPrevious}
            disabled={!canGoPrevious}
            title="Prethodno"
          >
            <SkipBack className="h-6 w-6" />
          </Button>

          <Button
            size="lg"
            onClick={onPlayPause}
            className="w-20 h-20 rounded-full bg-orange-500 hover:bg-orange-600 text-white"
            title={isPlaying ? 'Pauza' : 'Reproduciraj'}
          >
            {isPlaying ? (
              <Pause className="h-8 w-8" />
            ) : (
              <Play className="h-8 w-8 ml-1" />
            )}
          </Button>

          <Button
            variant="outline"
            size="lg"
            onClick={onNext}
            disabled={!canGoNext}
            title="Sljedeće"
          >
            <SkipForward className="h-6 w-6" />
          </Button>
        </div>

        {/* Speed and loop controls */}
        <div className="flex items-center justify-center gap-6 pt-4 border-t">
          {/* Speed selector */}
          <div className="flex items-center gap-3">
            <label className="text-sm font-medium text-gray-700">Brzina:</label>
            <select
              value={playbackSpeed}
              onChange={(e) => onSpeedChange(parseFloat(e.target.value))}
              className="px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-orange-500"
            >
              {SPEED_OPTIONS.map((speed) => (
                <option key={speed} value={speed}>
                  {speed}x
                </option>
              ))}
            </select>
          </div>

          {/* Loop mode toggle */}
          <div className="flex items-center gap-3">
            <Button
              variant={loopMode !== 'none' ? 'default' : 'outline'}
              size="sm"
              onClick={handleLoopToggle}
              className={loopMode !== 'none' ? 'bg-orange-500 hover:bg-orange-600' : ''}
              title={getLoopLabel()}
            >
              {getLoopIcon()}
              <span className="ml-2 text-sm">{getLoopLabel()}</span>
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}

