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",
    name: "",
    logoUrl: "",
    primaryColor: "#2563eb",
    headerBgColor: "#2563eb",
    headerTextColor: "#ffffff",
    headerTitle: "Formation Manager Itinova",
    bodyContent: "",
    footerText: "",
    active: true,
  });

  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({ ...formData, 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,
        name: currentTemplate.name,
        logoUrl: currentTemplate.logoUrl || "",
        primaryColor: currentTemplate.primaryColor,
        headerBgColor: currentTemplate.headerBgColor,
        headerTextColor: currentTemplate.headerTextColor,
        headerTitle: currentTemplate.headerTitle,
        bodyContent: currentTemplate.bodyContent || "",
        footerText: currentTemplate.footerText || "",
        active: currentTemplate.active,
      };
      setFormData(newData);
      // Mettre à jour le contenu de l'éditeur
      if (editor) {
        editor.commands.setContent(newData.bodyContent);
      }
    }
  }, [currentTemplate, editor]);

  const handleSave = () => {
    upsertMutation.mutate({
      ...formData,
      logoUrl: formData.logoUrl || null,
      bodyContent: formData.bodyContent || null,
      footerText: formData.footerText || null,
    });
  };

  const handleReset = () => {
    if (currentTemplate) {
      setFormData({
        type: currentTemplate.type,
        name: currentTemplate.name,
        logoUrl: currentTemplate.logoUrl || "",
        primaryColor: currentTemplate.primaryColor,
        headerBgColor: currentTemplate.headerBgColor,
        headerTextColor: currentTemplate.headerTextColor,
        headerTitle: currentTemplate.headerTitle,
        bodyContent: currentTemplate.bodyContent || "",
        footerText: currentTemplate.footerText || "",
        active: currentTemplate.active,
      });
    }
  };

  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) => {
      return text
        .replace(/\{\{nomApprenant\}\}/g, 'Dupont')
        .replace(/\{\{prenomApprenant\}\}/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(/\{\{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 headerWithVars = replaceVariables(formData.headerTitle);
    const footerWithVars = formData.footerText ? replaceVariables(formData.footerText) : '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.headerBgColor}; color: ${formData.headerTextColor}; padding: 30px 20px; text-align: center; }
    .header h1 { margin: 0; font-size: 24px; }
    ${formData.logoUrl ? `.header img { max-width: 150px; margin-bottom: 15px; }` : ''}
    .content { background-color: #f9fafb; padding: 30px 20px; }
    .content h2 { color: ${formData.primaryColor}; 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.primaryColor}; color: white; text-decoration: none; border-radius: 6px; margin: 10px 0; }
    .info-box { background-color: #dbeafe; border-left: 4px solid ${formData.primaryColor}; padding: 15px; margin: 15px 0; }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      ${formData.logoUrl ? `<img src="${formData.logoUrl}" alt="Logo" />` : ''}
      <h1>${headerWithVars}</h1>
    </div>
    <div class="content">
      ${bodyWithVars}
    </div>
    <div class="footer">
      <p>${footerWithVars}</p>
    </div>
  </div>
</body>
</html>
    `.trim();
  };

  // Générer la prévisualisation HTML
  const generatePreview = () => {
    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.headerBgColor}; color: ${formData.headerTextColor}; padding: 30px 20px; text-align: center; }
    .header h1 { margin: 0; font-size: 24px; }
    ${formData.logoUrl ? `.header img { max-width: 150px; margin-bottom: 15px; }` : ''}
    .content { background-color: #f9fafb; padding: 30px 20px; }
    .content h2 { color: ${formData.primaryColor}; 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.primaryColor}; color: white; text-decoration: none; border-radius: 6px; margin: 10px 0; }
    .info-box { background-color: #dbeafe; border-left: 4px solid ${formData.primaryColor}; padding: 15px; margin: 15px 0; }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      ${formData.logoUrl ? `<img src="${formData.logoUrl}" alt="Logo" />` : ''}
      <h1>${formData.headerTitle}</h1>
    </div>
    <div class="content">
      ${formData.bodyContent ? formData.bodyContent.replace(/\n/g, '<br>') : `
      <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>
      `}
    </div>
    <div class="footer">
      <p>${formData.footerText || 'Texte du pied de page'}</p>
    </div>
  </div>
</body>
</html>
    `.trim();
  };

  const templateTypes = [
    { value: "inscription", label: "Confirmation d'inscription" },
    { value: "teaser", label: "Email teaser" },
    { value: "rappel", label: "Rappel 1" },
    { value: "rappelJ1", 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" },
  ];

  return (
    <DashboardLayout>
      <div className="mb-6">
        <h1 className="text-3xl font-bold mb-2">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}>
              {initMutation.isPending ? "Initialisation..." : "Initialiser les templates par défaut"}
            </Button>
          </CardContent>
        </Card>
      )}

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Éditeur */}
        <Card>
          <CardHeader>
            <CardTitle>Éditeur de template</CardTitle>
            <CardDescription>
              Modifiez les paramètres du template sélectionné
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div>
              <Label htmlFor="templateType">Type de template</Label>
              <Select
                value={selectedType}
                onValueChange={(value) => {
                  setSelectedType(value);
                  setFormData((prev) => ({ ...prev, type: value }));
                }}
              >
                <SelectTrigger id="templateType">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {templateTypes.map((type) => (
                    <SelectItem key={type.value} value={type.value}>
                      {type.label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

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

            <div>
              <Label htmlFor="logoUrl">URL du logo (optionnel)</Label>
              <Input
                id="logoUrl"
                value={formData.logoUrl}
                onChange={(e) => setFormData({ ...formData, logoUrl: e.target.value })}
                placeholder="https://exemple.com/logo.png"
              />
            </div>

            <div className="grid grid-cols-2 gap-4">
              <div>
                <Label htmlFor="headerBgColor">Couleur fond en-tête</Label>
                <div className="flex gap-2">
                  <Input
                    id="headerBgColor"
                    type="color"
                    value={formData.headerBgColor}
                    onChange={(e) => setFormData({ ...formData, headerBgColor: e.target.value })}
                    className="w-16 h-10 p-1"
                  />
                  <Input
                    value={formData.headerBgColor}
                    onChange={(e) => setFormData({ ...formData, headerBgColor: e.target.value })}
                    placeholder="#2563eb"
                  />
                </div>
              </div>

              <div>
                <Label htmlFor="headerTextColor">Couleur texte en-tête</Label>
                <div className="flex gap-2">
                  <Input
                    id="headerTextColor"
                    type="color"
                    value={formData.headerTextColor}
                    onChange={(e) => setFormData({ ...formData, headerTextColor: e.target.value })}
                    className="w-16 h-10 p-1"
                  />
                  <Input
                    value={formData.headerTextColor}
                    onChange={(e) => setFormData({ ...formData, headerTextColor: e.target.value })}
                    placeholder="#ffffff"
                  />
                </div>
              </div>
            </div>

            <div>
              <Label htmlFor="primaryColor">Couleur principale</Label>
              <div className="flex gap-2">
                <Input
                  id="primaryColor"
                  type="color"
                  value={formData.primaryColor}
                  onChange={(e) => setFormData({ ...formData, primaryColor: e.target.value })}
                  className="w-16 h-10 p-1"
                />
                <Input
                  value={formData.primaryColor}
                  onChange={(e) => setFormData({ ...formData, primaryColor: e.target.value })}
                  placeholder="#2563eb"
                />
              </div>
              <p className="text-xs text-muted-foreground mt-1">
                Utilisée pour les boutons et les accents
              </p>
            </div>

            <div>
              <Label htmlFor="headerTitle">Titre de l'en-tête</Label>
              <Input
                id="headerTitle"
                value={formData.headerTitle}
                onChange={(e) => setFormData({ ...formData, headerTitle: e.target.value })}
                placeholder="Formation Manager Itinova"
              />
            </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('{{nomApprenant}}').run()}
                >
                  <Plus className="h-3 w-3 mr-1" />
                  Nom apprenant
                </Button>
                <Button
                  type="button"
                  variant="outline"
                  size="sm"
                  onClick={() => editor?.chain().focus().insertContent('{{prenomApprenant}}').run()}
                >
                  <Plus className="h-3 w-3 mr-1" />
                  Prénom apprenant
                </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('{{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>
              </div>

              {/* Éditeur WYSIWYG TipTap */}
              <div className="border rounded-md">
                {/* Barre d'outils */}
                {editor && (
                  <div className="border-b p-2 flex flex-wrap gap-1 bg-muted/30">
                    <Button
                      type="button"
                      variant="ghost"
                      size="sm"
                      onClick={() => editor.chain().focus().toggleBold().run()}
                      className={editor.isActive('bold') ? 'bg-muted' : ''}
                    >
                      <strong>B</strong>
                    </Button>
                    <Button
                      type="button"
                      variant="ghost"
                      size="sm"
                      onClick={() => editor.chain().focus().toggleItalic().run()}
                      className={editor.isActive('italic') ? 'bg-muted' : ''}
                    >
                      <em>I</em>
                    </Button>
                    <Button
                      type="button"
                      variant="ghost"
                      size="sm"
                      onClick={() => editor.chain().focus().toggleStrike().run()}
                      className={editor.isActive('strike') ? 'bg-muted' : ''}
                    >
                      <s>S</s>
                    </Button>
                    <div className="w-px h-6 bg-border mx-1" />
                    <Button
                      type="button"
                      variant="ghost"
                      size="sm"
                      onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
                      className={editor.isActive('heading', { level: 2 }) ? 'bg-muted' : ''}
                    >
                      H2
                    </Button>
                    <Button
                      type="button"
                      variant="ghost"
                      size="sm"
                      onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
                      className={editor.isActive('heading', { level: 3 }) ? 'bg-muted' : ''}
                    >
                      H3
                    </Button>
                    <div className="w-px h-6 bg-border mx-1" />
                    <Button
                      type="button"
                      variant="ghost"
                      size="sm"
                      onClick={() => editor.chain().focus().toggleBulletList().run()}
                      className={editor.isActive('bulletList') ? 'bg-muted' : ''}
                    >
                      • Liste
                    </Button>
                    <Button
                      type="button"
                      variant="ghost"
                      size="sm"
                      onClick={() => editor.chain().focus().toggleOrderedList().run()}
                      className={editor.isActive('orderedList') ? 'bg-muted' : ''}
                    >
                      1. Liste
                    </Button>
                  </div>
                )}
                {/* Zone d'édition */}
                <div className="p-3 min-h-[200px] prose prose-sm max-w-none">
                  <EditorContent editor={editor} />
                </div>
              </div>
              <p className="text-xs text-muted-foreground mt-1">
                Le contenu du corps du message. Utilisez les boutons ci-dessus pour insérer des variables dynamiques.
              </p>
            </div>

            <div>
              <Label htmlFor="footerText">Texte du pied de page</Label>
              <Textarea
                id="footerText"
                value={formData.footerText}
                onChange={(e) => setFormData({ ...formData, footerText: e.target.value })}
                placeholder="Cet email a été envoyé automatiquement..."
                rows={3}
              />
            </div>

            <div className="flex gap-2 pt-4">
              <Button onClick={handleSave} disabled={upsertMutation.isPending} className="flex-1">
                <Save className="h-4 w-4 mr-2" />
                {upsertMutation.isPending ? "Enregistrement..." : "Enregistrer"}
              </Button>
              <Button onClick={() => setShowPreviewModal(true)} variant="secondary">
                <Eye className="h-4 w-4 mr-2 text-blue-600" />
                Aperçu email
              </Button>
              <Button onClick={handleReset} variant="outline">
                <RotateCcw className="h-4 w-4 mr-2" />
                Réinitialiser
              </Button>
            </div>
          </CardContent>
        </Card>

        {/* Modal d'aperçu email */}
        <Dialog open={showPreviewModal} onOpenChange={setShowPreviewModal}>
          <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
            <DialogHeader>
              <DialogTitle>Aperçu de l'email final</DialogTitle>
              <DialogDescription>
                Cet aperçu montre comment l'email apparaîtra avec des données d'exemple.
                Les variables (nomApprenant, nomFormation, datesHTML, etc.) sont remplacées par des valeurs de test.
              </DialogDescription>
            </DialogHeader>
            <div className="border rounded-lg overflow-hidden bg-gray-50">
              <iframe
                srcDoc={generatePreviewWithVariables()}
                className="w-full h-[600px] border-0"
                title="Aperçu de l'email final"
              />
            </div>
          </DialogContent>
        </Dialog>

        {/* Prévisualisation */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Eye className="h-5 w-5" />
              Prévisualisation en temps réel
            </CardTitle>
            <CardDescription>
              Aperçu de votre template avec les paramètres actuels
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="border rounded-lg overflow-hidden bg-gray-50">
              <iframe
                srcDoc={generatePreview()}
                className="w-full h-[600px] border-0"
                title="Prévisualisation du template"
              />
            </div>
          </CardContent>
        </Card>
      </div>
    </DashboardLayout>
  );
}