Update TemplateEditor.tsx

components/TemplateEditor.tsx

@@ -15,22 +15,22 @@ interface Props {
 }
 
 const DEFAULT_HEADER = `<div style="background-color: #f8fafc; padding: 20px; text-align: center;">
-  <h1 style="color: #334155; margin: 0;">My Company</h1>
+  <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>This is a default message body.</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 My Company. All rights reserved.</p>
+  <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 || 'New Template');
+  const [name, setName] = useState(initialTemplate?.name || 'Nuovo Template');
   const [description, setDescription] = useState(initialTemplate?.description || '');
-  const [subject, setSubject] = useState(initialTemplate?.subject || 'Welcome to our service');
+  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);
@@ -67,8 +67,8 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
     const newKey = generateTemplateKey(name);
     
     if (!newKey) {
-      setNameError('Template name cannot be empty or symbols only.');
-      alert('Template name cannot be empty.');
+      setNameError('Il nome del template non può essere vuoto o contenere solo simboli.');
+      alert('Il nome del template non può essere vuoto.');
       return;
     }
 
@@ -83,8 +83,8 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
         });
 
         if (isDuplicate) {
-            setNameError('A template with this name already exists.');
-            alert('A template with this name (or resulting ID) already exists. Please choose a unique name.');
+            setNameError('Esiste già un template con questo nome.');
+            alert('Un template con questo nome (o ID risultante) esiste già. Per favore scegli un nome univoco.');
             setIsSaving(false);
             return;
         }
@@ -103,7 +103,7 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
         await saveTemplate(newTemplate);
         onSave();
     } catch (e) {
-        alert("Failed to save template. Check server logs.");
+        alert("Impossibile salvare il template. Controlla i log del server.");
     } finally {
         setIsSaving(false);
     }
@@ -120,14 +120,14 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
       setShowAiModal(false);
       setAiPrompt('');
     } catch (e) {
-      alert("Error generating content. Please check API Key configuration.");
+      alert("Errore nella generazione del contenuto. Controlla la configurazione della API Key.");
     } finally {
       setIsGenerating(false);
     }
   };
 
   const tempTemplateObj = { 
-    id: initialTemplate?.id || 'PREVIEW', 
+    id: initialTemplate?.id || 'ANTEPRIMA', 
     name, 
     description, 
     subject, 
@@ -158,6 +158,13 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
     }
   };
 
+  // Maps internal tab keys to Italian display names
+  const tabNames: Record<string, string> = {
+    header: 'Testata',
+    body: 'Corpo',
+    footer: 'Piè di pagina'
+  };
+
   return (
     <div className="flex flex-col h-screen bg-slate-50">
       {/* Top Bar */}
@@ -168,7 +175,7 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
           </button>
           <div>
             <h1 className="text-xl font-bold text-slate-800">
-              {initialTemplate ? 'Edit Template' : 'Create Template'}
+              {initialTemplate ? 'Modifica Template' : 'Crea Template'}
             </h1>
           </div>
         </div>
@@ -178,7 +185,7 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
             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} />
-            Integration
+            Integrazione
           </button>
           <button 
             onClick={handleSave}
@@ -186,7 +193,7 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
             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 ? 'Saving...' : 'Save Template'}
+            {isSaving ? 'Salvataggio...' : 'Salva Template'}
           </button>
         </div>
       </header>
@@ -199,25 +206,25 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
             {/* Metadata */}
             <div className="space-y-4">
               <div>
-                <label className="block text-sm font-semibold text-slate-700 mb-1">Template Name</label>
+                <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="e.g., Welcome Email"
+                  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">Must be unique. Used to generate the database key: <span className="font-mono bg-slate-100 px-1">{generateTemplateKey(name) || '...'}</span></p>
+                <p className="text-xs text-slate-400 mt-1">Deve essere univoco. Usato per generare la 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">Email Subject</label>
+                <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="Subject line... (supports {{placeholders}})"
+                  placeholder="Oggetto... (supporta {{placeholder}})"
                 />
               </div>
             </div>
@@ -225,11 +232,11 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
             {/* Variable Manager */}
             <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">Active Variables</span>
-                <span className="text-xs text-slate-400">Auto-detected from text</span>
+                <span className="text-xs font-bold text-slate-500 uppercase tracking-wider">Variabili Attive</span>
+                <span className="text-xs text-slate-400">Rilevate automaticamente dal testo</span>
               </div>
               <div className="flex flex-wrap gap-2">
-                {detectedVars.length === 0 && <span className="text-sm text-slate-400 italic">No variables detected yet. Type {'{{name}}'} to add one.</span>}
+                {detectedVars.length === 0 && <span className="text-sm text-slate-400 italic">Nessuna variabile rilevata. Scrivi {'{{nome}}'} per aggiungerne una.</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}}}`}
@@ -250,7 +257,7 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
                       : 'text-slate-500 hover:text-slate-700'
                   }`}
                 >
-                  {tab}
+                  {tabNames[tab]}
                 </button>
               ))}
             </div>
@@ -258,14 +265,14 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
             {/* Editor Area */}
             <div className="relative">
               <div className="flex justify-between items-center mb-2">
-                <label className="text-sm font-semibold text-slate-700">Content Editor</label>
+                <label className="text-sm font-semibold text-slate-700">Editor Contenuti</label>
                 <div className="flex gap-2">
                    <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} />
-                    Generate with AI
+                    Genera con IA
                   </button>
                 </div>
               </div>
@@ -275,13 +282,13 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
                   key={activeTab} // Force remount on tab change to sync contentEditable
                   value={getActiveContent()}
                   onChange={setActiveContent}
-                  placeholder={`Design your ${activeTab} here...`}
+                  placeholder={`Crea qui la sezione ${tabNames[activeTab]}...`}
                   className="h-full shadow-sm"
                 />
               </div>
 
               <p className="mt-2 text-xs text-slate-500">
-                Use the "Variable" button in the toolbar to insert placeholders like {'{{name}}'}.
+                Usa il pulsante "Variabile" nella toolbar per inserire placeholder come {'{{nome}}'}.
               </p>
             </div>
           </div>
@@ -291,10 +298,10 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
         <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 z-10 shrink-0">
             <span className="font-semibold text-slate-600 flex items-center gap-2">
-              <Eye size={18} /> Live Preview
+              <Eye size={18} /> Anteprima Live
             </span>
             <div className="text-xs text-slate-400">
-              Renders as standard HTML
+              Renderizzato come HTML standard
             </div>
           </div>
           {/* Scrollable container: flex-1 ensures it takes available space, overflow-y-auto enables scrolling */}
@@ -303,7 +310,7 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
             <div className="w-full max-w-2xl bg-white shadow-xl rounded-lg overflow-hidden min-h-[600px] flex flex-col mx-auto">
                {/* Simulate Subject Line in Preview */}
                <div className="bg-slate-50 border-b border-slate-100 p-4">
-                  <span className="text-xs font-bold text-slate-400 uppercase">Subject:</span>
+                  <span className="text-xs font-bold text-slate-400 uppercase">Oggetto:</span>
                   <p className="text-sm font-medium text-slate-800">{subject.replace(/\{\{([\w\d_-]+)\}\}/g, (match, p1) => `<span class="bg-yellow-100 text-yellow-800 px-1 rounded">${match}</span>`)}</p>
                </div>
                
@@ -323,7 +330,7 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
              <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"/>
-                  Integration Details
+                  Dettagli Integrazione
                 </h3>
                 <button onClick={() => setShowSqlModal(false)} className="text-slate-400 hover:text-slate-600">
                   <span className="text-2xl">&times;</span>
@@ -334,7 +341,7 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
                 {/* INSERT Section */}
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                   <div>
-                    <label className="text-xs font-bold text-slate-500 uppercase tracking-wider mb-2 block">1. Setup (Run once in DB)</label>
+                    <label className="text-xs font-bold text-slate-500 uppercase tracking-wider mb-2 block">1. Setup (Esegui una volta nel DB)</label>
                     <div className="relative">
                       <pre className="bg-slate-900 text-slate-100 p-4 rounded-lg overflow-x-auto text-sm font-mono custom-scrollbar h-40">
                         {currentInsertSql}
@@ -342,7 +349,7 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
                       <button 
                         onClick={() => navigator.clipboard.writeText(currentInsertSql)}
                         className="absolute top-2 right-2 p-2 bg-slate-700 text-white rounded hover:bg-slate-600"
-                        title="Copy INSERT SQL"
+                        title="Copia SQL INSERT"
                       >
                         <Copy size={16} />
                       </button>
@@ -350,7 +357,7 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
                   </div>
 
                   <div>
-                     <label className="text-xs font-bold text-slate-500 uppercase tracking-wider mb-2 block">2. Fetch (n8n SQL Node)</label>
+                     <label className="text-xs font-bold text-slate-500 uppercase tracking-wider mb-2 block">2. Recupero (Nodo SQL n8n)</label>
                      <div className="relative">
                       <pre className="bg-slate-800 text-slate-50 p-4 rounded-lg overflow-x-auto text-sm font-mono custom-scrollbar h-40">
                         {currentSelectSql}
@@ -358,7 +365,7 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
                       <button 
                         onClick={() => navigator.clipboard.writeText(currentSelectSql)}
                         className="absolute top-2 right-2 p-2 bg-slate-600 text-white rounded hover:bg-slate-500"
-                        title="Copy SELECT SQL"
+                        title="Copia SQL SELECT"
                       >
                         <Copy size={16} />
                       </button>
@@ -370,7 +377,7 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
                 <div>
                    <label className="text-xs font-bold text-purple-600 uppercase tracking-wider mb-2 flex items-center gap-2">
                      <Code size={16} />
-                     3. Populate (n8n Code Node)
+                     3. Popolamento (Nodo Codice n8n)
                    </label>
                    <div className="relative">
                     <pre className="bg-slate-50 border border-slate-200 text-slate-700 p-4 rounded-lg overflow-x-auto text-sm font-mono custom-scrollbar max-h-60">
@@ -379,13 +386,13 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
                     <button 
                       onClick={() => navigator.clipboard.writeText(currentN8nCode)}
                       className="absolute top-2 right-2 p-2 bg-white border border-slate-200 text-slate-600 rounded hover:bg-slate-50 shadow-sm"
-                      title="Copy JS Code"
+                      title="Copia Codice JS"
                     >
                       <Copy size={16} />
                     </button>
                   </div>
                    <p className="text-xs text-slate-500 mt-2">
-                     Paste this into a <strong>Code Node</strong> connected after your SQL node. Replace <code>REPLACE_WITH_VALUE</code> with your actual data variables (e.g. <code>$('NodeName').item.json.name</code>).
+                     Incolla questo codice in un <strong>Nodo Code</strong> collegato dopo il tuo nodo SQL. Sostituisci <code>REPLACE_WITH_VALUE</code> con le variabili reali (es. <code>$('NodeName').item.json.name</code>).
                    </p>
                 </div>
              </div>
@@ -399,15 +406,15 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
           <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 flex items-center gap-2">
                <Wand2 className="text-purple-600"/>
-               AI Content Generator
+               Generatore Contenuti IA
              </h3>
              <p className="text-sm text-slate-600 mb-4">
-               Describe what you want for the <strong>{activeTab}</strong> section. 
-               The AI will generate HTML code with placeholders.
+               Descrivi cosa vuoi per la sezione <strong>{tabNames[activeTab]}</strong>. 
+               L'IA genererà il codice HTML con i placeholder necessari.
              </p>
              <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="e.g., Write a polite notification that the user's password has been changed successfully. Include a placeholder for the user's name."
+               placeholder="es. Scrivi una notifica gentile che avvisi l'utente del cambio password avvenuto con successo. Includi un placeholder per il nome utente."
                value={aiPrompt}
                onChange={(e) => setAiPrompt(e.target.value)}
              />
@@ -416,20 +423,20 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
                  onClick={() => setShowAiModal(false)}
                  className="px-4 py-2 text-slate-600 hover:bg-slate-100 rounded"
                >
-                 Cancel
+                 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 ? 'opacity-70' : ''}`}
                >
-                 {isGenerating ? 'Generating...' : 'Generate HTML'}
+                 {isGenerating ? 'Generazione...' : 'Genera HTML'}
                  {!isGenerating && <Wand2 size={16} />}
                </button>
              </div>
              {!process.env.API_KEY && (
                <p className="mt-3 text-xs text-red-500">
-                 Note: API_KEY not detected in environment. This feature requires a Gemini API key.
+                 Nota: API_KEY non rilevata nell'ambiente. Questa funzione richiede una chiave API Gemini.
                </p>
              )}
           </div>