import DashboardLayout from "@/components/DashboardLayout";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { trpc } from "@/lib/trpc";
import { Plus, Pencil, Trash2, Search, SlidersHorizontal, Eye } from "lucide-react";
import { useState, useMemo } from "react";
import { useLocation } from "wouter";
import { toast } from "sonner";
import { Skeleton } from "@/components/ui/skeleton";

export default function AdminApprenants() {
  const [, setLocation] = useLocation();
  const [open, setOpen] = useState(false);
  const [editingId, setEditingId] = useState<number | null>(null);
  const [searchTerm, setSearchTerm] = useState("");
  const [filterFonction, setFilterFonction] = useState<string>("all");
  const [formData, setFormData] = useState({
    nom: "",
    prenom: "",
    email: "",
    codeEtablissement: "",
    fonction: "autre" as "directeur" | "chef_service" | "autre",
  });

  const utils = trpc.useUtils();
  const { data: apprenants, isLoading } = trpc.apprenants.list.useQuery();

  const createMutation = trpc.apprenants.create.useMutation({
    onSuccess: () => {
      utils.apprenants.list.invalidate();
      toast.success("Apprenant créé avec succès");
      setOpen(false);
      resetForm();
    },
    onError: (error) => {
      toast.error("Erreur lors de la création : " + error.message);
    },
  });

  const updateMutation = trpc.apprenants.update.useMutation({
    onSuccess: () => {
      utils.apprenants.list.invalidate();
      toast.success("Apprenant mis à jour avec succès");
      setOpen(false);
      resetForm();
    },
    onError: (error) => {
      toast.error("Erreur lors de la mise à jour : " + error.message);
    },
  });

  const deleteMutation = trpc.apprenants.delete.useMutation({
    onSuccess: () => {
      utils.apprenants.list.invalidate();
      toast.success("Apprenant supprimé avec succès");
    },
    onError: (error) => {
      toast.error("Erreur lors de la suppression : " + error.message);
    },
  });

  const resetForm = () => {
    setFormData({ nom: "", prenom: "", email: "", codeEtablissement: "", fonction: "autre" });
    setEditingId(null);
  };

  const handleEdit = (apprenant: any) => {
    setFormData({
      nom: apprenant.nom,
      prenom: apprenant.prenom,
      email: apprenant.email,
      codeEtablissement: apprenant.codeEtablissement,
      fonction: apprenant.fonction || "autre",
    });
    setEditingId(apprenant.id);
    setOpen(true);
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (editingId) {
      updateMutation.mutate({ id: editingId, ...formData });
    } else {
      createMutation.mutate(formData);
    }
  };

  const handleDelete = (id: number) => {
    if (confirm("Êtes-vous sûr de vouloir supprimer cet apprenant ?")) {
      deleteMutation.mutate({ id });
    }
  };

  // Filtrer les apprenants
  const filteredApprenants = useMemo(() => {
    if (!apprenants) return [];

    return apprenants.filter(apprenant => {
      const matchesSearch = searchTerm === "" || 
        apprenant.nom.toLowerCase().includes(searchTerm.toLowerCase()) ||
        apprenant.prenom.toLowerCase().includes(searchTerm.toLowerCase()) ||
        apprenant.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
        apprenant.codeEtablissement.toLowerCase().includes(searchTerm.toLowerCase());

      const matchesFonction = filterFonction === "all" || apprenant.fonction === filterFonction;

      return matchesSearch && matchesFonction;
    });
  }, [apprenants, searchTerm, filterFonction]);

  return (
    <DashboardLayout>
      <div className="space-y-6">
        <div className="flex justify-between items-center">
          <div>
            <h1 className="text-3xl font-bold tracking-tight">Apprenants</h1>
            <p className="text-muted-foreground mt-2">
              Gérez les apprenants et leurs informations
            </p>
          </div>
          <Dialog open={open} onOpenChange={(isOpen) => {
            setOpen(isOpen);
            if (!isOpen) resetForm();
          }}>
            <DialogTrigger asChild>
              <Button>
                <Plus className="w-4 h-4 mr-2" />
                Nouvel apprenant
              </Button>
            </DialogTrigger>
            <DialogContent className="sm:max-w-[500px]">
              <form onSubmit={handleSubmit}>
                <DialogHeader>
                  <DialogTitle>
                    {editingId ? "Modifier l'apprenant" : "Nouvel apprenant"}
                  </DialogTitle>
                  <DialogDescription>
                    Ajoutez les informations de l'apprenant
                  </DialogDescription>
                </DialogHeader>
                <div className="space-y-4 py-4">
                  <div className="grid grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="nom">Nom *</Label>
                      <Input
                        id="nom"
                        value={formData.nom}
                        onChange={(e) => setFormData({ ...formData, nom: e.target.value })}
                        placeholder="Dupont"
                        required
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="prenom">Prénom *</Label>
                      <Input
                        id="prenom"
                        value={formData.prenom}
                        onChange={(e) => setFormData({ ...formData, prenom: e.target.value })}
                        placeholder="Jean"
                        required
                      />
                    </div>
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="email">Email *</Label>
                    <Input
                      id="email"
                      type="email"
                      value={formData.email}
                      onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                      placeholder="jean.dupont@example.com"
                      required
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="codeEtablissement">Code établissement *</Label>
                    <Input
                      id="codeEtablissement"
                      value={formData.codeEtablissement}
                      onChange={(e) => setFormData({ ...formData, codeEtablissement: e.target.value })}
                      placeholder="ETB001"
                      required
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="fonction">Fonction *</Label>
                    <Select value={formData.fonction} onValueChange={(value: any) => setFormData({ ...formData, fonction: value })}>
                      <SelectTrigger id="fonction">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="directeur">Directeur</SelectItem>
                        <SelectItem value="chef_service">Chef de service</SelectItem>
                        <SelectItem value="autre">Autre</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>
                <DialogFooter>
                  <Button type="button" variant="outline" onClick={() => setOpen(false)}>
                    Annuler
                  </Button>
                  <Button type="submit" disabled={createMutation.isPending || updateMutation.isPending}>
                    {editingId ? "Mettre à jour" : "Créer"}
                  </Button>
                </DialogFooter>
              </form>
            </DialogContent>
          </Dialog>
        </div>

        {/* Filtres et recherche */}
        <Card className="mb-6">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <SlidersHorizontal className="w-5 h-5" />
              Recherche
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="search">Rechercher un apprenant</Label>
                <div className="relative">
                  <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
                  <Input
                    id="search"
                    placeholder="Nom, prénom, email ou code établissement..."
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                    className="pl-8"
                  />
                </div>
              </div>

              <div className="space-y-2">
                <Label htmlFor="filterFonction">Filtrer par fonction</Label>
                <Select value={filterFonction} onValueChange={setFilterFonction}>
                  <SelectTrigger id="filterFonction">
                    <SelectValue placeholder="Toutes les fonctions" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">Toutes les fonctions</SelectItem>
                    <SelectItem value="directeur">Directeur</SelectItem>
                    <SelectItem value="chef_service">Chef de service</SelectItem>
                    <SelectItem value="autre">Autre</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>

            {/* Compteur de résultats */}
            <div className="mt-4 text-sm text-muted-foreground">
              {filteredApprenants.length} apprenant(s) trouvé(s)
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>Liste des apprenants</CardTitle>
            <CardDescription>
              Gérez les apprenants inscrits aux formations
            </CardDescription>
          </CardHeader>
          <CardContent>
            {isLoading ? (
              <div className="space-y-2">
                <Skeleton className="h-10 w-full" />
                <Skeleton className="h-10 w-full" />
                <Skeleton className="h-10 w-full" />
              </div>
            ) : filteredApprenants && filteredApprenants.length > 0 ? (
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Nom</TableHead>
                    <TableHead>Prénom</TableHead>
                    <TableHead>Email</TableHead>
                    <TableHead>Code établissement</TableHead>
                    <TableHead>Fonction</TableHead>
                    <TableHead>Statut</TableHead>
                    <TableHead className="text-right">Actions</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filteredApprenants.map((apprenant) => (
                    <TableRow key={apprenant.id}>
                      <TableCell className="font-medium">{apprenant.nom}</TableCell>
                      <TableCell>{apprenant.prenom}</TableCell>
                      <TableCell>{apprenant.email}</TableCell>
                      <TableCell>{apprenant.codeEtablissement}</TableCell>
                      <TableCell>
                        <span className={`font-semibold ${
                          apprenant.fonction === "directeur" ? "text-blue-600" :
                          apprenant.fonction === "chef_service" ? "text-green-600" :
                          "text-gray-600"
                        }`}>
                          {apprenant.fonction === "directeur" ? "Directeur" : 
                           apprenant.fonction === "chef_service" ? "Chef de service" : "Autre"}
                        </span>
                      </TableCell>
                      <TableCell>
                        <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
                          apprenant.inscriptions && apprenant.inscriptions.length > 0
                            ? "bg-green-100 text-green-800"
                            : "bg-gray-100 text-gray-800"
                        }`}>
                          {apprenant.inscriptions && apprenant.inscriptions.length > 0 ? "Actif" : "Inactif"}
                        </span>
                      </TableCell>
                      <TableCell className="text-right">
                        <div className="flex justify-end gap-2">
                          <Button
                            variant="ghost"
                            size="icon"
                            onClick={() => setLocation(`/admin/apprenants/${apprenant.id}`)}
                            title="Voir les détails et inscriptions"
                          >
                            <Eye className="w-4 h-4 text-blue-600" />
                          </Button>
                          <Button
                            variant="ghost"
                            size="icon"
                            onClick={() => handleEdit(apprenant)}
                          >
                            <Pencil className="w-4 h-4" />
                          </Button>
                          <Button
                            variant="ghost"
                            size="icon"
                            onClick={() => handleDelete(apprenant.id)}
                          >
                            <Trash2 className="w-4 h-4 text-red-600" />
                          </Button>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            ) : (
              <div className="text-center py-8 text-muted-foreground">
                Aucun apprenant pour le moment. Créez-en un pour commencer.
              </div>
            )}
          </CardContent>
        </Card>
      </div>
    </DashboardLayout>
  );
}