// --- Abbonamenti / Incassi ricorrenti — cablato all'API -----------------
const CADENZE = [
  { id: 'mensile', label: 'Mensile' },
  { id: 'trimestrale', label: 'Trimestrale' },
  { id: 'semestrale', label: 'Semestrale' },
  { id: 'annuale', label: 'Annuale' },
];

function AbbonamentiScreen() {
  const [tab, setTab] = useState('subs'); // 'subs' | 'links'
  const [data, setData] = useState({ subscriptions: [], mrr: 0, arr: 0, total_active: 0 });
  const [clients, setClients] = useState([]);
  const [loading, setLoading] = useState(true);
  const [showForm, setShowForm] = useState(false);
  const [showLinkForm, setShowLinkForm] = useState(false);
  const [editing, setEditing] = useState(null);
  const [links, setLinks] = useState([]);
  const [linksLoaded, setLinksLoaded] = useState(false);

  const loadLinks = () => {
    fetch('/api/stripe/payment-links', { credentials: 'include' })
      .then(r => r.json())
      .then((d) => { setLinks(Array.isArray(d) ? d : []); setLinksLoaded(true); })
      .catch(() => setLinksLoaded(true));
  };

  const load = () => {
    setLoading(true);
    Promise.all([
      fetch('/api/subscriptions', { credentials: 'include' }).then(r => r.json()),
      window.LibroAPI.clients(),
    ]).then(([d, cs]) => { setData(d); setClients(cs); setLoading(false); })
      .catch(() => setLoading(false));
  };
  useEffect(load, []);
  useEffect(() => { if (tab === 'links' && !linksLoaded) loadLinks(); }, [tab]);

  return (
    <>
      <Topbar crumbs={['Gestionale', 'Amministrazione', 'Incassi ricorrenti']} />
      <div className="content">
        <div className="page-head">
          <div>
            <h1 className="page-title">Incassi <em>ricorrenti</em></h1>
            <div className="page-sub">Abbonamenti con emissione automatica</div>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <button className="btn btn-ghost btn-lg" onClick={() => setShowLinkForm(true)}>
              <Icon name="link" size={15} /> Link one-time
            </button>
            <button className="btn btn-accent btn-lg" onClick={() => { setEditing(null); setShowForm(true); }}>
              <Icon name="plus" size={15} /> Nuovo abbonamento
            </button>
          </div>
        </div>

        <div className="tabs" style={{ marginBottom: 14 }}>
          <div className={`tab ${tab === 'subs' ? 'active' : ''}`} onClick={() => setTab('subs')}>Abbonamenti<span className="c">{data.subscriptions.length}</span></div>
          <div className={`tab ${tab === 'links' ? 'active' : ''}`} onClick={() => setTab('links')}>Link one-time<span className="c">{links.length}</span></div>
        </div>

        <div className="kpi-strip">
          {[
            { label: 'MRR', value: data.mrr, ic: 'trending-up', meta: 'recurring mensile' },
            { label: 'ARR', value: data.arr, ic: 'calculator', meta: 'proiezione annuale' },
            { label: 'Attivi', value: data.total_active, ic: 'repeat', meta: `su ${data.subscriptions.length} totali`, nonEuro: true },
            { label: 'Prossime', value: data.subscriptions.filter((s) => s.active && s.next_billing_date && new Date(s.next_billing_date) <= new Date(Date.now() + 30 * 24 * 3600 * 1000)).length, ic: 'calendar', meta: 'prossimi 30gg', nonEuro: true },
          ].map((k, i) => {
            const { intp, cent } = fmtEURSplit(k.value || 0);
            return (
              <div key={i} className="kpi">
                <div className="kpi-label"><Icon name={k.ic} size={12} stroke={2} />{k.label}</div>
                <div className="kpi-value">
                  {!k.nonEuro && <span style={{ color: 'var(--ink-3)', fontSize: 18, marginRight: 2 }}>€</span>}
                  {k.nonEuro ? k.value : <>{intp}<span className="cent">,{cent}</span></>}
                </div>
                <div className="kpi-meta"><span>{k.meta}</span></div>
              </div>
            );
          })}
        </div>

        {tab === 'links' && (
          <div className="table-wrap">
            {!linksLoaded ? (
              <div style={{ padding: 40, textAlign: 'center', color: 'var(--ink-3)' }}>Caricamento link Stripe…</div>
            ) : links.length === 0 ? (
              <div style={{ padding: 40, textAlign: 'center', color: 'var(--ink-3)' }}>
                <Icon name="link" size={20} style={{ margin: '0 auto 8px' }} />
                <div>Nessun link one-time attivo</div>
                <div style={{ marginTop: 10 }}>
                  <button className="btn btn-accent" onClick={() => setShowLinkForm(true)}>
                    <Icon name="plus" size={13} /> Crea link di pagamento
                  </button>
                </div>
              </div>
            ) : (
              <table className="invoices">
                <thead>
                  <tr>
                    <th>Link</th>
                    <th style={{ width: 140, textAlign: 'right' }}>Importo</th>
                    <th style={{ width: 140 }}>Creato</th>
                    <th style={{ width: 100 }}></th>
                  </tr>
                </thead>
                <tbody>
                  {links.map((l) => (
                    <tr key={l.id}>
                      <td className="mono" style={{ fontSize: 12 }}>
                        <a href={l.url} target="_blank" style={{ color: 'var(--accent-ink)' }}>{l.url}</a>
                      </td>
                      <td className="amount total mono">
                        {l.amount != null ? <><span className="euro">€</span>{new Intl.NumberFormat('it-IT', { minimumFractionDigits: 2 }).format(l.amount)}</> : '—'}
                      </td>
                      <td className="mono" style={{ fontSize: 12, color: 'var(--ink-3)' }}>{l.created ? new Date(l.created * 1000).toLocaleDateString('it-IT') : ''}</td>
                      <td>
                        <button className="btn btn-ghost btn-ic" onClick={() => { navigator.clipboard.writeText(l.url); alert('Link copiato'); }}>
                          <Icon name="copy" size={13} />
                        </button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            )}
          </div>
        )}

        {tab === 'subs' && <div className="table-wrap">
          <table className="invoices">
            <thead>
              <tr>
                <th>Nome</th>
                <th style={{ width: 180 }}>Cliente</th>
                <th style={{ width: 100 }}>Cadenza</th>
                <th style={{ width: 120 }}>Prossima</th>
                <th style={{ width: 120, textAlign: 'right' }}>Importo</th>
                <th style={{ width: 100 }}>Stato</th>
              </tr>
            </thead>
            <tbody>
              {loading && <tr><td colSpan={6} style={{ textAlign: 'center', padding: 40, color: 'var(--ink-3)' }}>Caricamento…</td></tr>}
              {!loading && data.subscriptions.length === 0 && (
                <tr><td colSpan={6} style={{ textAlign: 'center', padding: 40, color: 'var(--ink-3)' }}>
                  <Icon name="repeat" size={20} style={{ margin: '0 auto 8px' }} />
                  <div>Nessun abbonamento ancora</div>
                  <div style={{ marginTop: 10 }}>
                    <button className="btn btn-accent" onClick={() => { setEditing(null); setShowForm(true); }}>
                      <Icon name="plus" size={13} /> Crea il primo
                    </button>
                  </div>
                </td></tr>
              )}
              {!loading && data.subscriptions.map((s) => (
                <tr key={s.id} onClick={() => { setEditing(s); setShowForm(true); }} style={{ cursor: 'pointer' }}>
                  <td><div style={{ fontWeight: 500 }}>{s.nome}</div><div style={{ fontSize: 11, color: 'var(--ink-3)' }}>{s.descrizione || '—'}</div></td>
                  <td>{s.client_name}</td>
                  <td><span className="badge b-outline">{s.cadenza}</span></td>
                  <td className="mono" style={{ fontSize: 12.5 }}>{s.next_billing_date ? fmtDate(s.next_billing_date) : '—'}</td>
                  <td className="amount total mono"><span className="euro">€</span>{new Intl.NumberFormat('it-IT', { minimumFractionDigits: 2 }).format(s.importo_imponibile || 0)}</td>
                  <td>
                    {s.active
                      ? <span className="badge b-green"><span className="badge-dot" style={{ background: 'var(--green)' }} />Attivo</span>
                      : <span className="badge b-gray"><span className="badge-dot" style={{ background: 'var(--gray)' }} />Archiviato</span>}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>}
      </div>

      {showForm && (
        <SubForm initial={editing} clients={clients} onClose={() => setShowForm(false)} onSaved={() => { setShowForm(false); load(); }} />
      )}
      {showLinkForm && (
        <PaymentLinkForm clients={clients} onClose={() => setShowLinkForm(false)} onSaved={() => { setShowLinkForm(false); loadLinks(); setTab('links'); }} />
      )}
    </>
  );
}

function PaymentLinkForm({ clients, onClose, onSaved }) {
  const [f, setF] = useState({ amount_euros: 0, description: '', client_id: '' });
  const [saving, setSaving] = useState(false);
  const [err, setErr] = useState('');
  const [result, setResult] = useState(null);

  const set = (k) => (e) => setF({ ...f, [k]: e.target.type === 'number' ? parseFloat(e.target.value) : e.target.value });

  const submit = async (e) => {
    e.preventDefault();
    setSaving(true); setErr('');
    try {
      const r = await fetch('/api/stripe/payment-link', {
        method: 'POST', credentials: 'include',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(f),
      });
      const j = await r.json();
      if (!r.ok) throw new Error(j.error);
      setResult(j);
    } catch (e) { setErr(e.message); }
    finally { setSaving(false); }
  };

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <form className="modal" onClick={(e) => e.stopPropagation()} onSubmit={submit} style={{ width: 480 }}>
        <div className="modal-head">
          <div>
            <div style={{ fontSize: 11, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>Nuovo</div>
            <h2 style={{ fontFamily: 'Fraunces', fontSize: 20, fontWeight: 500, margin: '4px 0 0' }}>Link di pagamento one-time</h2>
          </div>
          <button type="button" className="btn btn-ic btn-ghost" onClick={onClose}><Icon name="x" size={14} /></button>
        </div>
        <div className="modal-body">
          {err && <div className="err" style={{ marginBottom: 12 }}><Icon name="alert-circle" size={14} /> {err}</div>}

          {result ? (
            <div>
              <div style={{ padding: 16, background: 'var(--green-wash)', border: '1px solid var(--green)', borderRadius: 8, marginBottom: 12 }}>
                <div style={{ fontSize: 12, color: 'var(--green)', fontWeight: 500, marginBottom: 6 }}>✓ Link creato</div>
                <input className="input mono" readOnly value={result.url} onFocus={(e) => e.target.select()} />
              </div>
              <button type="button" className="btn btn-ghost" onClick={() => { navigator.clipboard.writeText(result.url); alert('Link copiato negli appunti'); }}>
                <Icon name="copy" size={13} /> Copia link
              </button>
            </div>
          ) : (
            <>
              <div className="field"><label className="label">Descrizione *</label>
                <input className="input" required value={f.description || ''} onChange={set('description')} placeholder="es. Acconto progetto Tesla" />
              </div>
              <div className="field"><label className="label">Importo €</label>
                <input className="input mono" type="number" step="0.01" min="0.5" required value={f.amount_euros} onChange={set('amount_euros')} />
              </div>
              <div className="field"><label className="label">Cliente (opzionale, solo per tracciamento)</label>
                <select className="input" value={f.client_id || ''} onChange={set('client_id')}>
                  <option value="">— nessuno —</option>
                  {clients.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
                </select>
              </div>
              <div style={{ padding: 12, background: 'var(--paper-2)', border: '1px solid var(--rule)', borderRadius: 6, fontSize: 12, color: 'var(--ink-2)' }}>
                <Icon name="info" size={12} style={{ display: 'inline', marginRight: 4 }} />
                Il link riutilizzabile consente al cliente di pagare con carta tramite Stripe Checkout. Non emette automaticamente fattura — emettila manualmente quando il pagamento arriva.
              </div>
            </>
          )}
        </div>
        <div className="modal-foot">
          <button type="button" className="btn btn-ghost" onClick={onClose}>{result ? 'Chiudi' : 'Annulla'}</button>
          <div style={{ flex: 1 }} />
          {!result && <button className="btn btn-accent" type="submit" disabled={saving}>{saving ? 'Creazione…' : 'Crea link'}</button>}
          {result && <button className="btn btn-accent" type="button" onClick={onSaved}>Vai ai link</button>}
        </div>
      </form>
    </div>
  );
}

function SubForm({ initial, clients, onClose, onSaved }) {
  const [f, setF] = useState({
    client_id: '', nome: '', descrizione: '',
    importo_imponibile: 0, aliquota_iva: 22, cadenza: 'mensile',
    data_inizio: new Date().toISOString().slice(0, 10), data_fine: '',
    next_billing_date: new Date().toISOString().slice(0, 10),
    auto_emit: 1, doc_type: 'fattura_sdi', active: 1,
    ...(initial || {}),
  });
  const [saving, setSaving] = useState(false);
  const [err, setErr] = useState('');

  const set = (k) => (e) => {
    let v = e.target.type === 'number' ? parseFloat(e.target.value) : e.target.value;
    if (e.target.type === 'checkbox') v = e.target.checked ? 1 : 0;
    setF({ ...f, [k]: v });
  };

  const save = async (e) => {
    e.preventDefault();
    setSaving(true); setErr('');
    try {
      const url = initial?.id ? `/api/subscriptions/${initial.id}` : '/api/subscriptions';
      const method = initial?.id ? 'PUT' : 'POST';
      const r = await fetch(url, {
        method, credentials: 'include',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(f),
      });
      const j = await r.json();
      if (!r.ok) throw new Error(j.error || 'HTTP ' + r.status);
      onSaved();
    } catch (e) { setErr(e.message); }
    finally { setSaving(false); }
  };

  const archive = async () => {
    if (!confirm('Archiviare questo abbonamento?')) return;
    await fetch(`/api/subscriptions/${initial.id}/archive`, { method: 'POST', credentials: 'include' });
    onSaved();
  };

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <form className="modal" onClick={(e) => e.stopPropagation()} onSubmit={save} style={{ width: 560 }}>
        <div className="modal-head">
          <div>
            <div style={{ fontSize: 11, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>{initial?.id ? 'Modifica' : 'Nuovo'} abbonamento</div>
            <h2 style={{ fontFamily: 'Fraunces', fontSize: 20, fontWeight: 500, margin: '4px 0 0' }}>{f.nome || 'Abbonamento'}</h2>
          </div>
          <button type="button" className="btn btn-ic btn-ghost" onClick={onClose}><Icon name="x" size={14} /></button>
        </div>
        <div className="modal-body" style={{ maxHeight: '70vh', overflowY: 'auto' }}>
          {err && <div className="err" style={{ marginBottom: 12 }}><Icon name="alert-circle" size={14} /> {err}</div>}

          <div className="field"><label className="label">Cliente *</label>
            <select className="input" required value={f.client_id || ''} onChange={set('client_id')}>
              <option value="">— seleziona —</option>
              {clients.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
            </select>
          </div>
          <div className="field"><label className="label">Nome servizio *</label>
            <input className="input" required value={f.nome || ''} onChange={set('nome')} placeholder="es. Hosting sito + manutenzione" />
          </div>
          <div className="field"><label className="label">Descrizione (va nelle righe fattura)</label>
            <textarea className="textarea" rows={2} value={f.descrizione || ''} onChange={set('descrizione')} />
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10 }}>
            <div className="field"><label className="label">Importo imponibile €</label>
              <input className="input mono" type="number" step="0.01" required value={f.importo_imponibile} onChange={set('importo_imponibile')} />
            </div>
            <div className="field"><label className="label">IVA %</label>
              <input className="input mono" type="number" step="0.01" value={f.aliquota_iva} onChange={set('aliquota_iva')} />
            </div>
            <div className="field"><label className="label">Cadenza</label>
              <select className="input" value={f.cadenza} onChange={set('cadenza')}>
                {CADENZE.map((c) => <option key={c.id} value={c.id}>{c.label}</option>)}
              </select>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
            <div className="field"><label className="label">Data inizio</label>
              <input className="input" type="date" required value={f.data_inizio} onChange={set('data_inizio')} />
            </div>
            <div className="field"><label className="label">Prossima emissione</label>
              <input className="input" type="date" value={f.next_billing_date} onChange={set('next_billing_date')} />
            </div>
          </div>

          <label style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, cursor: 'pointer', marginTop: 10 }}>
            <input type="checkbox" checked={!!f.auto_emit} onChange={set('auto_emit')} />
            <span>Emissione automatica (cron giornaliero)</span>
          </label>
        </div>
        <div className="modal-foot">
          {initial?.id && <button type="button" className="btn btn-ghost" onClick={archive} style={{ color: 'var(--red)' }}><Icon name="archive" size={13} /> Archivia</button>}
          <div style={{ flex: 1 }} />
          <button type="button" className="btn btn-ghost" onClick={onClose}>Annulla</button>
          <button className="btn btn-accent" type="submit" disabled={saving}>{saving ? 'Salvo…' : (initial?.id ? 'Salva modifiche' : 'Crea abbonamento')}</button>
        </div>
      </form>
    </div>
  );
}

window.AbbonamentiScreen = AbbonamentiScreen;