import { useState } from "react";
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,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Switch } from "@/components/ui/switch";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { trpc } from "@/lib/trpc";
import { Bell, Edit, Plus, Trash2 } from "lucide-react";
import { toast } from "sonner";

export default function AdminRappels() {
  const [isCreateOpen, setIsCreateOpen] = useState(false);
  const [isEditOpen, setIsEditOpen] = useState(false);
  const [editingRappel, setEditingRappel] = useState<any>(null);
  const [formData, setFormData] = useState({
    nom: "",
    joursAvant: 0,
    sujet: "",
    contenu: "",
    actif: true,
  });

  const { data: rappels, refetch } = trpc.rappels.list.useQuery();
  const createMutation = trpc.rappels.create.useMutation({
    onSuccess: () => {
      toast.success("Rappel créé avec succès");
      refetch();
      setIsCreateOpen(false);
      resetForm();
    },
    onError: (error) => {
      toast.error(`Erreur: ${error.message}`);
    },
  });

  const updateMutation = trpc.rappels.update.useMutation({
    onSuccess: () => {
      toast.success("Rappel modifié avec succès");
      refetch();
      setIsEditOpen(false);
      setEditingRappel(null);
      resetForm();
    },
    onError: (error) => {
      toast.error(`Erreur: ${error.message}`);
    },
  });

  const deleteMutation = trpc.rappels.delete.useMutation({
    onSuccess: () => {
      toast.success("Rappel supprimé avec succès");
      refetch();
    },
    onError: (error) => {
      toast.error(`Erreur: ${error.message}`);
    },
  });

  const resetForm = () => {
    setFormData({
      nom: "",
      joursAvant: 0,
      sujet: "",
      contenu: "",
      actif: true,
    });
  };

  const handleCreate = () => {
    if (!formData.nom || !formData.sujet || !formData.contenu) {
      toast.error("Veuillez remplir tous les champs obligatoires");
      return;
    }
    createMutation.mutate(formData);
  };

  const handleEdit = (rappel: any) => {
    setEditingRappel(rappel);
    setFormData({
      nom: rappel.nom,
      joursAvant: rappel.joursAvant,
      sujet: rappel.sujet,
      contenu: rappel.contenu,
      actif: rappel.actif,
    });
    setIsEditOpen(true);
  };

  const handleUpdate = () => {
    if (!editingRappel) return;
    if (!formData.nom || !formData.sujet || !formData.contenu) {
      toast.error("Veuillez remplir tous les champs obligatoires");
      return;
    }
    updateMutation.mutate({
      id: editingRappel.id,
      ...formData,
    });
  };

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

  return (
    <DashboardLayout>
      <div className="space-y-6">
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-3xl font-bold tracking-tight">Rappels automatiques</h1>
            <p className="text-muted-foreground">
              Configurez les rappels envoyés automatiquement avant les séquences
            </p>
          </div>
          <Button onClick={() => setIsCreateOpen(true)}>
            <Plus className="mr-2 h-4 w-4" />
            Nouveau rappel
          </Button>
        </div>

        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Bell className="h-5 w-5" />
              Liste des rappels configurés
            </CardTitle>
            <CardDescription>
              Les rappels actifs seront envoyés automatiquement aux apprenants inscrits
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Nom</TableHead>
                  <TableHead>Délai</TableHead>
                  <TableHead>Sujet</TableHead>
                  <TableHead>Statut</TableHead>
                  <TableHead className="text-right">Actions</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {rappels && rappels.length > 0 ? (
                  rappels.map((rappel) => (
                    <TableRow key={rappel.id}>
                      <TableCell className="font-medium">{rappel.nom}</TableCell>
                      <TableCell>J-{rappel.joursAvant}</TableCell>
                      <TableCell>{rappel.sujet}</TableCell>
                      <TableCell>
                        <span
                          className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
                            rappel.actif
                              ? "bg-green-100 text-green-800"
                              : "bg-gray-100 text-gray-800"
                          }`}
                        >
                          {rappel.actif ? "Actif" : "Inactif"}
                        </span>
                      </TableCell>
                      <TableCell className="text-right">
                        <div className="flex justify-end gap-2">
                          <Button
                            variant="ghost"
                            size="icon"
                            onClick={() => handleEdit(rappel)}
                          >
                            <Edit className="h-4 w-4" />
                          </Button>
                          <Button
                            variant="ghost"
                            size="icon"
                            onClick={() => handleDelete(rappel.id)}
                          >
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))
                ) : (
                  <TableRow>
                    <TableCell colSpan={5} className="text-center text-muted-foreground">
                      Aucun rappel configuré
                    </TableCell>
                  </TableRow>
                )}
              </TableBody>
            </Table>
          </CardContent>
        </Card>

        {/* Dialog de création */}
        <Dialog open={isCreateOpen} onOpenChange={setIsCreateOpen}>
          <DialogContent className="max-w-2xl">
            <DialogHeader>
              <DialogTitle>Créer un nouveau rappel</DialogTitle>
              <DialogDescription>
                Configurez un rappel automatique à envoyer avant les séquences
              </DialogDescription>
            </DialogHeader>
            <div className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="nom">Nom du rappel *</Label>
                <Input
                  id="nom"
                  value={formData.nom}
                  onChange={(e) => setFormData({ ...formData, nom: e.target.value })}
                  placeholder="Ex: Rappel J-15"
                />
              </div>

              <div className="space-y-2">
                <Label htmlFor="joursAvant">Nombre de jours avant la séquence *</Label>
                <Input
                  id="joursAvant"
                  type="number"
                  min="0"
                  value={formData.joursAvant}
                  onChange={(e) =>
                    setFormData({ ...formData, joursAvant: parseInt(e.target.value) || 0 })
                  }
                  placeholder="Ex: 15"
                />
                <p className="text-sm text-muted-foreground">
                  Le rappel sera envoyé ce nombre de jours avant le début de la séquence
                </p>
              </div>

              <div className="space-y-2">
                <Label htmlFor="sujet">Sujet de l'email *</Label>
                <Input
                  id="sujet"
                  value={formData.sujet}
                  onChange={(e) => setFormData({ ...formData, sujet: e.target.value })}
                  placeholder="Ex: Rappel - Formation dans 15 jours"
                />
              </div>

              <div className="space-y-2">
                <Label htmlFor="contenu">Contenu de l'email *</Label>
                <Textarea
                  id="contenu"
                  value={formData.contenu}
                  onChange={(e) => setFormData({ ...formData, contenu: e.target.value })}
                  placeholder="Utilisez {{nom_apprenant}}, {{titre_formation}}, {{date_debut}}, {{lieu}} comme variables"
                  rows={8}
                />
                <p className="text-sm text-muted-foreground">
                  Variables disponibles : {"{"}{"{"} nom_apprenant {"}"}{"}"}, {"{"}{"{"} titre_formation {"}"}{"}"}, {"{"}{"{"} date_debut {"}"}{"}"}, {"{"}{"{"} lieu {"}"}{"}"}, {"{"}{"{"} formateur {"}"}{"}"}
                </p>
              </div>

              <div className="flex items-center space-x-2">
                <Switch
                  id="actif"
                  checked={formData.actif}
                  onCheckedChange={(checked) => setFormData({ ...formData, actif: checked })}
                />
                <Label htmlFor="actif">Rappel actif</Label>
              </div>
            </div>
            <DialogFooter>
              <Button variant="outline" onClick={() => setIsCreateOpen(false)}>
                Annuler
              </Button>
              <Button onClick={handleCreate} disabled={createMutation.isPending}>
                {createMutation.isPending ? "Création..." : "Créer"}
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>

        {/* Dialog de modification */}
        <Dialog open={isEditOpen} onOpenChange={setIsEditOpen}>
          <DialogContent className="max-w-2xl">
            <DialogHeader>
              <DialogTitle>Modifier le rappel</DialogTitle>
              <DialogDescription>
                Modifiez la configuration du rappel automatique
              </DialogDescription>
            </DialogHeader>
            <div className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="edit-nom">Nom du rappel *</Label>
                <Input
                  id="edit-nom"
                  value={formData.nom}
                  onChange={(e) => setFormData({ ...formData, nom: e.target.value })}
                  placeholder="Ex: Rappel J-15"
                />
              </div>

              <div className="space-y-2">
                <Label htmlFor="edit-joursAvant">Nombre de jours avant la séquence *</Label>
                <Input
                  id="edit-joursAvant"
                  type="number"
                  min="0"
                  value={formData.joursAvant}
                  onChange={(e) =>
                    setFormData({ ...formData, joursAvant: parseInt(e.target.value) || 0 })
                  }
                  placeholder="Ex: 15"
                />
              </div>

              <div className="space-y-2">
                <Label htmlFor="edit-sujet">Sujet de l'email *</Label>
                <Input
                  id="edit-sujet"
                  value={formData.sujet}
                  onChange={(e) => setFormData({ ...formData, sujet: e.target.value })}
                  placeholder="Ex: Rappel - Formation dans 15 jours"
                />
              </div>

              <div className="space-y-2">
                <Label htmlFor="edit-contenu">Contenu de l'email *</Label>
                <Textarea
                  id="edit-contenu"
                  value={formData.contenu}
                  onChange={(e) => setFormData({ ...formData, contenu: e.target.value })}
                  placeholder="Utilisez {{nom_apprenant}}, {{titre_formation}}, {{date_debut}}, {{lieu}} comme variables"
                  rows={8}
                />
                <p className="text-sm text-muted-foreground">
                  Variables disponibles : {"{"}{"{"} nom_apprenant {"}"}{"}"}, {"{"}{"{"} titre_formation {"}"}{"}"}, {"{"}{"{"} date_debut {"}"}{"}"}, {"{"}{"{"} lieu {"}"}{"}"}, {"{"}{"{"} formateur {"}"}{"}"}
                </p>
              </div>

              <div className="flex items-center space-x-2">
                <Switch
                  id="edit-actif"
                  checked={formData.actif}
                  onCheckedChange={(checked) => setFormData({ ...formData, actif: checked })}
                />
                <Label htmlFor="edit-actif">Rappel actif</Label>
              </div>
            </div>
            <DialogFooter>
              <Button variant="outline" onClick={() => setIsEditOpen(false)}>
                Annuler
              </Button>
              <Button onClick={handleUpdate} disabled={updateMutation.isPending}>
                {updateMutation.isPending ? "Modification..." : "Modifier"}
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </div>
    </DashboardLayout>
  );
}
