"use client"

import { useRouter } from "next/navigation"
import { authClient } from "@/lib/auth-client"

export default function ParentDashboard() {
  const { data: session } = authClient.useSession()
  const router = useRouter()

  if (!session) {
    router.push("/parent/auth/login")
    return null
  }

  return (
    <div className="min-h-dvh p-6">
      <header className="flex items-center justify-between mb-8">
        <div>
          <h1 className="text-2xl font-display font-bold">EduEasy</h1>
          <p className="text-muted-foreground text-sm">
            Bienvenida, {session.user?.name || "Mamá"}
          </p>
        </div>
        <button
          onClick={() => authClient.signOut()}
          className="text-sm text-muted-foreground underline"
        >
          Cerrar sesión
        </button>
      </header>

      <div className="grid grid-cols-2 gap-4 max-w-lg">
        <div className="bg-white rounded-2xl p-4 shadow-sm col-span-2">
          <p className="text-sm text-muted-foreground">Racha actual</p>
          <p className="text-3xl font-display font-bold text-primary">— días</p>
        </div>

        <div className="bg-white rounded-2xl p-4 shadow-sm">
          <p className="text-sm text-muted-foreground">Hoy</p>
          <p className="text-2xl font-display font-bold">— min</p>
        </div>

        <div className="bg-white rounded-2xl p-4 shadow-sm">
          <p className="text-sm text-muted-foreground">Logros</p>
          <p className="text-2xl font-display font-bold">— %</p>
        </div>

        <div className="bg-white rounded-2xl p-4 shadow-sm col-span-2">
          <p className="text-sm text-muted-foreground mb-2">Última sesión</p>
          <p className="text-muted-foreground italic">No hay sesiones todavía</p>
        </div>
      </div>

      <div className="flex flex-col gap-3 mt-6 max-w-lg">
        <button
          onClick={() => router.push("/parent/auth/pairing")}
          className="bg-primary text-primary-foreground touch-target rounded-xl font-display font-semibold"
        >
          Emparejar iPad
        </button>
        <button
          onClick={() => router.push("/parent/configuracion")}
          className="bg-muted text-foreground touch-target rounded-xl font-display"
        >
          Configuración
        </button>
      </div>
    </div>
  )
}