import React, { useState, useEffect } from 'react';
import { BookOpen, Brain, List, ChevronRight, ChevronLeft, RotateCcw, CheckCircle2, XCircle, GraduationCap, Volume2, Loader2, ImageIcon, Keyboard, ArrowRight, User } from 'lucide-react';

const WORD_DATA = [
  { id: 1, hebrew: "ילד", arabic: "وَلَد", phonetic: "וַלַד", imgTag: "boy,child,photography" },
  { id: 2, hebrew: "מתנה", arabic: "هَدِيَّة", phonetic: "הַדִיָּה", imgTag: "gift,present,box" },
  { id: 3, hebrew: "שעון", arabic: "סָאעַה", phonetic: "סָאעַה", imgTag: "clock,wall,watch", arabicText: "سَاعَة" },
  { id: 4, hebrew: "נסיך", arabic: "أَمِير", phonetic: "אַמִיר", imgTag: "prince,royal,photography" },
  { id: 5, hebrew: "מורה (זכר)", arabic: "مُעَلِّמ", phonetic: "מֻעַלֶּם", imgTag: "teacher,classroom,man" },
  { id: 6, hebrew: "תפוח", arabic: "תֻּפַּאח", phonetic: "תֻפַּאח", imgTag: "apple,red,fruit" },
  { id: 7, hebrew: "אמא", arabic: "أُمّ", phonetic: "אֻם", imgTag: "mother,portrait,woman" },
  { id: 8, hebrew: "אבא", arabic: "أَب", phonetic: "אַב", imgTag: "father,portrait,man" },
  { id: 9, hebrew: "סבא", arabic: "جَدّ", phonetic: "גַ'ד", imgTag: "grandfather,portrait,oldman" }
];

