"use client"

import { useEffect, useState } from "react"
import { useRouter } from "next/navigation"
import { GatoMascota } from "@/components/child/gato-mascota"
import AudioUnlock from "@/components/child/audio-unlock"

const FRANCESCA_KEY = "edueasy_child_francesca"

const activities = [
  { id: "matematicas", label: "Matemáticas", icon: "🔢", description: "Sumas, restas y multiplicaciones" },
  { id: "lecturas", label: "Lecturas cortas", icon: "📖", description: "Leé textos chiquitos" },
  { id: "logros", label: "Mis logros", icon: "⭐", color: "bg-warning" },
  { id: "pairing", label: "iPad nuevo", icon: "🔗", color: "bg-secondary" },
]

export default function FrancescaHome() {
  const router = useRouter()
  const [audioReady, setAudioReady] = useState(false)
  const [paired, setPaired] = useState(false)

  useEffect(() => {
    setPaired(!!localStorage.getItem(FRANCESCA_KEY))
  }, [])

  if (!audioReady) {
    return <AudioUnlock onUnlock={() => setAudioReady(true)} />
  }

  return (
    <div className="flex-1 flex flex-col items-center justify-center p-6 gap-8">
      <GatoMascota mood="happy" message="¡Hola Francesca! ¿Qué querés practicar hoy?" />

      {!paired ? (
        <div className="text-center max-w-xs space-y-4">
          <p className="text-foreground/60">Todavía no estás conectada. Pedile a mamá que te empareje.</p>
          <button
            onClick={() => router.push("/child/pairing?profile=francesca")}
            className="bg-primary text-primary-foreground touch-target-lg rounded-2xl px-8 py-4 text-xl font-display font-bold"
          >
            Ir a emparejar
          </button>
        </div>
      ) : (
        <div className="flex flex-col gap-4 w-full max-w-md">
          {activities.map((a) => (
            <button
              key={a.id}
              onClick={() => router.push(`/francesca/${a.id}`)}
              className={`${a.color || "bg-accent"} text-primary-foreground touch-target-lg rounded-2xl flex items-center gap-4 px-6 py-5 text-xl font-display font-semibold shadow-md active:scale-95 transition-transform`}
            >
              <span className="text-2xl">{a.icon}</span>
              <div className="text-left">
                <div>{a.label}</div>
                {a.description && (
                  <div className="text-sm opacity-80">{a.description}</div>
                )}
              </div>
            </button>
          ))}
        </div>
      )}
    </div>
  )
}