// --- Impostazioni — versione funzionale cablata all'API -----------------

const SETTINGS_TABS = [
  { id: 'fiscali',     label: 'Dati fiscali',   icon: 'landmark' },
  { id: 'pagamenti',   label: 'Pagamenti',      icon: 'banknote' },
  { id: 'pec',         label: 'PEC & SDI',      icon: 'send' },
  { id: 'stripe',      label: 'Stripe',         icon: 'credit-card' },
  { id: 'email',       label: 'Email cliente',  icon: 'mail' },
  { id: 'logo',        label: 'Logo',           icon: 'image' },
  { id: 'account',     label: 'Account',        icon: 'user-circle' },
];

const REGIMI = [
  { id: 'RF01', label: 'RF01 — Ordinario' },
  { id: 'RF19', label: 'RF19 — Forfettario' },
  { id: 'RF02', label: 'RF02 — Contribuenti minimi' },
];

function SettingsScreen() {
  const [tab, setTab] = useState('fiscali');
  const [settings, setSettings] = useState(null);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [msg, setMsg] = useState('');

  useEffect(() => {
    (window.LibroAPI?.settings?.() || Promise.reject(new Error('No API')))
      .then((s) => { setSettings(s || {}); setLoading(false); })
      .catch((e) => { setMsg(e.message); setLoading(false); });
  }, []);

  const set = (k) => (e) => setSettings({ ...settings, [k]: e.target.value });
  const save = async () => {
    setSaving(true); setMsg('');
    try {
      const saved = await window.LibroAPI.saveSettings(settings);
      setSettings(saved);
      setMsg('Salvato');
      setTimeout(() => setMsg(''), 2000);
    } catch (e) { setMsg('Errore: ' + e.message); }
    finally { setSaving(false); }
  };

  return (
    <>
      <Topbar crumbs={['Gestionale', 'Impostazioni']} />
      <div className="content">
        <div className="page-head">
          <div>
            <h1 className="page-title">Impostazioni</h1>
            <div className="page-sub">Dati fiscali, pagamenti e integrazioni del tuo gestionale</div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 12 }}>
            {msg && <span style={{ color: msg.startsWith('Errore') ? 'var(--red)' : 'var(--green)' }}>{msg}</span>}
            <button className="btn btn-accent" onClick={save} disabled={saving || loading}>
              {saving ? 'Salvataggio…' : 'Salva modifiche'}
            </button>
          </div>
        </div>

        {loading ? (
          <div style={{ color: 'var(--ink-3)', padding: 40, textAlign: 'center' }}>Caricamento…</div>
        ) : (
          <div style={{ display: 'grid', gridTemplateColumns: '220px 1fr', gap: 32, alignItems: 'start' }}>
            <nav style={{ position: 'sticky', top: 70, display: 'flex', flexDirection: 'column', gap: 1 }}>
              {SETTINGS_TABS.map((t) => (
                <div key={t.id} onClick={() => setTab(t.id)} className={`nav-item ${tab === t.id ? 'active' : ''}`} style={{ padding: '9px 12px' }}>
                  <Icon name={t.icon} size={14} />
                  <span>{t.label}</span>
                  {tab === t.id && <Icon name="chevron-right" size={13} style={{ marginLeft: 'auto', color: 'var(--accent)' }} />}
                </div>
              ))}
            </nav>

            <div style={{ minWidth: 0 }}>
              {tab === 'fiscali' && <FiscaliPanel s={settings} set={set} />}
              {tab === 'pagamenti' && <PagamentiPanel s={settings} set={set} />}
              {tab === 'pec' && <PECPanel s={settings} set={set} onChange={setSettings} />}
              {tab === 'stripe' && <StripePanel s={settings} set={set} />}
              {tab === 'email' && <EmailPanel s={settings} set={set} onChange={setSettings} />}
              {tab === 'logo' && <LogoPanel s={settings} onChange={setSettings} />}
              {tab === 'account' && <AccountPanel />}
            </div>
          </div>
        )}
      </div>
    </>
  );
}

