import React, { useState, useEffect, useCallback } from 'react';
import { EmailTemplate } from '../types';
import { saveTemplate, generateSQL, generateSelectSQL, getTemplates, generateTemplateKey, generateN8nCode, generateUUID } from '../services/storage';
import { generateEmailContent } from '../services/geminiService';
import RichTextEditor from './RichTextEditor';
import { 
  Save, ArrowLeft, Eye, Database, Wand2, Copy, Check, Code 
} from 'lucide-react';

interface Props {
  templateId?: string;
  initialTemplate?: EmailTemplate;
  onBack: () => void;
  onSave: () => void;
}

const DEFAULT_HEADER = `<div style="background-color: #f8fafc; padding: 20px; text-align: center;">
  <h1 style="color: #334155; margin: 0;">La Mia Azienda</h1>
</div>`;

const DEFAULT_BODY = `<div style="padding: 20px; color: #334155; font-family: sans-serif;">
  <p>Gentile {{first_name}},</p>
  <p>Questo è un messaggio di default.</p>
</div>`;

const DEFAULT_FOOTER = `<div style="background-color: #f1f5f9; padding: 15px; text-align: center; font-size: 12px; color: #64748b;">
  <p>&copy; 2024 La Mia Azienda. Tutti i diritti riservati.</p>
</div>`;

