function PageDashboard({pushToast, onNav}){
  const I = window.Icons;
  const D = window.FLUXData;
  const [period, setPeriod] = React.useState('mes');

  const kpis = [
    { label:'Quiebres objetivo', value:'-78%', icon:'Target', delta:18, deltaDir:'down', sub:'vs. mes anterior', spark:[55,52,48,42,38,32,28,22] },
    { label:'Sincronización', value:'Tiempo real', icon:'Sync', sub:'Datos actualizados', status:'live' },
    { label:'Reportes manuales', value:'0', icon:'Doc', delta:100, deltaDir:'down', sub:'vs. mes anterior', spark:[12,10,8,6,4,2,1,0] },
    { label:'Tiempo estimado', value:'4 sem', icon:'Calendar', delta:11, deltaDir:'down', sub:'vs. mes anterior', spark:[8,7,7,6,5,5,4,4] },
  ];

  return (
    <>
      <div className="page-head">
        <h1 className="page-title">FLUX — Dashboard de analytics e inventario para cadena retail</h1>
        <p className="page-sub">Arquitectura de dashboard unificado con inventario en tiempo real y predicción de demanda. Diseñado para cadenas retail con múltiples puntos de venta.</p>
      </div>

      {/* AI insight strip */}
      <div className="ai-strip">
        <div className="ai-spark"><I.Sparkles/></div>
        <div className="ai-text">
          <span className="ai-tag">Claude Insight</span>
          He detectado <b>3 oportunidades</b> en tu inventario hoy: una transferencia inter-tienda evitaría un quiebre en MTY, y SKU-7104 se beneficiaría de una promoción 2x1.
        </div>
        <button className="btn primary sm" onClick={()=>onNav('alerts')}><I.Wand size={13}/> Ver recomendaciones</button>
      </div>

      {/* KPI tiles */}
      <div className="kpi-grid" style={{marginBottom:14}}>
        {kpis.map((k,i)=>{
          const Ic = I[k.icon];
          return (
            <div className="kpi" key={i}>
              <div className="kpi-label">
                <span>{k.label}</span>
                <span className="kpi-icon"><Ic/></span>
              </div>
              <div className="kpi-value">{k.value}</div>
              <div className="kpi-foot">
                <span>{k.sub}</span>
                {k.delta && <span className={`delta ${k.deltaDir==='down'?'down':'up'}`}>{k.deltaDir==='down'?<I.ArrowDown size={11}/>:<I.ArrowUp size={11}/>} {k.delta}%</span>}
                {k.status==='live' && <span className="status live"><span className="d"></span>En línea</span>}
              </div>
              {k.spark && <div className="kpi-spark"><Sparkline data={k.spark} w={64} h={22} color="#F5A524"/></div>}
            </div>
          );
        })}
      </div>

      {/* Main: chart + alerts */}
      <div style={{display:'grid',gridTemplateColumns:'2fr 1fr',gap:14,marginBottom:14}}>
        <div className="card flush">
          <div className="card-head">
            <div className="card-title">
              Inventario y demanda en tiempo real
              <span style={{display:'inline-flex',alignItems:'center',gap:14,fontSize:12,fontWeight:500,color:'var(--ink-3)',marginLeft:14}}>
                <span style={{display:'inline-flex',alignItems:'center',gap:5}}><span style={{width:8,height:8,borderRadius:99,background:'#F5A524'}}/>Inventario disponible</span>
                <span style={{display:'inline-flex',alignItems:'center',gap:5}}><span style={{width:14,height:2,background:'var(--ink-4)',borderTop:'1px dashed var(--ink-4)'}}/>Demanda proyectada</span>
              </span>
            </div>
            <div className="select">Este mes <I.ChevDown/></div>
          </div>
          <div className="card-body">
            <LineChart data={D.days} height={260} showTooltipDay={15}/>
          </div>
        </div>

        <div className="card flush">
          <div className="card-head">
            <div className="card-title">Alertas críticas</div>
            <span className="card-link" onClick={()=>onNav('alerts')}>Ver todas</span>
          </div>
          <div style={{display:'flex',flexDirection:'column'}}>
            {D.alerts.slice(0,4).map((a,i)=>(
              <div key={a.id} style={{display:'flex',gap:10,padding:'12px 18px',borderBottom:'1px solid var(--line-2)',alignItems:'flex-start'}}>
                <span style={{width:8,height:8,borderRadius:99,background:a.level==='critical'?'var(--red)':a.level==='warning'?'var(--amber)':'var(--blue)',marginTop:6,flexShrink:0,boxShadow:`0 0 0 3px ${a.level==='critical'?'var(--red-soft)':a.level==='warning'?'var(--amber-soft)':'var(--blue-soft)'}`}}/>
                <div style={{flex:1,minWidth:0}}>
                  <div style={{fontSize:13,fontWeight:600,color:'var(--ink)',lineHeight:1.3}}>{a.title}</div>
                  <div style={{fontSize:11.5,color:'var(--ink-3)',marginTop:2}}>{a.detail}</div>
                </div>
                <div style={{fontSize:11,color:'var(--ink-3)',whiteSpace:'nowrap'}}>{a.time}</div>
              </div>
            ))}
            <div style={{padding:14}}>
              <button className="btn" style={{width:'100%',justifyContent:'center'}} onClick={()=>onNav('alerts')}>Gestionar alertas</button>
            </div>
          </div>
        </div>
      </div>

      {/* Triple row */}
      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:14,marginBottom:14}}>
        <div className="card flush">
          <div className="card-head">
            <div className="card-title">Resumen de inventario</div>
            <span className="card-link" onClick={()=>onNav('inventory')}>Ver detalle</span>
          </div>
          <div className="card-body" style={{display:'flex',gap:18,alignItems:'center'}}>
            <Donut data={D.inventoryStatus} total={6842} label="Total SKUs" size={150}/>
            <div style={{flex:1,display:'flex',flexDirection:'column',gap:9}}>
              {D.inventoryStatus.map((it,i)=>(
                <div key={i} style={{display:'grid',gridTemplateColumns:'12px 1fr auto auto',gap:8,alignItems:'center',fontSize:12.5}}>
                  <span style={{width:9,height:9,borderRadius:99,background:it.color}}/>
                  <span style={{color:'var(--ink-2)'}}>{it.label}</span>
                  <span className="mono" style={{color:'var(--ink)',fontWeight:600}}>{it.count.toLocaleString()}</span>
                  <span className="mono" style={{color:'var(--ink-3)',fontSize:11.5}}>({it.pct}%)</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="card flush">
          <div className="card-head">
            <div className="card-title">Quiebres por categoría</div>
            <div className="select">Este mes <I.ChevDown/></div>
          </div>
          <div className="card-body">
            <HBar items={D.categories.map(c=>({label:c.name, value:c.breakReduction, color:c.color}))} suffix="%"/>
          </div>
        </div>

        <div className="card flush">
          <div className="card-head">
            <div className="card-title">Demanda por canal</div>
            <div className="select">Este mes <I.ChevDown/></div>
          </div>
          <div className="card-body" style={{display:'flex',gap:14,alignItems:'center'}}>
            <Donut data={D.channels} total={24130} label="Unidades" size={150}/>
            <div style={{flex:1,display:'flex',flexDirection:'column',gap:9}}>
              {D.channels.map((it,i)=>(
                <div key={i} style={{display:'grid',gridTemplateColumns:'12px 1fr auto auto',gap:8,alignItems:'center',fontSize:12.5}}>
                  <span style={{width:9,height:9,borderRadius:99,background:it.color}}/>
                  <span style={{color:'var(--ink-2)'}}>{it.label}</span>
                  <span className="mono" style={{color:'var(--ink)',fontWeight:600}}>{it.count.toLocaleString()}</span>
                  <span className="mono" style={{color:'var(--ink-3)',fontSize:11.5}}>({it.pct}%)</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Store table + integrations */}
      <div style={{display:'grid',gridTemplateColumns:'2fr 1fr',gap:14,marginBottom:14}}>
        <div className="card flush">
          <div className="card-head">
            <div className="card-title">Rendimiento por tienda</div>
            <span className="card-link" onClick={()=>onNav('stores')}>Ver todas</span>
          </div>
          <table className="t">
            <thead>
              <tr>
                <th>Tienda</th><th>Ventas (MXN)</th><th>vs. mes anterior</th><th>Quiebres</th><th>vs. mes anterior</th><th>Inventario</th><th>Rotación</th><th>Alertas</th>
              </tr>
            </thead>
            <tbody>
              {D.stores.slice(0,5).map(s=>(
                <tr key={s.id}>
                  <td style={{color:'var(--ink)',fontWeight:600}}>{s.name}</td>
                  <td className="num mono">${(s.sales/1).toLocaleString('en-US')}</td>
                  <td><span className="delta up"><I.ArrowUp size={11}/> {s.salesDelta.toFixed(1)}%</span></td>
                  <td className="num mono" style={{color:'var(--ink)'}}>{s.breakages}%</td>
                  <td><span className="delta down"><I.ArrowDown size={11}/> {s.breakagesDelta.toFixed(1)}%</span></td>
                  <td className="num mono">{s.inventory.toLocaleString()}</td>
                  <td className="num mono">{s.rotation}</td>
                  <td>
                    {s.alerts>0
                      ? <span className="chip amber">{s.alerts}</span>
                      : <span style={{color:'var(--ink-4)'}}>0</span>}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div className="card flush">
          <div className="card-head">
            <div className="card-title">Integraciones activas</div>
          </div>
          <div style={{display:'flex',flexDirection:'column'}}>
            {D.integrations.filter(i=>i.status==='connected').slice(0,4).map(i=>(
              <div key={i.id} style={{display:'flex',alignItems:'center',gap:11,padding:'12px 18px',borderBottom:'1px solid var(--line-2)'}}>
                <div style={{width:30,height:30,borderRadius:7,background:'var(--surface-2)',border:'1px solid var(--line)',display:'grid',placeItems:'center',color:'var(--ink-2)',fontWeight:700,fontSize:11,fontFamily:'JetBrains Mono'}}>{i.vendor.slice(0,3).toUpperCase()}</div>
                <div style={{flex:1,minWidth:0}}>
                  <div style={{fontSize:13,fontWeight:600,color:'var(--ink)'}}>{i.name}</div>
                </div>
                <span className="status live" style={{fontSize:11.5}}><span className="d"></span>Conectado</span>
              </div>
            ))}
            <div style={{padding:14}}>
              <button className="btn" style={{width:'100%',justifyContent:'center'}} onClick={()=>onNav('integrations')}>Gestionar integraciones</button>
            </div>
          </div>
        </div>
      </div>

      <div style={{textAlign:'center',color:'var(--ink-3)',fontSize:12,padding:'20px 0 0',borderTop:'1px solid var(--line-2)',marginTop:24}}>
        © 2025 FLUX Analytics. Todos los derechos reservados.
      </div>
    </>
  );
}

window.PageDashboard = PageDashboard;