import React, { useState, useRef, useEffect } from 'react';
import { ChatMessage, TriviaQuestion } from '../types';
import { 
  createStudyChat, generateTrivia, analyzeImage
} from '../services/geminiService';
import { StorageService } from '../services/storageService';
import { Button } from '../components/ui/Button';
import { 
  Send, Bot, Loader2,
  X, Mic, RefreshCw,
  Image as ImageIcon, MessageSquare, Trophy, Volume2, VolumeX, Eye
} from 'lucide-react';
import { useLanguage } from '../contexts/LanguageContext';
import confetti from 'canvas-confetti';

// --- MESSAGE PARSER FOR DUAL LANGUAGE ---
const parseMessage = (rawText: string) => {
  try {
    const json = JSON.parse(rawText);
    if (json.en || json.ne) return json;
    return { en: rawText, ne: rawText, type: 'text' };
  } catch {
    return { en: rawText, ne: rawText, type: 'text' };
  }
};

const StudyBuddy: React.FC = () => {
  const { language } = useLanguage(); // 'en' or 'ne'
  
  // -- STATE --
  const [activeTab, setActiveTab] = useState<'chat' | 'voice' | 'trivia'>('chat');
  const [messages, setMessages] = useState<ChatMessage[]>([]);
  const [input, setInput] = useState('');
  const [isTyping, setIsTyping] = useState(false);
  
  // Image Analysis State
  const [selectedImage, setSelectedImage] = useState<string | null>(null);

  // Trivia Game State
  const [triviaState, setTriviaState] = useState<'LOBBY' | 'LANG_SELECT' | 'PLAYING' | 'GAMEOVER'>('LOBBY');
  const [selectedCategory, setSelectedCategory] = useState<string>('');
  const [triviaLang, setTriviaLang] = useState<'en' | 'ne'>('en');
  const [questions, setQuestions] = useState<TriviaQuestion[]>([]);
  const [currentQIndex, setCurrentQIndex] = useState(0);
  const [score, setScore] = useState(0);
  const [streak, setStreak] = useState(0);
  const [triviaLoading, setTriviaLoading] = useState(false);
  const [selectedAnswer, setSelectedAnswer] = useState<number | null>(null);
  const [isCorrect, setIsCorrect] = useState<boolean | null>(null);
  const [soundEnabled, setSoundEnabled] = useState(true);

  // Refs
  const chatEndRef = useRef<HTMLDivElement>(null);
  const chatSessionRef = useRef<any>(null);
  
  // -- INITIALIZATION --
  useEffect(() => {
    // Load history if exists
    const history = StorageService.getStudyChatHistory();
    if (history.length > 0) {
      setMessages(history);
    }
    
    // Initialize Chat Session
    if (!chatSessionRef.current) {
      chatSessionRef.current = createStudyChat();
    }
  }, []);

  useEffect(() => {
    StorageService.saveStudyChatHistory(messages);
    chatEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [messages]);

  // -- SOUND EFFECTS --
  const playSound = (type: 'correct' | 'wrong' | 'click' | 'win') => {
    if (!soundEnabled) return;
    try {
        const AudioContext = window.AudioContext || (window as any).webkitAudioContext;
        if (!AudioContext) return;
        const ctx = new AudioContext();
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.connect(gain);
        gain.connect(ctx.destination);

        const now = ctx.currentTime;
        if (type === 'correct') {
            osc.frequency.setValueAtTime(600, now);
            osc.frequency.exponentialRampToValueAtTime(1000, now + 0.1);
            gain.gain.setValueAtTime(0.1, now);
            gain.gain.exponentialRampToValueAtTime(0.01, now + 0.3);
            osc.start();
            osc.stop(now + 0.3);
        } else if (type === 'wrong') {
            osc.type = 'sawtooth';
            osc.frequency.setValueAtTime(150, now);
            osc.frequency.linearRampToValueAtTime(100, now + 0.3);
            gain.gain.setValueAtTime(0.1, now);
            gain.gain.exponentialRampToValueAtTime(0.01, now + 0.3);
            osc.start();
            osc.stop(now + 0.3);
        } else if (type === 'click') {
            osc.frequency.setValueAtTime(800, now);
            gain.gain.setValueAtTime(0.05, now);
            gain.gain.exponentialRampToValueAtTime(0.01, now + 0.05);
            osc.start();
            osc.stop(now + 0.05);
        } else if (type === 'win') {
            osc.type = 'triangle';
            osc.frequency.setValueAtTime(400, now);
            osc.frequency.linearRampToValueAtTime(800, now + 0.2);
            osc.frequency.linearRampToValueAtTime(600, now + 0.4);
            gain.gain.setValueAtTime(0.1, now);
            gain.gain.linearRampToValueAtTime(0, now + 0.6);
            osc.start();
            osc.stop(now + 0.6);
        }
    } catch(e) {}
  };

  // -- HANDLERS --

  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => {
        setSelectedImage(reader.result as string);
      };
      reader.readAsDataURL(file);
    }
  };

  const handleSend = async (e?: React.FormEvent, overrideText?: string) => {
    if (e) e.preventDefault();
    const textToSend = overrideText || input;
    
    // Allow empty text if image is selected (visual query)
    if ((!textToSend.trim() && !selectedImage) || isTyping) return;

    // Display optimistic user message
    const userMsg: ChatMessage = {
      id: Date.now().toString(),
      role: 'user',
      text: JSON.stringify({ en: textToSend, ne: textToSend, type: 'text' }),
      timestamp: Date.now(),
      image: selectedImage || undefined // Store image in history if present
    };

    setMessages(prev => [...prev, userMsg]);
    setInput('');
    const tempImage = selectedImage; // Local capture
    setSelectedImage(null); // Clear input immediately
    setIsTyping(true);

    try {
      let responseText = "{}";
      
      if (tempImage) {
          // Multimodal Analysis request via specialized function
          // The prompt defaults to "Analyze this image" if text is empty
          const prompt = textToSend.trim() || "What is in this image? Analyze it in detail.";
          responseText = await analyzeImage(tempImage, prompt);
      } else if (chatSessionRef.current) {
          // Standard Text Chat
          const result = await chatSessionRef.current.sendMessage({ message: textToSend });
          responseText = result.text || "{}";
      }

      const botMsg: ChatMessage = {
        id: (Date.now() + 1).toString(),
        role: 'model',
        text: responseText,
        timestamp: Date.now()
      };
      setMessages(prev => [...prev, botMsg]);
      
    } catch (error) {
      console.error(error);
      setMessages(prev => [...prev, {
        id: Date.now().toString(),
        role: 'model',
        text: JSON.stringify({ en: "Connection interrupted.", ne: "सम्पर्क विच्छेद भयो।", type: "text" }),
        timestamp: Date.now()
      }]);
    } finally {
      setIsTyping(false);
    }
  };

  const handleClearChat = () => {
    if(confirm("Clear chat history?")) {
        setMessages([]);
        StorageService.clearStudyChatHistory();
        chatSessionRef.current = createStudyChat(); 
    }
  };

  // -- TRIVIA LOGIC --
  const handleCategorySelect = (category: string) => {
      setSelectedCategory(category);
      setTriviaState('LANG_SELECT');
  };

  const startTrivia = async (lang: 'en' | 'ne') => {
      setTriviaLang(lang);
      setTriviaLoading(true);
      playSound('click');
      try {
          const qs = await generateTrivia(selectedCategory, lang);
          setQuestions(qs);
          setScore(0);
          setStreak(0);
          setCurrentQIndex(0);
          setTriviaState('PLAYING');
      } catch (e) {
          alert("Failed to generate trivia. Check connection.");
          setTriviaState('LOBBY');
      } finally {
          setTriviaLoading(false);
      }
  };

  const handleTriviaAnswer = (index: number) => {
      if (selectedAnswer !== null) return; // Prevent double click
      setSelectedAnswer(index);
      
      const correct = index === questions[currentQIndex].correctAnswer;
      setIsCorrect(correct);

      if (correct) {
          playSound('correct');
          setScore(prev => prev + 10 + (streak * 2));
          setStreak(prev => prev + 1);
          confetti({ particleCount: 50, spread: 60, origin: { y: 0.7 }, colors: ['#4ade80', '#ffffff'] });
      } else {
          playSound('wrong');
          setStreak(0);
      }

      setTimeout(() => {
          if (currentQIndex < questions.length - 1) {
              setCurrentQIndex(prev => prev + 1);
              setSelectedAnswer(null);
              setIsCorrect(null);
          } else {
              playSound('win');
              setTriviaState('GAMEOVER');
              // Save Karma
              StorageService.addPoints(score, score * 2, 'trivia', 'Rudra Trivia Reward');
          }
      }, 1500);
  };

  return (
    <div className="h-[calc(100vh-140px)] flex flex-col bg-white dark:bg-gray-900 rounded-[2.5rem] shadow-2xl border border-gray-200 dark:border-gray-800 overflow-hidden relative font-sans">
        
        {/* --- HEADER --- */}
        <header className="px-6 py-4 border-b border-gray-100 dark:border-gray-800 flex justify-between items-center bg-white/80 dark:bg-gray-900/80 backdrop-blur-md shrink-0 z-20">
            <div className="flex items-center gap-3">
                <div className="w-10 h-10 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl flex items-center justify-center shadow-lg text-white">
                    <Bot size={20}/>
                </div>
                <div>
                    <h1 className="text-sm font-black uppercase tracking-widest text-gray-900 dark:text-white">Rudra AI</h1>
                    <div className="flex items-center gap-1.5">
                        <span className="w-1.5 h-1.5 bg-green-500 rounded-full animate-pulse"></span>
                        <span className="text-[9px] font-bold text-gray-400 uppercase tracking-wider">{language === 'ne' ? 'नेपाली मोड' : 'English Mode'}</span>
                    </div>
                </div>
            </div>

            {/* Compact Tab Switcher */}
            <div className="flex bg-gray-100 dark:bg-gray-800 p-1 rounded-xl gap-1">
                {[
                    { id: 'chat', icon: MessageSquare },
                    { id: 'trivia', icon: Trophy },
                    { id: 'voice', icon: Mic },
                ].map(tab => (
                    <button
                        key={tab.id}
                        onClick={() => setActiveTab(tab.id as any)}
                        className={`p-2 rounded-lg transition-all ${
                            activeTab === tab.id 
                            ? 'bg-white dark:bg-gray-700 text-indigo-600 shadow-sm' 
                            : 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'
                        }`}
                    >
                        <tab.icon size={16} />
                    </button>
                ))}
            </div>
            
            <button onClick={handleClearChat} className="p-2 text-gray-300 hover:text-red-500 transition-colors">
                <RefreshCw size={16} />
            </button>
        </header>

        {/* --- MAIN CONTENT --- */}
        <div className="flex-1 overflow-hidden relative bg-gray-50 dark:bg-black/20">
            
            {/* CHAT INTERFACE */}
            {activeTab === 'chat' && (
                <div className="h-full flex flex-col">
                    <div className="flex-1 overflow-y-auto p-4 space-y-3 custom-scrollbar">
                        {messages.length === 0 && (
                            <div className="flex flex-col items-center justify-center h-full text-center opacity-50 p-8">
                                <Bot size={48} className="mb-4 text-indigo-400"/>
                                <p className="text-sm font-bold uppercase tracking-widest text-gray-500">
                                    Start a conversation or Scan an image
                                </p>
                            </div>
                        )}
                        {messages.map((msg) => {
                            const content = parseMessage(msg.text);
                            const displayText = language === 'ne' ? (content.ne || content.en) : content.en;
                            const isUser = msg.role === 'user';

                            return (
                                <div key={msg.id} className={`flex ${isUser ? 'justify-end' : 'justify-start'} animate-in slide-in-from-bottom-1`}>
                                    <div 
                                        className={`max-w-[85%] px-4 py-3 rounded-2xl text-sm font-medium leading-relaxed shadow-sm flex flex-col gap-2 ${
                                            isUser 
                                            ? 'bg-indigo-600 text-white rounded-br-sm' 
                                            : 'bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-bl-sm border border-gray-100 dark:border-gray-700'
                                        }`}
                                    >
                                        {msg.image && (
                                            <div className="rounded-lg overflow-hidden mb-1 max-w-full border-2 border-white/20">
                                                <img src={msg.image} alt="User Upload" className="max-h-60 object-contain" />
                                            </div>
                                        )}
                                        <div className="whitespace-pre-wrap">{displayText}</div>
                                        
                                        {/* Show Newari if available and relevant */}
                                        {content.newa && !isUser && (
                                            <div className="mt-2 pt-2 border-t border-gray-200 dark:border-gray-700 text-xs text-indigo-500 font-bold">
                                                Newari: {content.newa}
                                            </div>
                                        )}
                                    </div>
                                </div>
                            );
                        })}
                        
                        {isTyping && (
                            <div className="flex justify-start">
                                <div className="bg-white dark:bg-gray-800 px-4 py-3 rounded-2xl rounded-bl-sm shadow-sm flex gap-1">
                                    <div className="w-1.5 h-1.5 bg-gray-400 rounded-full animate-bounce"></div>
                                    <div className="w-1.5 h-1.5 bg-gray-400 rounded-full animate-bounce delay-75"></div>
                                    <div className="w-1.5 h-1.5 bg-gray-400 rounded-full animate-bounce delay-150"></div>
                                </div>
                            </div>
                        )}
                        <div ref={chatEndRef} />
                    </div>

                    {/* Image Preview Overlay */}
                    {selectedImage && (
                        <div className="px-4 py-2 bg-gray-100 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800 flex items-center justify-between animate-in slide-in-from-bottom-2">
                             <div className="flex items-center gap-3">
                                 <img src={selectedImage} alt="Preview" className="h-12 w-12 rounded-lg object-cover border border-gray-300 dark:border-gray-600"/>
                                 <span className="text-xs font-bold text-gray-500 uppercase tracking-wide">Image Selected</span>
                             </div>
                             <button onClick={() => setSelectedImage(null)} className="p-1 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-full"><X size={16}/></button>
                        </div>
                    )}

                    {/* Input Area */}
                    <div className="p-3 bg-white dark:bg-gray-900 border-t border-gray-100 dark:border-gray-800">
                        <form onSubmit={(e) => handleSend(e)} className="flex items-end gap-2 bg-gray-100 dark:bg-gray-800 p-1.5 rounded-[1.5rem]">
                            <label className="p-2.5 text-gray-400 hover:text-indigo-600 cursor-pointer transition-colors">
                                <ImageIcon size={20} />
                                <input type="file" className="hidden" accept="image/*" onChange={handleImageUpload} />
                            </label>

                            <input 
                                value={input}
                                onChange={e => setInput(e.target.value)}
                                placeholder="Type a message or describe the image..."
                                className="flex-1 bg-transparent border-none outline-none text-sm py-2.5 px-2 text-gray-900 dark:text-white placeholder-gray-500"
                            />
                            
                            <button 
                                type="submit" 
                                disabled={(!input.trim() && !selectedImage) || isTyping}
                                className={`p-2.5 rounded-full transition-all ${input.trim() || selectedImage ? 'bg-indigo-600 text-white shadow-md' : 'bg-gray-200 dark:bg-gray-700 text-gray-400'}`}
                            >
                                <Send size={18} />
                            </button>
                        </form>
                    </div>
                </div>
            )}

            {/* TRIVIA SECTION */}
            {activeTab === 'trivia' && (
                <div className="h-full relative flex flex-col">
                    <button onClick={() => setSoundEnabled(!soundEnabled)} className="absolute top-4 right-4 z-10 p-2 bg-white/20 hover:bg-white/40 rounded-full text-gray-500 dark:text-gray-300">
                        {soundEnabled ? <Volume2 size={16}/> : <VolumeX size={16}/>}
                    </button>

                    {triviaState === 'LOBBY' && (
                        <div className="flex-1 flex flex-col items-center justify-center p-8 text-center space-y-8 animate-in fade-in zoom-in">
                            <div className="w-24 h-24 bg-gradient-to-tr from-yellow-400 to-orange-500 rounded-3xl flex items-center justify-center shadow-xl rotate-3">
                                <Trophy size={48} className="text-white"/>
                            </div>
                            <div>
                                <h2 className="text-3xl font-black text-gray-900 dark:text-white uppercase italic tracking-tighter">Nepal Trivia</h2>
                                <p className="text-gray-500 dark:text-gray-400 font-medium">Test your knowledge. Earn Karma.</p>
                            </div>
                            
                            <div className="grid grid-cols-2 gap-4 w-full max-w-xs">
                                {['History', 'Geography', 'Culture', 'Nature'].map(cat => (
                                    <button 
                                        key={cat}
                                        onClick={() => handleCategorySelect(cat)}
                                        className="p-4 bg-white dark:bg-gray-800 border-2 border-gray-100 dark:border-gray-700 rounded-2xl font-bold text-gray-700 dark:text-gray-200 hover:border-indigo-500 hover:text-indigo-600 transition-all active:scale-95 shadow-sm uppercase text-xs tracking-widest"
                                    >
                                        {cat}
                                    </button>
                                ))}
                            </div>
                        </div>
                    )}

                    {triviaState === 'LANG_SELECT' && (
                        <div className="flex-1 flex flex-col items-center justify-center p-8 text-center space-y-8 animate-in fade-in slide-in-from-right-4">
                            <div>
                                <h2 className="text-2xl font-black text-gray-900 dark:text-white uppercase italic tracking-tighter">Select Language</h2>
                                <p className="text-gray-500 dark:text-gray-400 font-medium">Which language should we use?</p>
                            </div>
                            
                            {triviaLoading ? (
                                <div className="flex flex-col items-center gap-3">
                                    <Loader2 className="animate-spin text-indigo-500" size={32} />
                                    <p className="text-xs font-bold uppercase tracking-widest text-indigo-500">Generating Quiz...</p>
                                </div>
                            ) : (
                                <div className="flex gap-4">
                                    <Button onClick={() => startTrivia('en')} className="bg-white dark:bg-gray-800 text-gray-900 dark:text-white border-2 border-gray-200 dark:border-gray-700 hover:border-indigo-500 px-8 py-4 rounded-2xl font-black">
                                        English
                                    </Button>
                                    <Button onClick={() => startTrivia('ne')} className="bg-indigo-600 text-white px-8 py-4 rounded-2xl font-black">
                                        नेपाली (Nepali)
                                    </Button>
                                </div>
                            )}
                            <button onClick={() => setTriviaState('LOBBY')} className="text-gray-400 hover:text-red-500 text-xs font-bold uppercase tracking-widest">Back</button>
                        </div>
                    )}

                    {triviaState === 'PLAYING' && questions.length > 0 && (
                        <div className="flex-1 flex flex-col p-6 animate-in slide-in-from-right">
                            {/* Progress Bar */}
                            <div className="w-full bg-gray-200 dark:bg-gray-800 h-2 rounded-full mb-6 overflow-hidden">
                                <div 
                                    className="h-full bg-indigo-500 transition-all duration-500"
                                    style={{ width: `${((currentQIndex + 1) / questions.length) * 100}%` }}
                                ></div>
                            </div>

                            <div className="flex-1 flex flex-col justify-center">
                                <span className="text-indigo-500 font-black uppercase tracking-widest text-xs mb-4 block">Question {currentQIndex + 1} of {questions.length}</span>
                                <h3 className="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-8 leading-relaxed">
                                    {questions[currentQIndex].question}
                                </h3>

                                <div className="space-y-3">
                                    {questions[currentQIndex].options.map((opt, idx) => {
                                        let btnClass = "bg-white dark:bg-gray-800 border-gray-100 dark:border-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700";
                                        if (selectedAnswer !== null) {
                                            if (idx === questions[currentQIndex].correctAnswer) btnClass = "bg-green-500 border-green-600 text-white";
                                            else if (idx === selectedAnswer) btnClass = "bg-red-500 border-red-600 text-white animate-shake";
                                            else btnClass = "opacity-50 bg-gray-100 dark:bg-gray-800";
                                        }

                                        return (
                                            <button
                                                key={idx}
                                                onClick={() => handleTriviaAnswer(idx)}
                                                disabled={selectedAnswer !== null}
                                                className={`w-full p-4 rounded-2xl border-2 font-bold text-left transition-all ${btnClass}`}
                                            >
                                                {opt}
                                            </button>
                                        );
                                    })}
                                </div>
                            </div>

                            <div className="mt-6 flex justify-between items-center text-sm font-bold text-gray-500">
                                <span>Score: {score}</span>
                                {streak > 1 && <span className="text-orange-500 animate-bounce">🔥 {streak} Streak!</span>}
                            </div>
                        </div>
                    )}

                    {triviaState === 'GAMEOVER' && (
                        <div className="flex-1 flex flex-col items-center justify-center p-8 text-center animate-in zoom-in">
                            <h2 className="text-4xl font-black italic uppercase tracking-tighter text-indigo-600 mb-2">Quiz Complete!</h2>
                            <p className="text-gray-500 font-medium mb-8">Knowledge verified.</p>
                            
                            <div className="bg-gray-100 dark:bg-gray-800 p-6 rounded-3xl w-full max-w-xs mb-8">
                                <p className="text-xs font-black text-gray-400 uppercase tracking-widest mb-1">Total Score</p>
                                <p className="text-5xl font-black text-gray-900 dark:text-white">{score}</p>
                                <p className="text-xs font-bold text-green-500 mt-2">+ {score} Karma Earned</p>
                            </div>

                            <Button onClick={() => setTriviaState('LOBBY')} className="w-full max-w-xs h-14 bg-indigo-600 hover:bg-indigo-700 text-white rounded-2xl font-black uppercase tracking-widest shadow-xl">
                                Play Again
                            </Button>
                        </div>
                    )}
                </div>
            )}

            {/* VOICE VIEW (Simple Placeholder to direct to main button) */}
            {activeTab === 'voice' && (
                <div className="h-full flex flex-col items-center justify-center p-8 text-center bg-gradient-to-b from-indigo-900/10 to-transparent">
                    <div className="w-32 h-32 bg-indigo-100 dark:bg-indigo-900/30 rounded-full flex items-center justify-center animate-pulse mb-6">
                        <Mic size={48} className="text-indigo-600 dark:text-indigo-400"/>
                    </div>
                    <h2 className="text-2xl font-black text-gray-900 dark:text-white uppercase italic tracking-tighter">Voice Command</h2>
                    <p className="text-gray-500 mt-2 max-w-xs mx-auto text-sm">
                        Use the global Rudra button (bottom right) for real-time voice conversations.
                    </p>
                </div>
            )}

        </div>
        <style>{`
            .animate-shake {
                animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
            }
            @keyframes shake {
                10%, 90% { transform: translate3d(-1px, 0, 0); }
                20%, 80% { transform: translate3d(2px, 0, 0); }
                30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
                40%, 60% { transform: translate3d(4px, 0, 0); }
            }
        `}</style>
    </div>
  );
};

export default StudyBuddy;