// AlertPage.jsx — Notifications list

function AlertPage({ items, onDismiss }) {
  const Icon = ({kind}) => {
    if (kind === 'danger') return (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
        <path d="M12 3 L22 21 L2 21 Z" stroke="#C73838" strokeWidth="2" strokeLinejoin="round" fill="#FCE5E5"/>
        <line x1="12" y1="10" x2="12" y2="15" stroke="#C73838" strokeWidth="2" strokeLinecap="round"/>
        <circle cx="12" cy="18" r="1" fill="#C73838"/>
      </svg>
    );
    if (kind === 'event') return (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
        <rect x="3.5" y="5.5" width="17" height="15" rx="2" stroke="#3FA0B0" strokeWidth="1.8" fill="#E5F4F7"/>
        <line x1="3.5" y1="10" x2="20.5" y2="10" stroke="#3FA0B0" strokeWidth="1.8"/>
        <line x1="8" y1="3" x2="8" y2="7" stroke="#3FA0B0" strokeWidth="1.8" strokeLinecap="round"/>
        <line x1="16" y1="3" x2="16" y2="7" stroke="#3FA0B0" strokeWidth="1.8" strokeLinecap="round"/>
      </svg>
    );
    return (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
        <circle cx="12" cy="12" r="10" stroke="#3FA0B0" strokeWidth="1.8" fill="#E5F4F7"/>
        <line x1="12" y1="11" x2="12" y2="17" stroke="#3FA0B0" strokeWidth="2" strokeLinecap="round"/>
        <circle cx="12" cy="8" r="1" fill="#3FA0B0"/>
      </svg>
    );
  };

  return (
    <>
      <div className="page-title">Notifications</div>
      <div className="notif-list">
        {items.length === 0 && (
          <div className="notif-empty">
            <div style={{fontSize: 40, marginBottom: 8}}>🎉</div>
            <div style={{fontWeight: 700, fontSize: 15}}>You're all caught up</div>
            <div style={{fontSize: 13, color: 'var(--ink-3)', marginTop: 4}}>New alerts will appear here.</div>
          </div>
        )}
        {items.map(n => (
          <div key={n.id} className={`notif notif--${n.kind}`}>
            <div className="notif-icon"><Icon kind={n.kind}/></div>
            <div className="notif-body">
              <div className="notif-title">{n.title}</div>
              <div className="notif-text">{n.body}</div>
              <div className="notif-time">{n.time}</div>
            </div>
            <button className="notif-x" aria-label="Dismiss" onClick={() => onDismiss(n.id)}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
                <path d="M6 6 L18 18 M18 6 L6 18" stroke="#6B7280" strokeWidth="2.4" strokeLinecap="round"/>
              </svg>
            </button>
          </div>
        ))}
      </div>
    </>
  );
}

window.AlertPage = AlertPage;