const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
  const [name, setName] = useState(initialTemplate?.name || 'Nuovo Template');
  const [description, setDescription] = useState(initialTemplate?.description || '');
  const [subject, setSubject] = useState(initialTemplate?.subject || 'Benvenuti nel nostro servizio');
  
  const [header, setHeader] = useState(initialTemplate?.header || DEFAULT_HEADER);
  const [body, setBody] = useState(initialTemplate?.body || DEFAULT_BODY);
  const [footer, setFooter] = useState(initialTemplate?.footer || DEFAULT_FOOTER);
  
  const [activeTab, setActiveTab] = useState<'header' | 'body' | 'footer'>('body');
  const [showSqlModal, setShowSqlModal] = useState(false);
  const [detectedVars, setDetectedVars] = useState<string[]>([]);
  const [isGenerating, setIsGenerating] = useState(false);
  const [isSaving, setIsSaving] = useState(false);
  const [aiPrompt, setAiPrompt] = useState('');
  const [showAiModal, setShowAiModal] = useState(false);
  const [nameError, setNameError] = useState('');

  const detectVariables = useCallback(() => {
    const regex = /\{\{([\w\d_-]+)\}\}/g;
    const allText = `${subject} ${header} ${body} ${footer}`;
    const matches = [...allText.matchAll(regex)];
    const uniqueVars = Array.from(new Set(matches.map(m => m[1])));
    setDetectedVars(uniqueVars);
  }, [header, body, footer, subject]);

  useEffect(() => {
    detectVariables();
  }, [detectVariables]);

  useEffect(() => {
    if (nameError) setNameError('');
  }, [name]);

  const handleSave = async () => {
    const newKey = generateTemplateKey(name);
    
    if (!newKey) {
      setNameError('Il nome del template non può essere vuoto.');
      return;
    }

    setIsSaving(true);
    console.log("Saving process started for:", name);

    try {
        // 1. Get current templates to check duplicates
        let allTemplates: EmailTemplate[] = [];
        try {
          allTemplates = await getTemplates();
        } catch (err) {
          console.warn("Could not fetch templates for duplicate check, proceeding anyway...", err);
        }

        const isDuplicate = allTemplates.some(t => {
            if (initialTemplate && t.id === initialTemplate.id) return false;
            return generateTemplateKey(t.name) === newKey;
        });

        if (isDuplicate) {
            setNameError('Esiste già un template con questo nome.');
            setIsSaving(false);
            return;
        }

        const newTemplate: EmailTemplate = {
            id: initialTemplate?.id || generateUUID(),
            name,
            description,
            subject,
            header,
            body,
            footer,
            variables: detectedVars,
            updatedAt: new Date().toISOString()
        };

        console.log("Sending POST to server with data:", newTemplate);
        await saveTemplate(newTemplate);
        console.log("Save successful!");
        onSave();
    } catch (e: any) {
        console.error("SAVE ERROR DETAILS:", e);
        alert(`Errore di salvataggio: ${e.message}`);
    } finally {
        setIsSaving(false);
    }
  };

  const handleAiGenerate = async () => {
    if (!aiPrompt.trim()) return;
    setIsGenerating(true);
    try {
      const generated = await generateEmailContent(aiPrompt, activeTab);
      if (activeTab === 'header') setHeader(generated);
      if (activeTab === 'body') setBody(generated);
      if (activeTab === 'footer') setFooter(generated);
      setShowAiModal(false);
      setAiPrompt('');
    } catch (e) {
      alert("Errore nella generazione del contenuto. Controlla la configurazione della API Key.");
    } finally {
      setIsGenerating(false);
    }
  };

  const tempTemplateObj = { 
    id: initialTemplate?.id || 'ANTEPRIMA', 
    name, 
    description, 
    subject, 
    header, 
    body, 
    footer, 
    variables: detectedVars, 
    updatedAt: '' 
  };

  const currentInsertSql = showSqlModal ? generateSQL(tempTemplateObj) : '';
  const currentSelectSql = showSqlModal ? generateSelectSQL(tempTemplateObj) : '';
  const currentN8nCode = showSqlModal ? generateN8nCode(tempTemplateObj) : '';

  const getActiveContent = () => {
    switch (activeTab) {
      case 'header': return header;
      case 'body': return body;
      case 'footer': return footer;
    }
  };

  const setActiveContent = (val: string) => {
    switch (activeTab) {
      case 'header': setHeader(val); break;
      case 'body': setBody(val); break;
      case 'footer': setFooter(val); break;
    }
  };

  const tabNames: Record<string, string> = {
    header: 'Testata',
    body: 'Corpo',
    footer: 'Piè di pagina'
  };

  return (
    <div className="flex flex-col h-screen bg-slate-50">
      <header className="bg-white border-b border-slate-200 px-6 py-4 flex items-center justify-between sticky top-0 z-20 shrink-0">
        <div className="flex items-center gap-4">
          <button onClick={onBack} className="p-2 hover:bg-slate-100 rounded-full text-slate-500">
            <ArrowLeft size={20} />
          </button>
          <div>
            <h1 className="text-xl font-bold text-slate-800">
              {initialTemplate ? 'Modifica Template' : 'Crea Template'}
            </h1>
          </div>
        </div>
        <div className="flex items-center gap-3">
          <button 
            onClick={() => setShowSqlModal(true)}
            className="flex items-center gap-2 px-4 py-2 text-slate-600 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 font-medium transition-colors"
          >
            <Database size={18} />
            Integrazione
          </button>
          <button 
            onClick={handleSave}
            disabled={isSaving}
            className={`flex items-center gap-2 px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 font-medium transition-colors shadow-sm ${isSaving ? 'opacity-70 cursor-wait' : ''}`}
          >
            <Save size={18} />
            {isSaving ? 'Salvataggio...' : 'Salva Template'}
          </button>
        </div>
      </header>

      <div className="flex flex-1 overflow-hidden">
        <div className="w-1/2 flex flex-col border-r border-slate-200 bg-white overflow-y-auto custom-scrollbar">
          <div className="p-6 space-y-6">
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-semibold text-slate-700 mb-1">Nome Template</label>
                <input 
                  type="text" 
                  value={name}
                  onChange={e => setName(e.target.value)}
                  className={`w-full px-3 py-2 border rounded-md focus:ring-2 focus:ring-brand-500 outline-none bg-white ${nameError ? 'border-red-500 focus:border-red-500' : 'border-slate-300 focus:border-brand-500'}`}
                  placeholder="es. Email di Benvenuto"
                />
                {nameError && <p className="text-red-500 text-xs mt-1">{nameError}</p>}
                <p className="text-xs text-slate-400 mt-1">Deve essere univoco. Chiave DB: <span className="font-mono bg-slate-100 px-1">{generateTemplateKey(name) || '...'}</span></p>
              </div>

              <div>
                <label className="block text-sm font-semibold text-slate-700 mb-1">Descrizione</label>
                <textarea 
                  value={description}
                  onChange={e => setDescription(e.target.value)}
                  className="w-full px-3 py-2 border border-slate-300 rounded-md focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none bg-white resize-none text-sm"
                  placeholder="Note interne..."
                  rows={2}
                />
              </div>

              <div>
                <label className="block text-sm font-semibold text-slate-700 mb-1">Oggetto Email</label>
                <input 
                  type="text" 
                  value={subject}
                  onChange={e => setSubject(e.target.value)}
                  className="w-full px-3 py-2 border border-slate-300 rounded-md focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none bg-white"
                  placeholder="Oggetto..."
                />
              </div>
            </div>

            <div className="bg-slate-50 p-4 rounded-lg border border-slate-200">
              <div className="flex items-center justify-between mb-2">
                <span className="text-xs font-bold text-slate-500 uppercase tracking-wider">Variabili</span>
              </div>
              <div className="flex flex-wrap gap-2">
                {detectedVars.length === 0 && <span className="text-sm text-slate-400 italic">Nessuna variabile. Usa {'{{nome}}'}.</span>}
                {detectedVars.map(v => (
                  <span key={v} className="px-2 py-1 bg-brand-100 text-brand-700 text-sm rounded border border-brand-200 font-mono">
                    {`{{${v}}}`}
                  </span>
                ))}
              </div>
            </div>

            <div className="flex border-b border-slate-200">
              {(['header', 'body', 'footer'] as const).map((tab) => (
                <button
                  key={tab}
                  onClick={() => setActiveTab(tab)}
                  className={`px-4 py-2 font-medium text-sm capitalize ${
                    activeTab === tab 
                      ? 'text-brand-600 border-b-2 border-brand-600' 
                      : 'text-slate-500 hover:text-slate-700'
                  }`}
                >
                  {tabNames[tab]}
                </button>
              ))}
            </div>

            <div className="relative">
              <div className="flex justify-between items-center mb-2">
                <label className="text-sm font-semibold text-slate-700">Editor</label>
                <button 
                  onClick={() => setShowAiModal(true)}
                  className="text-xs flex items-center gap-1 text-purple-600 hover:text-purple-700 font-medium bg-purple-50 px-2 py-1 rounded"
                >
                  <Wand2 size={14} />
                  IA
                </button>
              </div>
              
              <div className="h-[400px]">
                <RichTextEditor
                  key={activeTab}
                  value={getActiveContent()}
                  onChange={setActiveContent}
                  placeholder={`Scrivi qui...`}
                  className="h-full shadow-sm"
                />
              </div>
            </div>
          </div>
        </div>

        <div className="w-1/2 bg-slate-100 flex flex-col overflow-hidden">
          <div className="p-3 bg-white border-b border-slate-200 flex justify-between items-center shadow-sm shrink-0">
            <span className="font-semibold text-slate-600 flex items-center gap-2">
              <Eye size={18} /> Anteprima
            </span>
          </div>
          <div className="flex-1 p-8 overflow-y-auto custom-scrollbar">
            <div className="w-full max-w-2xl bg-white shadow-xl rounded-lg overflow-hidden min-h-[600px] flex flex-col mx-auto">
               <div className="bg-slate-50 border-b border-slate-100 p-4">
                  <span className="text-xs font-bold text-slate-400 uppercase">Oggetto:</span>
                  <p className="text-sm font-medium text-slate-800">{subject}</p>
               </div>
               <div dangerouslySetInnerHTML={{ __html: header }} />
               <div dangerouslySetInnerHTML={{ __html: body }} className="flex-1" />
               <div dangerouslySetInnerHTML={{ __html: footer }} />
            </div>
          </div>
        </div>
      </div>

      {showSqlModal && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
          <div className="bg-white rounded-xl shadow-2xl w-full max-w-4xl p-6 flex flex-col max-h-[90vh]">
             <div className="flex justify-between items-center mb-4">
                <h3 className="text-lg font-bold text-slate-800 flex items-center gap-2">
                  <Database size={20} className="text-brand-600"/>
                  Integrazione
                </h3>
                <button onClick={() => setShowSqlModal(false)} className="text-slate-400 hover:text-slate-600 text-2xl">&times;</button>
             </div>
             <div className="space-y-6 overflow-y-auto">
                <div>
                    <label className="text-xs font-bold text-slate-500 uppercase block mb-1">SQL INSERT/UPDATE</label>
                    <pre className="bg-slate-900 text-slate-100 p-4 rounded-lg text-sm font-mono overflow-x-auto">{currentInsertSql}</pre>
                </div>
                <div>
                    <label className="text-xs font-bold text-slate-500 uppercase block mb-1">JS n8n</label>
                    <pre className="bg-slate-50 border border-slate-200 p-4 rounded-lg text-sm font-mono overflow-x-auto">{currentN8nCode}</pre>
                </div>
             </div>
          </div>
        </div>
      )}

      {showAiModal && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
          <div className="bg-white rounded-xl shadow-2xl w-full max-w-lg p-6">
             <h3 className="text-lg font-bold text-slate-800 mb-2">Generatore IA</h3>
             <textarea 
               className="w-full h-32 border border-slate-300 rounded p-3 text-sm focus:ring-2 focus:ring-purple-500 outline-none mb-4"
               placeholder="Descrivi cosa generare..."
               value={aiPrompt}
               onChange={(e) => setAiPrompt(e.target.value)}
             />
             <div className="flex justify-end gap-3">
               <button onClick={() => setShowAiModal(false)} className="px-4 py-2 text-slate-600">Annulla</button>
               <button 
                 onClick={handleAiGenerate}
                 disabled={isGenerating || !aiPrompt}
                 className="px-4 py-2 bg-purple-600 text-white rounded hover:bg-purple-700 flex items-center gap-2"
               >
                 {isGenerating ? 'Generazione...' : 'Genera HTML'}
               </button>
             </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default Editor;