"use client"

import { motion } from "framer-motion"
import { speak } from "@/lib/speech"
import { GatoMascota } from "@/components/child/gato-mascota"
import TrazoLetra from "@/components/child/trazo-letra"
import type { Exercise } from "@/curriculum/types"

interface Props {
  exercise: Exercise
  onComplete: (correct: boolean) => void
}

export default function EjercicioTrazo({ exercise, onComplete }: Props) {
  const { content } = exercise
  const charToTrace = content.text && content.text.length === 1
    ? content.text.toUpperCase()
    : null

  const handleAudio = async () => {
    if (content.audioText) await speak(content.audioText)
  }

  return (
    <div className="flex flex-col items-center gap-6">
      <GatoMascota mood="coach" message={content.instruction} size="sm" />

      {charToTrace ? (
        <>
          <TrazoLetra
            letra={charToTrace}
            color={content.color || '#8CB8A0'}
            onComplete={() => onComplete(true)}
            promptLevel={0}
          />
          {content.audioText && (
            <button
              onClick={handleAudio}
              className="text-sm text-primary underline"
            >
              Escuchar instrucción
            </button>
          )}
        </>
      ) : (
        <>
          {content.emoji && (
            <motion.div
              initial={{ scale: 0 }}
              animate={{ scale: 1 }}
              className="text-6xl"
            >
              {content.emoji}
            </motion.div>
          )}
          <button
            onClick={() => onComplete(true)}
            className="bg-primary text-primary-foreground touch-target-lg rounded-2xl px-8 py-4 text-xl font-display font-bold"
          >
            ¡Lo hice!
          </button>
        </>
      )}
    </div>
  )
}