function Panel({ title, sub, children }) {
  return (
    <div className="card" style={{ background: '#fff', padding: 24, border: '1px solid var(--rule)', borderRadius: 12, marginBottom: 16 }}>
      <div style={{ marginBottom: 20 }}>
        <h3 style={{ fontFamily: 'Fraunces', fontSize: 20, fontWeight: 500, margin: 0 }}>{title}</h3>
        {sub && <div style={{ fontSize: 12.5, color: 'var(--ink-3)', marginTop: 4 }}>{sub}</div>}
      </div>
      {children}
    </div>
  );
}

function FiscaliPanel({ s, set }) {
  return (
    <Panel title="Dati fiscali" sub="Appaiono su ogni fattura emessa (PDF e XML SDI)">
      <div className="field"><label className="label">Denominazione / Nome attività</label>
        <input className="input" value={s.denominazione || ''} onChange={set('denominazione')} placeholder="es. Mario Rossi Design di Mario Rossi" />
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
        <div className="field"><label className="label">Nome</label>
          <input className="input" value={s.nome || ''} onChange={set('nome')} />
        </div>
        <div className="field"><label className="label">Cognome</label>
          <input className="input" value={s.cognome || ''} onChange={set('cognome')} />
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
        <div className="field"><label className="label">P.IVA *</label>
          <input className="input mono" value={s.p_iva || ''} onChange={set('p_iva')} maxLength={11} />
        </div>
        <div className="field"><label className="label">Codice fiscale</label>
          <input className="input mono" value={s.codice_fiscale || ''} onChange={set('codice_fiscale')} />
        </div>
      </div>
      <div className="field"><label className="label">Regime fiscale</label>
        <select className="select" value={s.regime_fiscale || 'RF01'} onChange={set('regime_fiscale')}>
          {REGIMI.map((r) => <option key={r.id} value={r.id}>{r.label}</option>)}
        </select>
      </div>
      <div className="field"><label className="label">Indirizzo</label>
        <input className="input" value={s.indirizzo || ''} onChange={set('indirizzo')} />
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr 1fr', gap: 12 }}>
        <div className="field"><label className="label">CAP</label>
          <input className="input mono" value={s.cap || ''} onChange={set('cap')} maxLength={5} />
        </div>
        <div className="field"><label className="label">Comune</label>
          <input className="input" value={s.comune || ''} onChange={set('comune')} />
        </div>
        <div className="field"><label className="label">Prov.</label>
          <input className="input" value={s.provincia || ''} onChange={set('provincia')} maxLength={2} />
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
        <div className="field"><label className="label">Email</label>
          <input className="input" type="email" value={s.email || ''} onChange={set('email')} />
        </div>
        <div className="field"><label className="label">PEC</label>
          <input className="input" type="email" value={s.pec || ''} onChange={set('pec')} />
        </div>
      </div>
      <div className="field"><label className="label">Telefono</label>
        <input className="input" value={s.telefono || ''} onChange={set('telefono')} />
      </div>
    </Panel>
  );
}

