'use client';

import { useSession } from 'next-auth/react';
import { useEffect, useState } from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Users, GraduationCap, BookOpen, Calendar, FileText, School, Building, Clock } from 'lucide-react';
import Link from 'next/link';
import { DashboardLayout } from '@/components/dashboard-layout';
import { Spinner } from '@/components/ui/spinner'

interface DashboardStats {
  teachers: number;
  students: number;
  classes: number;
  sections: number;
  periods: number;
  partials: number;
}

export default function AdminDashboard() {
  const { data: session } = useSession();
  const [stats, setStats] = useState<DashboardStats>({
    teachers: 0,
    students: 0,
    classes: 0,
    sections: 0,
    periods: 0,
    partials: 0,
  });
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchStats();
  }, []);

  const fetchStats = async () => {
    try {
      const response = await fetch('/api/admin/stats');
      if (response.ok) {
        const data = await response.json();
        setStats(data);
      }
    } catch (error) {
      console.error('Error fetching stats:', error);
    } finally {
      setLoading(false);
    }
  };

  const statCards = [
    {
      title: 'Profesores',
      value: stats.teachers,
      icon: Users,
      color: 'text-blue-600',
      bgColor: 'bg-blue-50',
      href: '/admin/teachers',
    },
    {
      title: 'Estudiantes',
      value: stats.students,
      icon: GraduationCap,
      color: 'text-green-600',
      bgColor: 'bg-green-50',
      href: '/admin/students',
    },
    {
      title: 'Clases',
      value: stats.classes,
      icon: BookOpen,
      color: 'text-purple-600',
      bgColor: 'bg-purple-50',
      href: '/admin/classes',
    },
    {
      title: 'Paralelos',
      value: stats.sections,
      icon: School,
      color: 'text-orange-600',
      bgColor: 'bg-orange-50',
      href: '/admin/sections',
    },
    {
      title: 'Periodos',
      value: stats.periods,
      icon: Calendar,
      color: 'text-red-600',
      bgColor: 'bg-red-50',
      href: '/admin/periods',
    },
    {
      title: 'Parciales',
      value: stats.partials,
      icon: FileText,
      color: 'text-indigo-600',
      bgColor: 'bg-indigo-50',
      href: '/admin/partials',
    },
  ];

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <Spinner size="lg" />
      </div>
    );
  }

  const breadcrumbs = [
    { label: "Dashboard" }
  ]

  return (
    <DashboardLayout breadcrumbs={breadcrumbs}>
      <div className="space-y-6">
        <div>
          <h1 className="text-3xl font-bold">
            Dashboard Administrativo
          </h1>
          <p>
            Bienvenido, {session?.user?.firstName} {session?.user?.lastName}
          </p>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
          {statCards.map((card) => {
            const Icon = card.icon;
            return (
              <Link key={card.title} href={card.href}>
                <Card className="hover:shadow-lg transition-shadow cursor-pointer">
                  <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                    <CardTitle className="text-sm font-medium">
                      {card.title}
                    </CardTitle>
                    <div className={`p-2 rounded-full ${card.bgColor}`}>
                      <Icon className={`h-4 w-4 ${card.color}`} />
                    </div>
                  </CardHeader>
                  <CardContent>
                    <div className="text-2xl font-bold">{card.value}</div>
                    <p className="text-xs text-muted-foreground">
                      Total registrado
                    </p>
                  </CardContent>
                </Card>
              </Link>
            );
          })}
        </div>

        {/* <div className="mb-8">
          <h2 className="text-2xl font-bold text-gray-900 mb-6">Gestión del Sistema</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <Link href="/admin/teachers">
              <Card className="hover:shadow-md transition-shadow cursor-pointer">
                <CardContent className="p-6">
                  <div className="flex items-center gap-4">
                    <Users className="h-8 w-8 text-blue-600" />
                    <div>
                      <h3 className="font-semibold">Gestionar Profesores</h3>
                      <p className="text-sm text-gray-600">Crear, editar y eliminar profesores</p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </Link>
            
            <Link href="/admin/students">
              <Card className="hover:shadow-md transition-shadow cursor-pointer">
                <CardContent className="p-6">
                  <div className="flex items-center gap-4">
                    <GraduationCap className="h-8 w-8 text-green-600" />
                    <div>
                      <h3 className="font-semibold">Gestionar Estudiantes</h3>
                      <p className="text-sm text-gray-600">Crear, editar y eliminar estudiantes</p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </Link>
            
            <Link href="/admin/periods">
              <Card className="hover:shadow-md transition-shadow cursor-pointer">
                <CardContent className="p-6">
                  <div className="flex items-center gap-4">
                    <Calendar className="h-8 w-8 text-purple-600" />
                    <div>
                      <h3 className="font-semibold">Períodos Académicos</h3>
                      <p className="text-sm text-gray-600">Gestionar períodos académicos</p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </Link>
            
            <Link href="/admin/classes">
              <Card className="hover:shadow-md transition-shadow cursor-pointer">
                <CardContent className="p-6">
                  <div className="flex items-center gap-4">
                    <BookOpen className="h-8 w-8 text-orange-600" />
                    <div>
                      <h3 className="font-semibold">Gestionar Clases</h3>
                      <p className="text-sm text-gray-600">Crear y administrar clases</p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </Link>
            
            <Link href="/admin/sections">
              <Card className="hover:shadow-md transition-shadow cursor-pointer">
                <CardContent className="p-6">
                  <div className="flex items-center gap-4">
                    <Building className="h-8 w-8 text-indigo-600" />
                    <div>
                      <h3 className="font-semibold">Gestionar Paralelos</h3>
                      <p className="text-sm text-gray-600">Crear y administrar paralelos</p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </Link>
            
            <Link href="/admin/partials">
              <Card className="hover:shadow-md transition-shadow cursor-pointer">
                <CardContent className="p-6">
                  <div className="flex items-center gap-4">
                    <Clock className="h-8 w-8 text-red-600" />
                    <div>
                      <h3 className="font-semibold">Gestionar Parciales</h3>
                      <p className="text-sm text-gray-600">Configurar períodos de parciales</p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </Link>
          </div>
        </div> */}
      </div>
    </DashboardLayout>
  );
}