"use client";

import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Users, Calendar, Target, Activity, LogOut, ClipboardList, AlertTriangle, LayoutGrid, FileText, Trophy, BarChart3, CalendarDays, FileSpreadsheet } 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 DashboardProfesorProps {
  user: DashboardUser;
}

export function DashboardProfesor({ user }: DashboardProfesorProps) {
  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">
            Panel del Profesor
          </h2>
          <p className="text-gray-600">Gestión de tus categorías y alumnos</p>
        </div>

        {/* Quick Actions for Professor */}
        <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">
                <Users className="w-5 h-5 text-blue-600" />
                Mis Alumnos
              </CardTitle>
              <CardDescription>
                Ver y evaluar alumnos de tus categorías
              </CardDescription>
            </CardHeader>
            <CardContent>
              <Button
                className="w-full"
                onClick={() => router.push("/dashboard/alumnos")}
              >
                Ver Alumnos
              </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" />
                Tomar Asistencia
              </CardTitle>
              <CardDescription>
                Registrar asistencia de entrenamientos
              </CardDescription>
            </CardHeader>
            <CardContent>
              <Button
                className="w-full"
                onClick={() => router.push("/dashboard/asistencias")}
              >
                Tomar Asistencia
              </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" />
                Evaluaciones
              </CardTitle>
              <CardDescription>
                Realizar evaluaciones físicas y deportivas
              </CardDescription>
            </CardHeader>
            <CardContent>
              <Button
                className="w-full"
                onClick={() => router.push("/dashboard/evaluaciones")}
              >
                Evaluar
              </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" />
                Objetivos Individuales
              </CardTitle>
              <CardDescription>
                Establecer y seguir objetivos personalizados
              </CardDescription>
            </CardHeader>
            <CardContent>
              <Button
                className="w-full"
                onClick={() => router.push("/dashboard/objetivos")}
              >
                Gestionar Objetivos
              </Button>
            </CardContent>
          </Card>

          <Card className="hover:shadow-md transition-shadow">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <ClipboardList className="w-5 h-5 text-teal-600" />
                Consola de Alumnos
              </CardTitle>
              <CardDescription>
                Ver información completa de cada alumno
              </CardDescription>
            </CardHeader>
            <CardContent>
              <Button
                className="w-full"
                onClick={() => router.push("/dashboard/perfil-alumno")}
              >
                Ver Perfiles
              </Button>
            </CardContent>
          </Card>

          <Card className="hover:shadow-md transition-shadow">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <AlertTriangle className="w-5 h-5 text-red-600" />
                Emergencias
              </CardTitle>
              <CardDescription>
                Contactos de emergencia y centros de salud
              </CardDescription>
            </CardHeader>
            <CardContent>
              <Button
                className="w-full bg-red-600 hover:bg-red-700"
                onClick={() => router.push("/dashboard/emergencias")}
              >
                Ver Emergencias
              </Button>
            </CardContent>
          </Card>

          <Card className="hover:shadow-md transition-shadow">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <LayoutGrid className="w-5 h-5 text-green-600" />
                Alineaciones
              </CardTitle>
              <CardDescription>
                Crear formaciones tácticas para partidos
              </CardDescription>
            </CardHeader>
            <CardContent>
              <Button
                className="w-full"
                onClick={() => router.push("/dashboard/alineaciones")}
              >
                Crear Alineación
              </Button>
            </CardContent>
          </Card>

          <Card className="hover:shadow-md transition-shadow">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <FileText className="w-5 h-5 text-blue-600" />
                Fichas de Partido
              </CardTitle>
              <CardDescription>
                Registrar partidos, goles y tarjetas
              </CardDescription>
            </CardHeader>
            <CardContent>
              <Button
                className="w-full"
                onClick={() => router.push("/dashboard/fichas-partido")}
              >
                Ver Fichas
              </Button>
            </CardContent>
          </Card>

          <Card className="hover:shadow-md transition-shadow">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Trophy className="w-5 h-5 text-amber-600" />
                Campeonatos
              </CardTitle>
              <CardDescription>
                Ver competencias y registrar partidos
              </CardDescription>
            </CardHeader>
            <CardContent>
              <Button
                className="w-full"
                onClick={() => router.push("/dashboard/campeonatos")}
              >
                Ver Campeonatos
              </Button>
            </CardContent>
          </Card>

          <Card className="hover:shadow-md transition-shadow">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <BarChart3 className="w-5 h-5 text-indigo-600" />
                Estadísticas
              </CardTitle>
              <CardDescription>
                Métricas y resumen general
              </CardDescription>
            </CardHeader>
            <CardContent>
              <Button
                className="w-full"
                onClick={() => router.push("/dashboard/estadisticas")}
              >
                Ver Estadísticas
              </Button>
            </CardContent>
          </Card>

          <Card className="hover:shadow-md transition-shadow">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <CalendarDays className="w-5 h-5 text-cyan-600" />
                Planificación
              </CardTitle>
              <CardDescription>
                Programación de actividades
              </CardDescription>
            </CardHeader>
            <CardContent>
              <Button
                className="w-full"
                onClick={() => router.push("/dashboard/planificacion")}
              >
                Ver Planificación
              </Button>
            </CardContent>
          </Card>

          <Card className="hover:shadow-md transition-shadow">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <FileSpreadsheet className="w-5 h-5 text-emerald-600" />
                Documentos y Reportes
              </CardTitle>
              <CardDescription>
                Genera fichas y reportes de alumnos
              </CardDescription>
            </CardHeader>
            <CardContent>
              <Button
                className="w-full"
                onClick={() => router.push("/dashboard/documentos")}
              >
                Generar Reportes
              </Button>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  );
}