function PagamentiPanel({ s, set }) {
  return (
    <Panel title="Pagamenti" sub="Default applicati alle nuove fatture">
      <div className="field"><label className="label">IBAN</label>
        <input className="input mono" value={s.iban || ''} onChange={set('iban')} placeholder="IT60 X054 2811 1010 0000 0123 456" />
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 12 }}>
        <div className="field"><label className="label">Nome banca</label>
          <input className="input" value={s.banca_nome || ''} onChange={set('banca_nome')} />
        </div>
        <div className="field"><label className="label">BIC/SWIFT</label>
          <input className="input mono" value={s.bic_swift || ''} onChange={set('bic_swift')} />
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12 }}>
        <div className="field"><label className="label">Metodo default</label>
          <select className="select" value={s.default_metodo_pagamento || 'bonifico'} onChange={set('default_metodo_pagamento')}>
            <option value="bonifico">Bonifico</option>
            <option value="stripe">Stripe link</option>
            <option value="contanti">Contanti</option>
            <option value="carta">Carta</option>
            <option value="altro">Altro</option>
          </select>
        </div>
        <div className="field"><label className="label">Termini (giorni)</label>
          <input className="input mono" type="number" value={s.default_payment_days ?? 30} onChange={set('default_payment_days')} />
        </div>
        <div className="field"><label className="label">Aliquota IVA %</label>
          <input className="input mono" type="number" step="0.01" value={s.default_aliquota_iva ?? 22} onChange={set('default_aliquota_iva')} />
        </div>
      </div>
      <div className="field"><label className="label">Natura IVA (per forfettario)</label>
        <input className="input mono" value={s.default_natura_iva || ''} onChange={set('default_natura_iva')} placeholder="N2.2" />
      </div>
      <div className="field"><label className="label">Causale default</label>
        <textarea className="textarea" rows={2} value={s.default_causale || ''} onChange={set('default_causale')} />
      </div>
    </Panel>
  );
}

