/* global React, API, useApp */
const { useState, useEffect } = React;

const fmtEur = v => v == null ? '—' : `€${Number(v).toLocaleString('nl-NL', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
const fmtDate = v => v ? new Date(v).toLocaleDateString('nl-NL') : '—';

function Dashboard() {
  const { navigate } = useApp();
  const [data, setData] = useState(null);
  const [err, setErr]   = useState('');

  useEffect(() => {
    API.get('/dashboard')
      .then(setData)
      .catch(e => setErr(e.error || 'Failed to load dashboard'));
  }, []);

  if (err) return <div className="page"><div className="empty-state">{err}</div></div>;
  if (!data) return <div className="page"><div className="empty-state">Loading…</div></div>;

  const { stats, overdue, recent_out, recent_in, btw_this_period } = data;

  return (
    <div className="page">
      <div className="page-header">
        <div>
          <h1 className="page-title">Dashboard</h1>
          <div className="page-subtitle">Overview for {new Date().getFullYear()}</div>
        </div>
      </div>

      <div className="stat-grid">
        <div className="stat-cell">
          <div className="stat-label">Revenue YTD</div>
          <div className="stat-value signal">{fmtEur(stats.revenue_ytd)}</div>
          <div className="stat-sub">excl. BTW</div>
        </div>
        <div className="stat-cell">
          <div className="stat-label">Receivables open</div>
          <div className="stat-value">{fmtEur(stats.receivables_open)}</div>
          <div className="stat-sub">{stats.invoices_unpaid} invoice{stats.invoices_unpaid !== 1 ? 's' : ''}</div>
        </div>
        <div className="stat-cell">
          <div className="stat-label">Overdue</div>
          <div className="stat-value red">{fmtEur(stats.overdue_total)}</div>
          <div className="stat-sub">{stats.overdue_count} invoice{stats.overdue_count !== 1 ? 's' : ''}</div>
        </div>
        <div className="stat-cell">
          <div className="stat-label">BTW afdracht (Q)</div>
          <div className="stat-value ember">{fmtEur(btw_this_period?.afdracht)}</div>
          <div className="stat-sub">this quarter</div>
        </div>
      </div>

      {overdue.length > 0 && (
        <div className="card" style={{borderColor:'rgba(255,107,107,0.25)'}}>
          <div className="card-head">
            <span className="card-title text-mono" style={{color:'var(--status-negative)'}}>Overdue invoices</span>
            <button className="btn btn--ghost btn--sm" onClick={() => navigate('outbound')}>View all →</button>
          </div>
          <div className="table-wrap">
            <table className="data-table" style={{padding:'0 20px'}}>
              <thead>
                <tr>
                  <th>Invoice</th><th>Customer</th><th>Due</th><th>Amount</th><th></th>
                </tr>
              </thead>
              <tbody>
                {overdue.map(inv => (
                  <tr key={inv.id}>
                    <td className="mono">{inv.invoice_number}</td>
                    <td>{inv.customer_name}</td>
                    <td className="mono" style={{color:'var(--status-negative)'}}>{fmtDate(inv.due_date)}</td>
                    <td className="mono">{fmtEur(inv.total)}</td>
                    <td><span className="status status--overdue">overdue</span></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}

      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:16}}>
        <div className="card">
          <div className="card-head">
            <span className="card-title">Recent outbound</span>
            <button className="btn btn--ghost btn--sm" onClick={() => navigate('outbound')}>All →</button>
          </div>
          <div className="table-wrap">
            <table className="data-table" style={{padding:'0 20px'}}>
              <thead><tr><th>Invoice</th><th>Customer</th><th>Amount</th><th>Status</th></tr></thead>
              <tbody>
                {recent_out.length === 0
                  ? <tr><td colSpan={4} className="muted" style={{paddingTop:16}}>No invoices yet</td></tr>
                  : recent_out.map(inv => (
                    <tr key={inv.id}>
                      <td className="mono">{inv.invoice_number}</td>
                      <td>{inv.customer_name}</td>
                      <td className="mono">{fmtEur(inv.total)}</td>
                      <td><span className={`status status--${inv.status}`}>{inv.status}</span></td>
                    </tr>
                  ))
                }
              </tbody>
            </table>
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <span className="card-title">Inbox (inbound)</span>
            <button className="btn btn--ghost btn--sm" onClick={() => navigate('inbound')}>All →</button>
          </div>
          <div className="table-wrap">
            <table className="data-table" style={{padding:'0 20px'}}>
              <thead><tr><th>Supplier</th><th>Date</th><th>Amount</th><th>Status</th></tr></thead>
              <tbody>
                {recent_in.length === 0
                  ? <tr><td colSpan={4} className="muted" style={{paddingTop:16}}>No inbound invoices</td></tr>
                  : recent_in.map(inv => (
                    <tr key={inv.id}>
                      <td>{inv.supplier_name || '(unmatched)'}</td>
                      <td className="mono">{fmtDate(inv.invoice_date)}</td>
                      <td className="mono">{fmtEur(inv.total)}</td>
                      <td><span className={`status status--${inv.status}`}>{inv.status}</span></td>
                    </tr>
                  ))
                }
              </tbody>
            </table>
          </div>
        </div>
      </div>

      {stats.kor_ytd != null && (
        <div className="card" style={{marginTop:0}}>
          <div className="card-body">
            <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:8}}>
              <span className="stat-label">KOR revenue threshold (€20,000)</span>
              <span className="text-mono" style={{fontSize:12}}>{fmtEur(stats.kor_ytd)} / €20,000</span>
            </div>
            <div style={{height:4,background:'var(--night-elev-3)',borderRadius:2}}>
              <div style={{height:'100%',width:`${Math.min((stats.kor_ytd/20000)*100,100)}%`,background:stats.kor_ytd>17000?'var(--status-negative)':'var(--signal)',borderRadius:2,transition:'width 600ms'}} />
            </div>
            {stats.kor_ytd > 17000 && <div style={{marginTop:8,fontSize:12,color:'var(--status-negative)'}}>⚠ Approaching KOR threshold — check BTW obligation</div>}
          </div>
        </div>
      )}
    </div>
  );
}
window.Dashboard = Dashboard;