// --- Setup guidato: wizard primo avvio cablato all'API ------------------
function SetupWizard({ onDone }) {
  const [step, setStep] = useState(1);
  const [settings, setSettings] = useState(null);
  const [f, setF] = useState({});
  const [saving, setSaving] = useState(false);
  const [err, setErr] = useState('');

  useEffect(() => {
    window.LibroAPI.settings().then((s) => { setSettings(s); setF(s || {}); }).catch(() => {});
  }, []);

  const set = (k) => (e) => setF({ ...f, [k]: e.target.value });
  const next = () => setStep((s) => s + 1);
  const prev = () => setStep((s) => Math.max(1, s - 1));

  const save = async () => {
    setSaving(true); setErr('');
    try {
      await window.LibroAPI.saveSettings(f);
      onDone && onDone();
    } catch (e) { setErr(e.message); }
    finally { setSaving(false); }
  };

  if (!settings) return <div className="content" style={{ color: 'var(--ink-3)' }}>Caricamento…</div>;

  return (
    <>
      <Topbar crumbs={['Gestionale', 'Setup guidato']} />
      <div className="content" style={{ maxWidth: 700 }}>
        <div className="page-head">
          <div>
            <h1 className="page-title">Setup <em>guidato</em></h1>
            <div className="page-sub">Compila i dati essenziali per iniziare a emettere fatture.</div>
          </div>
          <div style={{ fontSize: 12, color: 'var(--ink-3)' }}>Passo {step} di 3</div>
        </div>

        {err && <div className="err" style={{ marginBottom: 14 }}><Icon name="alert-circle" size={14} /> {err}</div>}

        <div className="card" style={{ background: '#fff', border: '1px solid var(--rule)', borderRadius: 12, padding: 24 }}>
          {step === 1 && (
            <div>
              <h3 style={{ fontFamily: 'Fraunces', fontWeight: 500, fontSize: 20, marginBottom: 14 }}>1. Anagrafica fiscale</h3>
              <div className="field"><label className="label">Denominazione / Nome attività</label>
                <input className="input" value={f.denominazione || ''} onChange={set('denominazione')} />
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                <div className="field"><label className="label">P.IVA *</label>
                  <input className="input mono" value={f.p_iva || ''} onChange={set('p_iva')} maxLength={11} />
                </div>
                <div className="field"><label className="label">Codice fiscale</label>
                  <input className="input mono" value={f.codice_fiscale || ''} onChange={set('codice_fiscale')} />
                </div>
              </div>
              <div className="field"><label className="label">Regime fiscale</label>
                <select className="input" value={f.regime_fiscale || 'RF01'} onChange={set('regime_fiscale')}>
                  <option value="RF01">RF01 — Ordinario</option>
                  <option value="RF19">RF19 — Forfettario</option>
                  <option value="RF02">RF02 — Minimi</option>
                </select>
              </div>
            </div>
          )}
          {step === 2 && (
            <div>
              <h3 style={{ fontFamily: 'Fraunces', fontWeight: 500, fontSize: 20, marginBottom: 14 }}>2. Sede e contatti</h3>
              <div className="field"><label className="label">Indirizzo</label>
                <input className="input" value={f.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={f.cap || ''} onChange={set('cap')} maxLength={5} />
                </div>
                <div className="field"><label className="label">Comune</label>
                  <input className="input" value={f.comune || ''} onChange={set('comune')} />
                </div>
                <div className="field"><label className="label">Prov.</label>
                  <input className="input" value={f.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={f.email || ''} onChange={set('email')} />
                </div>
                <div className="field"><label className="label">PEC</label>
                  <input className="input" value={f.pec || ''} onChange={set('pec')} />
                </div>
              </div>
            </div>
          )}
          {step === 3 && (
            <div>
              <h3 style={{ fontFamily: 'Fraunces', fontWeight: 500, fontSize: 20, marginBottom: 14 }}>3. Pagamenti</h3>
              <div className="field"><label className="label">IBAN</label>
                <input className="input mono" value={f.iban || ''} onChange={set('iban')} />
              </div>
              <div className="field"><label className="label">Nome banca</label>
                <input className="input" value={f.banca_nome || ''} onChange={set('banca_nome')} />
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12 }}>
                <div className="field"><label className="label">Metodo default</label>
                  <select className="input" value={f.default_metodo_pagamento || 'bonifico'} onChange={set('default_metodo_pagamento')}>
                    <option value="bonifico">Bonifico</option><option value="stripe">Stripe</option>
                    <option value="contanti">Contanti</option><option value="carta">Carta</option>
                  </select>
                </div>
                <div className="field"><label className="label">Aliquota IVA %</label>
                  <input className="input mono" type="number" step="0.01" value={f.default_aliquota_iva ?? 22} onChange={set('default_aliquota_iva')} />
                </div>
                <div className="field"><label className="label">Natura IVA</label>
                  <input className="input mono" value={f.default_natura_iva || ''} onChange={set('default_natura_iva')} placeholder="N2.2" />
                </div>
              </div>
            </div>
          )}

          <div style={{ marginTop: 20, display: 'flex', justifyContent: 'space-between', gap: 10 }}>
            {step > 1 ? <button className="btn btn-ghost" onClick={prev}><Icon name="arrow-left" size={13} /> Indietro</button> : <div />}
            {step < 3 ? (
              <button className="btn btn-accent" onClick={next}>Avanti <Icon name="arrow-right" size={13} /></button>
            ) : (
              <button className="btn btn-accent" onClick={save} disabled={saving}>
                <Icon name="check-circle-2" size={13} /> {saving ? 'Salvataggio…' : 'Completa setup'}
              </button>
            )}
          </div>
        </div>
      </div>
    </>
  );
}

window.SetupWizard = SetupWizard;

// Trigger render dopo che tutti i componenti sono stati caricati
if (window.__renderLibro) window.__renderLibro();