import { useState, useEffect } from "react";
import { useEditor, EditorContent } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import { TextStyle } from '@tiptap/extension-text-style';
import { Color } from '@tiptap/extension-color';
import { Link } from '@tiptap/extension-link';
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 { Textarea } from "@/components/ui/textarea";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { toast } from "sonner";
import { Mail, Eye, Save, RotateCcw, Plus } from "lucide-react";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";

export default function AdminEmailTemplates() {
  const [selectedType, setSelectedType] = useState<string>("inscription");
  const [showPreviewModal, setShowPreviewModal] = useState(false);
  const [formData, setFormData] = useState({
    type: "inscription" as "inscription" | "teaser" | "rappel1" | "rappel2" | "rappel3" | "rappel4" | "rappel5" | "rappel6" | "reset_password" | "attestation",
    titre: "",
    bodyContent: "",
    couleurPrincipale: "#283581",
    couleurSecondaire: "#0578BE",
    piedDePage: "",
  });

  const { data: templates, refetch } = trpc.emailTemplates.list.useQuery();
  const { data: currentTemplate } = trpc.emailTemplates.getByType.useQuery(
    { type: selectedType },
    { enabled: !!selectedType }
  );

  // Initialiser l'éditeur TipTap
  const editor = useEditor({
    extensions: [
      StarterKit,
      TextStyle,
      Color,
      Link.configure({
        openOnClick: false,
      }),
    ],
    content: formData.bodyContent,
    onUpdate: ({ editor }) => {
      setFormData((prev) => ({ ...prev, bodyContent: editor.getHTML() }));
    },
  });

  const upsertMutation = trpc.emailTemplates.upsert.useMutation({
    onSuccess: () => {
      toast.success("Template enregistré avec succès");
      refetch();
    },
    onError: (error) => {
      toast.error(`Erreur: ${error.message}`);
    },
  });

  const initMutation = trpc.emailTemplates.initializeDefaults.useMutation({
    onSuccess: () => {
      toast.success("Templates par défaut initialisés");
      refetch();
    },
    onError: (error) => {
      toast.error(`Erreur: ${error.message}`);
    },
  });

  // Charger le template sélectionné
  useEffect(() => {
    if (currentTemplate) {
      const newData = {
        type: currentTemplate.type as "inscription" | "teaser" | "rappel1" | "rappel2" | "rappel3" | "rappel4" | "rappel5" | "rappel6" | "reset_password" | "attestation",
        titre: currentTemplate.titre,
        bodyContent: currentTemplate.bodyContent || "",
        couleurPrincipale: currentTemplate.couleurPrincipale,
        couleurSecondaire: currentTemplate.couleurSecondaire,
        piedDePage: currentTemplate.piedDePage || "",
      };
      setFormData(newData);
      // Mettre à jour le contenu de l'éditeur
      if (editor && !editor.isDestroyed) {
        editor.commands.setContent(newData.bodyContent);
      }
    }
  }, [currentTemplate]);

  // Synchroniser l'éditeur avec formData.bodyContent quand l'éditeur est prêt
  useEffect(() => {
    if (editor && !editor.isDestroyed && formData.bodyContent !== editor.getHTML()) {
      editor.commands.setContent(formData.bodyContent);
    }
  }, [editor]);

  const handleSave = () => {
    upsertMutation.mutate({
      type: formData.type,
      titre: formData.titre,
      bodyContent: formData.bodyContent,
      couleurPrincipale: formData.couleurPrincipale,
      couleurSecondaire: formData.couleurSecondaire,
      piedDePage: formData.piedDePage || null,
    });
  };

  const handleReset = () => {
    if (currentTemplate) {
      setFormData({
        type: currentTemplate.type as "inscription" | "teaser" | "rappel1" | "rappel2" | "rappel3" | "rappel4" | "rappel5" | "rappel6" | "reset_password" | "attestation",
        titre: currentTemplate.titre,
        bodyContent: currentTemplate.bodyContent || "",
        couleurPrincipale: currentTemplate.couleurPrincipale,
        couleurSecondaire: currentTemplate.couleurSecondaire,
        piedDePage: currentTemplate.piedDePage || "",
      });
      if (editor) {
        editor.commands.setContent(currentTemplate.bodyContent || "");
      }
    }
  };

  const handleInitDefaults = () => {
    if (confirm("Initialiser les templates par défaut ? Cela ne modifiera pas les templates existants.")) {
      initMutation.mutate();
    }
  };

  // Générer la prévisualisation HTML avec variables remplacées
  const generatePreviewWithVariables = () => {
    // Remplacer les variables par des données d'exemple
    const replaceVariables = (text: string | null | undefined): string => {
      if (!text) return '';
      return text
        .replace(/\{\{nom\}\}/g, 'Dupont')
        .replace(/\{\{prenom\}\}/g, 'Marie')
        .replace(/\{\{nomFormation\}\}/g, 'Formation Management')
        .replace(/\{\{nomSequence\}\}/g, 'Séquence 1 - Introduction')
        .replace(/\{\{dateDebut\}\}/g, '15/01/2025')
        .replace(/\{\{dateFin\}\}/g, '17/01/2025')
        .replace(/\{\{lieu\}\}/g, 'Salle de formation A - Bâtiment principal')
        .replace(/\{\{formateur\}\}/g, 'Jean Martin')
        .replace(/\{\{couleurPrincipale\}\}/g, formData.couleurPrincipale)
        .replace(/\{\{couleurSecondaire\}\}/g, formData.couleurSecondaire)
        .replace(/\{\{lienReinitialisation\}\}/g, 'https://formations.itinova.org/reset-password/token123')
        .replace(/\{\{datesHTML\}\}/g, '<div class="date-item"><strong>Date 1 :</strong> lundi 15 janvier 2025</div><div class="date-item"><strong>Date 2 :</strong> mardi 16 janvier 2025</div>');
    };

    const bodyWithVars = formData.bodyContent ? replaceVariables(formData.bodyContent) : `
      <p style="color: #9ca3af; font-style: italic;">Saisissez le contenu de votre email dans le champ "Corps du message" pour voir la prévisualisation ici...</p>
    `;
    const footerWithVars = formData.piedDePage ? replaceVariables(formData.piedDePage) : 'Texte du pied de page';

    return `
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; margin: 0; padding: 20px; background-color: #f5f5f5; }
    .container { max-width: 600px; margin: 0 auto; background-color: white; }
    .header { background-color: ${formData.couleurPrincipale}; color: white; padding: 30px 20px; text-align: center; }
    .header h1 { margin: 0; font-size: 24px; }
    .content { background-color: #f9fafb; padding: 30px 20px; }
    .content h2 { color: ${formData.couleurPrincipale}; margin-top: 0; }
    .footer { background-color: #f3f4f6; padding: 20px; text-align: center; font-size: 12px; color: #6b7280; }
    .button { display: inline-block; padding: 12px 24px; background-color: ${formData.couleurPrincipale}; color: white; text-decoration: none; border-radius: 6px; margin: 10px 0; }
    .info-box { background-color: #dbeafe; border-left: 4px solid ${formData.couleurPrincipale}; padding: 15px; margin: 15px 0; }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>${formData.titre}</h1>
    </div>
    <div class="content">
      ${bodyWithVars}
    </div>
    <div class="footer">
      <p>${footerWithVars}</p>
    </div>
  </div>
</body>
</html>
    `.trim();
  };

  const templateTypes = [
    { value: "inscription", label: "Confirmation d'inscription" },
    { value: "teaser", label: "Email teaser" },
    { value: "rappel1", label: "Rappel 1" },
    { value: "rappel2", label: "Rappel 2" },
    { value: "rappel3", label: "Rappel 3" },
    { value: "rappel4", label: "Rappel 4" },
    { value: "rappel5", label: "Rappel 5" },
    { value: "rappel6", label: "Rappel 6" },
    { value: "reset_password", label: "Réinitialisation de mot de passe" },
    { value: "attestation", label: "Attestation de formation" },
  ];

  return (
    <DashboardLayout>
      <div className="mb-6">
        <h1 className="page-title">Templates d'emails</h1>
        <p className="text-muted-foreground">
          Personnalisez l'apparence de vos emails automatiques
        </p>
      </div>

      {(!templates || templates.length === 0) && (
        <Card className="mb-6 border-yellow-200 bg-yellow-50">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Mail className="h-5 w-5" />
              Initialisation requise
            </CardTitle>
            <CardDescription>
              Aucun template trouvé. Initialisez les templates par défaut pour commencer.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Button onClick={handleInitDefaults} disabled={initMutation.isPending}>
              <Plus className="mr-2 h-4 w-4" />
              {initMutation.isPending ? "Initialisation..." : "Initialiser les templates par défaut"}
            </Button>
          </CardContent>
        </Card>
      )}

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Liste des templates */}
        <Card>
          <CardHeader>
            <CardTitle>Types de templates</CardTitle>
            <CardDescription>
              Sélectionnez un template à modifier
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-2">
              {templateTypes.map((templateType) => {
                const template = templates?.find((t) => t.type === templateType.value);
                return (
                  <Button
                    key={templateType.value}
                    variant={selectedType === templateType.value ? "default" : "outline"}
                    className="w-full justify-start"
                    onClick={() => setSelectedType(templateType.value)}
                  >
                    <Mail className="mr-2 h-4 w-4" />
                    {templateType.label}
                    {template && (
                      <span className="ml-auto text-xs text-green-600">✓</span>
                    )}
                  </Button>
                );
              })}
            </div>
          </CardContent>
        </Card>

        {/* Formulaire d'édition */}
        <Card key={selectedType} className="lg:col-span-2">
          <CardHeader>
            <CardTitle>Éditer le template</CardTitle>
            <CardDescription>
              Personnalisez le contenu et l'apparence de l'email
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid grid-cols-1 gap-4">
              <div>
                <Label htmlFor="type">Type de template</Label>
                <Select
                  value={formData.type}
                  onValueChange={(value) =>
                    setFormData({ ...formData, type: value as typeof formData.type })
                  }
                >
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    {templateTypes.map((type) => (
                      <SelectItem key={type.value} value={type.value}>
                        {type.label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

              <div>
                <Label htmlFor="titre">Titre du template</Label>
                <Input
                  id="titre"
                  value={formData.titre}
                  onChange={(e) => setFormData({ ...formData, titre: e.target.value })}
                  placeholder="Ex: Confirmation d'inscription"
                />
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="couleurPrincipale">Couleur principale</Label>
                  <div className="flex gap-2">
                    <Input
                      id="couleurPrincipale"
                      type="color"
                      value={formData.couleurPrincipale}
                      onChange={(e) =>
                        setFormData({ ...formData, couleurPrincipale: e.target.value })
                      }
                      className="w-20 h-10"
                    />
                    <Input
                      value={formData.couleurPrincipale}
                      onChange={(e) =>
                        setFormData({ ...formData, couleurPrincipale: e.target.value })
                      }
                      placeholder="#283581"
                    />
                  </div>
                </div>

                <div>
                  <Label htmlFor="couleurSecondaire">Couleur secondaire</Label>
                  <div className="flex gap-2">
                    <Input
                      id="couleurSecondaire"
                      type="color"
                      value={formData.couleurSecondaire}
                      onChange={(e) =>
                        setFormData({ ...formData, couleurSecondaire: e.target.value })
                      }
                      className="w-20 h-10"
                    />
                    <Input
                      value={formData.couleurSecondaire}
                      onChange={(e) =>
                        setFormData({ ...formData, couleurSecondaire: e.target.value })
                      }
                      placeholder="#0578BE"
                    />
                  </div>
                </div>
              </div>

              <div>
                <Label htmlFor="bodyContent">Corps du message</Label>
                
                {/* Boutons de variables dynamiques */}
                <div className="flex flex-wrap gap-2 mb-2">
                  <Button
                    type="button"
                    variant="outline"
                    size="sm"
                    onClick={() => editor?.chain().focus().insertContent('{{nom}}').run()}
                  >
                    <Plus className="h-3 w-3 mr-1" />
                    Nom
                  </Button>
                  <Button
                    type="button"
                    variant="outline"
                    size="sm"
                    onClick={() => editor?.chain().focus().insertContent('{{prenom}}').run()}
                  >
                    <Plus className="h-3 w-3 mr-1" />
                    Prénom
                  </Button>
                  <Button
                    type="button"
                    variant="outline"
                    size="sm"
                    onClick={() => editor?.chain().focus().insertContent('{{nomFormation}}').run()}
                  >
                    <Plus className="h-3 w-3 mr-1" />
                    Nom formation
                  </Button>
                  <Button
                    type="button"
                    variant="outline"
                    size="sm"
                    onClick={() => editor?.chain().focus().insertContent('{{nomSequence}}').run()}
                  >
                    <Plus className="h-3 w-3 mr-1" />
                    Nom séquence
                  </Button>
                  <Button
                    type="button"
                    variant="outline"
                    size="sm"
                    onClick={() => editor?.chain().focus().insertContent('{{dateDebut}}').run()}
                  >
                    <Plus className="h-3 w-3 mr-1" />
                    Date début
                  </Button>
                  <Button
                    type="button"
                    variant="outline"
                    size="sm"
                    onClick={() => editor?.chain().focus().insertContent('{{dateFin}}').run()}
                  >
                    <Plus className="h-3 w-3 mr-1" />
                    Date fin
                  </Button>
                  <Button
                    type="button"
                    variant="outline"
                    size="sm"
                    onClick={() => editor?.chain().focus().insertContent('{{lieu}}').run()}
                  >
                    <Plus className="h-3 w-3 mr-1" />
                    Lieu
                  </Button>
                  <Button
                    type="button"
                    variant="outline"
                    size="sm"
                    onClick={() => editor?.chain().focus().insertContent('{{formateur}}').run()}
                  >
                    <Plus className="h-3 w-3 mr-1" />
                    Formateur
                  </Button>
                  <Button
                    type="button"
                    variant="outline"
                    size="sm"
                    onClick={() => editor?.chain().focus().insertContent('{{datesHTML}}').run()}
                  >
                    <Plus className="h-3 w-3 mr-1" />
                    Dates (HTML)
                  </Button>
                  <Button
                    type="button"
                    variant="outline"
                    size="sm"
                    onClick={() => editor?.chain().focus().insertContent('{{lienReinitialisation}}').run()}
                  >
                    <Plus className="h-3 w-3 mr-1" />
                    Lien réinitialisation
                  </Button>
                </div>

                <div className="border rounded-md p-2 min-h-[200px]">
                  <EditorContent editor={editor} />
                </div>
                <p className="text-xs text-muted-foreground mt-1">
                  Utilisez les boutons ci-dessus pour insérer rapidement des variables dans votre email.
                </p>
              </div>

              <div>
                <Label htmlFor="piedDePage">Pied de page</Label>
                <Textarea
                  id="piedDePage"
                  value={formData.piedDePage}
                  onChange={(e) =>
                    setFormData({ ...formData, piedDePage: e.target.value })
                  }
                  placeholder="Ex: Itinova - Gestion des Formations | contact@itinova.fr"
                  rows={3}
                />
              </div>
            </div>

            <div className="flex gap-2 pt-4">
              <Button onClick={handleSave} disabled={upsertMutation.isPending}>
                <Save className="mr-2 h-4 w-4" />
                {upsertMutation.isPending ? "Enregistrement..." : "Enregistrer"}
              </Button>
              <Button
                variant="outline"
                onClick={handleReset}
                disabled={!currentTemplate}
              >
                <RotateCcw className="mr-2 h-4 w-4" />
                Réinitialiser
              </Button>
              <Button
                variant="outline"
                onClick={() => setShowPreviewModal(true)}
              >
                <Eye className="mr-2 h-4 w-4" />
                Prévisualiser
              </Button>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Modal de prévisualisation */}
      <Dialog open={showPreviewModal} onOpenChange={setShowPreviewModal}>
        <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>Prévisualisation de l'email</DialogTitle>
            <DialogDescription>
              Aperçu avec les variables remplacées par des exemples
            </DialogDescription>
          </DialogHeader>
          <div className="mt-4">
            <iframe
              srcDoc={generatePreviewWithVariables()}
              className="w-full h-[600px] border rounded-lg"
              title="Prévisualisation email"
            />
          </div>
        </DialogContent>
      </Dialog>
    </DashboardLayout>
  );
}