function PECPanel({ s, set, onChange }) {
  const [testing, setTesting] = useState(false);
  const [testMsg, setTestMsg] = useState('');
  const [polling, setPolling] = useState(false);
  const [pollMsg, setPollMsg] = useState('');

  const testSmtp = async () => {
    setTesting(true); setTestMsg('');
    try { await window.LibroAPI.testSMTP(); setTestMsg('✓ SMTP PEC OK'); }
    catch (e) { setTestMsg('✗ ' + e.message); }
    finally { setTesting(false); }
  };
  const pollNow = async () => {
    setPolling(true); setPollMsg('');
    try {
      const r = await window.LibroAPI.pollSDI();
      setPollMsg(`Letti ${r.read} messaggi, ${r.events} eventi nuovi`);
    } catch (e) { setPollMsg('Errore: ' + e.message); }
    finally { setPolling(false); }
  };

  return (
    <>
      <Panel title="PEC per SDI" sub="Invio XML fatture a Sistema di Interscambio via PEC (nessuna firma digitale richiesta per FPR12)">
        <div style={{ padding: 12, background: 'var(--paper-2)', border: '1px solid var(--rule)', borderRadius: 8, fontSize: 12, color: 'var(--ink-2)', marginBottom: 18, lineHeight: 1.55 }}>
          <Icon name="info" size={12} style={{ display: 'inline', marginRight: 4 }} />
          Per Aruba PEC: SMTP <span className="mono">smtps.pec.aruba.it:465</span> · IMAP <span className="mono">imaps.pec.aruba.it:993</span>. Usa le credenziali della tua casella PEC.
        </div>

        <div className="field"><label className="label">Indirizzo PEC (user)</label>
          <input className="input mono" value={s.pec_user || ''} onChange={set('pec_user')} placeholder="tuopec@pec.it" />
        </div>
        <div className="field"><label className="label">Password PEC (lascia *** per non modificare)</label>
          <input className="input mono" type="password" value={s.pec_pass || ''} onChange={set('pec_pass')} />
        </div>

        <div style={{ marginTop: 14, fontSize: 11, fontWeight: 500, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--ink-3)' }}>SMTP (invio)</div>
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr', gap: 10, marginTop: 8 }}>
          <div className="field"><label className="label">Host SMTP</label>
            <input className="input mono" value={s.pec_smtp_host || ''} onChange={set('pec_smtp_host')} placeholder="smtps.pec.aruba.it" />
          </div>
          <div className="field"><label className="label">Porta</label>
            <input className="input mono" type="number" value={s.pec_smtp_port ?? 465} onChange={set('pec_smtp_port')} />
          </div>
          <div className="field"><label className="label">TLS</label>
            <select className="select" value={s.pec_smtp_secure ? '1' : '0'} onChange={(e) => onChange({ ...s, pec_smtp_secure: e.target.value === '1' ? 1 : 0 })}>
              <option value="1">SSL/TLS (465)</option>
              <option value="0">STARTTLS (587)</option>
            </select>
          </div>
        </div>

        <div style={{ marginTop: 14, fontSize: 11, fontWeight: 500, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--ink-3)' }}>IMAP (ricevute SDI)</div>
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 10, marginTop: 8 }}>
          <div className="field"><label className="label">Host IMAP</label>
            <input className="input mono" value={s.pec_imap_host || ''} onChange={set('pec_imap_host')} placeholder="imaps.pec.aruba.it" />
          </div>
          <div className="field"><label className="label">Porta</label>
            <input className="input mono" type="number" value={s.pec_imap_port ?? 993} onChange={set('pec_imap_port')} />
          </div>
        </div>

        <div style={{ marginTop: 14, display: 'flex', alignItems: 'center', gap: 10 }}>
          <label style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer', fontSize: 13 }}>
            <input type="checkbox" checked={!!s.sdi_poll_enabled} onChange={(e) => onChange({ ...s, sdi_poll_enabled: e.target.checked ? 1 : 0 })} />
            <span>Polling automatico ricevute SDI ogni 10 min</span>
          </label>
        </div>

        <div style={{ marginTop: 20, display: 'flex', gap: 8 }}>
          <button type="button" className="btn btn-ghost" onClick={testSmtp} disabled={testing}>
            <Icon name="plug" size={13} /> {testing ? 'Test in corso…' : 'Testa SMTP'}
          </button>
          <button type="button" className="btn btn-ghost" onClick={pollNow} disabled={polling}>
            <Icon name="refresh-cw" size={13} /> {polling ? 'Polling…' : 'Poll IMAP ora'}
          </button>
          {testMsg && <span style={{ fontSize: 12, alignSelf: 'center', color: testMsg.startsWith('✓') ? 'var(--green)' : 'var(--red)' }}>{testMsg}</span>}
          {pollMsg && <span style={{ fontSize: 12, alignSelf: 'center', color: 'var(--ink-2)' }}>{pollMsg}</span>}
        </div>

        <div style={{ marginTop: 20, padding: 12, background: '#fff', border: '1px solid var(--rule)', borderRadius: 8, fontSize: 12, color: 'var(--ink-2)' }}>
          <strong>Come funziona:</strong> Quando emetti una fattura, il bottone "Invia a SDI" nella lista fatture genera l'XML <code className="mono">IT&lt;piva&gt;_&lt;progressivo&gt;.xml</code> e lo spedisce come allegato via PEC a <code className="mono">sdi01@pec.fatturapa.it</code>. Il poller IMAP legge le ricevute (RC/NS/NE/MC/DT) dalla tua casella PEC e aggiorna lo stato della fattura in automatico.
        </div>
      </Panel>
    </>
  );
}

function StripePanel({ s, set }) {
  return (
    <Panel title="Stripe" sub="Integrazione pagamenti. Le chiavi sono mascherate dopo il salvataggio.">
      <div className="field"><label className="label">Publishable key</label>
        <input className="input mono" value={s.stripe_publishable_key || ''} onChange={set('stripe_publishable_key')} placeholder="pk_live_…" />
      </div>
      <div className="field"><label className="label">Secret key (lascia *** per non modificare)</label>
        <input className="input mono" value={s.stripe_secret_key || ''} onChange={set('stripe_secret_key')} placeholder="sk_live_…" type="password" />
      </div>
      <div className="field"><label className="label">Webhook secret</label>
        <input className="input mono" value={s.stripe_webhook_secret || ''} onChange={set('stripe_webhook_secret')} placeholder="whsec_…" type="password" />
      </div>
      <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 8, lineHeight: 1.5 }}>
        <Icon name="info" size={12} style={{ display: 'inline', marginRight: 4 }} />
        L'integrazione Stripe verrà abilitata in una fase successiva. Per ora le chiavi vengono solo memorizzate.
      </div>
    </Panel>
  );
}

