function PageReports({pushToast}){
  const I = window.Icons;
  const reports = [
    { name:'Reporte mensual de inventario', type:'Inventario', period:'Mensual', last:'1 may 2025', status:'ready', size:'2.4 MB' },
    { name:'Análisis de quiebres por categoría', type:'Operaciones', period:'Semanal', last:'29 abr 2025', status:'ready', size:'860 KB' },
    { name:'Performance de proveedores Q1', type:'Proveedores', period:'Trimestral', last:'15 abr 2025', status:'ready', size:'4.1 MB' },
    { name:'Pronóstico de demanda 60 días', type:'Pronósticos', period:'Semanal', last:'30 abr 2025', status:'ready', size:'1.7 MB' },
    { name:'Rotación por SKU — top 500', type:'Inventario', period:'Mensual', last:'1 may 2025', status:'ready', size:'3.8 MB' },
    { name:'Conciliación SAP × FLUX', type:'Finanzas', period:'Mensual', last:'1 may 2025', status:'generating', size:'—' },
  ];
  const templates = [
    { name:'Reporte ejecutivo (1 página)', desc:'KPIs principales, gráficas resumen', icon:'BarChart' },
    { name:'Análisis profundo IA', desc:'Insights generados por Claude con recomendaciones', icon:'Brain' },
    { name:'Reporte para junta directiva', desc:'Formato presentación con narrativa', icon:'Doc' },
    { name:'Auditoría de inventario', desc:'Detalle SKU por SKU con discrepancias', icon:'Database' },
  ];

  return (
    <>
      <div className="page-head">
        <h1 className="page-title">Reportes</h1>
        <p className="page-sub">Generación automática de reportes con narrativa por IA. 0 reportes manuales este mes.</p>
      </div>

      <div className="ai-strip">
        <div className="ai-spark"><I.Wand/></div>
        <div className="ai-text"><span className="ai-tag">Claude Reports</span>Describe el reporte que necesitas en lenguaje natural y lo genero en segundos.</div>
        <button className="btn primary sm" onClick={()=>pushToast('Asistente abierto')}><I.Sparkles size={12}/> Crear con IA</button>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'2fr 1fr',gap:14}}>
        <div className="card flush">
          <div className="card-head"><div className="card-title">Reportes recientes</div><button className="btn sm primary"><I.Plus size={12}/> Nuevo</button></div>
          <table className="t">
            <thead><tr><th>Nombre</th><th>Tipo</th><th>Período</th><th>Último</th><th>Estado</th><th>Tamaño</th><th></th></tr></thead>
            <tbody>
              {reports.map((r,i)=>(
                <tr key={i}>
                  <td style={{color:'var(--ink)',fontWeight:600}}>{r.name}</td>
                  <td><span className="chip">{r.type}</span></td>
                  <td>{r.period}</td>
                  <td className="mono" style={{fontSize:12}}>{r.last}</td>
                  <td>{r.status==='ready'? <span className="chip green"><span className="dot"/>Listo</span> : <span className="chip amber"><span className="dot"/>Generando</span>}</td>
                  <td className="mono" style={{fontSize:12}}>{r.size}</td>
                  <td><button className="btn sm" disabled={r.status!=='ready'} onClick={()=>pushToast('Descarga iniciada')}><I.Download size={12}/></button></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div className="card flush">
          <div className="card-head"><div className="card-title">Plantillas</div></div>
          <div style={{padding:14,display:'flex',flexDirection:'column',gap:10}}>
            {templates.map((t,i)=>{
              const Ic = I[t.icon];
              return (
                <div key={i} className="card" style={{padding:12,display:'flex',gap:11,alignItems:'flex-start',cursor:'pointer'}} onClick={()=>pushToast(`Plantilla "${t.name}" cargada`)}>
                  <div style={{width:34,height:34,borderRadius:8,background:'var(--amber-bg)',color:'var(--amber-2)',display:'grid',placeItems:'center'}}><Ic size={16}/></div>
                  <div style={{flex:1,minWidth:0}}>
                    <div style={{fontSize:13,fontWeight:600,color:'var(--ink)'}}>{t.name}</div>
                    <div style={{fontSize:11.5,color:'var(--ink-3)',marginTop:2}}>{t.desc}</div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </>
  );
}
window.PageReports = PageReports;