import React, { useState, useEffect, useCallback, useRef } from 'react';
import { 
  Timer, Zap, Play, ChevronRight, ChevronLeft, 
  Trophy, Camera, EyeOff, Check, X, 
  Loader2, Trash2, AlertCircle, Sparkles, Image as ImageIcon,
  RefreshCw, AlertTriangle, Plus, Heart, Stars, Gift, Rocket, Volume2, Wand2, Download, Settings, User, Hash, Save, MessageSquare, FastForward, Sparkle, Grid, Mail, Star, Mic, MicOff, Share, Upload
} from 'lucide-react';

// --- DATA: ALL 24 LISTS UPDATED WITH CAPS FROM DOCUMENTS ---
const WORD_LISTS = {
  "1": ["Look", "the", "to", "I", "come", "here", "me", "a", "am", "The", "Come", "at", "A", "on", "is", "Here"],
  "2": ["In", "my", "can", "are", "said", "this", "yes", "no", "be", "by", "and", "or", "Yes", "No"],
  "3": ["Away", "for", "he", "go", "I'm", "into", "it", "an", "not", "over", "put", "see", "He", "Into"],
  "4": ["She", "will", "Us", "too", "up", "from", "had", "you", "where", "big", "Will", "You", "Us", "We", "Where"],
  "5": ["after", "all", "but", "came", "can't", "get", "got", "good", "has", "her", "his", "down", "After", "Get", "But"],
  "6": ["have", "Make", "out", "saw", "Some", "of", "what", "it's", "off", "made", "Saw", "Did", "What", "Some"],
  "7": ["they", "stay", "very", "fun", "your", "was", "as", "with", "that", "if", "so", "do", "Stay", "That", "If", "So"],
  "8": ["about", "day", "eat", "let", "take", "there", "every", "new", "please", "home", "fast", "their", "Take", "There", "Please"],
  "9": ["find", "when", "these", "him", "again", "now", "back", "many", "way", "leg", "Were", "Find", "When"],
  "10": ["round", "boy", "men", "how", "other", "then", "well", "call", "hot", "old", "which", "girl", "How", "Then", "Which"],
  "11": ["only", "ten", "been", "play", "mum", "our", "first", "fly", "dad", "walk", "give", "Gave", "Only", "Fly"],
  "12": ["before", "each", "along", "fell", "until", "right", "more", "found", "want", "just", "same", "any", "Right", "Found"],
  "13": ["always", "friend", "keep", "could", "open", "Most", "know", "who", "time", "One", "Tell", "Ask"],
  "14": ["seen", "show", "those", "would", "left", "own", "much", "list", "say", "help", "soon", "red", "Show", "Soon"],
  "15": ["morning", "tree", "room", "night", "kind", "Read", "head", "May", "another", "live", "water", "people", "People"],
  "16": ["work", "once", "should", "under", "because", "house", "school", "long", "than", "why", "year", "today", "School", "House"],
  "17": ["learn", "paper", "hold", "Book", "class", "sun", "Spell", "Last", "bird", "knew", "start", "page"],
  "18": ["draw", "letter", "picture", "story", "end", "line", "sentence", "study", "front", "through", "sound", "word", "Story"],
  "19": ["earth", "Cold", "rain", "grow", "sea", "Air", "threw", "Ground", "Between", "Plant", "Star", "wind", "Wind"],
  "20": ["field", "land", "sky", "world", "flower", "month", "space", "fire", "autumn", "tomorrow", "race", "summer", "zero", "two", "moon", "blue"],
  "21": ["Ride", "Together", "bike", "Toy", "game", "season", "song", "ball", "Beautiful", "Three", "Music", "Watch", "Happy"],
  "22": ["doll", "party", "spring", "winter", "hour", "light", "dark", "minute", "second", "seven", "baby", "eye", "five", "white", "six", "purple"],
  "23": ["Don't", "feet", "Yesterday", "face", "Eight", "behind", "body", "parent", "children", "family", "Brother", "brown", "kids"],
  "24": ["love", "sister", "middle", "beginning", "woman", "mother", "father", "grey", "nine", "pink", "colour", "orange", "eleven", "silver", "twelve", "gold"]
};

// --- SAMPLE SENTENCES DICTIONARY ---
const SAMPLE_SENTENCES = {
  "look": "Look at the big dog! 🐶", "the": "The cat is sleeping. 🐱", "to": "I walk to the park. 🌳", "i": "I love playing outside! ☀️",
  "come": "Come and play with me. 🎈", "here": "Here is your book. 📖", "me": "Can you help me? 🤝", "a": "I saw a little bird. 🐦",
  "am": "I am so happy today! 😊", "at": "Look at the funny monkey! 🐒", "on": "The cup is on the table. ☕", "is": "This game is fun! 🎮",
  "in": "The toy is in the box. 📦", "my": "This is my favourite hat. 🧢", "can": "I can jump very high! 🦘", "are": "We are going to the beach. 🏖️",
  "said": "She said hello to me. 👋", "this": "This is a great story. 📚", "yes": "Yes, we can go now! ✅", "no": "No, the dog is not inside. 🐕",
  "be": "I want to be a superhero! 🦸", "by": "We sat by the big tree. 🌳", "and": "I like apples and bananas. 🍎", "or": "Do you want red or blue? 🎨",
  "away": "The bird flew away. 🕊️", "for": "This present is for you. 🎁", "he": "He is my best friend. 👦", "go": "Let's go to the shop. 🛒",
  "i'm": "I'm going to run fast! 🏃", "into": "The frog jumped into the pond. 🐸", "it": "It is a sunny day. ☀️", "an": "I ate an apple. 🍏",
  "not": "Do not touch the hot stove. 🛑", "over": "The cow jumped over the moon. 🌙", "put": "Put your toys away, please. 🧸", "see": "I see a rainbow! 🌈",
  "she": "She likes to draw pictures. 🖍️", "will": "I will help you. 🌟", "us": "Come read with us. 📖", "too": "I like ice cream too! 🍦",
  "up": "Look up at the sky. ☁️", "from": "I got a letter from Grandma. 💌", "had": "We had a great time. 🎉", "you": "You are a good reader. 📚",
  "where": "Where is my teddy bear? 🧸", "big": "That is a big elephant! 🐘", "we": "We went to the park. 🌳",
  "after": "We can play after school. 🏫", "all": "I ate all my dinner. 🍽️", "but": "I like pink, but I love purple! 💜", "came": "My friend came over to play. 👧",
  "can't": "I can't find my shoes. 👟", "get": "Can you get the ball? ⚽", "got": "I got a new bike! 🚲", "good": "You did a good job! ⭐",
  "has": "She has a little kitten. 🐈", "her": "I like her pretty dress. 👗", "his": "That is his blue car. 🚗", "down": "We walked down the hill. ⛰️",
  "have": "I have a yummy snack. 🥪", "make": "Let's make a sandcastle! 🏖️", "out": "We went out to play. ☀️", "saw": "I saw a shiny star. ✨",
  "some": "Can I have some water? 💧", "of": "I want a piece of cake. 🍰", "what": "What is your name? ❓", "it's": "It's time to go home. 🏠",
  "off": "Turn off the light, please. 💡", "made": "I made a beautiful painting. 🎨", "did": "Did you see that? 👀",
  "they": "They are running fast. 🏃", "stay": "Can you stay and play? 🎈", "very": "I am very happy! 😁", "fun": "Reading is so much fun! 📖",
  "your": "Is this your pencil? ✏️", "was": "The game was exciting! 🎮", "as": "You are as quick as a flash! ⚡", "with": "I play with my sister. 👧",
  "that": "That is a silly joke! 😂", "if": "If it rains, we stay inside. 🌧️", "so": "I am so proud of you! 🌟", "do": "What do you like to play? 🧩"
};

