import React, { useState, useEffect, useCallback, useRef } from 'react';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { RotateCw, Volume2, Forward, HelpCircle, RefreshCw } from 'lucide-react';

function SpeakAndSpell() {
  const successSoundRef = useRef(null);
  const errorSoundRef = useRef(null);
  
  const DIFFICULT_WORDS = [
    'accommodate', 'accordance', 'acquisition', 'ambiguous', 'bureaucracy',
    'characteristic', 'circumstantial', 'coincidence', 'colleague', 'commemorate',
    'commissary', 'commitment', 'committee', 'competitive', 'completely',
    'concurrence', 'conflagration', 'conscientious', 'consistent', 'convenient',
    'correspondence', 'definitely', 'development', 'difference', 'discipline',
    'dissimilar', 'efficient', 'embarrass', 'especially', 'exhilarate',
    'experience', 'fascinating', 'government', 'grandiloquent', 'guarantee',
    'harassment', 'hierarchy', 'humorous', 'hypocrite', 'ignominious',
    'immediate', 'incandescent', 'incredible', 'independent', 'industrial',
    'infinitesimal', 'influential', 'inspiration', 'intelligence', 'maintenance',
    'medieval', 'millennium', 'miniature', 'necessary', 'obstinate',
    'occurrence', 'opportunity', 'parliament', 'perseverance', 'personnel',
    'perspective', 'phenomenon', 'preference', 'prejudice', 'prevalent'
  ];

  const KEYBOARD_LAYOUT = [
    ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
    ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
    ['Z', 'X', 'C', 'V', 'B', 'N', 'M']
  ];

  const [availableWords, setAvailableWords] = useState([...DIFFICULT_WORDS]);
  const [currentWord, setCurrentWord] = useState('');
  const [userInput, setUserInput] = useState('');
  const [stats, setStats] = useState({ correct: 0, attempted: 0, skipped: 0 });
  const [showSuccess, setShowSuccess] = useState(false);
  const [showError, setShowError] = useState(false);
  const [showHint, setShowHint] = useState(false);
  const [isLoading, setIsLoading] = useState(false);

  // Create beep oscillator for success/error sounds
  const playSuccessSound = () => {
    if (typeof window !== 'undefined' && window.AudioContext) {
      const audioContext = new AudioContext();
      const oscillator = audioContext.createOscillator();
      const gainNode = audioContext.createGain();
      
      oscillator.connect(gainNode);
      gainNode.connect(audioContext.destination);
      
      oscillator.type = 'sine';
      oscillator.frequency.setValueAtTime(800, audioContext.currentTime); // Higher pitch for success
      gainNode.gain.setValueAtTime(0.5, audioContext.currentTime);
      
      oscillator.start();
      gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.5);
      oscillator.stop(audioContext.currentTime + 0.5);
    }
  };

  const playErrorSound = () => {
    if (typeof window !== 'undefined' && window.AudioContext) {
      const audioContext = new AudioContext();
      const oscillator = audioContext.createOscillator();
      const gainNode = audioContext.createGain();
      
      oscillator.connect(gainNode);
      gainNode.connect(audioContext.destination);
      
      oscillator.type = 'sine';
      oscillator.frequency.setValueAtTime(200, audioContext.currentTime); // Lower pitch for error
      gainNode.gain.setValueAtTime(0.5, audioContext.currentTime);
      
      oscillator.start();
      gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.5);
      oscillator.stop(audioContext.currentTime + 0.5);
    }
  };

  useEffect(() => {
    if (!currentWord) {
      selectNewWord();
    }
  }, [currentWord]);

  const selectNewWord = useCallback(() => {
    if (availableWords.length === 0) {
      setAvailableWords([...DIFFICULT_WORDS]);
      return;
    }
    const index = Math.floor(Math.random() * availableWords.length);
    const word = availableWords[index];
    setAvailableWords(prev => prev.filter((_, i) => i !== index));
    setCurrentWord(word);
  }, [availableWords]);

  const speakWord = (word) => {
    setIsLoading(true);
    const utterance = new SpeechSynthesisUtterance(word);
    const voices = window.speechSynthesis.getVoices();
    const maleVoice = voices.find(
      voice => 
        voice.name.includes('Male') || 
        voice.name.includes('male') || 
        voice.name.includes('David') ||
        voice.name.includes('James') ||
        voice.name.includes('Daniel')
    );
    if (maleVoice) {
      utterance.voice = maleVoice;
    }
    utterance.rate = 0.9;
    utterance.pitch = 0.8;
    utterance.volume = 1.0;
    utterance.onend = () => setIsLoading(false);
    window.speechSynthesis.speak(utterance);
  };

  const speakLetter = (letter) => {
    const utterance = new SpeechSynthesisUtterance(letter.toLowerCase());
    const voices = window.speechSynthesis.getVoices();
    const maleVoice = voices.find(
      voice => 
        voice.name.includes('Male') || 
        voice.name.includes('male') || 
        voice.name.includes('David') ||
        voice.name.includes('James') ||
        voice.name.includes('Daniel')
    );
    if (maleVoice) {
      utterance.voice = maleVoice;
    }
    utterance.rate = 0.9;
    utterance.pitch = 0.8;
    utterance.volume = 1.0;
    window.speechSynthesis.speak(utterance);
  };

  const handleKeyPress = (letter) => {
    if (userInput.length < currentWord.length) {
      setUserInput(prev => prev + letter);
      speakLetter(letter);
    }
  };

  const handleBackspace = () => {
    setUserInput(prev => prev.slice(0, -1));
  };

  useEffect(() => {
    const handlePhysicalKeyboard = (e) => {
      if (e.key === 'Backspace') {
        e.preventDefault();
        handleBackspace();
      } else if (e.key === 'Enter') {
        e.preventDefault();
        handleSubmit();
      } else if (e.key.length === 1 && e.key.match(/[a-zA-Z]/i)) {
        e.preventDefault();
        handleKeyPress(e.key.toUpperCase());
      }
    };

    window.addEventListener('keydown', handlePhysicalKeyboard);
    return () => window.removeEventListener('keydown', handlePhysicalKeyboard);
  }, [userInput, currentWord]);

  const handleSkip = () => {
    setStats(prev => ({ ...prev, skipped: prev.skipped + 1 }));
    setUserInput('');
    setShowHint(false);
    selectNewWord();
  };

  const handleSubmit = () => {
    if (userInput.toLowerCase() === currentWord.toLowerCase()) {
      setShowSuccess(true);
      setShowError(false);
      setStats(prev => ({
        ...prev,
        correct: prev.correct + 1,
        attempted: prev.attempted + 1
      }));
      playSuccessSound();
      setTimeout(() => {
        setShowSuccess(false);
        setUserInput('');
        setShowHint(false);
        selectNewWord();
      }, 1500);
    } else {
      setShowError(true);
      setShowSuccess(false);
      setStats(prev => ({
        ...prev,
        attempted: prev.attempted + 1
      }));
      playErrorSound();
      setTimeout(() => {
        setShowError(false);
        setUserInput('');
      }, 1500);
    }
  };

  const handleHint = () => {
    setShowHint(!showHint);
  };

  const handleReset = () => {
    setAvailableWords([...DIFFICULT_WORDS]);
    setCurrentWord('');
    setUserInput('');
    setStats({ correct: 0, attempted: 0, skipped: 0 });
    setShowSuccess(false);
    setShowError(false);
    setShowHint(false);
  };

  return (
    <div className="max-w-3xl mx-auto p-4">
      <Card className="bg-red-600 p-8 rounded-3xl shadow-2xl border-8 border-red-700">
        {/* Handle section */}
        <div className="w-48 h-8 bg-red-700 rounded-t-2xl mx-auto -mt-8 mb-4"></div>
        
        {/* Main device body */}
        <div className="space-y-6">
          {/* Speaker grille */}
          <div className="grid grid-cols-8 gap-1 mx-auto w-32">
            {[...Array(24)].map((_, i) => (
              <div key={i} className="h-1 bg-gray-800 rounded"></div>
            ))}
          </div>

          {/* Display section with retro LED look */}
          <div className="bg-black p-6 rounded-lg border-4 border-gray-800 shadow-inner">
            {/* Success/Error Messages */}
            {showSuccess && (
              <Alert className="mb-4 bg-green-100">
                <AlertDescription>Correct!</AlertDescription>
              </Alert>
            )}
            {showError && (
              <Alert className="mb-4 bg-red-100">
                <AlertDescription>Incorrect, try again!</AlertDescription>
              </Alert>
            )}
            
            <div className="font-mono text-4xl tracking-wider h-16 flex items-center justify-center" 
                 style={{ color: '#32CD32', textShadow: '0 0 5px #32CD32' }}>
              {userInput.split('').map((letter, index) => (
                <span
                  key={index}
                  className={
                    showHint && currentWord[index]?.toLowerCase() !== letter.toLowerCase()
                      ? 'text-red-500'
                      : ''
                  }
                >
                  {letter}
                </span>
              ))}
              {userInput.length < currentWord.length && 
                <span className="opacity-70">{'_'.repeat(currentWord.length - userInput.length)}</span>
              }
            </div>
          </div>

          {/* Control panel with yellow inset */}
          <div className="bg-yellow-400 p-4 rounded-xl border-4 border-yellow-500 shadow-inner">
            {/* Control buttons */}
            <div className="grid grid-cols-4 gap-2 mb-6">
              <Button 
                onClick={() => speakWord(currentWord)} 
                className="bg-blue-600 hover:bg-blue-700 text-white rounded-lg shadow-md border-2 border-blue-700"
                disabled={isLoading}
              >
                <Volume2 className="mr-2 h-4 w-4" /> {isLoading ? 'Speaking...' : 'Play'}
              </Button>
              <Button 
                onClick={handleSkip} 
                className="bg-blue-600 hover:bg-blue-700 text-white rounded-lg shadow-md border-2 border-blue-700"
              >
                <Forward className="mr-2 h-4 w-4" /> Skip
              </Button>
              <Button 
                onClick={handleHint} 
                className="bg-blue-600 hover:bg-blue-700 text-white rounded-lg shadow-md border-2 border-blue-700"
              >
                <HelpCircle className="mr-2 h-4 w-4" /> Hint
              </Button>
              <Button 
                onClick={handleSubmit} 
                className="bg-blue-600 hover:bg-blue-700 text-white rounded-lg shadow-md border-2 border-blue-700"
              >
                <RotateCw className="mr-2 h-4 w-4" /> Enter
              </Button>
            </div>

            {/* Keyboard section */}
            <div className="bg-blue-500 p-4 rounded-lg border-2 border-blue-600 shadow-inner">
              {KEYBOARD_LAYOUT.map((row, rowIndex) => (
                <div key={rowIndex} className="flex justify-center gap-1 mb-1">
                  {row.map((letter) => (
                    <Button
                      key={letter}
                      onClick={() => handleKeyPress(letter)}
                      className="w-10 h-10 bg-yellow-400 hover:bg-yellow-500 text-gray-900 font-bold text-lg rounded-lg shadow-md border-2 border-yellow-500"
                    >
                      {letter}
                    </Button>
                  ))}
                </div>
              ))}
              <div className="flex justify-center gap-1 mt-1">
                <Button
                  onClick={handleBackspace}
                  className="px-6 py-2 bg-yellow-400 hover:bg-yellow-500 text-gray-900 font-bold rounded-lg shadow-md border-2 border-yellow-500"
                >
                  ←
                </Button>
              </div>
            </div>

            {/* Logo at bottom */}
            <div className="mt-8 flex justify-center">
              <svg viewBox="0 0 300 80" className="w-64" xmlns="http://www.w3.org/2000/svg">
                <defs>
                  <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
                    <feDropShadow dx="2" dy="2" stdDeviation="2" floodOpacity="0.3"/>
                  </filter>
                </defs>
                <text x="10" y="50" filter="url(#shadow)" 
                      style={{
                        fontFamily: 'Arial',
                        fontSize: '48px',
                        fontWeight: 'bold'
                      }}>
                  <tspan fill="#FF4C4C" style={{transform: 'rotate(-2deg)'}}>Sp</tspan>
                  <tspan fill="#FF4C4C" dy="5">ea</tspan>
                  <tspan fill="#FF4C4C" dy="-5">k</tspan>
                  <tspan fill="#4C9EFF" dx="5">&amp;</tspan>
                  <tspan fill="#4C9EFF">Sp</tspan>
                  <tspan fill="#4C9EFF" dy="3">e</tspan>
                  <tspan fill="#4C9EFF" dy="-3">ll</tspan>
                </text>
              </svg>
            </div>
          </div>

          {/* Stats display */}
          <div className="text-sm bg-gray-900 p-2 rounded font-mono text-green-500">
            <div>Correct: {stats.correct} / Total: {stats.attempted + stats.skipped}</div>
            <div>Success: {((stats.correct / (stats.attempted || 1)) * 100).toFixed(1)}%</div>
            <div>Skipped: {stats.skipped}</div>
          </div>

          {/* Reset button */}
          <div className="mt-4 flex justify-center">
            <Button 
              onClick={handleReset} 
              className="bg-red-700 hover:bg-red-800 text-white rounded-lg shadow-md border-2 border-red-800"
            >
              <RefreshCw className="mr-2 h-4 w-4" /> Reset
            </Button>
          </div>
        </div>
      </Card>
    </div>
  );
}

export default SpeakAndSpell;