const App = () => {
  const [view, setView] = useState('home'); 
  const [currentIndex, setCurrentIndex] = useState(0);
  const [isRevealed, setIsRevealed] = useState(false);
  const [quizScore, setQuizScore] = useState(0);
  const [quizStep, setQuizStep] = useState(0);
  const [quizQuestions, setQuizQuestions] = useState([]);
  const [quizFinished, setQuizFinished] = useState(false);
  const [selectedAnswer, setSelectedAnswer] = useState(null);
  const [playingAudio, setPlayingAudio] = useState(null);
  const [tutorImage, setTutorImage] = useState(null);
  const [loadingTutor, setLoadingTutor] = useState(true);

  // יצירת דמות המורה הריאליסטית ביותר באמצעות Imagen 4.0
  useEffect(() => {
    const generateTutor = async () => {
      const apiKey = "";
      const url = `https://generativelanguage.googleapis.com/v1beta/models/imagen-4.0-generate-001:predict?key=${apiKey}`;
      const prompt = "A photorealistic cinematic 8k portrait of a friendly young man with short dark brown hair and fair skin. Waist-up shot, looking directly at the camera. He is wearing a high-quality navy blue hoodie. Professional lighting, warm smile, sharp focus on facial features. Background is a soft blurred modern classroom. Photorealistic masterpiece.";
      
      const payload = {
        instances: [{ prompt }],
        parameters: { sampleCount: 1 }
      };

      try {
        const response = await fetch(url, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(payload)
        });
        const result = await response.json();
        if (result.predictions?.[0]?.bytesBase64Encoded) {
          setTutorImage(`data:image/png;base64,${result.predictions[0].bytesBase64Encoded}`);
        }
      } catch (err) {
        console.error("Failed to generate realistic tutor", err);
      } finally {
        setLoadingTutor(false);
      }
    };

    generateTutor();
  }, []);

  // האזנה למקש הרווח
  useEffect(() => {
    const handleKeyDown = (e) => {
      if (e.code === 'Space') {
        if (view === 'cards') {
          e.preventDefault();
          if (!isRevealed) setIsRevealed(true);
          else if (currentIndex < WORD_DATA.length - 1) {
            setCurrentIndex(prev => prev + 1);
            setIsRevealed(false);
          }
        }
      }
    };
    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [view, isRevealed, currentIndex]);

  const pcmToWav = (pcmData, sampleRate) => {
    const buffer = new ArrayBuffer(44 + pcmData.length * 2);
    const view = new DataView(buffer);
    const writeString = (offset, string) => {
      for (let i = 0; i < string.length; i++) view.setUint8(offset + i, string.charCodeAt(i));
    };
    writeString(0, 'RIFF');
    view.setUint32(4, 32 + pcmData.length * 2, true);
    writeString(8, 'WAVE');
    writeString(12, 'fmt ');
    view.setUint32(16, 16, true);
    view.setUint16(20, 1, true);
    view.setUint16(22, 1, true);
    view.setUint32(24, sampleRate, true);
    view.setUint32(28, sampleRate * 2, true);
    view.setUint16(32, 2, true);
    view.setUint16(34, 16, true);
    writeString(36, 'data');
    view.setUint32(40, pcmData.length * 2, true);
    for (let i = 0; i < pcmData.length; i++) view.setInt16(44 + i * 2, pcmData[i], true);
    return new Blob([buffer], { type: 'audio/wav' });
  };

  const playArabicWord = async (word) => {
    if (playingAudio) return;
    setPlayingAudio(word);
    const apiKey = "";
    const url = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-tts:generateContent?key=${apiKey}`;
    const payload = {
      contents: [{ parts: [{ text: `Say clearly in Arabic: ${word}` }] }],
      generationConfig: {
        responseModalities: ["AUDIO"],
        speechConfig: { voiceConfig: { prebuiltVoiceConfig: { voiceName: "Kore" } } }
      }
    };
    try {
      const response = await fetch(url, { method: 'POST', body: JSON.stringify(payload) });
      const result = await response.json();
      const audioData = result.candidates?.[0]?.content?.parts?.[0]?.inlineData;
      if (audioData) {
        const binaryString = atob(audioData.data);
        const bytes = new Int16Array(binaryString.length / 2);
        for (let i = 0; i < binaryString.length; i += 2) bytes[i/2] = (binaryString.charCodeAt(i+1) << 8) | binaryString.charCodeAt(i);
        const audio = new Audio(URL.createObjectURL(pcmToWav(bytes, 24000)));
        audio.onended = () => setPlayingAudio(null);
        audio.play();
      } else setPlayingAudio(null);
    } catch { setPlayingAudio(null); }
  };

  const Home = () => (
    <div className="relative h-full w-full overflow-hidden bg-slate-950">
      {loadingTutor ? (
        <div className="absolute inset-0 flex flex-col items-center justify-center gap-4 bg-slate-950 z-0">
          <Loader2 size={48} className="text-blue-500 animate-spin" />
          <p className="text-blue-200 font-black animate-pulse tracking-widest text-center px-4">מכין את המורה לשיעור...</p>
        </div>
      ) : (
        <div className="absolute inset-0 z-0 animate-in fade-in duration-1000">
          {tutorImage ? (
            <img 
              src={tutorImage} 
              alt="Tutor" 
              className="w-full h-full object-cover object-top opacity-100 scale-100" 
            />
          ) : (
            <div className="w-full h-full bg-slate-900 flex items-center justify-center text-white italic">טוען...</div>
          )}
          <div className="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/20 to-transparent"></div>
        </div>
      )}

      <div className="absolute inset-x-0 bottom-0 md:bottom-12 z-10 flex flex-col items-center px-6 pb-12 animate-in slide-in-from-bottom duration-1000 delay-500">
        <div className="w-full max-w-2xl">
           <div className="bg-white/95 backdrop-blur-2xl p-8 rounded-[3rem] shadow-[0_32px_64px_rgba(0,0,0,0.4)] border border-white/40">
             <div className="text-center mb-8">
                <h1 className="text-3xl md:text-4xl font-black text-slate-900 leading-tight">ערבית עם מורה אישי</h1>
                <p className="text-slate-600 font-bold mt-1 text-md md:text-lg italic">מוכן להתחיל לתרגל?</p>
             </div>

             <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <button 
                  onClick={() => setView('cards')} 
                  className="flex flex-col md:flex-row items-center justify-center md:justify-between p-5 bg-blue-600 text-white rounded-[1.5rem] shadow-xl hover:bg-blue-700 active:scale-95 transition-all group gap-3"
                >
                  <div className="flex items-center gap-3">
                    <BookOpen size={24} className="group-hover:rotate-12 transition-transform" />
                    <span className="font-black text-lg">כרטיסיות</span>
                  </div>
                  <ArrowRight size={20} className="hidden md:block group-hover:translate-x-1 transition-transform" />
                </button>

                <button 
                  onClick={() => {
                    const qs = [...WORD_DATA].sort(() => Math.random() - 0.5).map(word => ({
                      word,
                      options: [...WORD_DATA.filter(w => w.id !== word.id).sort(() => Math.random() - 0.5).slice(0,3), word].sort(() => Math.random() - 0.5)
                    }));
                    setQuizQuestions(qs); setQuizStep(0); setQuizScore(0); setQuizFinished(false); setView('quiz');
                  }} 
                  className="flex flex-col md:flex-row items-center justify-center md:justify-between p-5 bg-emerald-600 text-white rounded-[1.5rem] shadow-xl hover:bg-emerald-700 active:scale-95 transition-all group gap-3"
                >
                  <div className="flex items-center gap-3">
                    <Brain size={24} className="group-hover:rotate-12 transition-transform" />
                    <span className="font-black text-lg">מבחן</span>
                  </div>
                  <ArrowRight size={20} className="hidden md:block group-hover:translate-x-1 transition-transform" />
                </button>

                <button 
                  onClick={() => setView('list')} 
                  className="flex flex-col md:flex-row items-center justify-center md:justify-between p-5 bg-slate-900 text-white rounded-[1.5rem] shadow-xl hover:bg-black active:scale-95 transition-all group gap-3"
                >
                  <div className="flex items-center gap-3">
                    <List size={24} className="group-hover:rotate-12 transition-transform" />
                    <span className="font-black text-lg">מילון</span>
                  </div>
                  <ArrowRight size={20} className="hidden md:block group-hover:translate-x-1 transition-transform" />
                </button>
             </div>
           </div>
        </div>
      </div>
    </div>
  );

  const TopBar = ({ title, tutorText }) => (
    <div className="w-full bg-white border-b border-slate-100 p-4 sticky top-0 z-50 shadow-sm">
      <div className="max-w-4xl mx-auto flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div className="flex justify-between items-center w-full md:w-auto">
          <button onClick={() => setView('home')} className="text-slate-400 font-black hover:text-blue-600 transition-colors bg-slate-50 px-4 py-2 rounded-xl">חזרה</button>
          <h2 className="md:hidden text-xl font-black text-slate-900 tracking-tight">{title}</h2>
          <div className="w-12 h-12 rounded-full overflow-hidden border-2 border-blue-400 bg-blue-50 shadow-inner">
             {tutorImage ? <img src={tutorImage} className="w-full h-full object-cover object-top" alt="Tutor" /> : <User className="p-3 text-blue-300" />}
          </div>
        </div>
        <div className="flex-1 flex items-center bg-blue-600 text-white p-3 md:p-4 rounded-2xl shadow-lg animate-in fade-in duration-500 min-h-[50px]">
           <p className="text-sm font-bold leading-relaxed">{tutorText}</p>
        </div>
        <h2 className="hidden md:block text-xl font-black text-slate-900 tracking-tight whitespace-nowrap ml-4">{title}</h2>
      </div>
    </div>
  );

  const Cards = () => {
    const word = WORD_DATA[currentIndex];
    return (
      <div className="flex flex-col h-full bg-slate-50 overflow-y-auto">
        <TopBar title="כרטיסיות" tutorText={!isRevealed ? "נסה להיזכר איך אומרים את המילה בערבית. אפשר לשמוע אותה לפני שהופכים!" : "מצוין! שמע את ההגייה שוב או עבור הלאה עם מקש הרווח."} />
        <div className="flex-1 flex flex-col items-center justify-center p-6 pb-20">
          <div className="w-full max-w-sm aspect-[3/4] md:max-w-md md:aspect-[16/10] perspective-1000">
            <div onClick={() => setIsRevealed(!isRevealed)} className={`relative w-full h-full transition-transform duration-[800ms] ease-in-out transform-style-3d cursor-pointer ${isRevealed ? 'rotate-y-180' : ''}`}>
              
              {/* צד קדמי */}
              <div className="absolute inset-0 backface-hidden bg-white border-4 border-blue-400 rounded-[3rem] shadow-2xl flex flex-col md:flex-row items-stretch overflow-hidden">
                <div className="relative w-full md:w-1/2 h-2/3 md:h-auto bg-slate-100">
                  <img src={`https://loremflickr.com/600/600/${word.imgTag}?lock=${word.id}`} alt={word.hebrew} className="w-full h-full object-cover" />
                  <div 
                    onClick={(e) => { e.stopPropagation(); playArabicWord(word.arabic); }} 
                    className={`absolute top-4 left-4 p-3 rounded-2xl shadow-lg transition-all border-2 border-blue-100 z-20 ${playingAudio === word.arabic ? 'bg-blue-600 text-white animate-pulse scale-110' : 'bg-white/90 backdrop-blur-sm text-blue-600 hover:bg-blue-50 active:scale-90'}`}
                  >
                    {playingAudio === word.arabic ? <Loader2 size={24} className="animate-spin" /> : <Volume2 size={24} />}
                  </div>
                </div>
                <div className="flex-1 flex flex-col items-center justify-center p-6 w-full bg-gradient-to-b md:bg-gradient-to-l from-white to-blue-50/30">
                  <span className="text-[10px] text-blue-400 font-black uppercase tracking-widest mb-1">עברית</span>
                  <h2 className="text-4xl md:text-5xl font-black text-slate-900 tracking-tight">{word.hebrew}</h2>
                </div>
              </div>

              {/* צד אחורי */}
              <div className="absolute inset-0 backface-hidden rotate-y-180 bg-emerald-50 border-4 border-emerald-400 rounded-[3rem] shadow-2xl flex flex-col items-center justify-center p-8">
                <span className="text-[10px] text-emerald-500 font-black uppercase tracking-widest mb-4">ערבית</span>
                <div className="bg-white p-8 md:p-12 rounded-[2.5rem] shadow-lg border-2 border-emerald-100 w-full max-w-md text-center">
                  <h2 className="text-5xl md:text-7xl font-black text-emerald-600 mb-2" dir="rtl">{word.arabic}</h2>
                  <div className="text-2xl md:text-3xl text-blue-600 font-black tracking-wide italic">({word.phonetic})</div>
                </div>
                <div onClick={(e) => { e.stopPropagation(); playArabicWord(word.arabic); }} className={`mt-8 p-6 rounded-full shadow-2xl transition-all cursor-pointer ${playingAudio === word.arabic ? 'bg-blue-600 text-white animate-pulse' : 'bg-white text-blue-600 border-2 border-blue-100 hover:bg-blue-50'}`}>
                  {playingAudio === word.arabic ? <Loader2 size={36} className="animate-spin" /> : <Volume2 size={36} />}
                </div>
              </div>

            </div>
          </div>

          <div className="fixed bottom-6 inset-x-0 flex items-center justify-center gap-6 md:gap-12 z-40 px-6">
            <button disabled={currentIndex === 0} onClick={() => { if(currentIndex>0) { setCurrentIndex(prev=>prev-1); setIsRevealed(false); }}} className={`p-5 rounded-3xl shadow-xl transition-all ${currentIndex === 0 ? 'bg-gray-200 text-gray-400' : 'bg-white border-2 border-blue-500 text-blue-600 hover:bg-blue-50 active:scale-95'}`}><ChevronRight size={36} /></button>
            
            <div className="hidden md:flex items-center gap-3 text-slate-500 text-sm font-black bg-white shadow-xl px-6 py-4 rounded-full border border-slate-100">
               <Keyboard size={20} className="text-blue-500" />
               <span><b>רווח:</b> הופך כרטיס ועובר הלאה</span>
            </div>

            <button disabled={currentIndex === WORD_DATA.length - 1} onClick={() => { if(currentIndex < WORD_DATA.length-1) { setCurrentIndex(prev=>prev+1); setIsRevealed(false); }}} className={`p-5 rounded-3xl shadow-xl transition-all ${currentIndex === WORD_DATA.length-1 ? 'bg-gray-200 text-gray-400' : 'bg-white border-2 border-blue-500 text-blue-600 hover:bg-blue-50 active:scale-95'}`}><ChevronLeft size={36} /></button>
          </div>
        </div>
      </div>
    );
  };

  const Quiz = () => {
    if (quizFinished) return (
      <div className="h-full bg-blue-50 flex flex-col items-center justify-center p-8 text-center animate-in zoom-in">
        <div className="bg-white p-12 rounded-[4rem] shadow-2xl border-4 border-blue-600 w-full max-w-xl flex flex-col md:flex-row items-center gap-8">
          <div className="w-32 h-32 md:w-48 md:h-48 rounded-full overflow-hidden border-4 border-blue-400 shadow-md flex-shrink-0">
             {tutorImage && <img src={tutorImage} className="w-full h-full object-cover object-top" alt="Tutor" />}
          </div>
          <div className="flex-1">
            <h2 className="text-3xl font-black text-slate-800 mb-2">סיכום המבחן!</h2>
            <div className="text-8xl font-black text-blue-600 mb-4">{Math.round((quizScore/quizQuestions.length)*100)}%</div>
            <div className="flex gap-4 mt-6">
               <button onClick={() => setView('home')} className="flex-1 bg-slate-900 text-white py-4 rounded-2xl font-black shadow-lg">בית</button>
               <button onClick={() => { setQuizScore(0); setQuizStep(0); setQuizFinished(false); }} className="flex-1 bg-emerald-600 text-white py-4 rounded-2xl font-black shadow-lg">שוב</button>
            </div>
          </div>
        </div>
      </div>
    );
    const q = quizQuestions[quizStep];
    return (
      <div className="h-full bg-slate-50 flex flex-col overflow-y-auto">
        <TopBar title="מבחן תרגול" tutorText="זמן למבחן! בחר את המילה הנכונה בערבית." />
        <div className="p-6 flex flex-col md:flex-row items-start justify-center gap-8 pb-24 max-w-6xl mx-auto w-full">
          <div className="bg-white rounded-[2.5rem] shadow-xl border-2 border-blue-100 w-full max-w-sm overflow-hidden flex-shrink-0">
             <img src={`https://loremflickr.com/500/300/${q.word.imgTag}?lock=${q.word.id}`} className="w-full h-44 object-cover" alt="Quiz target" />
             <div className="p-8 text-center border-t"><h3 className="text-4xl font-black text-slate-900 tracking-tight">{q.word.hebrew}</h3></div>
          </div>
          <div className="grid grid-cols-1 w-full gap-4">
            {q.options.map(opt => (
              <div key={opt.id} onClick={() => { if(selectedAnswer) return; setSelectedAnswer(opt.id); const correct = opt.id === q.word.id; if(correct) setQuizScore(s=>s+1); setTimeout(()=>{ if(quizStep<quizQuestions.length-1) setQuizStep(prev=>prev+1); else setQuizFinished(true); setSelectedAnswer(null); }, 1200); }} className={`p-5 md:p-6 rounded-[1.5rem] border-4 transition-all flex justify-between items-center cursor-pointer shadow-md ${selectedAnswer === null ? 'bg-white border-slate-100 hover:border-blue-300' : opt.id === q.word.id ? 'bg-emerald-50 border-emerald-500 text-emerald-800 scale-[1.02] shadow-xl' : selectedAnswer === opt.id ? 'bg-rose-50 border-rose-500 text-rose-800' : 'bg-white opacity-40 grayscale'}`}>
                <div className="flex flex-col items-start">
                  <span className="font-black text-2xl md:text-3xl" dir="rtl">{opt.arabic}</span>
                  <span className="text-sm text-slate-500 font-bold">({opt.phonetic})</span>
                </div>
                <div className="flex items-center gap-4">
                  <div onClick={(e) => { e.stopPropagation(); playArabicWord(opt.arabic); }} className={`p-3 rounded-xl transition-all ${playingAudio === opt.arabic ? 'bg-blue-600 text-white' : 'text-slate-300 hover:text-blue-500 hover:bg-blue-50'}`}>
                    {playingAudio === opt.arabic ? <Loader2 size={24} className="animate-spin" /> : <Volume2 size={24} />}
                  </div>
                  {selectedAnswer && opt.id === q.word.id && <CheckCircle2 size={32} className="text-emerald-600" />}
                  {selectedAnswer === opt.id && opt.id !== q.word.id && <XCircle size={32} className="text-rose-600" />}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  };

  const WordList = () => (
    <div className="h-full bg-slate-50 flex flex-col overflow-y-auto">
      <TopBar title="מילון המילים" tutorText="סקור את המילים שלמדנו ושמע את ההגייה שלהן." />
      <div className="p-6 max-w-6xl mx-auto w-full">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 pb-24">
          {WORD_DATA.map(w => (
            <div key={w.id} className="bg-white rounded-[2rem] shadow-md border-2 border-slate-100 flex items-center overflow-hidden hover:shadow-xl transition-all group">
              <div className="w-24 h-24 flex-shrink-0 bg-slate-100 border-l-2"><img src={`https://loremflickr.com/150/150/${w.imgTag}?lock=${w.id}`} className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" alt={w.hebrew} /></div>
              <div className="p-6 flex-1 flex justify-between items-center">
                <div><div className="font-black text-slate-900 text-xl leading-none mb-2">{w.hebrew}</div><div className="text-[10px] text-blue-500 font-black italic tracking-widest">({w.phonetic})</div></div>
                <div className="flex items-center gap-4">
                  <div className="font-black text-emerald-600 text-3xl drop-shadow-sm" dir="rtl">{w.arabic}</div>
                  <div onClick={() => playArabicWord(w.arabic)} className={`p-3 rounded-full transition-all cursor-pointer ${playingAudio === w.arabic ? 'bg-blue-600 text-white shadow-lg' : 'bg-slate-50 text-slate-300 hover:text-blue-500 hover:bg-blue-50 border'}`}>
                    {playingAudio === w.arabic ? <Loader2 size={22} className="animate-spin" /> : <Volume2 size={22} />}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );

  return (
    <div className="h-screen bg-slate-950 font-sans text-slate-900 overflow-hidden select-none" dir="rtl">
      <div className="w-full h-full relative overflow-hidden flex flex-col bg-white">
        <main className="flex-1 relative z-10 h-full overflow-hidden">
          {view === 'home' && <Home />}
          {view === 'cards' && <Cards />}
          {view === 'quiz' && <Quiz />}
          {view === 'list' && <WordList />}
        </main>
      </div>
      <style dangerouslySetInnerHTML={{ __html: `
        .perspective-1000 { perspective: 1000px; }
        .transform-style-3d { transform-style: preserve-3d; }
        .backface-hidden { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
        .rotate-y-180 { transform: rotateY(180deg); }
        @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
        @keyframes slide-in-from-bottom { from { transform: translateY(100px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
        @keyframes zoom-in { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
        .animate-in { animation-fill-mode: forwards; }
        .fade-in { animation-name: fade-in; }
        .slide-in-from-bottom { animation-name: slide-in-from-bottom; }
        .zoom-in { animation-name: zoom-in; }
        
        /* Custom scrollbar for better look in landscape */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: #f1f1f1; }
        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
      `}} />
    </div>
  );
};

export default App;