function PageForecasts({pushToast}){
  const I = window.Icons;
  const D = window.FLUXData;
  const [model, setModel] = React.useState('claude');

  return (
    <>
      <div className="page-head">
        <h1 className="page-title">Pronósticos de demanda</h1>
        <p className="page-sub">Modelos predictivos con bandas de confianza al 95%. Histórico de 60 días + proyección a 30 días.</p>
      </div>

      <div className="ai-strip">
        <div className="ai-spark"><I.Brain/></div>
        <div className="ai-text">
          <span className="ai-tag">Modelo activo</span>
          <b>Claude Forecast v2.4</b> — MAPE 4.8%, entrenado con 14 meses históricos + señales de calendario, clima y promociones.
        </div>
        <div className="seg">
          <button className={`seg-item ${model==='claude'?'active':''}`} onClick={()=>setModel('claude')}>Claude</button>
          <button className={`seg-item ${model==='arima'?'active':''}`} onClick={()=>setModel('arima')}>ARIMA</button>
          <button className={`seg-item ${model==='prophet'?'active':''}`} onClick={()=>setModel('prophet')}>Prophet</button>
        </div>
      </div>

      <div className="kpi-grid" style={{marginBottom:18}}>
        {[
          {l:'MAPE (precisión)', v:'4.8%', d:'mejor que ARIMA (8.2%)', icon:'Target'},
          {l:'Demanda proyectada (30d)', v:'26,540', d:'+10.0% vs. mes actual', icon:'Trend'},
          {l:'Cobertura de SKUs', v:'98.4%', d:'6,732 / 6,842', icon:'CheckCircle'},
          {l:'Última actualización', v:'hace 12 min', d:'Actualización: cada hora', icon:'Sync'},
        ].map((k,i)=>{
          const Ic = I[k.icon];
          return (
            <div className="kpi" key={i}>
              <div className="kpi-label"><span>{k.l}</span><span className="kpi-icon"><Ic/></span></div>
              <div className="kpi-value">{k.v}</div>
              <div className="kpi-foot"><span>{k.d}</span></div>
            </div>
          );
        })}
      </div>

      <div className="card flush" style={{marginBottom:14}}>
        <div className="card-head">
          <div className="card-title">
            Demanda histórica + pronóstico
            <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:14,height:2,background:'#1A1614'}}/>Real</span>
              <span style={{display:'inline-flex',alignItems:'center',gap:5}}><span style={{width:14,height:2,background:'#F5A524'}}/>Pronóstico</span>
              <span style={{display:'inline-flex',alignItems:'center',gap:5}}><span style={{width:14,height:8,background:'rgba(245,165,36,0.2)'}}/>Banda 95%</span>
            </span>
          </div>
          <div className="select">Total cadena <I.ChevDown/></div>
        </div>
        <div className="card-body"><ForecastChart data={D.forecast} height={300}/></div>
      </div>

      <div className="card flush">
        <div className="card-head"><div className="card-title">SKUs con mayor desviación de pronóstico</div></div>
        <table className="t">
          <thead><tr><th>SKU</th><th>Producto</th><th>Pronóstico</th><th>Real</th><th>Desviación</th><th>Acción IA</th></tr></thead>
          <tbody>
            {D.skus.slice(0,5).map((s,i)=>{
              const dev = ((s.sold30 - s.forecast30) / s.forecast30 * 100);
              return (
                <tr key={s.sku}>
                  <td className="mono" style={{fontWeight:600,color:'var(--ink)'}}>{s.sku}</td>
                  <td style={{color:'var(--ink)',fontWeight:500}}>{s.name}</td>
                  <td className="num mono">{s.forecast30}</td>
                  <td className="num mono">{s.sold30}</td>
                  <td><span className={`delta ${dev<0?'down':'up'}`}>{dev<0?<I.ArrowDown size={11}/>:<I.ArrowUp size={11}/>} {Math.abs(dev).toFixed(1)}%</span></td>
                  <td><button className="btn sm" onClick={()=>pushToast('Pronóstico recalibrado')}><I.Wand size={12}/> Recalibrar</button></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </>
  );
}
window.PageForecasts = PageForecasts;