"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 StepByStepProps { title?: string; problem: string; wrongAnswer: string; steps: string[]; rightAnswer: string; magicWords?: string; successMessage?: string; } interface SavedState { magicWordsAdded: boolean; revealedSteps: number; completed: boolean; } export function StepByStep({ title, problem, wrongAnswer, steps, rightAnswer, magicWords = "Let's think step by step", successMessage, }: StepByStepProps) { const t = useTranslations("kids.stepByStep"); 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 [magicWordsAdded, setMagicWordsAdded] = useState(false); const [revealedSteps, setRevealedSteps] = useState(0); const [completed, setCompleted] = 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.magicWordsAdded === 'boolean') { setMagicWordsAdded(saved.magicWordsAdded); setRevealedSteps(saved.revealedSteps || 0); setCompleted(saved.completed || false); } setIsLoaded(true); }, [levelSlug, componentId]); // Save state useEffect(() => { if (!levelSlug || !isLoaded) return; saveComponentState(levelSlug, componentId, { magicWordsAdded, revealedSteps, completed, }); }, [levelSlug, componentId, magicWordsAdded, revealedSteps, completed, isLoaded]); if (!isLoaded) return null; const handleAddMagicWords = () => { setMagicWordsAdded(true); }; const handleRevealNextStep = () => { if (revealedSteps < steps.length) { const newRevealed = revealedSteps + 1; setRevealedSteps(newRevealed); if (newRevealed === steps.length) { setCompleted(true); // Mark section as complete if (levelSlug) { markSectionCompleted(levelSlug, currentSection); markSectionComplete(currentSection); } } } }; const handleReset = () => { setMagicWordsAdded(false); setRevealedSteps(0); setCompleted(false); }; return (

{/* Title */}

🧠 {displayTitle}

{/* Problem */}

{t("problem")}

{problem}

{/* Wrong answer (before magic words) */} {!magicWordsAdded && (

😕 {t("withoutMagic")}

{wrongAnswer}

)} {/* Magic words button */} {!magicWordsAdded && ( )} {/* Steps revealed after magic words */} {magicWordsAdded && ( <>

✨ {t("magicWordsActive")}

"{magicWords}"

{/* Steps */}

{steps.map((step, index) => { const isRevealed = index < revealedSteps; return (

{isRevealed ? "✓" : index + 1} {isRevealed ? step : "???"}

); })}

{/* Reveal next step button */} {!completed && ( )} {/* Correct answer revealed */} {completed && (

🎉 {t("withMagic")}

{rightAnswer}

{successMessage && (

{successMessage}

)}

)} )} {/* Reset button */} {(magicWordsAdded || completed) && ( )}

); }