/**
 * signatures.js
 * Pagina di gestione delle firme email per agente.
 * Usa Quill.js come editor WYSIWYG.
 */

const SignaturesView = {
  agentId: null,
  signatures: [],
  editingId: null,
  signatureQuill: null,

  async render() {
    this.agentId = App.currentAgentId || 0;
    const container = document.getElementById('view-container');
    container.innerHTML = `
      <div style="max-width: 820px; margin: 0 auto; padding: var(--space-xl) var(--space-lg);">
        <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom: var(--space-xl);">
          <div>
            <h2 style="margin:0; font-size:1.25rem; font-weight:700; color:var(--text-primary);">✉️ Le Mie Firme Email</h2>
            <p style="margin:4px 0 0; font-size:0.85rem; color:var(--text-muted);">Gestisci le firme da allegare automaticamente alle email inviate dal ticket.</p>
          </div>
          <button class="btn btn-primary btn-sm" id="btn-new-signature">
            + Nuova Firma
          </button>
        </div>

        <!-- Lista firme -->
        <div id="signatures-list" style="display:flex; flex-direction:column; gap:var(--space-md);"></div>

        <!-- Modal Editor -->
        <div id="signature-editor-modal" style="display:none; position:fixed; inset:0; z-index:8000; background:rgba(0,0,0,0.5); backdrop-filter:blur(4px); align-items:center; justify-content:center;">
          <div style="background:var(--bg-card); border:1px solid var(--border-light); border-radius:var(--radius-xl); box-shadow:0 24px 80px rgba(0,0,0,0.3); width:min(720px,94vw); max-height:90vh; display:flex; flex-direction:column;">
            <div style="padding:16px 20px 12px; border-bottom:1px solid var(--border-subtle); display:flex; align-items:center; justify-content:space-between; flex-shrink:0;">
              <div style="font-size:1rem; font-weight:600; color:var(--text-primary);" id="sig-modal-title">Nuova Firma</div>
              <button id="sig-modal-close" style="background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:1.2rem;">✕</button>
            </div>
            <div style="padding:16px 20px; flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:12px;">
              <div>
                <label style="font-size:0.75rem; font-weight:600; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.04em;">Nome Firma</label>
                <input type="text" id="sig-name" class="form-input" placeholder="es. Firma Professionale" style="margin-bottom:0; margin-top:4px;" />
              </div>
              <div>
                <label style="font-size:0.75rem; font-weight:600; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.04em;">Contenuto</label>
                <div style="margin-top:4px; border:1px solid var(--border-subtle); border-radius:var(--radius-md); overflow:hidden; background:var(--bg-tertiary);">
                  <div id="sig-quill-editor" style="min-height:200px;"></div>
                </div>
              </div>
              <label style="display:flex; align-items:center; gap:8px; font-size:0.88rem; color:var(--text-secondary); cursor:pointer;">
                <input type="checkbox" id="sig-is-default" />
                Imposta come firma predefinita
              </label>
            </div>
            <div style="padding:12px 20px; border-top:1px solid var(--border-subtle); display:flex; justify-content:flex-end; gap:10px; flex-shrink:0;">
              <button class="btn btn-ghost btn-sm" id="sig-cancel">Annulla</button>
              <button class="btn btn-primary btn-sm" id="sig-save">Salva Firma</button>
            </div>
          </div>
        </div>
      </div>
    `;

    document.getElementById('btn-new-signature').addEventListener('click', () => this.openEditor(null));

    await this.loadSignatures();
  },

  async loadSignatures() {
    try {
      this.signatures = await App.api(`/api/email/signatures?agent_id=${this.agentId}`);
      this.renderList();
    } catch (err) {
      Toast.error('Errore caricamento firme: ' + err.message);
    }
  },

  renderList() {
    const list = document.getElementById('signatures-list');
    if (!list) return;

    if (!this.signatures.length) {
      list.innerHTML = `
        <div class="empty-state">
          <div class="empty-state-icon">✉️</div>
          <div class="empty-state-text">Nessuna firma configurata</div>
          <div class="empty-state-sub">Crea la tua prima firma per velocizzare l'invio delle email.</div>
        </div>
      `;
      return;
    }

    list.innerHTML = this.signatures.map(sig => `
      <div class="card" style="padding: var(--space-lg);">
        <div style="display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:${sig.body_html ? 'var(--space-md)' : '0'};">
          <div>
            <div style="font-weight:600; font-size:0.95rem; color:var(--text-primary); display:flex; align-items:center; gap:8px;">
              ${App.escapeHtml(sig.name)}
              ${sig.is_default ? '<span style="font-size:0.72rem; background:var(--accent-primary); color:#fff; padding:2px 7px; border-radius:20px;">Predefinita</span>' : ''}
            </div>
            <div style="font-size:0.72rem; color:var(--text-muted); margin-top:2px;">
              Creata: ${new Date(sig.created_at).toLocaleDateString('it-IT')}
            </div>
          </div>
          <div style="display:flex; gap:6px; flex-shrink:0;">
            ${!sig.is_default ? `<button class="btn btn-ghost btn-sm sig-btn-default" data-id="${sig.id}" style="height:30px; font-size:0.78rem;">★ Predefinita</button>` : ''}
            <button class="btn btn-ghost btn-sm sig-btn-edit" data-id="${sig.id}" style="height:30px; font-size:0.78rem;">✏️ Modifica</button>
            <button class="btn btn-ghost btn-sm sig-btn-delete" data-id="${sig.id}" style="height:30px; font-size:0.78rem; color:var(--error);">🗑️</button>
          </div>
        </div>
        ${sig.body_html ? `
          <div style="border:1px solid var(--border-subtle); border-radius:var(--radius-md); padding:10px 14px; background:var(--bg-secondary); max-height:120px; overflow:hidden; position:relative;">
            <div style="font-size:0.82rem; color:var(--text-secondary);">${sig.body_html}</div>
            <div style="position:absolute;bottom:0;left:0;right:0;height:40px;background:linear-gradient(transparent,var(--bg-secondary));"></div>
          </div>
        ` : ''}
      </div>
    `).join('');

    // Bind buttons
    list.querySelectorAll('.sig-btn-edit').forEach(btn => {
      btn.addEventListener('click', () => this.openEditor(parseInt(btn.dataset.id, 10)));
    });
    list.querySelectorAll('.sig-btn-delete').forEach(btn => {
      btn.addEventListener('click', () => this.deleteSig(parseInt(btn.dataset.id, 10)));
    });
    list.querySelectorAll('.sig-btn-default').forEach(btn => {
      btn.addEventListener('click', () => this.setDefault(parseInt(btn.dataset.id, 10)));
    });
  },

  openEditor(id) {
    this.editingId = id;
    const sig = id ? this.signatures.find(s => s.id === id) : null;

    const modal = document.getElementById('signature-editor-modal');
    modal.style.display = 'flex';

    document.getElementById('sig-modal-title').textContent = id ? 'Modifica Firma' : 'Nuova Firma';
    document.getElementById('sig-name').value = sig ? sig.name : '';
    document.getElementById('sig-is-default').checked = sig ? !!sig.is_default : false;

    // Init or reset Quill
    if (this.signatureQuill) {
      this.signatureQuill.root.innerHTML = sig ? (sig.body_html || '') : '';
    } else {
      this.signatureQuill = new Quill('#sig-quill-editor', {
        theme: 'snow',
        placeholder: 'Inserisci la tua firma...',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline'],
            [{ 'color': [] }],
            ['link', 'image'],
            ['clean']
          ]
        }
      });
      if (sig && sig.body_html) {
        this.signatureQuill.clipboard.dangerouslyPasteHTML(sig.body_html);
      }
    }

    document.getElementById('sig-modal-close').onclick = () => this.closeEditor();
    document.getElementById('sig-cancel').onclick = () => this.closeEditor();
    document.getElementById('sig-save').onclick = () => this.saveSig();

    modal.onclick = (e) => { if (e.target === modal) this.closeEditor(); };
  },

  closeEditor() {
    const modal = document.getElementById('signature-editor-modal');
    if (modal) modal.style.display = 'none';
    this.editingId = null;
  },

  async saveSig() {
    const name = document.getElementById('sig-name').value.trim();
    const body_html = this.signatureQuill ? this.signatureQuill.root.innerHTML : '';
    const is_default = document.getElementById('sig-is-default').checked ? 1 : 0;

    if (!name) { Toast.warning('Inserisci un nome per la firma'); return; }

    const saveBtn = document.getElementById('sig-save');
    saveBtn.disabled = true;
    saveBtn.textContent = 'Salvataggio...';

    try {
      const payload = { agent_id: this.agentId, name, body_html, is_default };

      if (this.editingId) {
        await App.api(`/api/email/signatures/${this.editingId}`, {
          method: 'PUT',
          body: JSON.stringify(payload),
        });
        Toast.success('Firma aggiornata');
      } else {
        await App.api('/api/email/signatures', {
          method: 'POST',
          body: JSON.stringify(payload),
        });
        Toast.success('Firma creata');
      }

      this.closeEditor();
      await this.loadSignatures();
    } catch (err) {
      Toast.error('Errore salvataggio: ' + err.message);
    } finally {
      saveBtn.disabled = false;
      saveBtn.textContent = 'Salva Firma';
    }
  },

  async deleteSig(id) {
    const ok = await App.confirm('Elimina Firma', 'Sei sicuro di voler eliminare questa firma?');
    if (!ok) return;
    try {
      await App.api(`/api/email/signatures/${id}`, { method: 'DELETE' });
      Toast.success('Firma eliminata');
      await this.loadSignatures();
    } catch (err) {
      Toast.error('Errore eliminazione: ' + err.message);
    }
  },

  async setDefault(id) {
    try {
      await App.api(`/api/email/signatures/${id}/default`, {
        method: 'PATCH',
        body: JSON.stringify({ agent_id: this.agentId }),
      });
      Toast.success('Firma impostata come predefinita');
      await this.loadSignatures();
    } catch (err) {
      Toast.error('Errore: ' + err.message);
    }
  }
};
window.SignaturesView = SignaturesView;