"use client";

import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import { AuthGuard } from "@/components/auth-guard";
import { DashboardLayout } from "@/components/dashboard-layout";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Plus, Search, Pencil, Trash2, CircleX } from "lucide-react";
import { AddClassDialog } from "@/components/classes/add-class-dialog";
import { EditClassDialog } from "@/components/classes/edit-class-dialog";
import type { Class } from "@/lib/types";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { getAuthToken } from "@/lib/auth";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Alert, AlertDescription } from "@/components/ui/alert";

export default function ClassesPage() {
  const [classes, setClasses] = useState<Class[]>([]);
  const [searchQuery, setSearchQuery] = useState("");
  const [addDialogOpen, setAddDialogOpen] = useState(false);
  const [editDialogOpen, setEditDialogOpen] = useState(false);
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [selectedClass, setSelectedClass] = useState<Class | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const router = useRouter();

  // Fetch classes from the backend
  const fetchClasses = async () => {
    try {
      setLoading(true);
      const token = getAuthToken();
      if (!token) {
        setError("Vous devez être connecté pour voir les classes");
        router.push("/login");
        return;
      }
      const response = await fetch("/api/classes", {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      });
      if (!response.ok) {
        const errorData = await response.json();
        if (response.status === 401) {
          setError("Session expirée. Veuillez vous reconnecter.");
          router.push("/login");
          return;
        }
        if (response.status === 403) {
          setError("Accès refusé. Jeton invalide ou rôle insuffisant.");
          router.push("/login");
          return;
        }
        throw new Error(errorData.error || `Échec de la récupération des classes : ${response.status}`);
      }
      const data = await response.json();
      if (!Array.isArray(data)) {
        throw new Error(`Attendu un tableau de classes, reçu : ${JSON.stringify(data)}`);
      }
      setClasses(data);
      setError(null);
    } catch (err: any) {
      setError(err.message || "Erreur lors de la récupération des classes");
    } finally {
      setLoading(false);
    }
  };

  // Fetch classes on component mount
  useEffect(() => {
    fetchClasses();
  }, [router]);

  // Filter classes locally based on search query
  const filteredClasses = classes.filter((cls) =>
    cls.name.toLowerCase().includes(searchQuery.toLowerCase())
  );

  // Add a new class via API
  const handleAddClass = async (cls: Omit<Class, "id">) => {
    try {
      const token = getAuthToken();
      if (!token) {
        setError("Vous devez être connecté pour ajouter une classe");
        router.push("/login");
        return;
      }
      const response = await fetch("/api/classes", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${token}`,
        },
        body: JSON.stringify(cls),
      });
      if (!response.ok) {
        const errorData = await response.json();
        if (response.status === 401) {
          setError("Session expirée. Veuillez vous reconnecter.");
          router.push("/login");
          return;
        }
        if (response.status === 403) {
          setError("Accès refusé. Jeton invalide ou rôle insuffisant.");
          router.push("/login");
          return;
        }
        throw new Error(errorData.error || `Échec de la création de la classe : ${response.status}`);
      }
      await response.json();
      await fetchClasses();
      setAddDialogOpen(false);
      setError(null);
    } catch (err: any) {
      setError(err.message || "Erreur lors de la création de la classe");
    }
  };

  // Edit a class via API
  const handleEditClass = async (updatedClass: Class) => {
    try {
      const token = getAuthToken();
      if (!token) {
        setError("Vous devez être connecté pour modifier une classe");
        router.push("/login");
        return;
      }
      const response = await fetch(`/api/classes/${updatedClass.id}`, {
        method: "PUT",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${token}`,
        },
        body: JSON.stringify(updatedClass),
      });
      if (!response.ok) {
        const errorData = await response.json();
        if (response.status === 401) {
          setError("Session expirée. Veuillez vous reconnecter.");
          router.push("/login");
          return;
        }
        if (response.status === 403) {
          setError("Accès refusé. Jeton invalide ou rôle insuffisant.");
          router.push("/login");
          return;
        }
        throw new Error(errorData.error || `Échec de la mise à jour de la classe : ${response.status}`);
      }
      await response.json();
      await fetchClasses();
      setEditDialogOpen(false);
      setSelectedClass(null);
      setError(null);
    } catch (err: any) {
      setError(err.message || "Erreur lors de la mise à jour de la classe");
    }
  };

  // Delete a class via API
  const handleDeleteClass = async (id: number) => {
    try {
      const token = getAuthToken();
      if (!token) {
        setError("Vous devez être connecté pour supprimer une classe");
        router.push("/login");
        return;
      }
      const response = await fetch(`/api/classes/${id}`, {
        method: "DELETE",
        headers: {
          Authorization: `Bearer ${token}`,
        },
      });
      if (!response.ok) {
        const errorData = await response.json();
        if (response.status === 401) {
          setError("Session expirée. Veuillez vous reconnecter.");
          router.push("/login");
          return;
        }
        if (response.status === 403) {
          setError("Accès refusé. Jeton invalide ou rôle insuffisant.");
          router.push("/login");
          return;
        }
        throw new Error(errorData.error || `Échec de la suppression de la classe : ${response.status}`);
      }
      await fetchClasses();
      setDeleteDialogOpen(false);
      setSelectedClass(null);
      setError(null);
    } catch (err: any) {
      setError(err.message || "Erreur lors de la suppression de la classe");
    }
  };

  const openDeleteDialog = (cls: Class) => {
    setSelectedClass(cls);
    setDeleteDialogOpen(true);
  };

  return (
    <AuthGuard allowedRoles={["admin"]}>
      <DashboardLayout>
        <div className="space-y-6">
          {error && (
            <Alert variant="destructive">
              <CircleX className="h-4 w-4" />
              <AlertDescription>{error}</AlertDescription>
            </Alert>
          )}

          <div className="flex items-center justify-between">
            <div className="hidden md:block">
              <h1 className="text-3xl font-semibold tracking-tight">Classes</h1>
              <p className="text-muted-foreground">Gérer les informations des classes</p>
            </div>
            <div className="space-x-2">
              <Button onClick={() => setAddDialogOpen(true)}>
                <Plus className="mr-2 h-4 w-4" />
                Ajouter une classe
              </Button>
            </div>
          </div>

          <div className="flex items-center gap-4">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
              <Input
                placeholder="Rechercher des classes par nom..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="pl-10 bg-background"
              />
            </div>
            <div className="text-sm text-muted-foreground">
              {filteredClasses.length} sur {classes.length} classes
            </div>
          </div>

          <div className="rounded-lg border border-border bg-card">
            <ScrollArea className="w-96 md:w-auto lg:w-full">
              <Table>
                <TableHeader>
                  <TableRow className="hover:bg-transparent border-border">
                    <TableHead>Nom</TableHead>
                    <TableHead className="text-right">Actions</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {loading ? (
                    <TableRow>
                      <TableCell colSpan={2} className="text-center text-muted-foreground">
                        Chargement...
                      </TableCell>
                    </TableRow>
                  ) : filteredClasses.length === 0 ? (
                    <TableRow>
                      <TableCell colSpan={2} className="text-center text-muted-foreground">
                        Aucune classe trouvée
                      </TableCell>
                    </TableRow>
                  ) : (
                    filteredClasses.map((cls) => (
                      <TableRow key={cls.id} className="border-border">
                        <TableCell className="font-medium">{cls.name}</TableCell>
                        <TableCell className="text-right">
                          <div className="flex justify-end gap-2">
                            <Button
                              variant="ghost"
                              size="icon"
                              onClick={() => {
                                setSelectedClass(cls);
                                setEditDialogOpen(true);
                              }}
                            >
                              <Pencil className="h-4 w-4" />
                            </Button>
                            <Button
                              variant="ghost"
                              size="icon"
                              onClick={() => openDeleteDialog(cls)}
                            >
                              <Trash2 className="h-4 w-4 text-destructive" />
                            </Button>
                          </div>
                        </TableCell>
                      </TableRow>
                    ))
                  )}
                </TableBody>
              </Table>
              <ScrollBar orientation="horizontal" />
            </ScrollArea>
          </div>
        </div>

        <AddClassDialog open={addDialogOpen} onOpenChange={setAddDialogOpen} onAdd={handleAddClass} />
        {selectedClass && (
          <EditClassDialog
            open={editDialogOpen}
            onOpenChange={setEditDialogOpen}
            cls={selectedClass}
            onEdit={handleEditClass}
          />
        )}
        {selectedClass && (
          <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
            <DialogContent className="w-[90vw] max-w-md bg-card">
              <DialogHeader>
                <DialogTitle>Supprimer la classe</DialogTitle>
                <DialogDescription>
                  Êtes-vous sûr de vouloir supprimer la classe <strong>{selectedClass.name}</strong> ? Cette action est irréversible.
                </DialogDescription>
              </DialogHeader>
              <div className="flex justify-end gap-2 mt-4">
                <Button variant="outline" onClick={() => setDeleteDialogOpen(false)}>
                  Annuler
                </Button>
                <Button
                  variant="destructive"
                  onClick={() => {
                    handleDeleteClass(selectedClass.id);
                    setDeleteDialogOpen(false);
                  }}
                >
                  Supprimer
                </Button>
              </div>
            </DialogContent>
          </Dialog>
        )}
      </DashboardLayout>
    </AuthGuard>
  );
}