/* Santos OS — Alertas (notifications + AI order approvals) */
function NotifCard({ n, onToast }) {
  const T = window.T;
  const [expanded, setExpanded] = React.useState(false);
  const [done, setDone] = React.useState(n.read ? null : undefined);
  const isOrder = n.type==='order_proposal';
  const prio = {critico:{label:'! Crítico', color:T.danger, bg:T.dangerLight}, moderado:{label:'! Moderado', color:T.warning, bg:T.warningLight}, informativo:{label:null}}[n.priority];
  const leftBorder = prio.color || (n.read ? 'transparent' : T.primary);

  const approve = () => { setDone(true); onToast(isOrder?'✓ Pedido enviado al CEDI · PO generada':'✦ Canje registrado · portal actualizado'); };
  const reject = () => { setDone(false); onToast('✕ Rechazado'); };

  return (
    <div style={{background:T.surface, borderRadius:16, padding:16, marginBottom:12, boxShadow:'0 2px 8px rgba(8,54,47,0.07)', borderLeft:`3px solid ${leftBorder}`, position:'relative'}}>
      {!n.read && <span style={{position:'absolute', top:16, right:16, width:8, height:8, borderRadius:4, background:T.primary}}></span>}
      <div style={{display:'flex', gap:12, alignItems:'flex-start', marginBottom:8}}>
        <div style={{width:40, height:40, borderRadius:12, background:n.bg, display:'flex', alignItems:'center', justifyContent:'center', fontSize:20, flexShrink:0}}>{n.icon}</div>
        <div style={{flex:1}}>
          <div style={{display:'flex', alignItems:'center', gap:7, flexWrap:'wrap', marginBottom:2}}>
            <span style={{fontSize:14, fontWeight:n.read?500:700, color:T.fg1}}>{n.title}</span>
            {prio.label && <span style={{padding:'2px 7px', borderRadius:8, fontSize:10, fontWeight:800, background:prio.bg, color:prio.color}}>{prio.label}</span>}
            <span style={{padding:'2px 8px', borderRadius:10, fontSize:10, fontWeight:600, background:n.bg, color:n.color}}>{n.label}</span>
          </div>
          <span style={{fontSize:11, color:T.fg3}}>{n.ts}</span>
        </div>
      </div>
      <div style={{fontSize:13, color:T.fg2, lineHeight:1.45, marginBottom:4}}>{n.body}</div>

      {isOrder && expanded && (
        <div style={{marginTop:8, borderRadius:10, background:T.surfaceVariant, overflow:'hidden', marginBottom:8}}>
          <div style={{display:'flex', alignItems:'center', gap:8, padding:10, background:'#EFF6FF', borderBottom:`1px solid ${T.border}`}}>
            <span style={{fontSize:18}}>AI</span>
            <div><div style={{fontSize:12, fontWeight:700, color:'#1D4ED8'}}>Generado por Claude Haiku</div><div style={{fontSize:10, color:'#3B82F6'}}>Análisis de velocidad · inventario Odoo · histórico</div></div>
          </div>
          <div style={{display:'flex', padding:8, background:T.primaryLight, gap:8}}>
            <span style={{flex:3, fontSize:10, fontWeight:700, color:T.primaryDark, textTransform:'uppercase'}}>Producto</span>
            <span style={{width:30, fontSize:10, fontWeight:700, color:T.primaryDark, textAlign:'center'}}>Cob.</span>
            <span style={{width:34, fontSize:10, fontWeight:700, color:T.primaryDark, textAlign:'center'}}>Conf.</span>
            <span style={{width:50, fontSize:10, fontWeight:700, color:T.primaryDark, textAlign:'right'}}>Costo</span>
          </div>
          {window.ORDER_ITEMS.map((it,i)=>{
            const conf = it.conf>=85?T.success:it.conf>=70?T.warning:T.danger;
            const ti = it.trend==='up'?'↑':it.trend==='down'?'↓':'→';
            const tcol = it.trend==='up'?T.danger:it.trend==='down'?T.success:T.fg3;
            return (
              <div key={it.sku} style={{display:'flex', padding:8, gap:8, borderBottom:i<window.ORDER_ITEMS.length-1?`1px solid ${T.border}`:'none'}}>
                <div style={{flex:3}}>
                  <div style={{display:'flex', gap:4, alignItems:'center'}}><span style={{fontSize:12, fontWeight:800, color:tcol}}>{ti}</span><span style={{fontSize:12, fontWeight:600, color:T.fg1}}>{it.nombre}</span></div>
                  <div style={{fontSize:10, color:T.success, fontStyle:'italic'}}>{it.motivo} · {it.qty} {it.unidad}</div>
                </div>
                <span style={{width:30, fontSize:11, fontWeight:700, textAlign:'center', alignSelf:'center', color:it.cover<7?T.danger:T.fg2}}>{it.cover}d</span>
                <span style={{width:34, alignSelf:'center', display:'flex', justifyContent:'center'}}><span style={{background:conf+'20', color:conf, fontSize:10, fontWeight:800, borderRadius:6, padding:'2px 5px'}}>{it.conf}%</span></span>
                <span style={{width:50, fontSize:12, fontWeight:600, color:T.fg1, textAlign:'right', alignSelf:'center', fontFamily:T.mono}}>L.{it.costo.toLocaleString()}</span>
              </div>
            );
          })}
          <div style={{display:'flex', justifyContent:'space-between', padding:8, background:T.primaryLight}}>
            <span style={{fontSize:10, fontWeight:600, color:T.primaryDark}}>Total · 4 SKUs</span>
            <span style={{fontSize:13, fontWeight:800, color:T.primaryDark, fontFamily:T.mono}}>L. 5,610</span>
          </div>
        </div>
      )}

      {isOrder && <div onClick={()=>setExpanded(!expanded)} style={{fontSize:12, fontWeight:500, color:T.info, marginTop:4, marginBottom:8, cursor:'pointer'}}>{expanded?'▲ Ocultar detalle':'▼ Ver propuesta de IA'}</div>}

      {n.actionable && done===undefined && (
        <div style={{display:'flex', gap:10, marginTop:12}}>
          <window.Btn variant="danger" style={{flex:1, padding:'10px'}} onClick={reject}>✕  Rechazar</window.Btn>
          <window.Btn variant="primary" style={{flex:2, padding:'10px'}} onClick={approve}>✓  Aprobar</window.Btn>
        </div>
      )}
      {done!==undefined && done!==null && (
        <div style={{marginTop:10, borderRadius:8, padding:'6px 12px', alignSelf:'flex-start', display:'inline-block', background:done?T.successLight:T.dangerLight}}>
          <span style={{fontSize:12, fontWeight:700, color:done?T.success:T.danger}}>{done?'✓ Aprobado':'✕ Rechazado'}</span>
        </div>
      )}
    </div>
  );
}

