"use client"

import { useRouter } from "next/navigation"
import { GatoMascota } from "./gato-mascota"

const CHILD_ID_KEY = "edueasy_child_id"

interface Props {
  onRetry?: () => void
}

export default function NoChildError({ onRetry }: Props) {
  const router = useRouter()
  const hasChildId = typeof window !== "undefined" && localStorage.getItem(CHILD_ID_KEY)

  return (
    <div className="flex-1 flex flex-col items-center justify-center p-8 gap-6">
      <GatoMascota mood="coach" message={hasChildId ? "Ups, hubo un problema" : "Todavía no estoy conectado"} size="lg" />
      <div className="text-center max-w-xs">
        {hasChildId ? (
          <p className="text-foreground/60">
            No pude conectar con el servidor. Revisá la conexión.
          </p>
        ) : (
          <>
            <p className="text-foreground/60">Pedile a mamá que te empareje desde su celular.</p>
            <p className="text-foreground/40 text-sm mt-1">Mamá va a Dashboard → Emparejar nuevo iPad</p>
          </>
        )}
      </div>
      <div className="flex gap-3">
        {hasChildId && onRetry && (
          <button
            onClick={onRetry}
            className="bg-primary text-primary-foreground touch-target-lg rounded-2xl px-8 py-4 text-xl font-display font-bold"
          >
            Reintentar
          </button>
        )}
        <button
          onClick={() => router.push("/child/pairing")}
          className={`touch-target-lg rounded-2xl px-8 py-4 text-xl font-display font-bold ${
            hasChildId
              ? "bg-secondary text-secondary-foreground"
              : "bg-primary text-primary-foreground"
          }`}
        >
          {hasChildId ? "Emparejar otro iPad" : "Ir a emparejar"}
        </button>
      </div>
    </div>
  )
}