function EmailPanel({ s, set, onChange }) {
  const [test, setTest] = useState('');
  const doTest = async () => {
    try {
      await fetch('/api/settings', { method: 'PUT', credentials: 'include', headers: {'Content-Type':'application/json'}, body: JSON.stringify(s) });
      // nessun endpoint test email ancora — solo verifica che i campi ci siano
      setTest('✓ Config salvata (il test vero avviene all\'invio di una fattura)');
    } catch (e) { setTest('✗ ' + e.message); }
  };
  return (
    <Panel title="Email cliente (SMTP generico)" sub="Per inviare PDF + XML al cliente come allegato. Non usare PEC qui.">
      <div style={{ padding: 12, background: 'var(--paper-2)', border: '1px solid var(--rule)', borderRadius: 8, fontSize: 12, color: 'var(--ink-2)', marginBottom: 18, lineHeight: 1.55 }}>
        <Icon name="info" size={12} style={{ display: 'inline', marginRight: 4 }} />
        Gmail: <span className="mono">smtp.gmail.com:587</span> (serve App Password). Aruba hosting: <span className="mono">smtps.aruba.it:465</span>. SendGrid: <span className="mono">smtp.sendgrid.net:587</span> con user <span className="mono">apikey</span>.
      </div>
      <div className="field"><label className="label">Mittente (From)</label>
        <input className="input mono" value={s.smtp_from || ''} onChange={set('smtp_from')} placeholder="noreply@tuodominio.it" />
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr', gap: 10 }}>
        <div className="field"><label className="label">Host SMTP</label>
          <input className="input mono" value={s.smtp_host || ''} onChange={set('smtp_host')} placeholder="smtp.gmail.com" />
        </div>
        <div className="field"><label className="label">Porta</label>
          <input className="input mono" type="number" value={s.smtp_port ?? 587} onChange={set('smtp_port')} />
        </div>
        <div className="field"><label className="label">Sicurezza</label>
          <select className="input" value={s.smtp_secure ? '1' : '0'} onChange={(e) => onChange({ ...s, smtp_secure: e.target.value === '1' ? 1 : 0 })}>
            <option value="0">STARTTLS (587)</option>
            <option value="1">SSL/TLS (465)</option>
          </select>
        </div>
      </div>
      <div className="field"><label className="label">Username SMTP</label>
        <input className="input mono" value={s.smtp_user || ''} onChange={set('smtp_user')} />
      </div>
      <div className="field"><label className="label">Password SMTP (*** per non modificare)</label>
        <input className="input mono" type="password" value={s.smtp_pass || ''} onChange={set('smtp_pass')} />
      </div>
      <button type="button" className="btn btn-ghost" onClick={doTest} style={{ marginTop: 10 }}>Salva e verifica config</button>
      {test && <div style={{ marginTop: 10, fontSize: 12, color: test.startsWith('✓') ? 'var(--green)' : 'var(--red)' }}>{test}</div>}
    </Panel>
  );
}

