// Alerts feed
function Alerts({ alerts, nodes, onSelectNode, onAck }) {
  const [filter, setFilter] = React.useState('all');
  const filtered = alerts.filter(a => filter === 'all' || a.severity === filter || (filter === 'unacked' && !a.ack));

  return (
    <div>
      <div style={{display:'flex', alignItems:'center', gap: 12, padding: '8px 16px', borderBottom:'1px solid var(--border)', background:'var(--bg-1)'}}>
        <span style={{fontSize: 11, color:'var(--text-faint)', letterSpacing:'0.08em', textTransform:'uppercase'}}>Filter</span>
        <div className="pill-toggle">
          {[
            {k:'all', l:'all'},
            {k:'crit', l:'critical'},
            {k:'warn', l:'warning'},
            {k:'info', l:'info'},
            {k:'unacked', l:'unacked'},
          ].map(f => (
            <button key={f.k} className={filter === f.k ? 'on' : ''} onClick={() => setFilter(f.k)}>{f.l}</button>
          ))}
        </div>
        <span style={{marginLeft:'auto', fontSize: 11, color:'var(--text-faint)'}}>{filtered.length} events</span>
      </div>

      <div>
        {filtered.map(a => {
          const node = nodes.find(n => n.id === a.node);
          return (
            <div key={a.id} className="alert-row" onClick={() => node && onSelectNode(node)}>
              <span className="ts">{window.fmtRel(a.ts)}</span>
              <span className={`chip ${a.severity === 'crit' ? 'crit' : a.severity === 'warn' ? 'warn' : 'accent'}`}>{a.severity}</span>
              <span className="msg">
                <strong style={{fontWeight: 500}}>{a.title}</strong>
                <small>{node?.hostname} · {a.body}</small>
              </span>
              <div style={{display:'flex', gap:6}}>
                {!a.ack ? (
                  <button className="action-btn" onClick={(e) => { e.stopPropagation(); onAck(a.id); }}>ack</button>
                ) : (
                  <span style={{color:'var(--text-mute)', fontSize:10, letterSpacing:'0.08em', textTransform:'uppercase', padding:'4px 8px'}}>acknowledged</span>
                )}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

Object.assign(window, { Alerts });