import { useState } from "react";
import { trpc } from "@/lib/trpc";
import DashboardLayout from "@/components/DashboardLayout";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { toast } from "sonner";
import { Pencil, Trash2, Mail, User, AlertCircle, CheckCircle2 } from "lucide-react";

export default function AdminFormateurs() {

  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
  const [selectedFormateur, setSelectedFormateur] = useState<{
    id: number;
    nom: string;
    email: string | null;
  } | null>(null);
  const [formData, setFormData] = useState({
    nom: "",
    email: "",
  });

  const { data: formateurs, isLoading, refetch } = trpc.formateurs.list.useQuery();

  const updateMutation = trpc.formateurs.update.useMutation({
    onSuccess: () => {
      toast.success("Formateur mis à jour avec succès");
      setIsEditDialogOpen(false);
      setSelectedFormateur(null);
      refetch();
    },
    onError: (error) => {
      toast.error(`Erreur: ${error.message}`);
    },
  });
  const deleteMutation = trpc.formateurs.delete.useMutation({
    onSuccess: () => {
      toast.success("Formateur supprimé avec succès");
      setIsDeleteDialogOpen(false);
      setSelectedFormateur(null);
      refetch();
    },
    onError: (error) => {
      toast.error(`Erreur: ${error.message}`);
    },
  });



  const handleEdit = () => {
    if (!selectedFormateur) return;
    if (!formData.nom.trim()) {
      toast.error("Le nom est obligatoire");
      return;
    }
    updateMutation.mutate({
      id: selectedFormateur.id,
      nom: formData.nom.trim(),
      email: formData.email.trim() || null,
    });
  };

  const handleDelete = () => {
    if (!selectedFormateur) return;
    deleteMutation.mutate({ id: selectedFormateur.id });
  };

  const openEditDialog = (formateur: { id: number; nom: string; email: string | null }) => {
    setSelectedFormateur(formateur);
    setFormData({
      nom: formateur.nom,
      email: formateur.email || "",
    });
    setIsEditDialogOpen(true);
  };

  const openDeleteDialog = (formateur: { id: number; nom: string; email: string | null }) => {
    setSelectedFormateur(formateur);
    setIsDeleteDialogOpen(true);
  };

  const formateursSansEmail = formateurs?.filter((f) => !f.email) || [];
  const formateursAvecEmail = formateurs?.filter((f) => f.email) || [];

  return (
    <DashboardLayout>
      <div className="space-y-6">
        <div>
          <h1 className="text-2xl font-bold page-title">Gestion des Formateurs</h1>
          <p className="text-muted-foreground">
            Gérez les formateurs et leurs adresses email pour les notifications
          </p>
          <Card className="mt-4 border-blue-200 bg-blue-50">
            <CardContent className="pt-4">
              <p className="text-sm text-blue-700">
                <strong>Note :</strong> Pour créer un nouveau formateur, rendez-vous dans <strong>Configuration &gt; Utilisateurs</strong> et créez un compte avec le rôle "Formateur". Les formateurs créés apparaîtront automatiquement ici.
              </p>
            </CardContent>
          </Card>
        </div>

        {/* Alerte si des formateurs n'ont pas d'email */}
        {formateursSansEmail.length > 0 && (
          <Card className="border-orange-200 bg-orange-50">
            <CardHeader className="pb-2">
              <CardTitle className="text-orange-700 flex items-center gap-2 text-base">
                <AlertCircle className="h-5 w-5" />
                Formateurs sans email ({formateursSansEmail.length})
              </CardTitle>
              <CardDescription className="text-orange-600">
                Ces formateurs ne recevront pas les notifications d'inscription et d'annulation.
                Ajoutez leur adresse email pour activer les notifications.
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="flex flex-wrap gap-2">
                {formateursSansEmail.map((f) => (
                  <Badge
                    key={f.id}
                    variant="outline"
                    className="cursor-pointer hover:bg-orange-100 border-orange-300"
                    onClick={() => openEditDialog(f)}
                  >
                    {f.nom}
                  </Badge>
                ))}
              </div>
            </CardContent>
          </Card>
        )}

        {/* Statistiques */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-sm font-medium text-muted-foreground">
                Total formateurs
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="flex items-center gap-2">
                <User className="h-5 w-5 text-blue-500" />
                <span className="text-2xl font-bold">{formateurs?.length || 0}</span>
              </div>
            </CardContent>
          </Card>
          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-sm font-medium text-muted-foreground">
                Avec email configuré
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="flex items-center gap-2">
                <CheckCircle2 className="h-5 w-5 text-green-500" />
                <span className="text-2xl font-bold">{formateursAvecEmail.length}</span>
              </div>
            </CardContent>
          </Card>
          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-sm font-medium text-muted-foreground">
                Sans email (pas de notifications)
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="flex items-center gap-2">
                <AlertCircle className="h-5 w-5 text-orange-500" />
                <span className="text-2xl font-bold">{formateursSansEmail.length}</span>
              </div>
            </CardContent>
          </Card>
        </div>

        {/* Tableau des formateurs */}
        <Card>
          <CardHeader>
            <CardTitle>Liste des formateurs</CardTitle>
            <CardDescription>
              Cliquez sur un formateur pour modifier ses informations
            </CardDescription>
          </CardHeader>
          <CardContent>
            {isLoading ? (
              <div className="text-center py-8 text-muted-foreground">
                Chargement...
              </div>
            ) : formateurs?.length === 0 ? (
              <div className="text-center py-8 text-muted-foreground">
                Aucun formateur enregistré
              </div>
            ) : (
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Nom</TableHead>
                    <TableHead>Email</TableHead>
                    <TableHead>Notifications</TableHead>
                    <TableHead className="text-right">Actions</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {formateurs?.map((formateur, index) => (
                    <TableRow key={formateur.id} className={index % 2 === 1 ? "bg-blue-50/70" : ""}>
                      <TableCell className="font-medium">{formateur.nom}</TableCell>
                      <TableCell>
                        {formateur.email ? (
                          <div className="flex items-center gap-2">
                            <Mail className="h-4 w-4 text-muted-foreground" />
                            {formateur.email}
                          </div>
                        ) : (
                          <span className="text-muted-foreground italic">Non renseigné</span>
                        )}
                      </TableCell>
                      <TableCell>
                        {formateur.email ? (
                          <Badge variant="default" className="bg-green-500">
                            <CheckCircle2 className="h-3 w-3 mr-1" />
                            Activées
                          </Badge>
                        ) : (
                          <Badge variant="outline" className="text-orange-600 border-orange-300">
                            <AlertCircle className="h-3 w-3 mr-1" />
                            Désactivées
                          </Badge>
                        )}
                      </TableCell>
                      <TableCell className="text-right">
                        <div className="flex justify-end gap-2">
                          <Button
                            variant="ghost"
                            size="icon"
                            onClick={() => openEditDialog(formateur)}
                            className="text-blue-600 hover:text-blue-700"
                          >
                            <Pencil className="h-4 w-4" />
                          </Button>
                          <Button
                            variant="ghost"
                            size="icon"
                            onClick={() => openDeleteDialog(formateur)}
                            className="text-red-600 hover:text-red-700"
                          >
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            )}
          </CardContent>
        </Card>



        {/* Dialog de modification */}
        <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>Modifier le formateur</DialogTitle>
              <DialogDescription>
                Modifiez les informations du formateur. L'email est nécessaire pour recevoir
                les notifications.
              </DialogDescription>
            </DialogHeader>
            <div className="space-y-4 py-4">
              <div className="space-y-2">
                <Label htmlFor="edit-nom">Nom complet *</Label>
                <Input
                  id="edit-nom"
                  value={formData.nom}
                  onChange={(e) => setFormData({ ...formData, nom: e.target.value })}
                  placeholder="Jean Dupont"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="edit-email">Adresse email</Label>
                <Input
                  id="edit-email"
                  type="email"
                  value={formData.email}
                  onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                  placeholder="jean.dupont@exemple.fr"
                />
                <p className="text-sm text-muted-foreground">
                  Sans email, le formateur ne recevra pas les notifications d'inscription et
                  d'annulation.
                </p>
              </div>
            </div>
            <DialogFooter>
              <Button variant="outline" onClick={() => setIsEditDialogOpen(false)}>
                Annuler
              </Button>
              <Button onClick={handleEdit} disabled={updateMutation.isPending}>
                {updateMutation.isPending ? "Enregistrement..." : "Enregistrer"}
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>

        {/* Dialog de suppression */}
        <AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
          <AlertDialogContent>
            <AlertDialogHeader>
              <AlertDialogTitle>Supprimer le formateur ?</AlertDialogTitle>
              <AlertDialogDescription>
                Êtes-vous sûr de vouloir supprimer le formateur "{selectedFormateur?.nom}" ?
                Cette action est irréversible.
              </AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
              <AlertDialogCancel>Annuler</AlertDialogCancel>
              <AlertDialogAction
                onClick={handleDelete}
                className="bg-red-600 hover:bg-red-700"
              >
                Supprimer
              </AlertDialogAction>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialog>
      </div>
    </DashboardLayout>
  );
}