// ──────────────────────────── scadenzario.jsx ────────────────────────────
const { useState: useStateSZ, useMemo: useMemoSZ } = React;

// Data reale del dispositivo (YYYY-MM-DD): "scaduto" e i filtri si basano su oggi.
const _SZ_TODAY = (() => {
  const d = new Date();
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
})();
const _SZ_MESI  = ['gen','feb','mar','apr','mag','giu','lug','ago','set','ott','nov','dic'];

const _szFmtDate = iso => {
  if (!iso) return '—';
  const [y, m, d] = iso.split('-');
  return `${parseInt(d)} ${_SZ_MESI[parseInt(m) - 1]} ${y}`;
};

// Stato calcolato: non memorizzato, derivato da residuo + data scadenza
const _szStato = s => {
  if (s.residuo <= 0)        return 'Pagata';
  if (s.importoPagato > 0)   return 'Parzialmente pagata';
  if (s.dataScadenza < _SZ_TODAY) return 'Scaduta';
  return 'Aperta';
};

const _szTone = stato =>
  stato === 'Pagata'               ? 'pos'  :
  stato === 'Parzialmente pagata'  ? 'info' :
  stato === 'Scaduta'              ? 'neg'  : 'neutral';

// Scadenza entro i prossimi 7 giorni (e non ancora saldata)
const _szInScadenza7 = s => {
  if (s.residuo <= 0) return false;
  const ms = new Date(s.dataScadenza) - new Date(_SZ_TODAY);
  return ms >= 0 && ms <= 7 * 86400000;
};

const _szCls = 'w-full h-11 px-3 rounded-md border border-line bg-surface text-[14px] text-ink focus:border-strong focus:outline-none transition-all duration-fast ease-standard';
const _szLbl = 'block text-[12px] font-semibold uppercase tracking-[0.04em] text-muted mb-1.5';

// ─── Form registrazione pagamento ───
const SzPagamentoForm = ({ residuo, onConferma, onAnnulla }) => {
  const [data,      setData]      = useStateSZ(_SZ_TODAY);
  const [importo,   setImporto]   = useStateSZ(String(residuo.toFixed(2)));
  const [modalita,  setModalita]  = useStateSZ('Bonifico');
  const [note,      setNote]      = useStateSZ('');

  const importoNum = parseFloat(importo) || 0;
  const valid = importoNum > 0 && importoNum <= residuo && !!data;

  return (
    <Card title="Registra pagamento">
      <div className="grid grid-cols-2 gap-5">
        <div>
          <label className={_szLbl}>Data pagamento *</label>
          <input type="date" value={data} onChange={e => setData(e.target.value)} className={_szCls}/>
        </div>
        <div>
          <label className={_szLbl}>Importo (€) *</label>
          <input type="number" min="0.01" step="0.01" max={residuo}
            value={importo} onChange={e => setImporto(e.target.value)}
            className={_szCls + ' num'}/>
          <div className="text-[11.5px] text-muted mt-1">Residuo disponibile: {fmtEur(residuo)}</div>
        </div>
        <div>
          <label className={_szLbl}>Modalità di pagamento *</label>
          <select value={modalita} onChange={e => setModalita(e.target.value)} className={_szCls}>
            {['Bonifico','Contanti','Carta','Assegno'].map(m => <option key={m}>{m}</option>)}
          </select>
        </div>
        <div>
          <label className={_szLbl}>Note</label>
          <input value={note} onChange={e => setNote(e.target.value)}
            placeholder="Opzionale…" className={_szCls}/>
        </div>
      </div>
      <div className="mt-5 flex items-center justify-between bg-sunken rounded-xl p-4">
        <Btn variant="outline" size="lg" onClick={onAnnulla}>Annulla</Btn>
        <button
          disabled={!valid}
          onClick={() => onConferma({ data, importo: importoNum, modalita, note })}
          className="h-16 px-8 rounded-md bg-[var(--accent-blue)] text-[var(--text-inverse)] font-semibold text-[17px] flex items-center gap-3 hover:bg-[var(--accent-blue-hover)] active:bg-[var(--accent-blue-active)] disabled:opacity-30 disabled:cursor-not-allowed transition-all duration-fast ease-standard shadow-soft">
          <I.Check size={20}/>
          Conferma pagamento
        </button>
      </div>
    </Card>
  );
};

