// Cranodato — Dashboard screen (home)
const DashboardScreen = ({ onNav, nuevasFacturas = [] }) => {
  const recent = [
    ...nuevasFacturas,
    { id: '0001-00048', proveedor: 'Ferretería Central S.A.',    cuit: '30-71234500-1', monto: '$12.480,00',  estado: 'procesada',  fecha: '30/04/2025' },
    { id: '0001-00047', proveedor: 'Logística del Sur',          cuit: '27-38812341-5', monto: '$84.200,00',  estado: 'revisar',    fecha: '30/04/2025' },
    { id: '0001-00046', proveedor: 'Distribuidora Norte S.A.',   cuit: '30-71100002-0', monto: '$48.320,00',  estado: 'procesada',  fecha: '29/04/2025' },
    { id: '0001-00045', proveedor: 'Tech Insumos SRL',           cuit: '—',             monto: '—',           estado: 'error',      fecha: '29/04/2025' },
    { id: '0001-00044', proveedor: 'Papel y Cartón Nordeste',    cuit: '30-89200003-7', monto: '$6.750,00',   estado: 'procesada',  fecha: '28/04/2025' },
  ];

  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
      <Topbar
        title="Panel principal"
        subtitle="Miércoles, 30 de abril de 2025"
        actions={<Btn onClick={() => onNav('upload')}><i data-lucide="upload-cloud" style={{width:16,height:16}}></i>Subir factura</Btn>}
      />
      <div style={{ flex: 1, overflowY: 'auto', padding: 28 }}>
        {/* Stats */}
        <div style={{ display: 'flex', gap: 14, marginBottom: 28 }}>
          <StatCard label="Procesadas hoy"   value="14"        sub="↑ 3 más que ayer"   color="#059669" />
          <StatCard label="Para revisar"      value="3"         sub="Acción requerida"    color="#D97706" />
          <StatCard label="Con error"         value="1"         sub="Ver detalles"        color="#DC2626" />
          <StatCard label="Total del mes"     value="$284.320"  sub="48 facturas"         color="#0F172A" />
        </div>
        {/* Recent */}
        <div style={{ background: 'white', border: '1px solid #E2E8F0', borderRadius: 8, boxShadow: '0 1px 3px rgba(0,0,0,0.06)', overflow: 'hidden' }}>
          <div style={{ padding: '14px 20px', borderBottom: '1px solid #F1F5F9', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <span style={{ fontSize: 14, fontWeight: 600, color: '#0F172A' }}>Últimas facturas</span>
            <span onClick={() => onNav('facturas')} style={{ fontSize: 13, color: '#059669', cursor: 'pointer', fontWeight: 500 }}>Ver todas →</span>
          </div>
          <table style={{ width: '100%', borderCollapse: 'collapse' }}>
            <thead>
              <tr style={{ background: '#F8FAFC' }}>
                {['N° factura','Proveedor','CUIT','Monto','Estado','Fecha'].map(h => (
                  <th key={h} style={{ padding: '9px 16px', textAlign: 'left', fontSize: 11, fontWeight: 600, letterSpacing: '0.05em', textTransform: 'uppercase', color: '#94A3B8', borderBottom: '1px solid #E2E8F0' }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {recent.map((f, i) => (
                <tr key={f.id} style={{ borderBottom: i < recent.length - 1 ? '1px solid #F1F5F9' : 'none' }}
                  onMouseEnter={e => e.currentTarget.style.background = '#F8FAFC'}
                  onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                  <td style={{ padding: '11px 16px', fontSize: 13, fontFamily: "'DM Mono',monospace", color: '#0F172A' }}>{f.id}</td>
                  <td style={{ padding: '11px 16px', fontSize: 13, color: '#0F172A' }}>{f.proveedor}</td>
                  <td style={{ padding: '11px 16px', fontSize: 12, fontFamily: "'DM Mono',monospace", color: '#64748B' }}>{f.cuit}</td>
                  <td style={{ padding: '11px 16px', fontSize: 13, fontFamily: "'DM Mono',monospace", color: '#047857', fontWeight: 500 }}>{f.monto}</td>
                  <td style={{ padding: '11px 16px' }}><StatusBadge status={f.estado} /></td>
                  <td style={{ padding: '11px 16px', fontSize: 12, color: '#94A3B8' }}>{f.fecha}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { DashboardScreen });