function LogoPanel({ s, onChange }) {
  const [uploading, setUploading] = useState(false);
  const [err, setErr] = useState('');
  const fileRef = useRef(null);

  const onPick = async (e) => {
    const file = e.target.files?.[0];
    if (!file) return;
    setUploading(true); setErr('');
    const fd = new FormData();
    fd.append('file', file);
    try {
      const r = await fetch('/api/settings/logo', { method: 'POST', credentials: 'include', body: fd });
      const j = await r.json();
      if (!r.ok) throw new Error(j.error);
      onChange({ ...s, logo_path: j.abs });
    } catch (e) { setErr(e.message); }
    finally { setUploading(false); }
  };

  const remove = async () => {
    if (!confirm('Rimuovere il logo?')) return;
    await fetch('/api/settings/logo', { method: 'DELETE', credentials: 'include' });
    onChange({ ...s, logo_path: null });
  };

  const logoUrl = s.logo_path ? `/uploads/${s.logo_path.split(/[\\/]/).pop()}` : null;

  return (
    <Panel title="Logo azienda" sub="Appare nel PDF delle fatture in alto a sinistra. Formato PNG/JPG/WebP, max 2MB.">
      {logoUrl ? (
        <div style={{ padding: 20, border: '1px solid var(--rule)', borderRadius: 8, textAlign: 'center', marginBottom: 14 }}>
          <img src={logoUrl} alt="Logo" style={{ maxHeight: 120, maxWidth: 300 }} />
        </div>
      ) : (
        <div style={{ padding: 40, border: '1px dashed var(--rule)', borderRadius: 8, textAlign: 'center', color: 'var(--ink-3)', marginBottom: 14 }}>
          Nessun logo caricato
        </div>
      )}
      {err && <div className="err" style={{ marginBottom: 10 }}>{err}</div>}
      <input type="file" ref={fileRef} accept="image/*" style={{ display: 'none' }} onChange={onPick} />
      <button type="button" className="btn btn-ghost" onClick={() => fileRef.current?.click()} disabled={uploading}>
        <Icon name="upload" size={13} /> {uploading ? 'Carico…' : (logoUrl ? 'Sostituisci' : 'Carica logo')}
      </button>
      {logoUrl && <button type="button" className="btn btn-ghost" onClick={remove} style={{ marginLeft: 8, color: 'var(--red)' }}>
        <Icon name="trash-2" size={13} /> Rimuovi
      </button>}
    </Panel>
  );
}

function AccountPanel() {
  const [cur, setCur] = useState('');
  const [nw, setNw] = useState('');
  const [confirm, setConfirm] = useState('');
  const [msg, setMsg] = useState('');
  const [saving, setSaving] = useState(false);

  const submit = async (e) => {
    e.preventDefault();
    if (nw.length < 8) { setMsg('La nuova password deve avere almeno 8 caratteri'); return; }
    if (nw !== confirm) { setMsg('Le password non coincidono'); return; }
    setSaving(true); setMsg('');
    try {
      const r = await fetch('/api/auth/change-password', {
        method: 'POST', credentials: 'include',
        headers: {'Content-Type':'application/json'},
        body: JSON.stringify({ current: cur, new_password: nw }),
      });
      const j = await r.json();
      if (!r.ok) throw new Error(j.error);
      setMsg('✓ Password cambiata'); setCur(''); setNw(''); setConfirm('');
    } catch (e) { setMsg('✗ ' + e.message); }
    finally { setSaving(false); }
  };

  return (
    <Panel title="Account" sub="Cambio password dell'utente single-tenant">
      <form onSubmit={submit}>
        <div className="field"><label className="label">Password attuale</label>
          <input className="input" type="password" value={cur} onChange={(e) => setCur(e.target.value)} required />
        </div>
        <div className="field"><label className="label">Nuova password (min 8 caratteri)</label>
          <input className="input" type="password" value={nw} onChange={(e) => setNw(e.target.value)} required minLength={8} />
        </div>
        <div className="field"><label className="label">Conferma nuova password</label>
          <input className="input" type="password" value={confirm} onChange={(e) => setConfirm(e.target.value)} required />
        </div>
        {msg && <div style={{ fontSize: 12, marginBottom: 12, color: msg.startsWith('✓') ? 'var(--green)' : 'var(--red)' }}>{msg}</div>}
        <button className="btn btn-accent" type="submit" disabled={saving}>{saving ? 'Cambio…' : 'Cambia password'}</button>
      </form>
    </Panel>
  );
}

window.SettingsScreen = SettingsScreen;