import React, { useState, useEffect, useRef } from 'react';
import { Play, Pause, RotateCcw, Volume2, VolumeX, Cpu, Brain, Zap, Smartphone, Globe, Sparkles, X, MessageSquare, HelpCircle, Loader2 } from 'lucide-react';

const InteractiveVideoLectureMobile = () => {
  // --- 原有 State ---
  const [isPlaying, setIsPlaying] = useState(false);
  const [currentSlide, setCurrentSlide] = useState(0);
  const [progress, setProgress] = useState(0);
  const [audioSupported, setAudioSupported] = useState(true);
  const [hasStarted, setHasStarted] = useState(false);
  const [voice, setVoice] = useState(null);
  
  // --- 新增 AI State ---
  const [showAIModal, setShowAIModal] = useState(false);
  const [aiResponse, setAiResponse] = useState(null);
  const [isAiLoading, setIsAiLoading] = useState(false);
  const [aiMode, setAiMode] = useState(null); // 'explain' or 'quiz'

  const synth = useRef(null);
  const progressInterval = useRef(null);

  // Gemini API Key (Runtime Environment will provide the key if empty)
  const apiKey = ""; 

  const slides = [
    {
      id: 0,
      title: "Google AI 2025",
      subtitle: "新架構・新思維・新作為",
      script: "歡迎收看 Google AI 2025 年度總覽。今年，Google 用「新架構、新思維、新作為」三大支柱，重新定義了人工智慧的未來。",
      duration: 12000, 
      color: "bg-blue-900", 
      gradient: "bg-gradient-to-br from-blue-900 to-slate-900",
      icon: <Globe className="w-16 h-16 sm:w-20 sm:h-20 text-blue-400" />
    },
    {
      id: 1,
      title: "新架構 Architecture",
      subtitle: "TPU Trillium & Gemini 3",
      script: "首先是新架構。隨著第六代 TPU Trillium 晶片的發布，配合 Gemini 3 的混合專家模型，Google 成功將 AI 的運算效率提升了近五倍。",
      duration: 14000,
      color: "bg-indigo-900",
      gradient: "bg-gradient-to-br from-indigo-900 to-purple-900",
      icon: <Cpu className="w-16 h-16 sm:w-20 sm:h-20 text-indigo-400" />
    },
    {
      id: 2,
      title: "新思維 New Thinking",
      subtitle: "Agentic AI & Deep Think",
      script: "再來是新思維。AI 不再只是被動問答，而是能主動解決問題的「代理人」。Gemini 引入的「深度思考模式」，讓電腦學會了像人類一樣深思熟慮。",
      duration: 14000,
      color: "bg-emerald-900",
      gradient: "bg-gradient-to-br from-emerald-900 to-teal-900",
      icon: <Brain className="w-16 h-16 sm:w-20 sm:h-20 text-emerald-400" />
    },
    {
      id: 3,
      title: "產品生態 Ecosystem",
      subtitle: "Pixel 10 & NotebookLM",
      script: "最後是產品生態。從 Pixel 10 手機實現「斷網也能用的 AI」，到 NotebookLM 將文件瞬間轉化為 Podcast，Google 正在全方位賦能您的生活。",
      duration: 14000,
      color: "bg-amber-900",
      gradient: "bg-gradient-to-br from-amber-900 to-orange-900",
      icon: <Smartphone className="w-16 h-16 sm:w-20 sm:h-20 text-amber-400" />
    },
    {
      id: 4,
      title: "總結 Summary",
      subtitle: "The Future is Agentic",
      script: "總結來說，2025 年是 AI 從「對話」走向「行動」的關鍵年。掌握未來，從現在開始。謝謝收看。",
      duration: 10000,
      color: "bg-gray-900",
      gradient: "bg-gradient-to-br from-gray-900 to-black",
      icon: <Zap className="w-16 h-16 sm:w-20 sm:h-20 text-yellow-400" />
    }
  ];

  // 初始化檢測
  useEffect(() => {
    if (typeof window !== 'undefined' && 'speechSynthesis' in window) {
      synth.current = window.speechSynthesis;
      const loadVoices = () => {
        const voices = synth.current.getVoices();
        const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('cmn'));
        if (zhVoice) setVoice(zhVoice);
      };
      loadVoices();
      if (synth.current.onvoiceschanged !== undefined) {
        synth.current.onvoiceschanged = loadVoices;
      }
    } else {
      setAudioSupported(false);
    }

    return () => {
      if (synth.current) synth.current.cancel();
      if (progressInterval.current) clearInterval(progressInterval.current);
    };
  }, []);

  // 播放邏輯
  useEffect(() => {
    if (!hasStarted) return;
    // 如果開啟 AI Modal，暫停播放
    if (showAIModal) {
      if (synth.current) synth.current.pause();
      if (progressInterval.current) clearInterval(progressInterval.current);
      return;
    } else {
       if (synth.current && isPlaying) synth.current.resume();
    }

    if (isPlaying) {
      if (audioSupported && synth.current && !synth.current.speaking) {
        synth.current.cancel();
        const utterance = new SpeechSynthesisUtterance(slides[currentSlide].script);
        if (voice) utterance.voice = voice;
        utterance.rate = 1.0;
        synth.current.speak(utterance);
      }

      const startTime = Date.now() - (progress / 100 * slides[currentSlide].duration);
      const duration = slides[currentSlide].duration;
      
      if (progressInterval.current) clearInterval(progressInterval.current);
      
      progressInterval.current = setInterval(() => {
        const elapsed = Date.now() - startTime;
        const newProgress = Math.min((elapsed / duration) * 100, 100);
        setProgress(newProgress);
        
        if (elapsed > duration) {
           if (currentSlide < slides.length - 1) {
             setCurrentSlide(prev => prev + 1);
             setProgress(0);
           } else {
             setIsPlaying(false);
             clearInterval(progressInterval.current);
             if (audioSupported && synth.current) synth.current.cancel();
           }
        }
      }, 100);

    } else {
      if (audioSupported && synth.current) synth.current.cancel();
      if (progressInterval.current) clearInterval(progressInterval.current);
    }
  }, [isPlaying, currentSlide, hasStarted, audioSupported, voice, showAIModal]);

  const handleStart = () => {
    setHasStarted(true);
    setIsPlaying(true);
    if (audioSupported && synth.current) {
      const dummy = new SpeechSynthesisUtterance(""); 
      synth.current.speak(dummy);
    }
  };

  const handlePlayPause = () => {
    if (isPlaying) {
      setIsPlaying(false);
    } else {
      if (currentSlide === slides.length - 1 && progress >= 95) {
        setCurrentSlide(0);
        setProgress(0);
      }
      setIsPlaying(true);
    }
  };

  const handleManualSlide = (index) => {
    setIsPlaying(false);
    if (audioSupported && synth.current) synth.current.cancel();
    setCurrentSlide(index);
    setProgress(0);
    setTimeout(() => setIsPlaying(true), 100);
  };

  // --- Gemini API Call Function ---
  const callGemini = async (mode) => {
    setAiMode(mode);
    setIsAiLoading(true);
    setAiResponse(null);
    // 暫停播放
    setIsPlaying(false);
    if (synth.current) synth.current.cancel();

    const slideContext = `
      Title: ${slides[currentSlide].title}
      Subtitle: ${slides[currentSlide].subtitle}
      Script: ${slides[currentSlide].script}
    `;

    let prompt = "";
    if (mode === 'explain') {
      prompt = `
        You are an expert AI Tutor explaining a lecture about Google AI 2025.
        Please provide a concise but deeper explanation (3 bullet points) about the following slide content. 
        Focus on the technical or strategic significance.
        Respond in Traditional Chinese (繁體中文).
        
        Slide Content:
        ${slideContext}
      `;
    } else if (mode === 'quiz') {
      prompt = `
        You are an expert AI Tutor.
        Generate ONE multiple-choice quiz question based on the following slide content.
        Provide the question, 4 options (A, B, C, D), and then the correct answer with a short explanation.
        Format cleanly.
        Respond in Traditional Chinese (繁體中文).
        
        Slide Content:
        ${slideContext}
      `;
    }

    try {
      const response = await fetch(
        `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`,
        {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            contents: [{ parts: [{ text: prompt }] }],
          }),
        }
      );

      const data = await response.json();
      if (data.error) {
        throw new Error(data.error.message);
      }
      const text = data.candidates?.[0]?.content?.parts?.[0]?.text;
      setAiResponse(text || "無法產生內容，請稍後再試。");
    } catch (error) {
      console.error("Gemini API Error:", error);
      setAiResponse("連線錯誤，請檢查網路或稍後再試。");
    } finally {
      setIsAiLoading(false);
    }
  };

  if (!hasStarted) {
    return (
      <div className="flex flex-col items-center justify-center min-h-screen bg-gray-900 p-4 text-white text-center">
        <div className="mb-8 animate-bounce">
          <Globe className="w-20 h-20 text-blue-400" />
        </div>
        <h1 className="text-3xl font-bold mb-4">Google AI 2025 教材</h1>
        <p className="text-gray-400 mb-8 max-w-xs">
          {audioSupported 
            ? "即將開始播放互動式簡報。請開啟您的手機音量。" 
            : "偵測到您的瀏覽器不支援語音，將以「字幕模式」播放。"}
        </p>
        
        <button 
          onClick={handleStart}
          className="bg-blue-600 hover:bg-blue-500 text-white font-bold py-4 px-12 rounded-full text-xl shadow-[0_0_20px_rgba(37,99,235,0.5)] transition-all transform hover:scale-105 active:scale-95 flex items-center gap-2"
        >
          <Play fill="currentColor" /> 開始播放
        </button>
      </div>
    );
  }

  return (
    <div className="flex flex-col items-center min-h-screen bg-gray-100 font-sans relative">
      
      {/* 1. 播放器主畫面 */}
      <div className="relative w-full max-w-md md:max-w-3xl aspect-[9/16] md:aspect-video bg-black shadow-xl overflow-hidden md:mt-6 md:rounded-xl">
        
        {/* 背景層 */}
        <div className={`absolute inset-0 transition-colors duration-1000 ${slides[currentSlide].gradient || slides[currentSlide].color}`}></div>
        
        {/* 內容層 */}
        <div className="absolute inset-0 flex flex-col items-center justify-center text-center p-6 text-white z-10 pb-24 md:pb-12">
          
          <div className="mb-6 transform transition-transform duration-700 scale-100">
            {slides[currentSlide].icon}
          </div>

          <h1 className="text-3xl md:text-4xl font-bold mb-2 drop-shadow-md">
            {slides[currentSlide].title}
          </h1>
          <h2 className="text-lg md:text-xl text-blue-200 font-light mb-6 md:mb-8">
            {slides[currentSlide].subtitle}
          </h2>

          <div className="bg-black/60 backdrop-blur-md p-4 rounded-xl w-full border-l-4 border-blue-500 shadow-lg">
            <p className="text-base md:text-lg text-white leading-relaxed font-medium text-left">
              {slides[currentSlide].script}
            </p>
          </div>
        </div>

        {/* AI 按鈕 (浮動於畫面右下) */}
        <div className="absolute bottom-24 right-4 z-30">
          <button
            onClick={() => setShowAIModal(true)}
            className="flex items-center gap-2 bg-gradient-to-r from-purple-600 to-pink-600 text-white px-4 py-2 rounded-full shadow-lg hover:scale-105 transition-transform animate-pulse"
          >
            <Sparkles size={18} />
            <span className="font-bold text-sm">AI 助教</span>
          </button>
        </div>

        {/* 控制列 */}
        <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black via-black/80 to-transparent px-4 py-4 z-20">
          <div className="w-full bg-gray-700 h-1.5 rounded-full mb-4 overflow-hidden">
            <div 
              className="bg-blue-400 h-full transition-all duration-100 ease-linear"
              style={{ width: `${progress}%` }}
            ></div>
          </div>

          <div className="flex items-center justify-between px-2">
            <div className="flex items-center space-x-6">
              <button 
                onClick={handlePlayPause}
                className="text-white hover:text-blue-400 transition-colors p-2 bg-white/10 rounded-full active:bg-white/20"
              >
                {isPlaying ? <Pause size={32} fill="white" /> : <Play size={32} fill="white" />}
              </button>
              
              <button 
                onClick={() => handleManualSlide(0)}
                className="text-gray-300 hover:text-white"
              >
                <RotateCcw size={24} />
              </button>
            </div>

            <div className="flex items-center space-x-2 text-xs text-gray-400 bg-black/30 px-2 py-1 rounded">
              {audioSupported ? <Volume2 size={14} className="text-green-400" /> : <VolumeX size={14} className="text-red-400" />}
              <span>{audioSupported ? "語音開啟" : "靜音模式"}</span>
            </div>
          </div>
        </div>
      </div>

      {/* 2. 下方分鏡選單 */}
      <div className="w-full max-w-md md:max-w-3xl mt-2 p-2 overflow-x-auto">
        <div className="flex space-x-2 min-w-max px-2">
          {slides.map((slide, index) => (
            <button
              key={index}
              onClick={() => handleManualSlide(index)}
              className={`flex flex-col items-center justify-center w-20 h-16 rounded-lg transition-all border-2 ${
                currentSlide === index 
                  ? 'bg-white border-blue-600 shadow-md transform scale-105' 
                  : 'bg-gray-200 border-transparent opacity-70'
              }`}
            >
              <span className={`text-xs font-bold ${currentSlide === index ? 'text-blue-800' : 'text-gray-600'}`}>
                {index + 1}
              </span>
              <div className="w-full h-1 mt-1 rounded bg-current opacity-20"></div>
            </button>
          ))}
        </div>
      </div>
      
      <p className="mt-4 text-xs text-gray-400 px-4 text-center">
        {audioSupported ? "提示：若無聲音，請檢查手機靜音開關。" : "提示：您的瀏覽器暫不支援 Web Speech，已切換至字幕模式。"}
      </p>

      {/* --- AI 助教 Modal --- */}
      {showAIModal && (
        <div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center bg-black/70 backdrop-blur-sm p-4 animate-in fade-in duration-200">
          <div className="bg-white w-full max-w-md rounded-t-2xl sm:rounded-2xl overflow-hidden shadow-2xl flex flex-col max-h-[80vh]">
            {/* Header */}
            <div className="bg-gradient-to-r from-purple-600 to-pink-600 p-4 text-white flex justify-between items-center">
              <div className="flex items-center gap-2">
                <Sparkles className="w-5 h-5" />
                <h3 className="font-bold text-lg">AI 隨身助教 (Gemini)</h3>
              </div>
              <button onClick={() => setShowAIModal(false)} className="hover:bg-white/20 p-1 rounded-full">
                <X size={20} />
              </button>
            </div>

            {/* Content Area */}
            <div className="p-6 flex-1 overflow-y-auto">
              {!aiResponse && !isAiLoading && (
                <div className="text-center space-y-4">
                  <p className="text-gray-600 mb-4">針對 <span className="font-bold text-blue-600">「{slides[currentSlide].title}」</span>，您想做什麼？</p>
                  
                  <button 
                    onClick={() => callGemini('explain')}
                    className="w-full flex items-center gap-3 p-4 border border-purple-200 rounded-xl hover:bg-purple-50 transition-colors text-left"
                  >
                    <div className="bg-purple-100 p-2 rounded-lg text-purple-600">
                      <MessageSquare size={24} />
                    </div>
                    <div>
                      <div className="font-bold text-gray-800">深入解說</div>
                      <div className="text-sm text-gray-500">補充講稿沒提到的細節與技術背景</div>
                    </div>
                  </button>

                  <button 
                    onClick={() => callGemini('quiz')}
                    className="w-full flex items-center gap-3 p-4 border border-pink-200 rounded-xl hover:bg-pink-50 transition-colors text-left"
                  >
                    <div className="bg-pink-100 p-2 rounded-lg text-pink-600">
                      <HelpCircle size={24} />
                    </div>
                    <div>
                      <div className="font-bold text-gray-800">隨堂測驗</div>
                      <div className="text-sm text-gray-500">生成一題選擇題來考考自己</div>
                    </div>
                  </button>
                </div>
              )}

              {isAiLoading && (
                <div className="flex flex-col items-center justify-center py-12 text-gray-500">
                  <Loader2 className="w-10 h-10 animate-spin mb-4 text-purple-600" />
                  <p>Gemini 正在思考中...</p>
                </div>
              )}

              {aiResponse && (
                <div className="animate-in slide-in-from-bottom-4 duration-300">
                  <div className="mb-4 flex items-center gap-2 text-sm text-gray-500">
                     {aiMode === 'explain' ? <MessageSquare size={16}/> : <HelpCircle size={16}/>}
                     <span>{aiMode === 'explain' ? "深度解析" : "隨堂測驗"}</span>
                  </div>
                  <div className="prose prose-sm max-w-none text-gray-800 leading-relaxed bg-gray-50 p-4 rounded-lg whitespace-pre-line">
                    {aiResponse}
                  </div>
                  <button 
                    onClick={() => { setAiResponse(null); setAiMode(null); }}
                    className="mt-6 w-full py-2 text-purple-600 font-bold border border-purple-200 rounded-lg hover:bg-purple-50"
                  >
                    問別的問題
                  </button>
                </div>
              )}
            </div>
            
            <div className="p-3 bg-gray-50 text-center text-xs text-gray-400 border-t">
              Powered by Google Gemini 2.5 Flash
            </div>
          </div>
        </div>
      )}

    </div>
  );
};

export default InteractiveVideoLectureMobile;