"use client";

import { useState, useEffect } from "react";
import { AuthGuard } from "@/components/auth-guard";
import { DashboardLayout } from "@/components/dashboard-layout";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Users, UserCheck, Calendar, FileText, CircleX, Loader2 } from "lucide-react";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { getAuthToken } from "@/lib/auth";
import { format } from "date-fns";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";

interface DashboardData {
  totalStudents: number;
  totalObservers: number;
  todayAttendance: number;
  todayAbsences: number;
}

interface ClassStatus {
  class: string;
  status: { name: string; checked: "Oui" | "Non" }[];
}

export default function DashboardPage() {
  const [data, setData] = useState<DashboardData>({
    totalStudents: 0,
    totalObservers: 0,
    todayAttendance: 0,
    todayAbsences: 0,
  });
  const [classStatus, setClassStatus] = useState<ClassStatus[]>([]);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);

  const timeSlots = [
    { name: "08:00-10:00", start: 8, end: 10 },
    { name: "10:00-12:00", start: 10, end: 12 },
    { name: "12:00-14:00", start: 12, end: 14 },
  ];

  const fetchDashboardData = async () => {
    setLoading(true);
    setError(null);
    try {
      const token = getAuthToken();
      if (!token) {
        setError("Aucun jeton d'authentification trouvé");
        setLoading(false);
        return;
      }

      // Fetch total students
      const studentsResponse = await fetch("/api/students", {
        headers: { Authorization: `Bearer ${token}` },
      });
      if (!studentsResponse.ok) {
        throw new Error("Échec de la récupération des étudiants");
      }
      const students = await studentsResponse.json();
      const totalStudents = students.length;

      // Fetch total observers
      const observersResponse = await fetch("/api/users/observers", {
        headers: { Authorization: `Bearer ${token}` },
      });
      if (!observersResponse.ok) {
        throw new Error("Échec de la récupération des observateurs");
      }
      const observers = await observersResponse.json();
      const totalObservers = observers.length;

      // Fetch today's attendance
      const today = format(new Date(), "yyyy-MM-dd");
      const attendanceResponse = await fetch(
        `/api/attendance?startDate=${today} 00:00:00&endDate=${today} 23:59:59&status=présent`,
        {
          headers: { Authorization: `Bearer ${token}` },
        }
      );
      if (!attendanceResponse.ok) {
        throw new Error("Échec de la récupération des présences d'aujourd'hui");
      }
      const attendance = await attendanceResponse.json();
      const todayAttendance = attendance.length;

      // Fetch today's absences
      const absencesResponse = await fetch(
        `/api/attendance?startDate=${today} 00:00:00&endDate=${today} 23:59:59&status=absent`,
        {
          headers: { Authorization: `Bearer ${token}` },
        }
      );
      if (!absencesResponse.ok) {
        throw new Error("Échec de la récupération des absences d'aujourd'hui");
      }
      const absences = await absencesResponse.json();
      const todayAbsences = absences.length;

      // Fetch class status
      const classStatusResponse = await fetch("/api/attendance/class-status", {
        headers: { Authorization: `Bearer ${token}` },
      });
      if (!classStatusResponse.ok) {
        const errorData = await classStatusResponse.json();
        throw new Error(`Échec de la récupération de l'état des classes: ${errorData.details || classStatusResponse.statusText}`);
      }
      const classStatusData = await classStatusResponse.json();
      console.log("Class status data:", classStatusData); // Debug log

      setData({
        totalStudents,
        totalObservers,
        todayAttendance,
        todayAbsences,
      });
      setClassStatus(classStatusData);
    } catch (err: any) {
      console.error("Fetch error:", err); // Debug log
      setError(`Erreur lors du chargement des données: ${err.message}`);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchDashboardData();
    const interval = setInterval(fetchDashboardData, 100000); // Poll every 30 seconds
    return () => clearInterval(interval);
  }, []);

  return (
    <AuthGuard allowedRoles={["admin"]}>
      <DashboardLayout>
        <div className="space-y-6">
          <div className="hidden md:block">
            <h1 className="text-3xl font-semibold tracking-tight">Tableau de bord</h1>
            <p className="text-muted-foreground">Bienvenue dans le système de gestion des absences des étudiants</p>
          </div>

          {error && (
            <Alert variant="destructive">
              <CircleX size={16} />
              <AlertDescription>{error}</AlertDescription>
            </Alert>
          )}

          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
            <Card className="border-border">
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Total des élèves maîtres</CardTitle>
                <Users className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{loading ? "..." : data.totalStudents}</div>
                <p className="text-xs text-muted-foreground">Élèves-maîtres</p>
              </CardContent>
            </Card>

            <Card className="border-border">
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Surveillants</CardTitle>
                <UserCheck className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{loading ? "..." : data.totalObservers}</div>
                <p className="text-xs text-muted-foreground">Surveillants actifs</p>
              </CardContent>
            </Card>

            <Card className="border-border">
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Présences aujourd'hui</CardTitle>
                <Calendar className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{loading ? "..." : data.todayAttendance}</div>
                <p className="text-xs text-muted-foreground">Enregistrements soumis</p>
              </CardContent>
            </Card>

            <Card className="border-border">
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Absences aujourd'hui</CardTitle>
                <FileText className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{loading ? "..." : data.todayAbsences}</div>
                <p className="text-xs text-muted-foreground">Aujourd'hui</p>
              </CardContent>
            </Card>
          </div>

          <div className="grid gap-4">
            <Card className="border-border w-96 md:w-full lg:w-full">
              <CardHeader>
                <CardTitle>État des classes</CardTitle>
                <CardDescription>Vérifiez si chaque classe a été contrôlée aujourd’hui</CardDescription>
              </CardHeader>
              <CardContent>
                {loading ? (
                  <div className="flex min-h-40 items-center justify-center">
                    <div className="flex items-center gap-2">
                      <Loader2 className="h-5 w-5 animate-spin text-primary" />
                      <span className="text-sm font-medium">Chargement...</span>
                    </div>
                  </div>
                ) : classStatus.length === 0 ? (
                  <p>Aucune donnée disponible pour aujourd'hui.</p>
                ) : (
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>Classe</TableHead>
                        {timeSlots.map((slot) => (
                          <TableHead key={slot.name}>{slot.name}</TableHead>
                        ))}
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {classStatus.map((item) => (
                        <TableRow key={item.class}>
                          <TableCell>{item.class}</TableCell>
                          {item.status.map((status, index) => (
                            <TableCell key={index}>
                              <Badge variant={status.checked === "Oui" ? "default" : "destructive"}>
                                {status.checked}
                              </Badge>
                            </TableCell>
                          ))}
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                )}
              </CardContent>
            </Card>
          </div>
        </div>
      </DashboardLayout>
    </AuthGuard>
  );
}