"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 SEBASTIAN_KEY = "edueasy_child_sebastian"

const activities = [
  { id: "sumas", label: "Sumas avanzadas", icon: "➕", description: "Sumas de 2 y 3 dígitos" },
  { id: "historia", label: "Historia argentina", icon: "🇦🇷", description: "Personajes y eventos" },
  { id: "banderas", label: "Banderas", icon: "🚩", description: "Provincias y símbolos" },
  { id: "logros", label: "Mis logros", icon: "⭐", color: "bg-warning" },
  { id: "pairing", label: "iPad nuevo", icon: "🔗", color: "bg-secondary" },
]

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

  useEffect(() => {
    setPaired(!!localStorage.getItem(SEBASTIAN_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 Sebastián! ¿Qué querés explorar hoy?" />

      {!paired ? (
        <div className="text-center max-w-xs space-y-4">
          <p className="text-foreground/60">Todavía no estás conectado. Pedile a mamá que te empareje.</p>
          <button
            onClick={() => router.push("/child/pairing?profile=sebastian")}
            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(`/sebastian/${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>
  )
}