function PageAlerts({pushToast}){
  const I = window.Icons;
  const D = window.FLUXData;
  const [filter, setFilter] = React.useState('all');
  const filtered = D.alerts.filter(a => filter==='all' || a.level===filter);

  return (
    <>
      <div className="page-head">
        <h1 className="page-title">Alertas</h1>
        <p className="page-sub">Sistema unificado de alertas con priorización por IA y acciones de un solo click.</p>
      </div>

      <div className="ai-strip">
        <div className="ai-spark"><I.Sparkles/></div>
        <div className="ai-text"><span className="ai-tag">Insights de Claude</span>Hay <b>4 alertas críticas</b> que pueden resolverse con 1 acción. Te ahorra ~2.5 horas de trabajo manual.</div>
        <button className="btn primary sm" onClick={()=>pushToast('Resolución automática iniciada')}>Resolver todo automáticamente</button>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr 1fr',gap:14,marginBottom:18}}>
        {[
          {l:'Críticas', v:D.alerts.filter(a=>a.level==='critical').length, color:'var(--red)', soft:'var(--red-soft)'},
          {l:'Advertencias', v:D.alerts.filter(a=>a.level==='warning').length, color:'var(--amber-2)', soft:'var(--amber-soft)'},
          {l:'Informativas', v:D.alerts.filter(a=>a.level==='info').length, color:'var(--blue)', soft:'var(--blue-soft)'},
          {l:'Resueltas (hoy)', v:18, color:'var(--green)', soft:'var(--green-soft)'},
        ].map((k,i)=>(
          <div key={i} className="card" style={{padding:16,display:'flex',alignItems:'center',gap:14}}>
            <div style={{width:42,height:42,borderRadius:10,background:k.soft,color:k.color,display:'grid',placeItems:'center'}}><I.Alert size={20}/></div>
            <div>
              <div style={{fontSize:11,color:'var(--ink-3)',fontWeight:600,textTransform:'uppercase',letterSpacing:'0.04em'}}>{k.l}</div>
              <div style={{fontSize:26,fontWeight:800,color:'var(--ink)',letterSpacing:'-0.02em'}}>{k.v}</div>
            </div>
          </div>
        ))}
      </div>

      <div className="tabs">
        <div className={`tab ${filter==='all'?'active':''}`} onClick={()=>setFilter('all')}>Todas <span className="count">{D.alerts.length}</span></div>
        <div className={`tab ${filter==='critical'?'active':''}`} onClick={()=>setFilter('critical')}>Críticas <span className="count">{D.alerts.filter(a=>a.level==='critical').length}</span></div>
        <div className={`tab ${filter==='warning'?'active':''}`} onClick={()=>setFilter('warning')}>Advertencias <span className="count">{D.alerts.filter(a=>a.level==='warning').length}</span></div>
        <div className={`tab ${filter==='info'?'active':''}`} onClick={()=>setFilter('info')}>Informativas <span className="count">{D.alerts.filter(a=>a.level==='info').length}</span></div>
      </div>

      <div className="card flush">
        {filtered.map(a=>(
          <div key={a.id} style={{display:'flex',gap:14,padding:'16px 18px',borderBottom:'1px solid var(--line-2)',alignItems:'flex-start'}}>
            <div style={{width:36,height:36,borderRadius:9,background:a.level==='critical'?'var(--red-soft)':a.level==='warning'?'var(--amber-soft)':'var(--blue-soft)',color:a.level==='critical'?'var(--red)':a.level==='warning'?'var(--amber-2)':'var(--blue)',display:'grid',placeItems:'center',flexShrink:0}}>
              {a.level==='info' ? <I.Info size={18}/> : <I.Alert size={18}/>}
            </div>
            <div style={{flex:1,minWidth:0}}>
              <div style={{display:'flex',alignItems:'center',gap:8,flexWrap:'wrap'}}>
                <span style={{fontSize:14,fontWeight:600,color:'var(--ink)'}}>{a.title}</span>
                <span className={`chip ${a.level==='critical'?'red':a.level==='warning'?'amber':'blue'}`}>{a.level==='critical'?'Crítica':a.level==='warning'?'Advertencia':'Info'}</span>
              </div>
              <div style={{fontSize:12.5,color:'var(--ink-3)',marginTop:3}}>{a.detail} · {a.time}</div>
            </div>
            <button className="btn sm primary" onClick={()=>pushToast(`Acción ejecutada: ${a.action}`)}><I.Zap size={12}/> {a.action}</button>
            <button className="btn sm">Posponer</button>
          </div>
        ))}
      </div>
    </>
  );
}
window.PageAlerts = PageAlerts;