const apiKey = ""; 

const App = () => {
  // --- Persisted State ---
  const [view, setView] = useState('landing'); 
  const [gender, setGender] = useState(() => localStorage.getItem('swm_gender') || 'girl'); 
  const [userInitials, setUserInitials] = useState(() => localStorage.getItem('swm_initials') || "Olivia");
  const [listIdentifier, setListIdentifier] = useState(() => localStorage.getItem('swm_list') || "1");
  const [challengeDuration, setChallengeDuration] = useState(() => parseInt(localStorage.getItem('swm_speed')) || 3); 
  const [isListenModeEnabled, setIsListenModeEnabled] = useState(false); // Disabled feature
  const [customList, setCustomList] = useState(() => JSON.parse(localStorage.getItem('swm_custom_list') || "[]"));
  const [manualCustomWords, setManualCustomWords] = useState(customList.join(', '));
  
  const [deck, setDeck] = useState(listIdentifier === 'Custom' ? customList : WORD_LISTS[listIdentifier] || WORD_LISTS["1"]);
  const [currentIndex, setCurrentIndex] = useState(0);
  const [error, setError] = useState(null);
  const [isExtractingWords, setIsExtractingWords] = useState(false);
  
  // --- Game Session State ---
  const [gamesThisSession, setGamesThisSession] = useState(0);
  const [rewardImage, setRewardImage] = useState(null);
  const [isGeneratingReward, setIsGeneratingReward] = useState(false);
  const [startTime, setStartTime] = useState(null);
  const [endTime, setEndTime] = useState(null);
  const [elapsedTime, setElapsedTime] = useState(0);
  const [showWord, setShowWord] = useState(true);
  const [score, setScore] = useState({ correct: 0, wrong: 0 });
  const [wrongWords, setWrongWords] = useState([]);
  
  // --- AI States ---
  const [aiSentence, setAiSentence] = useState(null);
  const [sessionSummary, setSessionSummary] = useState(null);
  const [isLoadingSummary, setIsLoadingSummary] = useState(false);
  const [isSpeaking, setIsSpeaking] = useState(false);

  const clockIntervalRef = useRef(null);
  const shareCanvasRef = useRef(null);

  // Sync Persistence
  useEffect(() => {
    localStorage.setItem('swm_gender', gender);
    localStorage.setItem('swm_initials', userInitials);
    localStorage.setItem('swm_list', listIdentifier);
    localStorage.setItem('swm_speed', challengeDuration.toString());
    localStorage.setItem('swm_custom_list', JSON.stringify(customList));
    if (view === 'landing' || view === 'settings') {
      setDeck(listIdentifier === 'Custom' && customList.length > 0 ? customList : (WORD_LISTS[listIdentifier] || WORD_LISTS["1"]));
    }
  }, [gender, userInitials, listIdentifier, challengeDuration, customList, view]);

  useEffect(() => {
    setManualCustomWords(customList.join(', '));
  }, [customList]);

  // --- Timer Logic ---
  useEffect(() => {
    const isGame = ['speed-trial', 'hide-seek'].includes(view); // Removed 'practice' from timer
    if (isGame && startTime && !endTime) {
      clockIntervalRef.current = setInterval(() => {
        setElapsedTime((Date.now() - startTime) / 1000);
      }, 50);
    } else {
      if (clockIntervalRef.current) clearInterval(clockIntervalRef.current);
    }
    return () => { if (clockIntervalRef.current) clearInterval(clockIntervalRef.current); };
  }, [view, startTime, endTime]);

  // --- Hide & Seek Logic ---
  useEffect(() => {
    let hideTimer;
    if (view === 'hide-seek' && !endTime) {
      setShowWord(true);
      hideTimer = setTimeout(() => {
        setShowWord(false);
      }, challengeDuration * 1000);
    } else {
      setShowWord(true);
    }
    return () => clearTimeout(hideTimer);
  }, [currentIndex, score.wrong, view, challengeDuration, endTime]);

  const theme = {
    primary: gender === 'girl' ? 'bg-pink-500' : 'bg-blue-600',
    primaryText: gender === 'girl' ? 'text-pink-500' : 'text-blue-600',
    accent: gender === 'girl' ? 'bg-pink-100' : 'bg-blue-100',
    accentText: gender === 'girl' ? 'text-pink-600' : 'text-blue-600',
    border: gender === 'girl' ? 'border-pink-100' : 'border-blue-100',
    shadow: gender === 'girl' ? 'shadow-pink-100' : 'shadow-blue-100',
    icon: gender === 'girl' ? Stars : Rocket
  };

  const getDynamicFontSize = (word) => {
    if (!word) return 'text-7xl';
    const len = word.length;
    if (len <= 4) return 'text-7xl md:text-9xl';
    if (len <= 7) return 'text-6xl md:text-8xl';
    return 'text-5xl md:text-7xl';
  };

  // --- Image Upload / OCR for Custom List ---
  const handleImageUpload = async (e) => {
    const file = e.target.files[0];
    if (!file) return;

    setIsExtractingWords(true);
    try {
      const reader = new FileReader();
      reader.onloadend = async () => {
        const base64String = reader.result.split(',')[1];
        
        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: [{
              role: "user",
              parts: [
                { text: "Extract ONLY the english sight words from this spelling list image. Ignore any headings, titles, dates, or numbers. Return the words as a simple comma-separated list. No other text." },
                { inlineData: { mimeType: file.type, data: base64String } }
              ]
            }]
          })
        });

        const data = await response.json();
        const text = data.candidates?.[0]?.content?.parts?.[0]?.text || "";
        
        // Clean up response into array of words
        const words = text.split(/[\n,]+/).map(w => w.trim().replace(/[^a-zA-Z']/g, '')).filter(w => w.length > 0);
        
        if (words.length > 0) {
          setCustomList(words);
          setListIdentifier('Custom');
          setDeck(words);
        } else {
          setError("Couldn't find words in that photo.");
          setTimeout(() => setError(null), 3000);
        }
        setIsExtractingWords(false);
      };
      reader.readAsDataURL(file);
    } catch (err) {
      console.error(err);
      setIsExtractingWords(false);
    }
  };

  const fetchAudioBlob = async (text, type = "short") => {
    if (!text) return null;
    try {
      const instruction = type === "summary" 
        ? `Say in an encouraging female Australian teacher voice: ${text}`
        : `Say clearly and cheerfully: ${text}`;

      const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-tts:generateContent?key=${apiKey}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ 
          contents: [{ parts: [{ text: instruction }] }], 
          generationConfig: { 
            responseModalities: ["AUDIO"], 
            speechConfig: { voiceConfig: { prebuiltVoiceConfig: { voiceName: "Aoede" } } } 
          },
          model: "gemini-2.5-flash-preview-tts"
        })
      });

      if (!response.ok) return null;
      const json = await response.json();
      const base64 = json.candidates?.[0]?.content?.parts?.[0]?.inlineData?.data;
      
      if (base64) {
        const bin = atob(base64);
        const bytes = new Uint8Array(bin.length);
        for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i);
        return URL.createObjectURL(new Blob([pcmToWav(bytes, 24000)], { type: 'audio/wav' }));
      }
    } catch (err) { console.error("Audio failed", err); }
    return null;
  };

  const pcmToWav = (pcmData, sampleRate) => {
    const buffer = new ArrayBuffer(44 + pcmData.length);
    new Uint8Array(buffer, 44).set(pcmData);
    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, 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, true);
    return buffer;
  };

  const playNativeFallback = (target) => {
    const utterance = new SpeechSynthesisUtterance(target);
    const voices = window.speechSynthesis.getVoices();
    
    let femaleVoice = voices.find(v => 
      (v.lang.includes('AU') || v.lang.includes('au')) && 
      /(female|karen|catherine|matilda|chloe|natasha|samantha)/i.test(v.name)
    );
    
    if (!femaleVoice) {
      femaleVoice = voices.find(v => /(female|karen|samantha|victoria|zira|catherine|moira|tessa)/i.test(v.name));
    }
    
    if (!femaleVoice) {
      femaleVoice = voices.find(v => v.lang.includes('AU') || v.lang.includes('au'));
    }

    if (femaleVoice) utterance.voice = femaleVoice;
    
    utterance.lang = 'en-AU';
    utterance.pitch = 1.2; 
    utterance.rate = 0.85;
    utterance.onend = () => setIsSpeaking(false);
    utterance.onerror = () => setIsSpeaking(false);
    window.speechSynthesis.speak(utterance);
  };

  const handleSoundOut = async (text = null) => {
    if (isSpeaking) window.speechSynthesis.cancel();
    setIsSpeaking(true);
    const target = (text || deck[currentIndex] || "").toString();
    
    // Unlock native TTS engine synchronously on user interaction
    const unlockUtterance = new SpeechSynthesisUtterance('');
    unlockUtterance.volume = 0;
    window.speechSynthesis.speak(unlockUtterance);

    // Warm up an HTML5 Audio element synchronously
    const audio = new Audio();
    audio.play().catch(() => {});

    const url = await fetchAudioBlob(target);
    if (url) {
      audio.src = url;
      audio.onended = () => setIsSpeaking(false);
      audio.onerror = () => playNativeFallback(target);
      
      const playPromise = audio.play();
      if (playPromise !== undefined) {
         playPromise.catch(err => {
            console.error("Audio error:", err);
            playNativeFallback(target);
         });
      }
    } else {
      playNativeFallback(target);
    }
  };

  const generateSessionSummary = async (stats) => {
    setIsLoadingSummary(true);
    setSessionSummary(null);
    
    const isPerfect = stats.wrong === 0;
    
    // Force AI variety by injecting a random Australian term into its instructions
    const aussieSlang = ["superstar", "champion", "little legend", "ripper", "spot on", "cracker", "top notch", "brilliant", "fantastic", "amazing"];
    const randomSlang = aussieSlang[Math.floor(Math.random() * aussieSlang.length)];
    
    let prompt;
    if (view === 'practice') {
       prompt = isPerfect 
        ? `Student ${userInitials} got a PERFECT score practicing their sight words. Write a super exciting 1-sentence summary for a 6yo as a female Australian teacher. Make it unique by including the word/phrase "${randomSlang}". Do NOT mention the list number or time.`
        : `Student ${userInitials} finished practicing their sight words, but got ${stats.wrong} words wrong. Write a highly encouraging 1-sentence summary for a 6yo as a female Australian teacher, saying something like "Great try, here are the words to practice". Make it unique by including the word/phrase "${randomSlang}". Do NOT mention the list number or time.`;
    } else {
       prompt = isPerfect 
        ? `Student ${userInitials} got a PERFECT score reading their sight words in ${stats.time.toFixed(1)}s. Write a super exciting 1-sentence summary for a 6yo as a female Australian teacher. Make it unique by including the word/phrase "${randomSlang}". Do NOT mention the list number.`
        : `Student ${userInitials} finished reading their sight words in ${stats.time.toFixed(1)}s, but got ${stats.wrong} words wrong. Write a highly encouraging 1-sentence summary for a 6yo as a female Australian teacher, saying something like "Great try, here are the words to practice". Make it unique by including the word/phrase "${randomSlang}". Do NOT mention the list number.`;
    }

    // 10 varied fallbacks for offline mode / fast loading
    const perfectFallbacks = [
       `Top job ${userInitials}! You are a sight word superstar!`,
       `Amazing reading ${userInitials}! A perfect score!`,
       `Brilliant work ${userInitials}! You're reading so well!`,
       `What a ripper effort, ${userInitials}! Spot on!`,
       `You absolute champion, ${userInitials}! Perfect reading!`,
       `Cracker of a job, ${userInitials}! You got every single one!`,
       `Fantastic reading, ${userInitials}! You're a little legend!`,
       `Wow, ${userInitials}! You breezed right through those!`,
       `Superb work, ${userInitials}! You didn't miss a beat!`,
       `I'm so proud of you, ${userInitials}! Top notch reading!`
    ];
    const practiceFallbacks = [
       `Great try ${userInitials}! Let's keep practicing these words.`,
       `Good effort ${userInitials}! Here are a few words to work on.`,
       `You're doing so well ${userInitials}! Let's review these tricky ones.`,
       `Nice work, ${userInitials}! Just a couple of sneaky words to practice!`,
       `Top effort, ${userInitials}! Have another look at these ones.`,
       `You're getting so fast, ${userInitials}! Let's practice the tricky ones.`,
       `Awesome try, ${userInitials}! These words are tricky, but you'll get them!`,
       `Great reading, ${userInitials}! Let's polish up these last few words.`,
       `You're a star, ${userInitials}! Just a little bit more practice needed here.`,
       `Nearly there, ${userInitials}! Have a quick look at the words you missed.`
    ];
    
    const fallbackText = isPerfect 
        ? perfectFallbacks[Math.floor(Math.random() * perfectFallbacks.length)]
        : practiceFallbacks[Math.floor(Math.random() * practiceFallbacks.length)];

    try {
      const resp = 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 resp.json();
      const text = data.candidates?.[0]?.content?.parts?.[0]?.text || fallbackText;
      setSessionSummary(text);
      handleSoundOut(text);
    } catch (err) { 
      setSessionSummary(fallbackText);
      handleSoundOut(fallbackText);
    } finally {
      setIsLoadingSummary(false);
    }
  };

  // --- INSTANT SAMPLE SENTENCE ---
  const getAiSentence = (word) => {
    const w = word.toLowerCase().trim();
    const sentence = SAMPLE_SENTENCES[w] || `Let's read the word "${word}" together! ✨`;
    setAiSentence(sentence);
  };

  const generateRewardImage = async () => {
    setIsGeneratingReward(true);
    
    const girlTopics = [
      "Cute magical fairy koala with sparkly wings",
      "Beautiful rainbow unicorn playing on a sunny beach",
      "Baby kangaroo picking bright pink and purple flowers",
      "Friendly mermaid swimming with happy dolphins",
      "Magical princess castle sitting on fluffy pink clouds",
      "Cute baby dragon baking cookies"
    ];
    
    const boyTopics = [
      "Cool space rocket flying past the moon and stars",
      "Friendly T-Rex dinosaur wearing cool sunglasses",
      "Super fast red racing car zooming on a track",
      "Happy little robot exploring a distant planet",
      "Brave superhero flying through the blue sky",
      "Pirate ship sailing on a bright blue ocean"
    ];

    const topicsList = gender === 'girl' ? girlTopics : boyTopics;
    const selectedTopic = topicsList[Math.floor(Math.random() * topicsList.length)];

    try {
      const resp = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/imagen-4.0-generate-001:predict?key=${apiKey}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ 
          instances: { prompt: `${selectedTopic}, whimsical bright children's book illustration style, highly detailed, joyful, 4k` }, 
          parameters: { sampleCount: 1 } 
        })
      });
      const data = await resp.json();
      if (data.predictions?.[0]?.bytesBase64Encoded) {
        setRewardImage(`data:image/png;base64,${data.predictions[0].bytesBase64Encoded}`);
      }
    } catch (e) {
      console.error(e);
    } finally { 
      setIsGeneratingReward(false); 
    }
  };

  const startMode = (mode) => {
    const activeList = listIdentifier === 'Custom' && customList.length > 0 ? customList : (WORD_LISTS[listIdentifier] || WORD_LISTS["1"]);
    const shuffled = [...activeList].sort(() => Math.random() - 0.5);
    setDeck(shuffled);
    setCurrentIndex(0);
    setScore({ correct: 0, wrong: 0 });
    setWrongWords([]);
    setElapsedTime(0);
    setEndTime(null);
    setSessionSummary(null);
    setStartTime(Date.now());
    setShowWord(true);
    
    if (mode === 'practice') {
      const w = shuffled[0].toLowerCase().trim();
      setAiSentence(SAMPLE_SENTENCES[w] || `Let's read the word "${shuffled[0]}" together! ✨`);
    } else {
      setAiSentence(null);
    }
    
    setView(mode);
  };

  const handleScoreWord = useCallback((isCorrect) => {
    if (endTime) return;
    
    setScore(prev => ({ 
      correct: isCorrect ? prev.correct + 1 : prev.correct, 
      wrong: !isCorrect ? prev.wrong + 1 : prev.wrong 
    }));
    
    if (!isCorrect) {
      setWrongWords(prev => [...new Set([...prev, deck[currentIndex]])]);
      // Force the exact same word to reappear and give a fresh 3 seconds
      setShowWord(true);
      // STOP here so we do NOT advance to the next card!
      return;
    }
    
    if (currentIndex < deck.length - 1) {
      setCurrentIndex(c => c + 1);
      if (view === 'practice') {
         const nextWord = deck[currentIndex + 1];
         const w = nextWord.toLowerCase().trim();
         setAiSentence(SAMPLE_SENTENCES[w] || `Let's read the word "${nextWord}" together! ✨`);
      } else {
         setAiSentence(null);
      }
    } else {
      const finalTime = (Date.now() - startTime) / 1000;
      setEndTime(finalTime);
      const newGamesCount = gamesThisSession + 1;
      setGamesThisSession(newGamesCount);
      
      generateSessionSummary({ 
        time: finalTime, 
        correct: isCorrect ? score.correct + 1 : score.correct, 
        wrong: !isCorrect ? score.wrong + 1 : score.wrong 
      });
      
      if (newGamesCount % 3 === 0) {
        generateRewardImage();
      }
      setView('results');
    }
  }, [endTime, deck, currentIndex, startTime, score, gamesThisSession, view]);

  const saveShareCard = () => {
    const canvas = shareCanvasRef.current;
    if (!canvas || !rewardImage) return;
    const ctx = canvas.getContext('2d');
    const img = new Image();
    img.src = rewardImage;
    img.onload = () => {
      canvas.width = 1080; canvas.height = 1350; 
      ctx.fillStyle = '#ffffff'; ctx.fillRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = gender === 'girl' ? '#fdf2f8' : '#eff6ff'; ctx.fillRect(0, 0, 1080, 1080);
      ctx.drawImage(img, 40, 40, 1000, 1000);
      ctx.fillStyle = gender === 'girl' ? '#db2777' : '#2563eb'; ctx.font = 'bold 70px sans-serif'; ctx.textAlign = 'center';
      ctx.fillText('SIGHT WORD MAGIC STAR!', 540, 1180);
      ctx.font = 'bold 50px sans-serif'; ctx.fillStyle = '#64748b';
      ctx.fillText(`Student: ${userInitials}`, 540, 1260);

      const safeName = (userInitials.trim() || "Olivia").replace(/[^a-z0-9]/gi, '_');
      const fileName = `${safeName}_Success.jpeg`;

      canvas.toBlob(async (blob) => {
        if (!blob) return;
        const file = new File([blob], fileName, { type: 'image/jpeg' });

        if (navigator.share && navigator.canShare && navigator.canShare({ files: [file] })) {
          try {
            await navigator.share({
              files: [file],
              title: 'Sight Word Star',
              text: `Look at ${userInitials}'s reading achievement!`,
            });
          } catch (err) {
            console.log('Share canceled');
          }
        } else {
          const dataUrl = canvas.toDataURL('image/jpeg', 0.9);
          const link = document.createElement('a');
          link.download = fileName; link.href = dataUrl; link.click();
        }
      }, 'image/jpeg', 0.9);
    };
  };

  const ListGrid = ({ current, onSelect }) => (
    <div className="grid grid-cols-6 gap-2 pt-2 shrink-0">
      {Object.keys(WORD_LISTS).map(id => (
        <button key={id} onClick={() => onSelect(id)} className={`h-10 w-10 flex items-center justify-center rounded-full font-bold text-sm transition-all border-2 ${current === id ? 'bg-indigo-600 border-indigo-600 text-white shadow-md scale-105' : 'bg-white border-slate-200 text-slate-500 hover:border-slate-300'}`}>{id}</button>
      ))}
      {customList.length > 0 && (
         <button onClick={() => onSelect('Custom')} className={`col-span-6 mt-1 py-3 flex items-center justify-center gap-2 rounded-xl font-bold text-sm transition-all border-2 ${current === 'Custom' ? 'bg-indigo-600 border-indigo-600 text-white shadow-md' : 'bg-indigo-50 border-indigo-200 text-indigo-600'}`}>
            <Camera size={16} /> Play Custom List
         </button>
      )}
    </div>
  );

  const Footer = () => (
    <div className="pt-4 pb-2 text-center space-y-2 shrink-0">
      <button onClick={() => window.location.href = "mailto:support@alisiumgroup.com?subject=Sight Word Magic Help"} className="inline-flex items-center gap-2 px-4 py-2 bg-white border border-slate-200 rounded-full text-[10px] font-black text-slate-400 uppercase tracking-widest hover:text-blue-500 hover:border-blue-200 shadow-sm transition-all">
        <Mail size={12} /> Need Help? Email Me
      </button>
      <p className="text-[10px] font-bold text-slate-300 uppercase tracking-[0.2em]">© 2026 Sight Word Magic. All Rights Reserved.</p>
    </div>
  );

  // --- VIEWS ---

  if (view === 'landing') {
    return (
      <div className="fixed inset-0 bg-slate-50 flex flex-col font-sans select-none text-slate-800 overflow-hidden">
        <div className="flex-1 overflow-y-auto w-full flex flex-col items-center">
          <div className="max-w-md w-full space-y-8 text-center py-10 px-4 flex flex-col">
            
            <header className="space-y-4 shrink-0">
              <div className="inline-block p-6 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-[2rem] text-white shadow-xl mb-1">
                <Sparkle size={48} fill="currentColor" className="animate-pulse" />
              </div>
              <h1 className="text-5xl md:text-6xl font-black text-slate-800 tracking-tight leading-none">Sight Word Magic</h1>
            </header>

            <div className="bg-white rounded-[2.5rem] p-6 md:p-8 shadow-xl border border-slate-100 space-y-6 shrink-0 flex flex-col">
               <div className="space-y-5 text-left flex-1">
                  <div className="space-y-2">
                     <label className="text-xs font-black text-slate-400 uppercase tracking-widest ml-1 font-sans">Student Name</label>
                     <div className="flex items-center gap-3 p-4 bg-slate-50 rounded-2xl border-2 border-slate-200 focus-within:border-blue-500">
                        <User size={20} className="text-slate-400" />
                        <input type="text" maxLength={20} value={userInitials} onChange={(e) => setUserInitials(e.target.value)} placeholder="Olivia" className="bg-transparent outline-none flex-1 font-black text-xl text-slate-700" />
                     </div>
                  </div>
                  
                  {/* CURRENT LIST INDICATOR */}
                  <div className="space-y-2 pt-2">
                     <div className="flex justify-between items-center ml-1">
                         <label className="text-xs font-black text-slate-400 uppercase tracking-widest font-sans">Active List</label>
                         <button onClick={() => setView('settings')} className="text-[10px] font-black text-indigo-500 uppercase tracking-wider bg-indigo-50 px-3 py-1 rounded-lg active:scale-95 transition-all border border-indigo-100">Change</button>
                     </div>
                     <div className="flex items-center justify-between p-4 bg-slate-50 rounded-2xl border-2 border-slate-200">
                         <div className="flex items-center gap-3">
                            <div className="p-2 bg-white rounded-xl shadow-sm border border-slate-100">
                               <Grid size={16} className="text-slate-400" />
                            </div>
                            <span className="font-black text-lg text-slate-700">{listIdentifier === 'Custom' ? 'Custom Photo List' : `List ${listIdentifier}`}</span>
                         </div>
                         <span className="text-[10px] font-black text-slate-500 bg-slate-200 px-3 py-1.5 rounded-xl tracking-widest uppercase">{deck.length} words</span>
                     </div>
                  </div>

                  {/* Mode Selection Only - List has moved to settings */}
                  <div className="space-y-2 pt-2">
                     <label className="text-xs font-black text-slate-400 uppercase tracking-widest block ml-1 font-sans">Theme</label>
                     <div className="flex gap-3">
                        <button onClick={() => setGender('girl')} className={`flex-1 flex flex-col items-center gap-2 py-4 rounded-2xl transition-all border-4 font-sans ${gender === 'girl' ? 'bg-pink-500 border-pink-400 text-white shadow-md' : 'bg-white border-slate-100 text-slate-400'}`}>
                          <Heart size={24} fill={gender === 'girl' ? 'currentColor' : 'none'} /><span className="text-[10px] font-black uppercase">Girl Mode</span>
                        </button>
                        <button onClick={() => setGender('boy')} className={`flex-1 flex flex-col items-center gap-2 py-4 rounded-2xl transition-all border-4 font-sans ${gender === 'boy' ? 'bg-blue-600 border-blue-500 text-white shadow-md' : 'bg-white border-slate-100 text-slate-400'}`}>
                          <Rocket size={24} fill={gender === 'boy' ? 'currentColor' : 'none'} /><span className="text-[10px] font-black uppercase">Boy Mode</span>
                        </button>
                     </div>
                  </div>
               </div>
               <button onClick={() => (userInitials.trim().length >= 1) ? setView('menu') : setError("Enter a name!")} className="w-full py-6 bg-slate-800 text-white rounded-[2rem] font-black text-xl uppercase tracking-widest transition-all active:scale-95 shadow-lg shrink-0 mt-4">Start Magic ✨</button>
               {error && <p className="text-red-500 text-[10px] font-bold animate-bounce uppercase text-center mt-2">{error}</p>}
            </div>
            
            <Footer />
          </div>
        </div>
      </div>
    );
  }

  if (view === 'menu') {
    return (
      <div className="fixed inset-0 bg-slate-50 flex flex-col font-sans select-none text-slate-800 overflow-hidden">
        <div className="flex-1 overflow-y-auto w-full flex flex-col items-center">
          <div className="max-w-md w-full space-y-5 text-center py-6 px-4 flex flex-col min-h-full justify-center">
            
            <button onClick={() => setView('settings')} className="bg-white px-5 py-2.5 rounded-full border border-slate-200 shadow-sm flex items-center gap-2 mx-auto text-[10px] font-black text-slate-600 uppercase tracking-widest active:scale-95 shrink-0">
              <Settings size={14} /> Setup & Lists
            </button>
            
            <header className="space-y-3 shrink-0">
              <div className={`inline-block p-5 ${theme.primary} rounded-[2rem] text-white shadow-xl`}><theme.icon size={40} fill="currentColor" /></div>
              <h1 className="text-4xl md:text-5xl font-black text-slate-800 tracking-tight leading-none">Sight Word Magic</h1>
              <p className={`${theme.primaryText} font-bold uppercase text-[10px] tracking-[0.3em]`}>{userInitials} • {listIdentifier === 'Custom' ? "Custom List" : `List ${listIdentifier}`}</p>
            </header>

            <div className={`bg-white p-5 rounded-[2rem] border ${theme.border} space-y-3 shadow-sm shrink-0`}>
              <div className={`flex justify-between items-center text-[10px] font-black uppercase ${theme.primaryText}`}><span>Reward Progress</span><span>{gamesThisSession % 3}/3</span></div>
              <div className="flex gap-2">
                {[1, 2, 3].map(i => (<div key={i} className={`flex-1 h-12 rounded-xl flex items-center justify-center border-2 transition-all ${gamesThisSession % 3 >= i || (gamesThisSession > 0 && gamesThisSession % 3 === 0) ? `${theme.primary} border-transparent text-white` : 'bg-slate-50 border-slate-200 text-slate-300'}`}>{gamesThisSession % 3 >= i || (gamesThisSession > 0 && gamesThisSession % 3 === 0) ? <theme.icon size={20} fill="white" /> : <div className="w-6 h-6 rounded-full border-2 border-slate-200" />}</div>))}
              </div>
            </div>

            <div className="grid gap-3 shrink-0">
              <button onClick={() => startMode('practice')} className="flex items-center justify-between p-5 md:p-6 bg-white border border-slate-200 rounded-3xl active:scale-95 shadow-sm font-bold text-slate-700 text-lg md:text-xl"><div className="flex items-center gap-4"><Play size={24} fill="currentColor" /> Practice</div><ChevronRight size={20} className="text-slate-300" /></button>
              <button onClick={() => startMode('speed-trial')} className="flex items-center justify-between p-5 md:p-6 bg-white border border-slate-200 rounded-3xl active:scale-95 shadow-sm font-bold text-slate-700 text-lg md:text-xl"><div className="flex items-center gap-4"><Timer size={24} fill="currentColor" /> Speed Trial</div><ChevronRight size={20} className="text-slate-300" /></button>
              <button onClick={() => startMode('hide-seek')} className="flex items-center justify-between p-5 md:p-6 bg-purple-600 text-white rounded-3xl active:scale-95 shadow-md font-bold text-lg md:text-xl"><div className="flex items-center gap-4 shrink-0"><EyeOff size={24} /> {challengeDuration}s Challenge</div><ChevronRight size={20} className="opacity-50" /></button>
            </div>

            <Footer />
          </div>
        </div>
      </div>
    );
  }

  if (view === 'settings') {
    return (
      <div className="fixed inset-0 bg-slate-50 flex flex-col font-sans select-none text-slate-800 overflow-hidden">
        <header className="w-full p-4 bg-white border-b flex items-center justify-between shadow-sm shrink-0">
          <button onClick={() => setView('menu')} className="p-2 text-slate-400"><ChevronLeft size={24} /></button>
          <h2 className="text-lg font-black text-slate-800 tracking-tight uppercase">Setup & Lists</h2>
          <div className="w-10" />
        </header>
        <div className="flex-1 overflow-y-auto w-full flex flex-col items-center">
          <div className="max-w-md w-full space-y-6 py-6 px-4 flex flex-col min-h-full">
            
            <div className="bg-white rounded-3xl border border-slate-200 shadow-sm p-5 space-y-5 flex-1">
              <div className="flex items-center gap-4">
                <User className="text-slate-400" size={24} />
                <div className="flex-1">
                  <p className="text-[10px] font-bold text-slate-400 uppercase">Student Name</p>
                  <input type="text" maxLength={20} value={userInitials} onChange={(e) => setUserInitials(e.target.value)} className="w-full text-lg font-bold text-slate-700 outline-none" />
                </div>
              </div>

              {/* THEME SELECTION ADDED TO SETUP PAGE */}
              <div className="pt-4 border-t border-slate-100">
                 <p className="text-[10px] font-bold text-slate-400 uppercase mb-2">Theme</p>
                 <div className="flex gap-3">
                    <button onClick={() => setGender('girl')} className={`flex-1 flex flex-col items-center gap-2 py-3 rounded-2xl transition-all border-4 font-sans ${gender === 'girl' ? 'bg-pink-500 border-pink-400 text-white shadow-md' : 'bg-white border-slate-100 text-slate-400'}`}>
                      <Heart size={20} fill={gender === 'girl' ? 'currentColor' : 'none'} /><span className="text-[10px] font-black uppercase">Girl Mode</span>
                    </button>
                    <button onClick={() => setGender('boy')} className={`flex-1 flex flex-col items-center gap-2 py-3 rounded-2xl transition-all border-4 font-sans ${gender === 'boy' ? 'bg-blue-600 border-blue-500 text-white shadow-md' : 'bg-white border-slate-100 text-slate-400'}`}>
                      <Rocket size={20} fill={gender === 'boy' ? 'currentColor' : 'none'} /><span className="text-[10px] font-black uppercase">Boy Mode</span>
                    </button>
                 </div>
              </div>

              {/* LIST SELECTION MOVED HERE */}
              <div className="pt-4 border-t border-slate-100">
                <p className="text-[10px] font-bold text-slate-400 uppercase mb-2">Select Standard List (1-24)</p>
                <ListGrid current={listIdentifier} onSelect={setListIdentifier} />
              </div>

              {/* MAGIC CAMERA OCR & MANUAL ADD FEATURE */}
              <div className="pt-4 border-t border-slate-100">
                <p className="text-[10px] font-bold text-slate-400 uppercase mb-2">Custom List</p>
                
                {/* Manual Text Entry */}
                <textarea 
                  value={manualCustomWords}
                  onChange={(e) => setManualCustomWords(e.target.value)}
                  placeholder="Type words here, separated by commas (e.g. apple, banana, cat)"
                  className="w-full p-3 bg-slate-50 border-2 border-slate-200 rounded-xl text-sm font-bold text-slate-700 outline-none focus:border-indigo-400 h-20 resize-none mb-2"
                />
                <button 
                  onClick={() => {
                    const words = manualCustomWords.split(/[\n,]+/).map(w => w.trim().replace(/[^a-zA-Z']/g, '')).filter(w => w.length > 0);
                    if (words.length > 0) {
                      setCustomList(words);
                      setListIdentifier('Custom');
                      setDeck(words);
                    }
                  }}
                  className="w-full py-3 bg-indigo-600 text-white font-bold rounded-xl shadow-sm active:scale-95 transition-all text-sm mb-4"
                >
                  Save Typed Words
                </button>

                <div className="flex items-center justify-center gap-2 mb-4 opacity-50">
                  <div className="h-px bg-slate-300 flex-1"></div>
                  <span className="text-[10px] font-black text-slate-500 uppercase tracking-widest">Or Magic Camera</span>
                  <div className="h-px bg-slate-300 flex-1"></div>
                </div>

                <label className={`flex items-center justify-center gap-3 w-full py-4 bg-indigo-50 text-indigo-600 font-black text-sm uppercase tracking-widest rounded-2xl border-2 border-indigo-200 shadow-sm ${isExtractingWords ? 'opacity-70 cursor-not-allowed' : 'active:scale-95 cursor-pointer'}`}>
                   {isExtractingWords ? <Loader2 size={20} className="animate-spin" /> : <Camera size={20} />}
                   {isExtractingWords ? "Reading photo..." : "Take Photo of Homework"}
                   <input type="file" accept="image/*" className="hidden" onChange={handleImageUpload} disabled={isExtractingWords} />
                </label>
                {error && <p className="text-red-500 text-[10px] font-bold text-center mt-2 uppercase">{error}</p>}
                {listIdentifier === 'Custom' && customList.length > 0 && (
                   <p className="text-xs text-slate-500 text-center mt-3 font-medium">
                      Currently using {customList.length} custom words!
                   </p>
                )}
              </div>

              <div className="pt-4 border-t border-slate-100">
                <p className="text-[10px] font-bold text-slate-400 uppercase mb-2">Hide & Seek Speed</p>
                <div className="flex gap-2">
                  {[1, 2, 3].map((sec) => (
                    <button key={sec} onClick={() => setChallengeDuration(sec)} className={`flex-1 py-3 rounded-xl font-bold transition-all ${challengeDuration === sec ? `${theme.primary} text-white` : 'bg-slate-50 text-slate-400'}`}>{sec}s</button>
                  ))}
                </div>
              </div>
              
              <div className="pt-3 border-t border-slate-100 flex items-center justify-between opacity-50 cursor-not-allowed">
                <div className="flex items-center gap-3">
                  <Mic size={24} className="text-slate-400" />
                  <div>
                    <div className="flex items-center gap-2">
                      <p className="text-sm font-bold text-slate-700">Magic Ear</p>
                      <span className="text-[8px] font-black uppercase tracking-widest bg-slate-200 text-slate-500 px-2 py-0.5 rounded-full">Soon</span>
                    </div>
                    <p className="text-[10px] text-slate-400">Confirmation mode</p>
                  </div>
                </div>
                <button disabled className="w-10 h-5 rounded-full transition-all relative bg-slate-200 cursor-not-allowed"><div className="absolute top-1 w-3 h-3 bg-white rounded-full transition-all left-1" /></button>
              </div>

            </div>

            <button onClick={() => setView('menu')} className={`w-full py-5 ${theme.primary} text-white font-black rounded-3xl shadow-lg uppercase tracking-widest active:scale-95 shrink-0 mb-8`}>Save Setup</button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="fixed inset-0 bg-slate-50 flex flex-col font-sans select-none text-slate-800 overflow-hidden">
      {/* GAMEPLAY HEADER */}
      <header className="shrink-0 p-3 md:p-4 bg-white border-b flex items-center justify-between z-10 shadow-sm font-sans">
        <button onClick={() => setView('menu')} className="p-2 text-slate-400 active:bg-slate-100 rounded-xl active:scale-90"><ChevronLeft size={24} /></button>
        <div className="text-center">
          <p className="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-0.5">{view === 'hide-seek' ? `${challengeDuration}s Challenge` : view === 'practice' ? 'Practice' : 'Speed Trial'}</p>
          {view !== 'practice' && (
            <p className="text-lg md:text-xl font-black text-blue-600 font-mono leading-none">{elapsedTime.toFixed(1)}s</p>
          )}
        </div>
        <div className="flex flex-col items-end">
          <p className="text-[10px] md:text-xs font-black text-slate-400 leading-none">{currentIndex + 1}/{deck.length}</p>
          <div className="flex gap-1 mt-1 font-mono text-[10px]"><span className="text-green-500 font-bold">✓{score.correct}</span><span className="text-red-500 font-bold">✗{score.wrong}</span></div>
        </div>
      </header>
      <div className="shrink-0 w-full h-1.5 bg-slate-200 font-sans">
        <div className={`h-full ${theme.primary} transition-all duration-300`} style={{ width: `${((currentIndex + 1) / deck.length) * 100}%` }} />
      </div>
      
      {/* GAMEPLAY MAIN */}
      <main className="flex-1 flex flex-col items-center justify-center p-4 gap-4 overflow-hidden min-h-0 w-full max-w-lg mx-auto pb-10">
        <div className="flex-1 w-full relative group flex flex-col justify-center bg-white border-4 rounded-[2.5rem] shadow-xl p-6 transition-all min-h-[150px] overflow-hidden">
          {showWord ? (
            <span className={`font-black text-slate-800 text-center animate-in zoom-in px-2 tracking-tight whitespace-nowrap font-sans ${getDynamicFontSize(deck[currentIndex])}`}>
              {deck[currentIndex]}
            </span>
          ) : (
            <div className="flex flex-col items-center gap-3 text-slate-300 animate-pulse font-sans">
              <EyeOff size={64} className="md:w-20 md:h-20" />
              <p className="text-[10px] md:text-xs font-bold uppercase tracking-widest text-center">Hidden!<br/>Say the word!</p>
            </div>
          )}
          
          {showWord && (
            <div className="absolute top-3 right-3 md:top-4 md:right-4 flex flex-col gap-2 font-sans">
              {view !== 'practice' && (
                <button onClick={() => getAiSentence(deck[currentIndex])} className="p-3 md:p-4 bg-pink-100 text-pink-500 rounded-full shadow-md border border-pink-200 active:scale-90 font-sans">
                  <Wand2 size={20} className="md:w-6 md:h-6" />
                </button>
              )}
              <button onClick={() => handleSoundOut()} className={`p-3 md:p-4 bg-blue-100 text-blue-500 rounded-full shadow-md border border-blue-200 active:scale-90 ${isSpeaking ? 'animate-pulse' : ''} font-sans`}>
                <Volume2 size={20} className="md:w-6 md:h-6" />
              </button>
            </div>
          )}
        </div>
        
        {aiSentence && showWord && (
          <div className="shrink-0 w-full bg-white border-2 border-pink-100 p-4 rounded-3xl text-center shadow-md animate-in slide-in-from-bottom-2 font-sans">
            <p className="text-sm md:text-base font-bold text-slate-600 italic leading-snug">{aiSentence}</p>
          </div>
        )}
        
        <div className="shrink-0 w-full flex gap-3 md:gap-4 animate-in slide-in-from-bottom-4 max-w-sm mb-6">
          <button onClick={() => handleScoreWord(false)} className="flex-1 h-20 md:h-24 bg-red-50 text-red-600 rounded-3xl border-2 border-red-200 flex flex-col items-center justify-center active:scale-95 shadow-sm font-sans">
            <X size={36} strokeWidth={3} className="md:w-12 md:h-12" />
            <span className="text-[10px] md:text-xs font-black uppercase mt-1">Retry</span>
          </button>
          <button onClick={() => handleScoreWord(true)} className="flex-1 h-20 md:h-24 bg-green-50 text-green-600 rounded-3xl border-2 border-green-200 flex flex-col items-center justify-center active:scale-95 shadow-sm font-sans">
            <Check size={36} strokeWidth={3} className="md:w-12 md:h-12" />
            <span className="text-[10px] md:text-xs font-black uppercase mt-1">Got it!</span>
          </button>
        </div>
      </main>

      {/* RESULTS MODAL */}
      {view === 'results' && (
        <div className="fixed inset-0 z-[80] bg-slate-900/95 backdrop-blur-md flex items-center justify-center p-4 font-sans">
          <div className="bg-white rounded-[2.5rem] p-6 md:p-8 w-full max-w-md flex flex-col gap-4 animate-in zoom-in shadow-2xl max-h-[90vh] overflow-y-auto mb-8 font-sans">
            <header className="space-y-2 text-center shrink-0 font-sans">
              <div className="inline-block p-3 bg-yellow-100 rounded-full text-yellow-600 font-sans"><Trophy size={36} /></div>
              <h2 className="text-2xl md:text-3xl font-black leading-tight font-sans">Session Done!</h2>
              <p className="text-slate-500 font-bold uppercase text-[10px] tracking-widest font-sans">{userInitials} • {listIdentifier === 'Custom' ? "Custom List" : `List ${listIdentifier}`}</p>
            </header>
            
            <div className={`p-4 md:p-5 rounded-3xl border-2 ${theme.border} ${theme.accent} relative overflow-hidden shrink-0 font-sans`}>
               <div className="absolute top-1 right-1 opacity-20 font-sans"><Sparkle size={32} /></div>
               {isLoadingSummary ? (
                 <div className="flex flex-col items-center gap-2 py-2 font-sans">
                    <Loader2 className={`animate-spin ${theme.primaryText}`} size={24} />
                    <p className="text-[10px] font-bold text-slate-400 uppercase font-sans">Thinking...</p>
                 </div>
               ) : sessionSummary ? (
                 <div className="space-y-2 text-center font-sans">
                    <p className={`text-sm md:text-base font-bold italic leading-snug ${theme.primaryText}`}>{`"${sessionSummary}"`}</p>
                    <button onClick={() => handleSoundOut(sessionSummary)} className="p-1.5 rounded-full hover:bg-white/50 transition-all font-sans">
                       <Volume2 size={16} className={isSpeaking ? "animate-pulse" : ""} />
                    </button>
                 </div>
               ) : null}
            </div>
            
            <div className="grid grid-cols-2 gap-3 text-center font-mono shrink-0 font-sans">
              {view !== 'practice' && (
                <div className="p-3 bg-blue-50 rounded-2xl border border-blue-100 col-span-2 font-sans">
                   <p className="text-[10px] font-black text-blue-400 uppercase mb-0.5">Time</p>
                   <p className="text-3xl md:text-4xl font-black text-blue-600 font-sans">{endTime?.toFixed(1)}s</p>
                </div>
              )}
              <div className={`p-3 bg-green-50 rounded-2xl border border-green-100 font-sans ${view === 'practice' ? 'col-span-1' : ''}`}>
                 <p className="text-[10px] font-black text-green-400 uppercase mb-0.5">Correct</p>
                 <p className="text-xl md:text-2xl font-black text-green-600 font-sans">{score.correct}</p>
              </div>
              <div className={`p-3 bg-red-50 rounded-2xl border border-red-100 font-sans ${view === 'practice' ? 'col-span-1' : ''}`}>
                 <p className="text-[10px] font-black text-red-400 uppercase mb-0.5">Retry</p>
                 <p className="text-xl md:text-2xl font-black text-red-600 font-sans">{score.wrong}</p>
              </div>
            </div>
            
            {wrongWords.length > 0 && (
              <div className="p-4 bg-red-50 rounded-2xl border border-red-100 shrink-0 text-left font-sans">
                <p className="text-[10px] font-black text-red-500 uppercase tracking-widest mb-2 flex items-center gap-1">
                  <AlertCircle size={14} /> Words to Practice
                </p>
                <div className="flex flex-wrap gap-2">
                  {wrongWords.map((w, idx) => (
                    <span key={idx} className="px-3 py-1.5 bg-white text-red-600 font-bold rounded-xl border border-red-200 shadow-sm text-sm">
                      {w}
                    </span>
                  ))}
                </div>
              </div>
            )}
            
            {gamesThisSession % 3 === 0 && gamesThisSession > 0 && (
              <div className="space-y-3 pt-3 border-t border-slate-100 shrink-0 font-sans">
                 <div className="aspect-square rounded-2xl overflow-hidden border-4 border-white shadow-lg bg-slate-50 flex items-center justify-center font-sans">
                   {isGeneratingReward ? (
                     <div className="flex flex-col items-center gap-3 font-sans">
                       <Loader2 className={`animate-spin ${theme.primaryText}`} size={32} />
                       <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest font-sans">Painting Reward...</p>
                     </div>
                   ) : rewardImage ? (
                     <img src={rewardImage} alt="Reward" className="w-full h-full object-cover font-sans" />
                   ) : (
                     <ImageIcon className="text-slate-300" size={48} />
                   )}
                 </div>
                 {rewardImage && !isGeneratingReward && (
                   <button onClick={saveShareCard} className="w-full py-4 bg-green-600 text-white font-black rounded-2xl shadow-md active:scale-95 uppercase text-[10px] md:text-xs flex items-center justify-center gap-2 font-sans">
                     <Share size={16} /> Save & Share
                   </button>
                 )}
              </div>
            )}
            
            <button onClick={() => { setRewardImage(null); setView('menu'); }} className={`w-full py-5 ${theme.primary} text-white font-black rounded-[1.5rem] shadow-md uppercase text-xs md:text-sm shrink-0 mt-2 font-sans`}>
              Finish Magic
            </button>
          </div>
        </div>
      )}
      <canvas ref={shareCanvasRef} className="hidden" />
    </div>
  );
};

export default App;