"use client";

import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  User,
  Calendar,
  Activity,
  Target,
  DollarSign,
  LogOut,
} from "lucide-react";
import { signOut } from "next-auth/react";
import { useRouter } from "next/navigation";
import { toast } from "sonner";

interface DashboardUser {
  name?: string | null;
  rol?: string;
  escuela?: string;
}

interface DashboardAlumnoProps {
  user: DashboardUser;
}

export function DashboardAlumno({ user }: DashboardAlumnoProps) {
  const router = useRouter();

  return (
    <div>
      {/* Header */}
      <header className="bg-white shadow-sm border-b">
        <div className="max-w-7xl mx-auto px-4 py-4 flex items-center justify-between">
          <div>
            <h1 className="text-2xl font-bold text-gray-900">{user.escuela}</h1>
            <p className="text-sm text-gray-600">
              Panel de {user.rol} - {user.name || "Usuario"}
            </p>
          </div>
          <Button
            variant="outline"
            onClick={() => signOut({ callbackUrl: "/" })}
            className="flex items-center gap-2"
          >
            <LogOut className="w-4 h-4" />
            Cerrar Sesión
          </Button>
        </div>
      </header>

      {/* Dashboard Content */}
      <div className="max-w-7xl mx-auto px-4 py-8">
        <div className="mb-8">
          <h2 className="text-3xl font-bold text-gray-900 mb-2">
            Mi Panel Personal
          </h2>
          <p className="text-gray-600">Revisa tu información y progreso</p>
        </div>

        {/* Student/Parent Actions */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <Card className="hover:shadow-md transition-shadow">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <User className="w-5 h-5 text-blue-600" />
                Mis Datos Personales
              </CardTitle>
              <CardDescription>
                Información personal y de contacto
              </CardDescription>
            </CardHeader>
            <CardContent>
              <Button
                className="w-full"
                onClick={() => router.push("/dashboard/perfil-alumno")}
              >
                Ver Mi Perfil
              </Button>
            </CardContent>
          </Card>

          <Card className="hover:shadow-md transition-shadow">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Calendar className="w-5 h-5 text-green-600" />
                Mis Asistencias
              </CardTitle>
              <CardDescription>
                Historial de entrenamientos y eventos
              </CardDescription>
            </CardHeader>
            <CardContent>
              <Button
                className="w-full"
                onClick={() => router.push("/dashboard/asistencias")}
              >
                Ver Asistencias
              </Button>
            </CardContent>
          </Card>

          <Card className="hover:shadow-md transition-shadow">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Activity className="w-5 h-5 text-orange-600" />
                Mis Evaluaciones
              </CardTitle>
              <CardDescription>
                Progreso y evaluaciones físicas/deportivas
              </CardDescription>
            </CardHeader>
            <CardContent>
              <Button
                className="w-full"
                onClick={() => router.push("/dashboard/evaluaciones")}
              >
                Ver Evaluaciones
              </Button>
            </CardContent>
          </Card>

          <Card className="hover:shadow-md transition-shadow">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Target className="w-5 h-5 text-purple-600" />
                Mis Objetivos
              </CardTitle>
              <CardDescription>
                Objetivos personales y progreso
              </CardDescription>
            </CardHeader>
            <CardContent>
              <Button
                className="w-full"
                onClick={() => router.push("/dashboard/objetivos")}
              >
                Ver Objetivos
              </Button>
            </CardContent>
          </Card>

          <Card className="hover:shadow-md transition-shadow">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <DollarSign className="w-5 h-5 text-yellow-600" />
                Estado de Pagos
              </CardTitle>
              <CardDescription>
                Matrículas y pagos pendientes
              </CardDescription>
            </CardHeader>
            <CardContent>
              <Button
                className="w-full"
                onClick={() => router.push("/dashboard/finanzas/estado-cuenta")}
              >
                Ver Pagos
              </Button>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  );
}