"use client"; import { useState, useEffect, useId } from "react"; import { useTranslations } from "next-intl"; import { cn } from "@/lib/utils"; import { useLevelSlug, useSectionNavigation } from "@/components/kids/providers/level-context"; import { getComponentState, saveComponentState, markSectionCompleted } from "@/lib/kids/progress"; interface WordPredictorProps { title?: string; instruction?: string; sentence: string; options: string[]; correctAnswer: string; explanation: string; aiThinking?: string; successMessage?: string; } interface SavedState { selectedAnswer: string | null; submitted: boolean; } export function WordPredictor({ title, instruction, sentence, options, correctAnswer, explanation, aiThinking, successMessage, }: WordPredictorProps) { const t = useTranslations("kids.wordPredictor"); const levelSlug = useLevelSlug(); const { currentSection, markSectionComplete, registerSectionRequirement } = useSectionNavigation(); const componentId = useId(); // Register that this section has an interactive element requiring completion useEffect(() => { registerSectionRequirement(currentSection); }, [currentSection, registerSectionRequirement]); const displayTitle = title || t("title"); const displayInstruction = instruction || t("instruction"); const [selectedAnswer, setSelectedAnswer] = useState(null); const [submitted, setSubmitted] = useState(false); const [isLoaded, setIsLoaded] = useState(false); // Load saved state useEffect(() => { if (!levelSlug) { setIsLoaded(true); return; } const saved = getComponentState(levelSlug, componentId); if (saved && typeof saved.submitted === "boolean") { setSelectedAnswer(saved.selectedAnswer); setSubmitted(saved.submitted); } setIsLoaded(true); }, [levelSlug, componentId]); // Save state useEffect(() => { if (!levelSlug || !isLoaded) return; saveComponentState(levelSlug, componentId, { selectedAnswer, submitted, }); }, [levelSlug, componentId, selectedAnswer, submitted, isLoaded]); if (!isLoaded) return null; const isCorrect = selectedAnswer === correctAnswer; const handleSelect = (option: string) => { if (submitted) return; setSelectedAnswer(option); }; const handleSubmit = () => { if (!selectedAnswer) return; setSubmitted(true); // Mark section as complete if correct answer if (selectedAnswer === correctAnswer && levelSlug) { markSectionCompleted(levelSlug, currentSection); markSectionComplete(currentSection); } }; const handleReset = () => { setSelectedAnswer(null); setSubmitted(false); }; // Render sentence with blank const renderSentence = () => { const parts = sentence.split("___"); return ( {parts[0]} {selectedAnswer || "???"} {parts[1]} ); }; return (

{/* Title */}

🧠 {displayTitle}

{displayInstruction}

{/* AI Brain visualization */}

🤖 {t("aiThinks")}

{renderSentence()}

{/* Thinking bubble */} {!submitted && (

💭 {aiThinking || t("thinkingDefault")}

)} {/* Options */}

{options.map((option, index) => { const isSelected = selectedAnswer === option; const showCorrect = submitted && option === correctAnswer; const showWrong = submitted && isSelected && !isCorrect; return ( ); })}

{/* Submit button */} {!submitted && ( )} {/* Result */} {submitted && (

{isCorrect ? `🎉 ${successMessage || t("correct")}` : `🤔 ${t("tryAgain")}`}

{explanation}

)} {/* Reset button */} {submitted && !isCorrect && ( )}

); }