"use client"

import { useState, useCallback, useEffect, useRef } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { GatoMascota } from "@/components/child/gato-mascota"
import NoChildError from "@/components/child/no-child-error"
import TemporizadorVisual from "@/components/child/temporizador-visual"
import ExerciseDispatcher from "@/components/exercises/exercise-dispatcher"
import { speak, stopSpeaking } from "@/lib/speech"
import type { Exercise } from "@/curriculum/types"

const CHILD_ID_KEY = "edueasy_child_id"

type PageState = "loading" | "ready" | "complete" | "error"

export default function LecturaSesion() {
  const [pageState, setPageState] = useState<PageState>("loading")
  const [exercise, setExercise] = useState<Exercise | null>(null)
  const [running, setRunning] = useState(true)
  const [score, setScore] = useState(0)
  const [totalAttempts, setTotalAttempts] = useState(0)
  const childIdRef = useRef<string>("")
  const startedAtRef = useRef(new Date().toISOString())

  const getChildId = useCallback(() => {
    const id = localStorage.getItem(CHILD_ID_KEY) || ""
    childIdRef.current = id
    return id
  }, [])

  const fetchNext = useCallback(async () => {
    const childId = getChildId()
    if (!childId) {
      setPageState("error")
      return null
    }

    try {
      const res = await fetch(`/api/curriculum/next?childId=${childId}&topic=lectura`)
      const data = await res.json()
      if (data.done || !data.id) {
        setPageState("complete")
        return null
      }
      setExercise(data)
      setPageState("ready")
      return data
    } catch {
      setPageState("error")
      return null
    }
  }, [getChildId])

  useEffect(() => {
    fetchNext()
  }, [fetchNext])

  const gradeAttempt = useCallback(async (ex: Exercise, correct: boolean) => {
    const childId = childIdRef.current
    if (!childId || !ex) return

    setTotalAttempts((t) => t + 1)
    if (correct) setScore((s) => s + 1)

    const errorType = !correct
      ? ex.errorType || "discriminacion-auditiva"
      : null

    try {
      await fetch("/api/curriculum/grade", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          childId,
          exerciseId: ex.id,
          skillCode: ex.skillCode,
          correct,
          promptLevel: 0,
          responseMs: 3000,
          errorType,
          stage: ex.stage,
        }),
      })
    } catch {
      // silent
    }
  }, [])

  const handleComplete = useCallback(
    async (correct: boolean) => {
      if (!exercise) return
      await gradeAttempt(exercise, correct)
      stopSpeaking()
      if (correct) {
        await speak("¡Muy bien!")
        await new Promise((r) => setTimeout(r, 800))
      }
      fetchNext()
    },
    [exercise, gradeAttempt, fetchNext],
  )

  const resetSession = useCallback(() => {
    setScore(0)
    setTotalAttempts(0)
    setRunning(true)
    startedAtRef.current = new Date().toISOString()
    fetchNext()
  }, [fetchNext])

  if (pageState === "loading") {
    return (
      <div className="flex-1 flex items-center justify-center">
        <GatoMascota mood="coach" message="Preparando ejercicios..." size="sm" />
      </div>
    )
  }

  if (pageState === "error") {
    return <NoChildError onRetry={resetSession} />
  }

  if (pageState === "complete") {
    return (
      <div className="flex-1 flex flex-col items-center justify-center p-8 gap-6">
        <GatoMascota mood="celebrate" message="¡Terminaste todos los ejercicios por ahora!" size="lg" />
        <p className="text-lg font-display">
          Aciertos: {score}/{totalAttempts}
        </p>
        <button
          onClick={resetSession}
          className="bg-primary text-primary-foreground touch-target-lg rounded-2xl px-8 py-4 text-xl font-display font-bold"
        >
          Jugar de nuevo
        </button>
      </div>
    )
  }

  return (
    <div className="flex-1 flex flex-col items-center justify-center p-6 gap-6">
      <TemporizadorVisual
        durationMinutes={10}
        onComplete={() => {
          setRunning(false)
          setPageState("complete")
        }}
        running={running}
      />

      <AnimatePresence mode="wait">
        <motion.div
          key={exercise?.id || "empty"}
          initial={{ opacity: 0, x: 50 }}
          animate={{ opacity: 1, x: 0 }}
          exit={{ opacity: 0, x: -50 }}
          transition={{ duration: 0.25 }}
          className="w-full max-w-md"
        >
          {exercise && (
            <ExerciseDispatcher exercise={exercise} onComplete={handleComplete} />
          )}
        </motion.div>
      </AnimatePresence>
    </div>
  )
}