import React, { useState, useEffect, useRef } from 'react';
import { geminiService, decodeAudioData } from '../services/geminiService';
import AudioRecorder from '../components/AudioRecorder';
import { processAndDownloadAudio } from '../utils/audioUtils';
import { Scenario, PronunciationFeedback, Language } from '../types';
import { Mic, Volume2, ChevronRight, Award, AlertCircle, CheckCircle, User, Bot, ArrowLeft, Download, ToggleLeft, ToggleRight, PanelRightClose, PanelRightOpen, X } from 'lucide-react';
import { translations, getScenarios } from '../utils/localization';

interface SpeakingPracticeViewProps {
  language: Language;
}

const SpeakingPracticeView: React.FC<SpeakingPracticeViewProps> = ({ language }) => {
  const t = translations[language].speaking;
  const tRecorder = translations[language].recorder;

  const [activeScenario, setActiveScenario] = useState<Scenario | null>(null);
  const [history, setHistory] = useState<{role: string, text: string, translation?: string}[]>([]);
  const [feedback, setFeedback] = useState<PronunciationFeedback | null>(null);
  const [isProcessing, setIsProcessing] = useState(false);
  const [isPlayingTTS, setIsPlayingTTS] = useState(false);
  const [lastAudioUrl, setLastAudioUrl] = useState<string | null>(null);
  const [showTranslation, setShowTranslation] = useState(false);
  const [isFeedbackOpen, setIsFeedbackOpen] = useState(false); // New state for mobile feedback drawer
  
  const audioContextRef = useRef<AudioContext | null>(null);

  // Reset flow if language changes, to avoid mismatched text
  useEffect(() => {
    reset();
  }, [language]);

  const startScenario = (scenario: Scenario) => {
    setActiveScenario(scenario);
    setHistory([{ 
        role: 'model', 
        text: scenario.initialMessage,
        translation: scenario.initialTranslation
    }]);
    setFeedback(null);
    playTTS(scenario.initialMessage);
  };

  const playTTS = async (text: string) => {
    try {
      setIsPlayingTTS(true);
      const audioBase64 = await geminiService.generateSpeech(text);
      if (audioBase64) {
        setLastAudioUrl(audioBase64);
        if (!audioContextRef.current) {
          audioContextRef.current = new (window.AudioContext || (window as any).webkitAudioContext)();
        }
        const buffer = await decodeAudioData(audioBase64, audioContextRef.current);
        const source = audioContextRef.current.createBufferSource();
        source.buffer = buffer;
        source.connect(audioContextRef.current.destination);
        source.onended = () => setIsPlayingTTS(false);
        source.start();
      }
    } catch (e) {
      console.error(e);
      setIsPlayingTTS(false);
    }
  };

  const downloadTTS = async (text: string) => {
      try {
          if (lastAudioUrl && history[history.length - 1]?.text === text) {
              // If the last generated audio matches the current requested text, use cached
               processAndDownloadAudio(lastAudioUrl, `sakura_roleplay_${Date.now()}.wav`);
               return;
          }
          // Otherwise generate
          const audioBase64 = await geminiService.generateSpeech(text);
          if (audioBase64) {
              processAndDownloadAudio(audioBase64, `sakura_roleplay_${Date.now()}.wav`);
          }
      } catch (e) {
          console.error("Download failed", e);
      }
  };

  const handleAudioInput = async (base64Audio: string) => {
    if (!activeScenario) return;
    
    setIsProcessing(true);
    
    const historyText = history.slice(-4).map(h => `${h.role}: ${h.text}`).join('\n');

    try {
      const result = await geminiService.analyzeSpeakingPerformance(
        base64Audio,
        `Roleplay as ${activeScenario.role} in context: ${activeScenario.description}`,
        historyText,
        language
      );

      if (result) {
        setFeedback(result);
        setHistory(prev => [
          ...prev, 
          { role: 'user', text: result.transcription },
          { role: 'model', text: result.response, translation: result.translation }
        ]);
        
        setIsFeedbackOpen(true); // Open feedback automatically on new input
        await playTTS(result.response);
      }
    } catch (e) {
      console.error("Analysis failed", e);
    } finally {
      setIsProcessing(false);
    }
  };

  const reset = () => {
    setActiveScenario(null);
    setHistory([]);
    setFeedback(null);
    setLastAudioUrl(null);
    setShowTranslation(false);
    setIsFeedbackOpen(false);
  };

  // Initial View: Scenario Selection
  if (!activeScenario) {
    const scenarios = getScenarios(language);

    return (
      <div className="h-full p-6 md:p-10 overflow-y-auto bg-slate-50/50">
        <div className="max-w-6xl mx-auto">
          <div className="mb-10 animate-fade-in-up">
            <h2 className="text-4xl font-extrabold text-slate-800 mb-3 tracking-tight">{t.title}</h2>
            <p className="text-lg text-slate-500 max-w-2xl">{t.subtitle}</p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-2 gap-6">
            {scenarios.map((scenario, index) => (
              <button 
                key={scenario.id}
                onClick={() => startScenario(scenario)}
                style={{ animationDelay: `${index * 100}ms` }}
                className="animate-fade-in-up relative overflow-hidden bg-white p-6 rounded-3xl shadow-sm hover:shadow-xl border border-slate-100 hover:border-indigo-200 transition-all duration-300 group text-left hover:-translate-y-1"
              >
                <div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-slate-50 to-slate-100 rounded-bl-full -mr-8 -mt-8 z-0 group-hover:scale-110 transition-transform duration-500" />
                
                <div className="relative z-10 flex items-start">
                    <div className="w-20 h-20 bg-white rounded-2xl shadow-lg flex items-center justify-center text-5xl mr-6 border border-slate-50 group-hover:rotate-12 transition-transform duration-300">
                        {scenario.icon}
                    </div>
                    <div className="flex-1 pt-1">
                        <h3 className="text-xl font-bold text-slate-800 mb-2 group-hover:text-indigo-600 transition-colors">{scenario.title}</h3>
                        <p className="text-slate-500 text-sm mb-4 leading-relaxed">{scenario.description}</p>
                        <div className="inline-flex items-center px-4 py-2 bg-indigo-50 text-indigo-600 rounded-full text-sm font-bold group-hover:bg-indigo-600 group-hover:text-white transition-colors duration-300">
                            {t.start} <ChevronRight size={16} className="ml-1 group-hover:translate-x-1 transition-transform" />
                        </div>
                    </div>
                </div>
              </button>
            ))}
          </div>
        </div>
      </div>
    );
  }

  // Feedback Content Component
  const FeedbackContent = () => (
    <div className="h-full flex flex-col">
        <div className="p-6 bg-slate-50 border-b border-slate-100 flex justify-between items-center">
            <h3 className="text-lg font-extrabold text-slate-800 flex items-center gap-2">
                <Award className="text-amber-500" fill="currentColor" /> 
                {t.feedbackTitle}
            </h3>
            <button onClick={() => setIsFeedbackOpen(false)} className="md:hidden text-slate-400">
                <X size={20} />
            </button>
        </div>

        <div className="flex-1 overflow-y-auto p-6">
        {feedback ? (
          <div className="space-y-6 animate-slide-in-right">
            
            {/* Score Card */}
            <div className="bg-white rounded-3xl p-6 flex flex-col items-center shadow-sm border border-slate-100 relative overflow-hidden group">
               <div className="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-green-400 to-emerald-500 group-hover:h-full group-hover:opacity-5 transition-all duration-500"></div>
               <div className="relative w-28 h-28 flex items-center justify-center mb-2">
                  <svg className="transform -rotate-90 w-28 h-28">
                    <circle cx="56" cy="56" r="48" stroke="currentColor" strokeWidth="8" fill="transparent" className="text-slate-100" />
                    <circle cx="56" cy="56" r="48" stroke="currentColor" strokeWidth="8" fill="transparent" 
                            strokeDasharray={301.6} 
                            strokeDashoffset={301.6 - (301.6 * (feedback.score || 0)) / 100} 
                            strokeLinecap="round"
                            className={`${(feedback.score || 0) > 80 ? 'text-green-500' : (feedback.score || 0) > 60 ? 'text-amber-500' : 'text-red-500'} transition-all duration-1000 ease-out`} 
                    />
                  </svg>
                  <div className="absolute flex flex-col items-center animate-scale-in">
                      <span className="text-3xl font-black text-slate-800">{feedback.score || 0}</span>
                  </div>
               </div>
               <span className="text-xs font-bold text-slate-400 uppercase tracking-widest">{t.score}</span>
            </div>

            {/* Issues List */}
            <div className="bg-white rounded-2xl p-5 border border-slate-100 shadow-sm animate-fade-in-up delay-100">
              <h4 className="text-xs font-bold text-slate-400 mb-4 uppercase tracking-wider flex items-center gap-2">
                <AlertCircle size={14} className="text-red-500" /> {t.toImprove}
              </h4>
              {feedback.pronunciationIssues && feedback.pronunciationIssues.length > 0 ? (
                <ul className="space-y-2">
                  {feedback.pronunciationIssues.map((issue, i) => (
                    <li key={i} className="text-sm text-slate-700 bg-red-50/50 p-3 rounded-lg border border-red-100 flex items-start gap-2">
                      <span className="text-red-400 mt-0.5">•</span> {issue}
                    </li>
                  ))}
                </ul>
              ) : (
                <p className="text-sm font-medium text-green-600 bg-green-50 p-4 rounded-xl flex items-center gap-2 animate-pulse">
                    <CheckCircle size={16} /> {t.perfect}
                </p>
              )}
            </div>

            {/* Advice */}
            <div className="bg-gradient-to-br from-indigo-500 to-purple-600 rounded-2xl p-5 text-white shadow-lg shadow-indigo-200 animate-fade-in-up delay-200 hover:shadow-xl transition-shadow">
               <h4 className="text-xs font-bold text-indigo-200 mb-3 uppercase tracking-wider flex items-center gap-2">
                 <CheckCircle size={14} /> {t.advice}
               </h4>
               <p className="text-sm font-medium leading-relaxed opacity-95">
                 {feedback.advice}
               </p>
            </div>

            {/* Metadata */}
            <div className="space-y-2 animate-fade-in-up delay-300">
                <div className="bg-slate-50 p-3 rounded-xl border border-slate-100">
                    <h4 className="text-[10px] font-bold text-slate-400 mb-1 uppercase">{t.transcription}</h4>
                    <p className="text-sm text-slate-600 italic font-serif">"{feedback.transcription}"</p>
                </div>
                <div className="bg-slate-50 p-3 rounded-xl border border-slate-100">
                     <h4 className="text-[10px] font-bold text-slate-400 mb-1 uppercase">{t.meaning}</h4>
                     <p className="text-sm text-slate-600">"{feedback.translation}"</p>
                </div>
            </div>

          </div>
        ) : (
          <div className="h-full flex flex-col items-center justify-center text-slate-400 p-8 animate-fade-in">
             <div className="w-20 h-20 bg-slate-50 rounded-full flex items-center justify-center mb-6 shadow-inner animate-pulse">
               <Mic size={32} className="text-slate-300" />
             </div>
             <p className="text-sm text-center font-medium leading-relaxed max-w-[200px]">{t.emptyFeedback}</p>
          </div>
        )}
        </div>
    </div>
  );

  // Active Conversation View
  return (
    <div className="h-full flex flex-row bg-slate-50 animate-fade-in relative overflow-hidden">
      
      {/* Left: Conversation Area */}
      <div className="flex-1 flex flex-col h-full min-w-0 border-r border-slate-200 bg-white/50 relative">
        {/* Header */}
        <div className="p-4 bg-white/80 backdrop-blur border-b border-slate-100 flex items-center justify-between shadow-sm z-10 sticky top-0">
          <div className="flex items-center gap-2 overflow-hidden">
             <button 
               onClick={reset} 
               className="p-2 rounded-full hover:bg-slate-100 text-slate-500 transition-colors hover:scale-110 flex-shrink-0"
             >
               <ArrowLeft size={20} />
             </button>
             <div className="flex items-center gap-3 animate-slide-in-right min-w-0">
               <span className="text-2xl bg-slate-100 w-10 h-10 flex items-center justify-center rounded-full shadow-inner flex-shrink-0">{activeScenario.icon}</span>
               <div className="truncate">
                 <h3 className="font-bold text-slate-800 truncate">{activeScenario.title}</h3>
                 <p className="text-xs text-slate-500 font-medium uppercase tracking-wider truncate">{t.roleplay}: {activeScenario.role}</p>
               </div>
             </div>
          </div>
          
          <div className="flex items-center gap-2 flex-shrink-0">
            <button 
                onClick={() => setShowTranslation(!showTranslation)}
                className="flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-bold bg-white border border-slate-200 text-slate-600 hover:bg-slate-50 transition-all"
            >
                {showTranslation ? <ToggleRight size={20} className="text-indigo-500" /> : <ToggleLeft size={20} />}
                <span className="hidden sm:inline">{t.translation}</span>
            </button>

            {/* Feedback Toggle (Mobile) */}
            <button
                onClick={() => setIsFeedbackOpen(!isFeedbackOpen)}
                className={`md:hidden p-2 rounded-lg border transition-colors flex items-center gap-2 text-sm font-medium ${
                    isFeedbackOpen 
                    ? 'bg-indigo-50 text-indigo-600 border-indigo-200' 
                    : 'bg-white text-slate-600 border-slate-200 hover:bg-slate-50'
                }`}
            >
                {isFeedbackOpen ? <PanelRightClose size={18} /> : <PanelRightOpen size={18} />}
            </button>
          </div>
        </div>

        {/* Messages */}
        <div className="flex-1 overflow-y-auto p-4 md:p-8 space-y-8 pb-24">
          {history.map((msg, idx) => {
             const isUser = msg.role === 'user';
             return (
               <div key={idx} className={`flex ${isUser ? 'justify-end' : 'justify-start'} animate-fade-in-up`}>
                  <div className={`flex max-w-[85%] gap-4 ${isUser ? 'flex-row-reverse' : 'flex-row'}`}>
                    <div className={`w-10 h-10 rounded-2xl flex-shrink-0 flex items-center justify-center shadow-sm transition-transform hover:scale-110 ${isUser ? 'bg-indigo-600' : 'bg-pink-500'}`}>
                      {isUser ? <User size={18} className="text-white" /> : <Bot size={18} className="text-white" />}
                    </div>
                    <div className={`p-5 rounded-3xl shadow-sm transition-all hover:shadow-md ${isUser ? 'bg-indigo-600 text-white rounded-tr-sm' : 'bg-white text-slate-800 border border-slate-100 rounded-tl-sm'}`}>
                      <p className="text-lg leading-relaxed font-medium">{msg.text}</p>
                      {showTranslation && msg.translation && (
                          <p className={`text-sm mt-2 pt-2 border-t ${isUser ? 'border-white/20 text-indigo-100' : 'border-slate-100 text-slate-500'} italic`}>
                              {msg.translation}
                          </p>
                      )}
                      {!isUser && (
                         <div className="flex gap-2 mt-3">
                             <button 
                                onClick={() => playTTS(msg.text)}
                                className="px-3 py-1 bg-pink-50 hover:bg-pink-100 text-pink-600 rounded-full flex items-center gap-1 text-xs font-bold transition-colors"
                                >
                                <Volume2 size={12} /> {t.replay}
                            </button>
                            <button 
                                onClick={() => downloadTTS(msg.text)}
                                className="px-3 py-1 bg-slate-100 hover:bg-slate-200 text-slate-500 rounded-full flex items-center gap-1 text-xs font-bold transition-colors"
                                title="Download"
                                >
                                <Download size={12} />
                            </button>
                         </div>
                      )}
                    </div>
                  </div>
               </div>
             );
          })}
          {isProcessing && (
            <div className="flex justify-center py-8">
               <div className="flex items-center gap-3 px-6 py-3 bg-indigo-50 rounded-full text-indigo-600 font-bold text-sm animate-pulse shadow-inner">
                 <Mic size={18} className="animate-bounce" /> {t.listening}
               </div>
            </div>
          )}
        </div>

        {/* Interaction Area */}
        <div className="p-6 bg-white border-t border-slate-100 flex flex-col justify-center items-center relative shadow-[0_-4px_20px_rgba(0,0,0,0.02)] z-20 pb-[env(safe-area-inset-bottom)]">
            <div className="absolute top-0 left-0 w-full h-1 bg-slate-100 overflow-hidden">
               {isProcessing && <div className="h-full bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 animate-indeterminate" />}
            </div>
            
            <div className="flex flex-col items-center gap-4 w-full max-w-md">
               <div className="transform hover:scale-110 transition-transform duration-300">
                 <AudioRecorder 
                   onAudioCaptured={handleAudioInput} 
                   disabled={isProcessing || isPlayingTTS} 
                   titleStart={tRecorder.start}
                   titleStop={tRecorder.stop}
                 />
               </div>
               <p className="text-xs text-slate-400 font-bold uppercase tracking-widest animate-pulse">
                 {isProcessing ? t.processing : t.tapSpeak}
               </p>
            </div>
        </div>
      </div>

      {/* Right: Feedback Panel (Desktop) */}
      <div className={`
        hidden md:block w-80 lg:w-96 bg-white border-l border-slate-200 overflow-y-auto shadow-2xl z-30 transition-transform duration-500
        ${isFeedbackOpen ? 'translate-x-0' : 'translate-x-0'} 
      `}>
         <FeedbackContent />
      </div>

      {/* Right: Feedback Drawer (Mobile) */}
      <div className={`
        fixed inset-y-0 right-0 z-50 w-full sm:w-96 bg-white shadow-2xl transform transition-transform duration-300 md:hidden
        ${isFeedbackOpen ? 'translate-x-0' : 'translate-x-full'}
      `}>
         <FeedbackContent />
      </div>

    </div>
  );
};

export default SpeakingPracticeView;