import React from 'react';
import { X, Gauge } from 'lucide-react';
import { useAudio } from '../../context/AudioContext';

interface PlaybackSpeedModalProps {
  onClose: () => void;
}

export const PlaybackSpeedModal: React.FC<PlaybackSpeedModalProps> = ({
  onClose,
}) => {
  const {
    playbackRate,
    setPlaybackRate,
    pitchCorrection,
    togglePitchCorrection,
  } = useAudio();
  const presets = [0.5, 0.75, 1.0, 1.25, 1.5, 2.0];

  return (
    <div className="absolute bottom-20 right-0 md:right-auto md:left-1/2 md:-translate-x-1/2 w-80 bg-kodo-graphite border border-kodo-steel rounded-xl shadow-2xl z-50 animate-fadeIn overflow-hidden">
      <div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
        <h3 className="font-bold text-white flex items-center gap-2 text-sm">
          <Gauge className="w-4 h-4 text-kodo-gold" /> Playback Speed
        </h3>
        <button onClick={onClose}>
          <X className="w-4 h-4 text-gray-400 hover:text-white" />
        </button>
      </div>

      <div className="p-6 space-y-6">
        {/* Slider */}
        <div className="space-y-2">
          <div className="flex justify-between text-xs text-gray-400">
            <span>0.5x</span>
            <span className="font-bold text-kodo-gold text-lg">
              {playbackRate}x
            </span>
            <span>2.0x</span>
          </div>
          <input
            type="range"
            min="0.5"
            max="2.0"
            step="0.05"
            value={playbackRate}
            onChange={(e) => setPlaybackRate(parseFloat(e.target.value))}
            className="w-full h-1.5 bg-kodo-steel rounded-lg appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:bg-kodo-gold [&::-webkit-slider-thumb]:rounded-full"
          />
        </div>

        {/* Presets */}
        <div className="grid grid-cols-3 gap-2">
          {presets.map((rate) => (
            <button
              key={rate}
              onClick={() => setPlaybackRate(rate)}
              className={`px-2 py-1.5 rounded text-xs font-bold transition-all ${playbackRate === rate ? 'bg-kodo-gold text-black' : 'bg-kodo-slate text-gray-400 hover:text-white'}`}
            >
              {rate}x
            </button>
          ))}
        </div>

        {/* Pitch Correction */}
        <div className="flex items-center justify-between p-3 bg-kodo-ink rounded-lg border border-kodo-steel/50">
          <div className="flex flex-col">
            <span className="text-sm font-bold text-white">
              Pitch Correction
            </span>
            <span className="text-[10px] text-gray-500">
              Maintain key when changing speed
            </span>
          </div>
          <div
            onClick={togglePitchCorrection}
            className={`w-10 h-5 rounded-full relative cursor-pointer transition-colors ${pitchCorrection ? 'bg-kodo-gold' : 'bg-gray-600'}`}
          >
            <div
              className={`absolute top-1 w-3 h-3 bg-white rounded-full transition-all ${pitchCorrection ? 'left-6' : 'left-1'}`}
            ></div>
          </div>
        </div>
      </div>
    </div>
  );
};