function Alertas({ onToast }) {
  const T = window.T;
  const [filter, setFilter] = React.useState('all');
  const filtered = filter==='all' ? window.NOTIFS : window.NOTIFS.filter(n=>n.actionable);
  return (
    <div style={{flex:1, display:'flex', flexDirection:'column', overflow:'hidden', background:T.bg}}>
      <div style={{background:T.primary, paddingTop:52, paddingBottom:14, padding:'52px 16px 14px', display:'flex', alignItems:'center', justifyContent:'space-between'}}>
        <window.Wordmark size={20} sub="ALERTAS" />
        <span style={{background:'rgba(255,255,255,0.15)', borderRadius:999, padding:'4px 11px', fontSize:11, fontWeight:700, color:'#fff'}}>3 sin leer</span>
      </div>
      <div style={{background:T.bg, borderRadius:'24px 24px 0 0', marginTop:-12, flex:1, display:'flex', flexDirection:'column', overflow:'hidden'}}>
        <div style={{display:'flex', gap:8, padding:'16px 16px 12px'}}>
          {[['all','Todas'],['action','Requieren acción']].map(([k,l])=>(
            <button key={k} onClick={()=>setFilter(k)} style={{padding:'7px 14px', borderRadius:20, border:`1px solid ${filter===k?T.primary:T.border}`, background:filter===k?T.primary:T.surface, color:filter===k?'#fff':T.fg2, fontSize:12, fontWeight:600, cursor:'pointer', fontFamily:T.font}}>{l}</button>
          ))}
        </div>
        <div style={{flex:1, overflowY:'auto', padding:'0 16px 24px'}}>
          {filtered.map(n=><NotifCard key={n.id} n={n} onToast={onToast} />)}
        </div>
      </div>
    </div>
  );
}
window.Alertas = Alertas;