comentario.txt

"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Users, GraduationCap, BookOpen, AlertTriangle, LogOut } from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";

export default function AdminDashboard() {
  const router = useRouter();
  const [adminName, setAdminName] = useState("Administrador");

  // Verificar sesión al entrar
  useEffect(() => {
    const sesion = localStorage.getItem("usuario_escolar");
    if (!sesion) {
        router.push("/login");
        return;
    }
    try {
        const usuario = JSON.parse(sesion);
        if (usuario.rol !== 'admin' && usuario.rol !== 'director') {
             router.push("/login"); // Proteger ruta
        }
        setAdminName(usuario.nombre);
    } catch (e) {
        router.push("/login");
    }
  }, [router]);

  const handleLogout = () => {
      localStorage.removeItem("usuario_escolar");
      router.push("/login");
  };

  return (
    <div className="p-8 space-y-8 bg-gray-50 min-h-screen">
      
      {/* HEADER con Logout */}
      <div className="flex justify-between items-center">
        <div>
            <h1 className="text-3xl font-bold text-gray-800">Panel de Control</h1>
            <p className="text-muted-foreground">Bienvenido, {adminName}</p>
        </div>
        <Button 
            variant="destructive" 
            onClick={handleLogout} 
            className="flex gap-2 items-center"
        >
            <LogOut size={18} /> Cerrar Sesión
        </Button>
      </div>

      {/* Tarjetas de Resumen */}
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        
        <Link href="/admin/usuarios">
            <Card className="hover:bg-white cursor-pointer transition-all hover:shadow-md border-l-4 border-l-blue-500">
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Usuarios</CardTitle>
                <Users className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
                <div className="text-2xl font-bold">Gestionar</div>
                <p className="text-xs text-muted-foreground">Admins y Docentes</p>
            </CardContent>
            </Card>
        </Link>

        <Link href="/admin/docentes">
            <Card className="hover:bg-white cursor-pointer transition-all hover:shadow-md border-l-4 border-l-green-500">
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Docentes</CardTitle>
                <GraduationCap className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
                <div className="text-2xl font-bold">Carga</div>
                <p className="text-xs text-muted-foreground">Asignar Materias</p>
            </CardContent>
            </Card>
        </Link>

        <Link href="/admin/predicciones">
            <Card className="hover:bg-white cursor-pointer transition-all hover:shadow-md border-l-4 border-l-red-500">
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Riesgo Escolar</CardTitle>
                <AlertTriangle className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
                <div className="text-2xl font-bold">IA Monitor</div>
                <p className="text-xs text-muted-foreground">Ver Predicciones</p>
            </CardContent>
            </Card>
        </Link>

        <Link href="/admin/grado">
            <Card className="hover:bg-white cursor-pointer transition-all hover:shadow-md border-l-4 border-l-yellow-500">
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Grados</CardTitle>
                <BookOpen className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
                <div className="text-2xl font-bold">Configurar</div>
                <p className="text-xs text-muted-foreground">Secciones y Cupos</p>
            </CardContent>
            </Card>
        </Link>
      </div>
      
      {/* Accesos Rápidos */}
      <div className="rounded-lg border bg-white text-card-foreground shadow-sm p-6">
          <h3 className="text-lg font-semibold mb-4">Acciones Rápidas</h3>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <Link href="/admin/usuarios" className="flex items-center p-3 rounded hover:bg-gray-100 text-sm text-blue-600 transition-colors">
                 👤 Crear nuevo usuario administrativo &rarr;
              </Link>
              <Link href="/admin/docentes" className="flex items-center p-3 rounded hover:bg-gray-100 text-sm text-blue-600 transition-colors">
                 📚 Asignar materia a profesor &rarr;
              </Link>
              <Link href="/admin/predicciones" className="flex items-center p-3 rounded hover:bg-gray-100 text-sm text-blue-600 transition-colors">
                 🧠 Consultar alertas de deserción &rarr;
              </Link>
          </div>
      </div>
    </div>
  );
}