// ══════════════════════════════════════════════════════════════════════
//  ScadenzarioView
// ══════════════════════════════════════════════════════════════════════
const ScadenzarioView = () => {
  const [tab,          setTab]          = useStateSZ('incassare'); // 'incassare' | 'pagare'
  const [view,         setView]         = useStateSZ('list');      // 'list' | 'detail'
  const [selId,        setSelId]        = useStateSZ(null);
  const [scadenze,     setScadenze]     = useStateSZ(SCADENZE_INITIAL);
  const [filtroStato,  setFiltroStato]  = useStateSZ('Tutti');
  const [filtroPeriodo,setFiltroPeriodo]= useStateSZ('Tutti');
  const [showPag,      setShowPag]      = useStateSZ(false);

  const tipoCorrente = tab === 'incassare' ? 'attiva' : 'passiva';

  const currentList = useMemoSZ(
    () => scadenze.filter(s => s.tipo === tipoCorrente),
    [scadenze, tipoCorrente]
  );

  const filteredList = useMemoSZ(() => {
    return currentList.filter(s => {
      const stato = _szStato(s);
      if (filtroStato !== 'Tutti' && stato !== filtroStato) return false;
      switch (filtroPeriodo) {
        case 'Scadute':            return stato === 'Scaduta';
        case 'Prossima settimana': return _szInScadenza7(s);
        case 'Prossimi 30 giorni': {
          const ms = new Date(s.dataScadenza) - new Date(_SZ_TODAY);
          return ms >= 0 && ms <= 30 * 86400000;
        }
        case 'Questo mese': return (s.dataScadenza || '').startsWith(_SZ_TODAY.slice(0, 7));
        default: return true;
      }
    });
  }, [currentList, filtroStato, filtroPeriodo]);

  const sel = useMemoSZ(
    () => scadenze.find(s => s.id === selId),
    [scadenze, selId]
  );

  // KPI
  const totAperto     = useMemoSZ(() => currentList.filter(s => s.residuo > 0).reduce((t, s) => t + s.residuo, 0), [currentList]);
  const totScaduto    = useMemoSZ(() => currentList.filter(s => _szStato(s) === 'Scaduta').reduce((t, s) => t + s.residuo, 0), [currentList]);
  const totInScadenza = useMemoSZ(() => currentList.filter(s => _szInScadenza7(s)).reduce((t, s) => t + s.residuo, 0), [currentList]);

  const tabCounts = {
    incassare: scadenze.filter(s => s.tipo === 'attiva'   && s.residuo > 0).length,
    pagare:    scadenze.filter(s => s.tipo === 'passiva'  && s.residuo > 0).length,
  };

  // Navigazione
  const goTab    = t => { setTab(t); setView('list'); setSelId(null); setFiltroStato('Tutti'); setFiltroPeriodo('Tutti'); setShowPag(false); };
  const goDetail = s => { setSelId(s.id); setView('detail'); setShowPag(false); };
  const goList   = ()  => { setView('list'); setSelId(null); setShowPag(false); };

  const onPagamentoConferma = pag => {
    if (window.__API__) window.__API__.mutate('/api/scadenze/pagamento', { scadenzaId: selId, data: pag.data, importo: pag.importo, modalita: pag.modalita, note: pag.note }).then(()=>{ if (window.__toast) window.__toast('Pagamento registrato', 'success'); }).catch(()=>{});
    setScadenze(prev => prev.map(s => {
      if (s.id !== selId) return s;
      const nuovoPagato = Math.min(s.importo, s.importoPagato + pag.importo);
      const nuovoResiduo = Math.max(0, s.importo - nuovoPagato);
      return {
        ...s,
        importoPagato: nuovoPagato,
        residuo:       nuovoResiduo,
        pagamenti: [...s.pagamenti, { id: `PAG-${Date.now()}`, ...pag }],
      };
    }));
    setShowPag(false);
  };

  const STATO_OPTS   = ['Tutti', 'Aperta', 'Parzialmente pagata', 'Pagata', 'Scaduta'];
  const PERIODO_OPTS = ['Tutti', 'Questo mese', 'Prossima settimana', 'Prossimi 30 giorni', 'Scadute'];

  return (
    <>
      <Topbar
        eyebrow={`Scadenzario · ${STORE.name}`}
        title="Scadenzario"
        right={view === 'list' && (
          <Btn variant="outline" size="md" leading={<I.ArrowD size={16}/>} onClick={() => {
            if (window.__csv) window.__csv(
              `scadenzario-${tab === 'incassare' ? 'da-incassare' : 'da-pagare'}.csv`,
              ['Scadenza','Soggetto','Documento','Importo','Pagato','Residuo','Stato'],
              filteredList.map(s => [_szFmtDate(s.dataScadenza), s.soggetto, s.docRef, fmtEur(s.importo), fmtEur(s.importoPagato), fmtEur(s.residuo), _szStato(s)])
            );
          }}>Esporta</Btn>
        )}
      />

      {/* ─── Tab bar ─── */}
      <div className="px-7 hairline bg-paper">
        <div className="flex items-center gap-1">
          {[
            { id: 'incassare', label: 'Da incassare' },
            { id: 'pagare',    label: 'Da pagare'    },
          ].map(t => (
            <button key={t.id} onClick={() => goTab(t.id)}
              className={`flex items-center gap-2 h-11 px-4 text-[14px] font-medium transition-all duration-fast ease-standard border-b-2 -mb-px
                ${tab === t.id ? 'text-ink border-ink' : 'text-muted border-transparent hover:text-ink'}`}>
              {t.label}
              <span className={`num text-[11px] px-1.5 py-0.5 rounded
                ${tab === t.id ? 'bg-[var(--bg-selected)] text-[var(--accent-blue)]' : 'bg-line2 text-muted'}`}>
                {tabCounts[t.id]}
              </span>
            </button>
          ))}
        </div>
      </div>

      {/* ─── Content ─── */}
      {view === 'detail' && sel ? (

        /* ══ Detail view ══ */
        <div className="px-7 py-6 max-w-[1400px] space-y-4">

          {/* Back */}
          <button onClick={goList}
            className="flex items-center gap-1.5 text-[13px] text-muted hover:text-ink focus-ring rounded-md px-2 py-1 -ml-2 transition-colors duration-fast ease-standard">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M15 6l-6 6 6 6"/></svg>
            Torna allo scadenzario
          </button>

          {/* Header */}
          <div className="flex items-start justify-between gap-4">
            <div>
              <div className="text-[11px] uppercase tracking-[0.08em] text-muted font-medium">
                {tab === 'incassare' ? 'Scadenza da incassare' : 'Scadenza da pagare'}
              </div>
              <div className="text-[22px] font-semibold tracking-tight text-ink mt-0.5">{sel.soggetto}</div>
              <div className="text-[13px] text-muted mt-1">
                Rif. documento: <span className="num font-medium text-ink">{sel.docRef}</span>
              </div>
            </div>
            <Pill tone={_szTone(_szStato(sel))}>{_szStato(sel)}</Pill>
          </div>

          {/* KPI strip */}
          <Card padded={false}>
            <div className="flex divide-x divide-line">
              <Stat label="Importo totale" value={fmtEur(sel.importo)}       subtle="documentato"/>
              <Stat label="Già pagato"      value={fmtEur(sel.importoPagato)} subtle="versamenti registrati"/>
              <Stat label="Residuo"         value={fmtEur(sel.residuo)}       subtle="ancora da saldare"/>
              <Stat label="Data scadenza"   value={_szFmtDate(sel.dataScadenza)} mono={false}
                subtle={_szInScadenza7(sel) ? '⚠ in scadenza' : ''}/>
            </div>
          </Card>

          {/* Storico pagamenti */}
          <Card title={`Storico pagamenti (${sel.pagamenti.length})`} padded={false}>
            {sel.pagamenti.length === 0 ? (
              <div className="p-8 text-center text-muted text-[13.5px]">Nessun pagamento registrato su questa scadenza.</div>
            ) : (
              <>
                <div className="grid grid-cols-[120px_150px_130px_1fr] gap-2 px-5 h-11 items-center text-[11px] uppercase tracking-[0.08em] text-muted font-medium hairline">
                  <div>Data</div>
                  <div className="text-right">Importo</div>
                  <div>Modalità</div>
                  <div>Note</div>
                </div>
                <div className="divide-y divide-line2">
                  {sel.pagamenti.map(p => (
                    <div key={p.id} className="grid grid-cols-[120px_150px_130px_1fr] gap-2 px-5 items-center min-h-[56px]">
                      <div className="text-[13.5px] text-ink">{_szFmtDate(p.data)}</div>
                      <div className="num text-[14px] font-semibold text-[var(--success-700)] text-right">{fmtEur(p.importo)}</div>
                      <div className="text-[13.5px] text-ink">{p.modalita}</div>
                      <div className="text-[13px] text-muted">{p.note || '—'}</div>
                    </div>
                  ))}
                </div>
              </>
            )}
          </Card>

          {/* Azioni */}
          {sel.residuo > 0 ? (
            showPag ? (
              <SzPagamentoForm
                residuo={sel.residuo}
                onConferma={onPagamentoConferma}
                onAnnulla={() => setShowPag(false)}
              />
            ) : (
              <button onClick={() => setShowPag(true)}
                className="h-16 px-8 rounded-md bg-[var(--accent-blue)] text-[var(--text-inverse)] font-semibold text-[17px] flex items-center gap-3 hover:bg-[var(--accent-blue-hover)] active:bg-[var(--accent-blue-active)] transition-all duration-fast ease-standard shadow-soft">
                <I.Wallet size={20}/>
                Registra pagamento
              </button>
            )
          ) : (
            <div className="flex items-center gap-2.5 px-5 py-4 rounded-2xl text-[14px] font-medium"
              style={{ background: 'var(--success-50)', color: 'var(--success-700)' }}>
              <I.Check size={18}/>
              Scadenza completamente saldata — nessun residuo.
            </div>
          )}
        </div>

      ) : (

        /* ══ List view ══ */
        <div className="px-7 py-6 max-w-[1400px] space-y-4">

          {/* KPI strip */}
          <Card padded={false}>
            <div className="flex divide-x divide-line">
              <Stat label="Residuo aperto"    value={fmtEur(totAperto)}     subtle="da incassare / pagare"/>
              <Stat label="Scaduto"            value={fmtEur(totScaduto)}    subtle="oltre la data scadenza"/>
              <Stat label="In scadenza (7 gg)" value={fmtEur(totInScadenza)} subtle="entro prossima settimana"/>
            </div>
          </Card>

          {/* Filter bar */}
          <div className="bg-surface rounded-2xl p-3.5 shadow-soft">
            <div className="flex flex-wrap items-center gap-2.5">
              <FilterSelect label="Stato"   value={filtroStato}   onChange={setFiltroStato}   options={STATO_OPTS}/>
              <FilterSelect label="Periodo" value={filtroPeriodo} onChange={setFiltroPeriodo} options={PERIODO_OPTS}/>
              <span className="ml-auto text-[13px] text-muted">
                <span className="num text-ink font-medium">{filteredList.length}</span> scadenze
              </span>
            </div>
          </div>

          {/* Tabella */}
          <Card padded={false}>
            <table className="w-full text-[13.5px]">
              <thead>
                <tr className="text-left text-muted uppercase text-[11px] tracking-[0.08em] hairline">
                  <th className="px-5 py-3 font-medium">Scadenza</th>
                  <th className="px-5 py-3 font-medium">Soggetto</th>
                  <th className="px-5 py-3 font-medium">Documento</th>
                  <th className="px-5 py-3 font-medium text-right">Importo</th>
                  <th className="px-5 py-3 font-medium text-right">Pagato</th>
                  <th className="px-5 py-3 font-medium text-right">Residuo</th>
                  <th className="px-5 py-3 font-medium">Stato</th>
                </tr>
              </thead>
              <tbody>
                {filteredList.map(s => {
                  const stato    = _szStato(s);
                  const inScad7  = _szInScadenza7(s);
                  const isScaduta = stato === 'Scaduta';
                  const rowStyle = inScad7   ? { background: 'var(--warning-50)' }
                                 : {};
                  return (
                    <tr key={s.id} onClick={() => goDetail(s)}
                      className="border-b border-line2 last:border-0 cursor-pointer transition-colors duration-fast ease-standard hover:brightness-[0.97]"
                      style={rowStyle}>
                      <td className="px-5 py-4">
                        <span className={`num font-medium ${isScaduta ? 'text-[var(--danger-700)]' : 'text-ink'}`}>
                          {_szFmtDate(s.dataScadenza)}
                        </span>
                        {inScad7 && (
                          <div className="text-[11px] text-[var(--warning-700)] font-semibold mt-0.5">⚠ in scadenza</div>
                        )}
                      </td>
                      <td className="px-5 py-4 font-medium text-ink">{s.soggetto}</td>
                      <td className="px-5 py-4 num text-muted">{s.docRef}</td>
                      <td className="px-5 py-4 num text-ink text-right">{fmtEur(s.importo)}</td>
                      <td className="px-5 py-4 num text-right" style={{ color: s.importoPagato ? 'var(--success-700)' : undefined }}>
                        {s.importoPagato ? fmtEur(s.importoPagato) : '—'}
                      </td>
                      <td className={`px-5 py-4 num font-semibold text-right
                        ${s.residuo <= 0 ? 'text-[var(--success-700)]' : isScaduta ? 'text-[var(--danger-700)]' : 'text-ink'}`}>
                        {fmtEur(s.residuo)}
                      </td>
                      <td className="px-5 py-4">
                        <Pill tone={_szTone(stato)}>{stato}</Pill>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
            {filteredList.length === 0 && (
              <div className="py-16 text-center text-muted text-[14px]">
                Nessuna scadenza corrisponde ai filtri selezionati.
              </div>
            )}
          </Card>
        </div>
      )}
    </>
  );
};

Object.assign(window, { ScadenzarioView });