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

const fmtEur = v => `€${Number(v).toLocaleString('nl-NL',{minimumFractionDigits:2,maximumFractionDigits:2})}`;

function Home({ session, onNav }) {
  const [invoices, setInvoices] = useState([]);
  const [docs, setDocs]         = useState([]);

  useEffect(() => {
    PORTAL.get('/invoices').then(setInvoices).catch(()=>{});
    PORTAL.get('/documents').then(setDocs).catch(()=>{});
  }, []);

  const today    = new Date().toISOString().slice(0,10);
  const open     = invoices.filter(i => i.status === 'sent');
  const overdue  = open.filter(i => i.due_date < today);
  const openAmt  = open.reduce((s,i)=>s+Number(i.total),0);
  const recentDocs = docs.slice(0,5);

  return (
    <div>
      <h1 className="page-title">Welcome back{session?.name ? `, ${session.name.split(' ')[0]}` : ''}</h1>
      <div className="page-subtitle">{session?.company_name}</div>

      <div className="stat-grid">
        <div className="stat-card">
          <div className="stat-label">Open invoices</div>
          <div className="stat-value">{open.length}</div>
          {overdue.length > 0 && <div className="stat-sub" style={{color:'var(--danger)'}}>{overdue.length} overdue</div>}
        </div>
        <div className="stat-card">
          <div className="stat-label">Outstanding</div>
          <div className="stat-value" style={{fontSize:18}}>{fmtEur(openAmt)}</div>
        </div>
        <div className="stat-card">
          <div className="stat-label">Documents</div>
          <div className="stat-value">{docs.length}</div>
        </div>
      </div>

      {open.length > 0 && (
        <div className="card">
          <div className="card-head">
            <span className="card-title">Open invoices</span>
            <button className="btn btn--ghost" style={{fontSize:12,padding:'5px 12px'}} onClick={()=>onNav('invoices')}>View all</button>
          </div>
          <div className="table-wrap">
            <table className="data-table">
              <thead><tr><th>Invoice</th><th>Date</th><th>Due</th><th>Amount</th><th>Status</th></tr></thead>
              <tbody>
                {open.map(i=>(
                  <tr key={i.id} onClick={()=>onNav('invoices',i.id)}>
                    <td className="mono" style={{fontWeight:500}}>{i.invoice_number}</td>
                    <td className="mono">{i.invoice_date}</td>
                    <td className="mono" style={{color: i.due_date<today?'var(--danger)':undefined}}>{i.due_date}</td>
                    <td className="mono">{fmtEur(i.total)}</td>
                    <td><span className={`status ${i.due_date<today?'status--overdue':'status--sent'}`}>{i.due_date<today?'overdue':'open'}</span></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {recentDocs.length > 0 && (
        <div className="card">
          <div className="card-head">
            <span className="card-title">Recent documents</span>
            <button className="btn btn--ghost" style={{fontSize:12,padding:'5px 12px'}} onClick={()=>onNav('documents')}>View all</button>
          </div>
          <div style={{padding:'4px 20px 12px'}}>
            {recentDocs.map(d=>(
              <div key={d.id} className="doc-item">
                <div>
                  <div style={{fontSize:13,fontWeight:500}}>{d.name}</div>
                  <div className="doc-meta"><span className="badge">{d.category}</span></div>
                </div>
                <a href={`/api/portal/documents/${d.id}/download`} className="btn btn--ghost" style={{fontSize:11,padding:'4px 10px'}} onClick={e=>{e.preventDefault();window.location=`/api/portal/documents/${d.id}/download`;}}>Download</a>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}
window.Home = Home;