/* Notifications: Bell + sliding toasts ============================== */

const SEV_TONES = {
  info:  { bg:'bg-sky-50 dark:bg-sky-500/10', text:'text-sky-700 dark:text-sky-300', border:'border-sky-200 dark:border-sky-500/30', dot:'#0ea5e9' },
  warn:  { bg:'bg-amber-50 dark:bg-amber-500/10', text:'text-amber-800 dark:text-amber-300', border:'border-amber-200 dark:border-amber-500/30', dot:'#f59e0b' },
  error: { bg:'bg-rose-50 dark:bg-rose-500/10', text:'text-rose-700 dark:text-rose-300', border:'border-rose-200 dark:border-rose-500/30', dot:'#ef4444' },
};

const SEV_ICONS = { info:'info', warn:'alert', error:'link-break' };

function fmtAgo(ts){
  const m = Math.max(0, Math.floor((Date.now()-ts)/60000));
  if (m < 1) return 'just now';
  if (m < 60) return m + 'm ago';
  const h = Math.floor(m/60);
  if (h < 24) return h + 'h ago';
  return Math.floor(h/24) + 'd ago';
}

function ToastStack({ toasts, onDismiss }){
  return (
    <div className="fixed top-[132px] right-5 z-[60] flex flex-col gap-2 w-[360px] pointer-events-none">
      {toasts.map(t => {
        const tone = SEV_TONES[t.sev];
        return (
          <div key={t.id}
            className={`pointer-events-auto rounded-xl border ${tone.border} ${tone.bg} shadow-float p-3.5 animate-slidein backdrop-blur-md`}
          >
            <div className="flex items-start gap-2.5">
              <span className={`mt-0.5 inline-flex h-7 w-7 items-center justify-center rounded-lg bg-white/70 dark:bg-black/30 ${tone.text}`}>
                <Icon name={SEV_ICONS[t.sev]} size={14}/>
              </span>
              <div className="flex-1 min-w-0">
                <div className={`text-[13px] font-semibold leading-snug ${tone.text}`}>{t.title}</div>
                <div className="text-[12px] text-ink-700 dark:text-ink-200 mt-0.5 leading-snug">{t.msg}</div>
                <div className="mt-2 flex items-center gap-2">
                  <button className={`text-[11.5px] font-medium px-2 h-6 rounded-md bg-white dark:bg-ink-800 border border-ink-200 dark:border-white/10 hover:bg-ink-100`}>
                    Investigate
                  </button>
                  <button className="text-[11.5px] text-ink-500 dark:text-ink-300 hover:text-ink-900 dark:hover:text-white">Dismiss</button>
                </div>
              </div>
              <button onClick={()=>onDismiss(t.id)} className="text-ink-400 hover:text-ink-700 dark:hover:text-white">
                <Icon name="x" size={14}/>
              </button>
            </div>
          </div>
        );
      })}
    </div>
  );
}

function NotificationsBell({ alerts, onMarkAllRead }){
  const unread = alerts.filter(a=>!a.read).length;
  return (
    <Dropdown align="right" width={400} trigger={
      <button className="relative h-9 w-9 inline-flex items-center justify-center rounded-lg border border-ink-200 dark:border-white/10 hover:bg-ink-100 dark:hover:bg-white/5">
        <Icon name="bell" size={16}/>
        {unread>0 && (
          <span className="absolute -top-1.5 -right-1.5 min-w-[17px] h-[17px] px-1 rounded-full bg-rose-500 text-white text-[10px] font-bold flex items-center justify-center font-mono ring-2 ring-ink-50 dark:ring-ink-900 leading-none">
            {unread > 99 ? '99+' : unread}
          </span>
        )}
      </button>
    }>
      {(close)=>(
        <div className="max-h-[480px] flex flex-col">
          <div className="px-3 pt-2 pb-2 flex items-center justify-between border-b border-ink-100 dark:border-white/10">
            <div className="text-[13px] font-semibold">Notifications</div>
            <button onClick={onMarkAllRead} className="text-[11.5px] text-accent-600 dark:text-accent-300 hover:underline">Mark all read</button>
          </div>
          <div className="overflow-auto scroll-thin">
            {alerts.length === 0 && (
              <div className="px-3 py-8 text-center text-ink-500 dark:text-ink-300 text-[12.5px]">No notifications yet.</div>
            )}
            {alerts.map(a => {
              const tone = SEV_TONES[a.sev];
              return (
                <div key={a.id} className={`px-3 py-2.5 flex items-start gap-2.5 border-b border-ink-50 dark:border-white/5 ${!a.read?'bg-accent-50/40 dark:bg-accent-500/[0.05]':''}`}>
                  <span className={`mt-0.5 inline-flex h-6 w-6 items-center justify-center rounded ${tone.bg} ${tone.text}`}>
                    <Icon name={SEV_ICONS[a.sev]} size={12}/>
                  </span>
                  <div className="flex-1 min-w-0">
                    <div className="text-[12.5px] font-semibold leading-snug truncate">{a.title}</div>
                    <div className="text-[11.5px] text-ink-500 dark:text-ink-300 mt-0.5 leading-snug">{a.msg}</div>
                    <div className="mt-1 flex items-center gap-2 text-[10.5px] text-ink-400 font-mono uppercase">
                      <PlatformChip p={a.platform || 'overview'} size={14}/>
                      <span>{fmtAgo(a.ts)}</span>
                    </div>
                  </div>
                  {!a.read && <span className="w-1.5 h-1.5 mt-1.5 rounded-full bg-accent-500 flex-shrink-0"/>}
                </div>
              );
            })}
          </div>
        </div>
      )}
    </Dropdown>
  );
}

Object.assign(window, { ToastStack, NotificationsBell });