"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 { AddObserverDialog } from "@/components/observers/add-observer-dialog";
import { EditObserverDialog } from "@/components/observers/edit-observer-dialog";
import type { User } 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 { Badge } from "@/components/ui/badge";
import { Alert, AlertDescription } from "@/components/ui/alert";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";

export default function ObserversPage() {
  const [observers, setObservers] = useState<User[]>([]);
  const [searchQuery, setSearchQuery] = useState("");
  const [addDialogOpen, setAddDialogOpen] = useState(false);
  const [editDialogOpen, setEditDialogOpen] = useState(false);
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [selectedObserver, setSelectedObserver] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const router = useRouter();

  // Fetch observers from the backend
  const fetchObservers = async () => {
    try {
      setLoading(true);
      const token = getAuthToken();
      if (!token) {
        setError("Vous devez être connecté pour voir les surveillants");
        router.push("/login");
        return;
      }
      const response = await fetch(
        `/api/users/observers${searchQuery ? `?search=${encodeURIComponent(searchQuery)}` : ""}`,
        {
          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 surveillants : ${response.status}`);
      }
      const data = await response.json();
      if (!Array.isArray(data)) {
        throw new Error(`Attendu un tableau du surveillant, reçu : ${JSON.stringify(data)}`);
      }
      setObservers(
        data.map((user: any) => ({
          id: user.id,
          email: user.email,
          name: user.name,
          role: user.role,
        }))
      );
      setError(null);
    } catch (err: any) {
      setError(err.message || "Erreur lors de la récupération des surveillants");
    } finally {
      setLoading(false);
    }
  };

  // Fetch observers on mount and when searchQuery changes
  useEffect(() => {
    fetchObservers();
  }, [searchQuery, router]);

  // Add a new observer via API
  const handleAddObserver = async (observer: Omit<User, "id" | "role">) => {
    try {
      const token = getAuthToken();
      if (!token) {
        setError("Vous devez être connecté pour ajouter un surveillant");
        router.push("/login");
        return;
      }
      const response = await fetch("/api/users/observers", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${token}`,
        },
        body: JSON.stringify({
          email: observer.email,
          name: observer.name,
          password: observer.password || "defaultPassword123",
        }),
      });
      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 du surveillant : ${response.status}`);
      }
      await response.json();
      await fetchObservers();
      setAddDialogOpen(false);
      setError(null);
    } catch (err: any) {
      setError(err.message || "Erreur lors de la création du surveillant");
    }
  };

  // Edit an observer via API
  const handleEditObserver = async (updatedObserver: User) => {
    try {
      const token = getAuthToken();
      if (!token) {
        setError("Vous devez être connecté pour modifier un surveillant");
        router.push("/login");
        return;
      }
      const response = await fetch(`/api/users/observers/${updatedObserver.id}`, {
        method: "PUT",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${token}`,
        },
        body: JSON.stringify({
          email: updatedObserver.email,
          name: updatedObserver.name,
          password: updatedObserver.password,
        }),
      });
      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 du surveillant : ${response.status}`);
      }
      await response.json();
      await fetchObservers();
      setEditDialogOpen(false);
      setSelectedObserver(null);
      setError(null);
    } catch (err: any) {
      setError(err.message || "Erreur lors de la mise à jour du surveillant");
    }
  };

  // Open delete dialog
  const openDeleteDialog = (observer: User) => {
    setSelectedObserver(observer);
    setDeleteDialogOpen(true);
  };

  // Delete an observer via API
  const handleDeleteObserver = async (id: number) => {
    try {
      const token = getAuthToken();
      if (!token) {
        setError("Vous devez être connecté pour supprimer un surveillant");
        router.push("/login");
        return;
      }
      const response = await fetch(`/api/users/observers/${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 du surveillant : ${response.status}`);
      }
      await fetchObservers();
      setDeleteDialogOpen(false);
      setSelectedObserver(null);
      setError(null);
    } catch (err: any) {
      setError(err.message || "Erreur lors de la suppression du surveillant");
    }
  };

  return (
    <AuthGuard allowedRoles={["admin"]}>
      <DashboardLayout>
        <div className="space-y-6">
          <div className="flex items-center justify-between">
            <div className="hidden md:block">
              <h1 className="text-3xl font-semibold tracking-tight">Surveillants</h1>
              <p className="text-muted-foreground">Gérer les comptes des surveillants</p>
            </div>
            <Button className="gap-2" onClick={() => setAddDialogOpen(true)}>
              <Plus className="h-4 w-4" />
              Ajouter un surveillant
            </Button>
          </div>

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

          <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 surveillants par nom ou email..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="pl-10 bg-background"
              />
            </div>
            <div className="text-sm text-muted-foreground">
              {observers.length} sur {observers.length} surveillants
            </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>Email</TableHead>
                    <TableHead>Rôle</TableHead>
                    <TableHead className="text-right">Actions</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {loading ? (
                    <TableRow>
                      <TableCell colSpan={4} className="text-center text-muted-foreground">
                        Chargement...
                      </TableCell>
                    </TableRow>
                  ) : observers.length === 0 ? (
                    <TableRow>
                      <TableCell colSpan={4} className="text-center text-muted-foreground">
                        Aucun surveillant trouvé
                      </TableCell>
                    </TableRow>
                  ) : (
                    observers.map((observer) => (
                      <TableRow key={observer.id} className="border-border">
                        <TableCell className="font-medium">{observer.name}</TableCell>
                        <TableCell>{observer.email}</TableCell>
                        <TableCell>
                          <Badge>Surveillant</Badge>
                        </TableCell>
                        <TableCell className="text-right">
                          <div className="flex justify-end gap-2">
                            <Button
                              variant="ghost"
                              size="icon"
                              onClick={() => {
                                setSelectedObserver(observer);
                                setEditDialogOpen(true);
                              }}
                            >
                              <Pencil className="h-4 w-4" />
                            </Button>
                            <Button
                              variant="ghost"
                              size="icon"
                              onClick={() => openDeleteDialog(observer)}
                            >
                              <Trash2 className="h-4 w-4 text-destructive" />
                            </Button>
                          </div>
                        </TableCell>
                      </TableRow>
                    ))
                  )}
                </TableBody>
              </Table>
              <ScrollBar orientation="horizontal" />
            </ScrollArea>
          </div>
        </div>

        <AddObserverDialog open={addDialogOpen} onOpenChange={setAddDialogOpen} onAdd={handleAddObserver} />
        {selectedObserver && (
          <EditObserverDialog
            open={editDialogOpen}
            onOpenChange={setEditDialogOpen}
            observer={selectedObserver}
            onEdit={handleEditObserver}
          />
        )}
        {selectedObserver && (
          <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
            <DialogContent className="w-[90vw] max-w-md bg-card">
              <DialogHeader>
                <DialogTitle>Supprimer le surveillant</DialogTitle>
                <DialogDescription>
                  Êtes-vous sûr de vouloir supprimer le surveillant <strong>{selectedObserver.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={() => {
                    handleDeleteObserver(selectedObserver.id);
                    setDeleteDialogOpen(false);
                  }}
                >
                  Supprimer
                </Button>
              </div>
            </DialogContent>
          </Dialog>
        )}
      </DashboardLayout>
    </AuthGuard>
  );
}