// Tesoreria module
const Tesoreria = () => {
  const T = window.REGULA_EXT.treasury;
  return (
    <div className="page">
      <div className="page-header">
        <div>
          <h1 className="page-title">Tesoreria di Gruppo</h1>
          <div className="page-subtitle">5 banche connesse · PSD2 · ultimo sync 14:22 · saldi in M€</div>
        </div>
        <div className="page-meta">
          <button className="btn"><Icon name="download" size={12} /> Export CBI</button>
          <button className="btn btn-primary"><Icon name="sparkle" size={12} /> Suggerisci netting</button>
        </div>
      </div>

      <div className="kpi-hero-grid">
        <KpiHero label="Liquidità totale" value={42.8} unit="M€" delta={-2.8} deltaAbs="−1.2 M€" spark={[48,47,46,45,44,43,42.8]} />
        <KpiHero label="Linee utilizzate" value={18.4} unit="M€" delta={-4.1} deltaAbs="−0.8 M€" spark={[22,21,20,19.5,19,18.6,18.4]} invert={true} />
        <KpiHero label="Headroom" value={26.2} unit="M€" delta={6.2} deltaAbs="+1.5 M€" spark={[22,23,24,25,25.5,26,26.2]} />
        <KpiHero label="Intercompany netto" value={3.2} unit="M€" delta={0} deltaAbs="=" spark={[3.2,3.2,3.2,3.2,3.2,3.2,3.2]} />
      </div>

      <div className="section cols-3-2">
        <div className="panel">
          <div className="panel-head">
            <div className="panel-title">Saldi multi-banca · in tempo reale</div>
            <span className="chip green">● PSD2 live</span>
          </div>
          <table className="data">
            <thead>
              <tr><th>Banca</th><th>IBAN</th><th className="n">Saldo</th><th className="n">Δ 24h</th><th>Valuta</th><th>Sync</th></tr>
            </thead>
            <tbody>
              {T.banks.map((b, i) => (
                <tr key={i}>
                  <td style={{ fontWeight: 500 }}>{b.name}</td>
                  <td className="mono" style={{ fontSize: 10, color: 'var(--muted)' }}>{b.iban}</td>
                  <td className="n" style={{ fontWeight: 500 }}>{b.balance.toFixed(1)}</td>
                  <td className="n" style={{ color: b.delta > 0 ? 'var(--green)' : b.delta < 0 ? 'var(--red)' : 'var(--muted)' }}>
                    {b.delta > 0 ? '+' : ''}{b.delta.toFixed(1)}
                  </td>
                  <td><span className="chip">{b.currency}</span></td>
                  <td className="mono" style={{ fontSize: 10, color: 'var(--muted)' }}>{b.lastSync}</td>
                </tr>
              ))}
              <tr className="total-row">
                <td colSpan="2">Totale consolidato</td>
                <td className="n">42.8 M€</td>
                <td className="n" style={{ color: 'var(--red)' }}>+0.2</td>
                <td colSpan="2"></td>
              </tr>
            </tbody>
          </table>
        </div>

        <div className="panel">
          <div className="panel-head">
            <div className="panel-title">Cash pooling virtuale</div>
            <button className="btn"><Icon name="sparkle" size={12} /> Ottimizza</button>
          </div>
          <div style={{ padding: 0 }}>
            {T.pooling.map((p, i) => (
              <div key={i} style={{ padding: '10px 16px', borderBottom: i < T.pooling.length - 1 ? '1px solid var(--border)' : 'none' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                  <span style={{ fontSize: 12, fontWeight: 500 }}>{p.company}</span>
                  <span className="mono" style={{ fontSize: 13, fontWeight: 500, color: p.vsTarget < 0 ? 'var(--red)' : 'var(--ink)' }}>
                    {p.position.toFixed(1)} M€
                  </span>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 3 }}>
                  <span style={{ fontFamily: 'var(--f-mono)', fontSize: 10, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>
                    {p.suggestion}
                  </span>
                  {p.vsTarget !== 0 && (
                    <span className="mono" style={{ fontSize: 10, color: p.vsTarget < 0 ? 'var(--red)' : 'var(--green)' }}>
                      {p.vsTarget > 0 ? '+' : ''}{p.vsTarget.toFixed(1)} vs target
                    </span>
                  )}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="section cols-2">
        <div className="panel">
          <div className="panel-head">
            <div className="panel-title">Movimenti intercompany · ultimi 30gg</div>
            <span className="chip">5 transazioni</span>
          </div>
          <table className="data">
            <thead>
              <tr><th>Data</th><th>Da</th><th>A</th><th>Tipo</th><th className="n">Importo</th></tr>
            </thead>
            <tbody>
              {T.intercompany.map((t, i) => (
                <tr key={i}>
                  <td className="mono" style={{ fontSize: 11 }}>{t.date}</td>
                  <td>{t.from}</td>
                  <td>→ {t.to}</td>
                  <td style={{ color: 'var(--muted)', fontSize: 11 }}>{t.type}</td>
                  <td className="n">{t.amount.toFixed(1)} M€</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div className="panel">
          <div className="panel-head">
            <div className="panel-title">Scadenziario · prossimi 14gg</div>
            <span className="chip">6 movimenti</span>
          </div>
          <table className="data">
            <thead>
              <tr><th>Data</th><th>Controparte</th><th>Società</th><th className="n">Importo</th></tr>
            </thead>
            <tbody>
              {T.scadenziario.map((s, i) => (
                <tr key={i}>
                  <td className="mono" style={{ fontSize: 11 }}>{s.date}</td>
                  <td>
                    <div style={{ fontWeight: 500 }}>{s.counterparty}</div>
                    <div style={{ fontFamily: 'var(--f-mono)', fontSize: 10, color: 'var(--muted)', textTransform: 'uppercase' }}>{s.type}</div>
                  </td>
                  <td><span className="chip">{s.company}</span></td>
                  <td className="n" style={{ color: s.amount < 0 ? 'var(--ink-2)' : 'var(--green)', fontWeight: 500 }}>
                    {s.amount > 0 ? '+' : ''}{s.amount.toFixed(2)} M€
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { Tesoreria });