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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { trpc } from "@/lib/trpc";
import { Plus, Pencil, Trash2, Users as UsersIcon } from "lucide-react";
import { useState } from "react";
import { toast } from "sonner";
import { Skeleton } from "@/components/ui/skeleton";
import { format } from "date-fns";
import { fr } from "date-fns/locale";
import { useLocation } from "wouter";

export default function AdminSessions() {
  const [, setLocation] = useLocation();
  const [open, setOpen] = useState(false);
  const [editingId, setEditingId] = useState<number | null>(null);
  const [formData, setFormData] = useState({
    formationId: "",
    nom: "",
    dateDebut: "",
    dateFin: "",
    lieu: "",
    capaciteMax: "12",
    dateBlocage: "",
    statut: "ouverte" as "ouverte" | "bloquee" | "terminee",
  });

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

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

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

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

  const resetForm = () => {
    setFormData({
      formationId: "",
      nom: "",
      dateDebut: "",
      dateFin: "",
      lieu: "",
      capaciteMax: "12",
      dateBlocage: "",
      statut: "ouverte",
    });
    setEditingId(null);
  };

  const handleEdit = (session: any) => {
    setFormData({
      formationId: session.formationId.toString(),
      nom: session.nom,
      dateDebut: format(new Date(session.dateDebut), "yyyy-MM-dd'T'HH:mm"),
      dateFin: format(new Date(session.dateFin), "yyyy-MM-dd'T'HH:mm"),
      lieu: session.lieu,
      capaciteMax: session.capaciteMax.toString(),
      dateBlocage: format(new Date(session.dateBlocage), "yyyy-MM-dd'T'HH:mm"),
      statut: session.statut,
    });
    setEditingId(session.id);
    setOpen(true);
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const data = {
      formationId: parseInt(formData.formationId),
      nom: formData.nom,
      dateDebut: formData.dateDebut,
      dateFin: formData.dateFin,
      lieu: formData.lieu,
      capaciteMax: parseInt(formData.capaciteMax),
      dateBlocage: formData.dateBlocage,
      statut: formData.statut,
    };

    if (editingId) {
      updateMutation.mutate({ id: editingId, ...data });
    } else {
      createMutation.mutate(data);
    }
  };

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

  const getFormationName = (formationId: number) => {
    return formations?.find(f => f.id === formationId)?.nom || "Formation inconnue";
  };

  const formatDate = (date: Date | string) => {
    return format(new Date(date), "dd/MM/yyyy HH:mm", { locale: fr });
  };

  const getStatutBadge = (statut: string) => {
    const styles = {
      ouverte: "bg-green-100 text-green-800",
      bloquee: "bg-orange-100 text-orange-800",
      terminee: "bg-gray-100 text-gray-800",
    };
    const labels = {
      ouverte: "Ouverte",
      bloquee: "Bloquée",
      terminee: "Terminée",
    };
    return (
      <span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${styles[statut as keyof typeof styles]}`}>
        {labels[statut as keyof typeof labels]}
      </span>
    );
  };

  return (
    <DashboardLayout>
      <div className="space-y-6">
        <div className="flex justify-between items-center">
          <div>
            <h1 className="text-3xl font-bold tracking-tight">Sessions</h1>
            <p className="text-muted-foreground mt-2">
              Gérez les sessions de formation et leurs inscriptions
            </p>
          </div>
          <Dialog open={open} onOpenChange={(isOpen) => {
            setOpen(isOpen);
            if (!isOpen) resetForm();
          }}>
            <DialogTrigger asChild>
              <Button>
                <Plus className="w-4 h-4 mr-2" />
                Nouvelle session
              </Button>
            </DialogTrigger>
            <DialogContent className="sm:max-w-[600px] max-h-[90vh] overflow-y-auto">
              <form onSubmit={handleSubmit}>
                <DialogHeader>
                  <DialogTitle>
                    {editingId ? "Modifier la session" : "Nouvelle session"}
                  </DialogTitle>
                  <DialogDescription>
                    Créez une session avec dates, lieu et capacité
                  </DialogDescription>
                </DialogHeader>
                <div className="space-y-4 py-4">
                  <div className="space-y-2">
                    <Label htmlFor="formationId">Formation *</Label>
                    <Select
                      value={formData.formationId}
                      onValueChange={(value) => setFormData({ ...formData, formationId: value })}
                      required
                    >
                      <SelectTrigger>
                        <SelectValue placeholder="Sélectionnez une formation" />
                      </SelectTrigger>
                      <SelectContent>
                        {formations?.map((formation) => (
                          <SelectItem key={formation.id} value={formation.id.toString()}>
                            {formation.nom}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="nom">Nom de la session *</Label>
                    <Input
                      id="nom"
                      value={formData.nom}
                      onChange={(e) => setFormData({ ...formData, nom: e.target.value })}
                      placeholder="Session 1 - Février 2026"
                      required
                    />
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="dateDebut">Date de début *</Label>
                      <Input
                        id="dateDebut"
                        type="datetime-local"
                        value={formData.dateDebut}
                        onChange={(e) => setFormData({ ...formData, dateDebut: e.target.value })}
                        required
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="dateFin">Date de fin *</Label>
                      <Input
                        id="dateFin"
                        type="datetime-local"
                        value={formData.dateFin}
                        onChange={(e) => setFormData({ ...formData, dateFin: e.target.value })}
                        required
                      />
                    </div>
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="lieu">Lieu *</Label>
                    <Input
                      id="lieu"
                      value={formData.lieu}
                      onChange={(e) => setFormData({ ...formData, lieu: e.target.value })}
                      placeholder="Salle de formation A, Bâtiment principal"
                      required
                    />
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="capaciteMax">Capacité maximale *</Label>
                      <Input
                        id="capaciteMax"
                        type="number"
                        min="1"
                        value={formData.capaciteMax}
                        onChange={(e) => setFormData({ ...formData, capaciteMax: e.target.value })}
                        required
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="dateBlocage">Date de blocage (J-15) *</Label>
                      <Input
                        id="dateBlocage"
                        type="datetime-local"
                        value={formData.dateBlocage}
                        onChange={(e) => setFormData({ ...formData, dateBlocage: e.target.value })}
                        required
                      />
                    </div>
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="statut">Statut</Label>
                    <Select
                      value={formData.statut}
                      onValueChange={(value: any) => setFormData({ ...formData, statut: value })}
                    >
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="ouverte">Ouverte</SelectItem>
                        <SelectItem value="bloquee">Bloquée</SelectItem>
                        <SelectItem value="terminee">Terminée</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>

        <Card>
          <CardHeader>
            <CardTitle>Liste des sessions</CardTitle>
            <CardDescription>
              Gérez vos sessions et consultez les inscriptions
            </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>
            ) : sessions && sessions.length > 0 ? (
              <div className="overflow-x-auto">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Formation</TableHead>
                      <TableHead>Nom</TableHead>
                      <TableHead>Date début</TableHead>
                      <TableHead>Date fin</TableHead>
                      <TableHead>Lieu</TableHead>
                      <TableHead>Capacité</TableHead>
                      <TableHead>Statut</TableHead>
                      <TableHead className="text-right">Actions</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {sessions.map((session) => (
                      <TableRow key={session.id}>
                        <TableCell className="font-medium">{getFormationName(session.formationId)}</TableCell>
                        <TableCell>{session.nom}</TableCell>
                        <TableCell className="whitespace-nowrap">{formatDate(session.dateDebut)}</TableCell>
                        <TableCell className="whitespace-nowrap">{formatDate(session.dateFin)}</TableCell>
                        <TableCell className="max-w-xs truncate">{session.lieu}</TableCell>
                        <TableCell>{session.capaciteMax}</TableCell>
                        <TableCell>{getStatutBadge(session.statut)}</TableCell>
                        <TableCell className="text-right">
                          <div className="flex justify-end gap-2">
                            <Button
                              variant="ghost"
                              size="icon"
                              onClick={() => setLocation(`/admin/sessions/${session.id}/inscrits`)}
                              title="Voir les inscrits"
                            >
                              <UsersIcon className="w-4 h-4" />
                            </Button>
                            <Button
                              variant="ghost"
                              size="icon"
                              onClick={() => handleEdit(session)}
                            >
                              <Pencil className="w-4 h-4" />
                            </Button>
                            <Button
                              variant="ghost"
                              size="icon"
                              onClick={() => handleDelete(session.id)}
                            >
                              <Trash2 className="w-4 h-4 text-destructive" />
                            </Button>
                          </div>
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>
            ) : (
              <div className="text-center py-8 text-muted-foreground">
                Aucune session pour le moment. Créez-en une pour commencer.
              </div>
            )}
          </CardContent>
        </Card>
      </div>
    </DashboardLayout>
  );
}