"use client";

import { Bell, BellOff, BellRing, Check, Trash2, Webhook } from "lucide-react";
import Link from "next/link";
import { useSearchParams } from "next/navigation";
import { useEffect, useMemo, useState } from "react";
import { COUNTRIES, EVENT_TYPES, eventGroupOf } from "@websensor/core/client";
import { LiveDot } from "@/components/live-feed";
import { useMounted } from "@/components/theme";
import { Chip, Empty, Flag, Panel, Score, SkeletonRows } from "@/components/ui";
import type { Alert, AlertRule, LiveEvent, Notification } from "@/lib/api";
import { CHANNEL_KEYS, GROUP_LABELS, relTime, typeLabel, utcDateTime } from "@/lib/format";
import { ownerFetch } from "@/lib/owner";
import { useLive } from "@/lib/use-live";

function matches(rule: AlertRule, e: LiveEvent): boolean {
  if (rule.importance_min !== undefined && e.importance < rule.importance_min) return false;
  if (rule.signal_min !== undefined && (e.signal ?? e.importance) < rule.signal_min) return false;
  if (rule.silent_only && !e.silent) return false;
  if (rule.first_party_only && e.firstParty === false) return false;
  if (rule.confirmed_only && e.evidence !== "CONFIRMED" && e.clusterState !== "confirmed") return false;
  if (rule.event_types?.length && !rule.event_types.includes(e.type)) return false;
  if (rule.groups?.length && !rule.groups.includes(e.group ?? eventGroupOf(e.type))) return false;
  if (rule.categories?.length && !rule.categories.some((c) => e.categories.includes(c))) return false;
  if (rule.countries?.length && !(e.country && rule.countries.includes(e.country.toUpperCase()))) return false;
  if (rule.entities?.length && !e.entities.some((x) => rule.entities!.includes(x.id))) return false;
  if (rule.sources?.length && !rule.sources.includes(e.source?.id)) return false;
  if (rule.keywords?.length) {
    const hay = `${e.title} ${e.summary}`.toLowerCase();
    if (!rule.keywords.some((k) => hay.includes(k.toLowerCase()))) return false;
  }
  return true;
}

interface Form {
  name: string;
  importance_min: number;
  signal_min: number;
  silent_only: boolean;
  first_party_only: boolean;
  confirmed_only: boolean;
  event_types: string[];
  groups: string[];
  categories: string[];
  countries: string[];
  entities: string;
  sources: string;
  keywords: string;
  channel: "web" | "webhook";
  webhook_url: string;
  webhook_secret: string;
}

const EMPTY: Form = { name: "", importance_min: 0, signal_min: 60, silent_only: false, first_party_only: false, confirmed_only: false, event_types: [], groups: [], categories: [], countries: [], entities: "", sources: "", keywords: "", channel: "web", webhook_url: "", webhook_secret: "" };

const PRESETS: { label: string; form: Partial<Form> }[] = [
  { label: "OpenAI pricing", form: { name: "OpenAI pricing", entities: "org_openai", event_types: ["pricing_change"], signal_min: 0 } },
  { label: "Anthropic model release", form: { name: "Anthropic model release", entities: "org_anthropic", event_types: ["model_release"], signal_min: 0 } },
  { label: "Cloudflare outage", form: { name: "Cloudflare outage", entities: "org_cloudflare", groups: ["reliability"], signal_min: 0 } },
  { label: "Critical CISA/KEV", form: { name: "Critical CISA / KEV", sources: "cisa", groups: ["security"], signal_min: 70, first_party_only: true } },
  { label: "Tesla pricing", form: { name: "Tesla pricing", entities: "org_tesla", event_types: ["pricing_change"], signal_min: 0 } },
  { label: "NVIDIA ≥ 80", form: { name: "NVIDIA ≥ 80", entities: "org_nvidia", signal_min: 80 } },
];

const COUNTRY_CODES = Object.keys(COUNTRIES);

function toggle<T>(list: T[], v: T): T[] {
  return list.includes(v) ? list.filter((x) => x !== v) : [...list, v];
}

function ChipToggle({ on, onClick, children, tone = "signal", title }: { on: boolean; onClick: () => void; children: React.ReactNode; tone?: "signal" | "silent" | "info" | "ok"; title?: string }) {
  const onCls = tone === "silent" ? "border-silent/50 bg-silent-soft text-silent" : tone === "info" ? "border-info/50 bg-info/10 text-info" : tone === "ok" ? "border-ok/50 bg-ok/10 text-ok" : "border-signal/50 bg-signal-soft text-signal";
  return (
    <button type="button" aria-pressed={on} title={title} onClick={onClick} className={`inline-flex items-center gap-1 rounded-sm border px-1.5 py-px text-[10.5px] leading-4 ${on ? onCls : "border-line text-fg-muted hover:text-fg"}`}>
      {children}
    </button>
  );
}

function ruleChips(rule: AlertRule) {
  const out: React.ReactNode[] = [];
  if (rule.signal_min) out.push(<Chip key="sig" tone="signal">signal ≥ {rule.signal_min}</Chip>);
  if (rule.importance_min) out.push(<Chip key="imp">importance ≥ {rule.importance_min}</Chip>);
  if (rule.silent_only) out.push(<Chip key="silent" tone="silent">silent only</Chip>);
  if (rule.first_party_only) out.push(<Chip key="fp" tone="signal">first-party</Chip>);
  if (rule.confirmed_only) out.push(<Chip key="cf" tone="ok">confirmed</Chip>);
  rule.groups?.forEach((g) => out.push(<Chip key={`g-${g}`} tone="info">{GROUP_LABELS[g] ?? g}</Chip>));
  rule.event_types?.forEach((t) => out.push(<Chip key={`t-${t}`}>{typeLabel(t)}</Chip>));
  rule.categories?.forEach((c) => out.push(<Chip key={`c-${c}`}>{c}</Chip>));
  rule.countries?.forEach((c) => out.push(<Chip key={`co-${c}`}><Flag code={c} /> {c}</Chip>));
  rule.entities?.forEach((t) => out.push(<Chip key={`e-${t}`} tone="signal" href={`/entity/${t}`}>{t.replace(/^(org|prd|ent)_/, "")}</Chip>));
  rule.sources?.forEach((t) => out.push(<Chip key={`s-${t}`} tone="info" href={`/source/${t}`}>{t}</Chip>));
  rule.keywords?.forEach((t) => out.push(<Chip key={`k-${t}`}>“{t}”</Chip>));
  if (!out.length) out.push(<Chip key="all">every event</Chip>);
  return out;
}

export function Alerts() {
  const sp = useSearchParams();
  const prefillEntity = sp.get("entity") ?? "";
  const [alerts, setAlerts] = useState<Alert[] | null>(null);
  const [notifs, setNotifs] = useState<{ items: Notification[]; unread: number } | null>(null);
  const [fired, setFired] = useState<{ alert: Alert; event: LiveEvent; at: number }[]>([]);
  const mounted = useMounted();
  const [permOverride, setPerm] = useState<NotificationPermission | null>(null);
  const perm: NotificationPermission | "unsupported" = !mounted ? "default" : permOverride ?? (typeof Notification === "undefined" ? "unsupported" : Notification.permission);
  const [form, setForm] = useState<Form>({ ...EMPTY, entities: prefillEntity, name: prefillEntity ? `${prefillEntity.replace(/^(org|prd|ent)_/, "")} alerts` : "" });
  const [err, setErr] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);
  const [created, setCreated] = useState<string | null>(null);
  const [tick, setTick] = useState(0);
  const reload = (): void => setTick((t) => t + 1);

  useEffect(() => {
    let cancelled = false;
    ownerFetch<{ items: Alert[] }>("/api/v1/alerts")
      .then((r) => {
        if (!cancelled) setAlerts(r.items);
      })
      .catch((e: Error) => {
        if (cancelled) return;
        setErr(e.message);
        setAlerts([]);
      });
    const pull = (): void => {
      ownerFetch<{ items: Notification[]; unread: number }>("/api/v1/notifications?limit=50")
        .then((r) => {
          if (!cancelled) setNotifs(r);
        })
        .catch(() => {
          if (!cancelled) setNotifs({ items: [], unread: 0 });
        });
    };
    pull();
    const t = setInterval(pull, 30_000);
    return () => {
      cancelled = true;
      clearInterval(t);
    };
  }, [tick]);

  const status = useLive(["events:global"], (e) => {
    for (const a of alerts ?? []) {
      if (!a.enabled || !matches(a.rule, e)) continue;
      setFired((prev) => [{ alert: a, event: e, at: Date.now() }, ...prev].slice(0, 50));
      if (typeof Notification !== "undefined" && Notification.permission === "granted") {
        try {
          const n = new Notification(`${e.source?.name ?? "WebSensor"} · ${Math.round(e.signal ?? e.importance)}`, { body: e.title, tag: e.id, icon: "/icon.svg" });
          n.onclick = () => window.open(`/event/${e.slug}`, "_blank");
        } catch {
          // notifications unavailable
        }
      }
    }
  });

  const split = (s: string): string[] | undefined => {
    const arr = s.split(/[,\n]/).map((x) => x.trim()).filter(Boolean);
    return arr.length ? arr : undefined;
  };

  const create = async (): Promise<void> => {
    setErr(null);
    setCreated(null);
    const rule: AlertRule = {
      importance_min: form.importance_min > 0 ? form.importance_min : undefined,
      signal_min: form.signal_min > 0 ? form.signal_min : undefined,
      event_types: form.event_types.length ? form.event_types : undefined,
      groups: form.groups.length ? form.groups : undefined,
      categories: form.categories.length ? form.categories : undefined,
      countries: form.countries.length ? form.countries : undefined,
      entities: split(form.entities),
      sources: split(form.sources),
      keywords: split(form.keywords),
      silent_only: form.silent_only || undefined,
      first_party_only: form.first_party_only || undefined,
      confirmed_only: form.confirmed_only || undefined,
    };
    if (form.channel === "webhook" && !/^https:\/\//i.test(form.webhook_url.trim())) {
      setErr("Webhook URL must start with https:// and be publicly reachable.");
      return;
    }
    setBusy(true);
    try {
      const body = { name: form.name.trim() || "Alert", rule, channel: form.channel, channel_config: form.channel === "webhook" ? { url: form.webhook_url.trim(), ...(form.webhook_secret.trim() ? { secret: form.webhook_secret.trim() } : {}) } : {} };
      const r = await ownerFetch<{ id: string; name: string }>("/api/v1/alerts", { method: "POST", body: JSON.stringify(body) });
      setForm(EMPTY);
      setCreated(r.name);
      reload();
    } catch (e) {
      setErr((e as Error).message);
    } finally {
      setBusy(false);
    }
  };

  const setEnabled = async (a: Alert, enabled: boolean): Promise<void> => {
    setAlerts((prev) => prev?.map((x) => (x.id === a.id ? { ...x, enabled } : x)) ?? prev);
    try {
      await ownerFetch(`/api/v1/alerts/${a.id}`, { method: "PATCH", body: JSON.stringify({ enabled }) });
    } catch (e) {
      setErr((e as Error).message);
      reload();
    }
  };
  const remove = async (a: Alert): Promise<void> => {
    setAlerts((prev) => prev?.filter((x) => x.id !== a.id) ?? prev);
    try {
      await ownerFetch(`/api/v1/alerts/${a.id}`, { method: "DELETE" });
    } catch (e) {
      setErr((e as Error).message);
      reload();
    }
  };
  const markAllRead = async (): Promise<void> => {
    try {
      await ownerFetch("/api/v1/notifications/read", { method: "POST", body: JSON.stringify({}) });
      reload();
    } catch (e) {
      setErr((e as Error).message);
    }
  };

  const applyPreset = (p: Partial<Form>): void => setForm({ ...EMPTY, ...p });
  const activeFilters = useMemo(() => [form.signal_min > 0, form.importance_min > 0, form.silent_only, form.first_party_only, form.confirmed_only, form.event_types.length > 0, form.groups.length > 0, form.categories.length > 0, form.countries.length > 0, Boolean(form.entities.trim()), Boolean(form.sources.trim()), Boolean(form.keywords.trim())].filter(Boolean).length, [form]);

  return (
    <div className="grid gap-4 lg:grid-cols-[400px_minmax(0,1fr)]">
      <aside className="flex min-w-0 flex-col gap-4">
        <Panel title={<span>New rule <span className="normal-case tracking-normal text-fg-subtle">· {activeFilters} condition{activeFilters === 1 ? "" : "s"}</span></span>}>
          <form
            className="flex flex-col gap-3 text-[12.5px]"
            onSubmit={(e) => {
              e.preventDefault();
              void create();
            }}
          >
            <div>
              <div className="label mb-1">Presets</div>
              <div className="flex flex-wrap gap-1">
                {PRESETS.map((p) => (
                  <button key={p.label} type="button" onClick={() => applyPreset(p.form)} className="rounded-sm border border-line px-1.5 py-px text-[10.5px] leading-4 text-fg-muted hover:border-line-strong hover:text-fg">
                    {p.label}
                  </button>
                ))}
              </div>
            </div>

            <label className="flex flex-col gap-1">
              <span className="label">Name</span>
              <input value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} placeholder="Rule name" maxLength={80} className="h-8 rounded-md border border-line bg-panel px-2 text-[12.5px]" />
            </label>

            <div className="grid grid-cols-2 gap-3">
              <label className="flex flex-col gap-1">
                <span className="flex items-center justify-between"><span className="label">Signal ≥</span><span className="font-mono text-[12px] tabular">{form.signal_min || "any"}</span></span>
                <input type="range" min={0} max={100} step={5} value={form.signal_min} onChange={(e) => setForm({ ...form, signal_min: Number(e.target.value) })} className="w-full accent-[var(--signal)]" aria-label="Minimum signal score" />
              </label>
              <label className="flex flex-col gap-1">
                <span className="flex items-center justify-between"><span className="label">Importance ≥</span><span className="font-mono text-[12px] tabular">{form.importance_min || "any"}</span></span>
                <input type="range" min={0} max={100} step={5} value={form.importance_min} onChange={(e) => setForm({ ...form, importance_min: Number(e.target.value) })} className="w-full accent-[var(--signal)]" aria-label="Minimum importance" />
              </label>
            </div>

            <div className="flex flex-wrap gap-x-4 gap-y-1">
              <label className="flex items-center gap-1.5">
                <input type="checkbox" checked={form.silent_only} onChange={(e) => setForm({ ...form, silent_only: e.target.checked })} className="accent-[var(--silent)]" />
                <span className="text-silent">Silent only</span>
              </label>
              <label className="flex items-center gap-1.5">
                <input type="checkbox" checked={form.first_party_only} onChange={(e) => setForm({ ...form, first_party_only: e.target.checked })} className="accent-[var(--signal)]" />
                <span>First-party only</span>
              </label>
              <label className="flex items-center gap-1.5">
                <input type="checkbox" checked={form.confirmed_only} onChange={(e) => setForm({ ...form, confirmed_only: e.target.checked })} className="accent-[var(--ok)]" />
                <span>Confirmed only</span>
              </label>
            </div>

            <div>
              <div className="label mb-1">Groups</div>
              <div className="flex flex-wrap gap-1">
                {Object.entries(GROUP_LABELS).map(([k, v]) => (
                  <ChipToggle key={k} on={form.groups.includes(k)} tone="info" onClick={() => setForm({ ...form, groups: toggle(form.groups, k) })}>{v}</ChipToggle>
                ))}
              </div>
            </div>

            <div>
              <div className="mb-1 flex items-center justify-between">
                <span className="label">Event types</span>
                {form.event_types.length > 0 && <button type="button" onClick={() => setForm({ ...form, event_types: [] })} className="text-[10.5px] text-fg-subtle hover:text-fg">clear {form.event_types.length}</button>}
              </div>
              <div className="flex max-h-28 flex-wrap gap-1 overflow-auto rounded-md border border-line p-1.5">
                {Object.entries(EVENT_TYPES).map(([k, v]) => (
                  <ChipToggle key={k} on={form.event_types.includes(k)} onClick={() => setForm({ ...form, event_types: toggle(form.event_types, k) })} title={`${k} · severity ${v.severity}`}>{v.label}</ChipToggle>
                ))}
              </div>
            </div>

            <div>
              <div className="label mb-1">Categories</div>
              <div className="flex flex-wrap gap-1">
                {CHANNEL_KEYS.map((c) => (
                  <ChipToggle key={c} on={form.categories.includes(c)} tone="ok" onClick={() => setForm({ ...form, categories: toggle(form.categories, c) })}>{c}</ChipToggle>
                ))}
              </div>
            </div>

            <div>
              <div className="mb-1 flex items-center justify-between">
                <span className="label">Countries</span>
                {form.countries.length > 0 && <button type="button" onClick={() => setForm({ ...form, countries: [] })} className="text-[10.5px] text-fg-subtle hover:text-fg">clear {form.countries.length}</button>}
              </div>
              <div className="flex max-h-20 flex-wrap gap-1 overflow-auto rounded-md border border-line p-1.5">
                {COUNTRY_CODES.map((c) => (
                  <ChipToggle key={c} on={form.countries.includes(c)} onClick={() => setForm({ ...form, countries: toggle(form.countries, c) })} title={COUNTRIES[c]?.name}>
                    <span className="font-mono">{c}</span>
                  </ChipToggle>
                ))}
              </div>
            </div>

            <label className="flex flex-col gap-1">
              <span className="label">Entities <span className="normal-case tracking-normal">· ids, comma-separated</span></span>
              <input value={form.entities} onChange={(e) => setForm({ ...form, entities: e.target.value })} placeholder="org_openai, prd_openai_openai-api" className="h-8 rounded-md border border-line bg-panel px-2 font-mono text-[12px]" />
            </label>
            <label className="flex flex-col gap-1">
              <span className="label">Sources <span className="normal-case tracking-normal">· ids</span></span>
              <input value={form.sources} onChange={(e) => setForm({ ...form, sources: e.target.value })} placeholder="openai, cisa" className="h-8 rounded-md border border-line bg-panel px-2 font-mono text-[12px]" />
            </label>
            <label className="flex flex-col gap-1">
              <span className="label">Keywords <span className="normal-case tracking-normal">· in title or summary</span></span>
              <input value={form.keywords} onChange={(e) => setForm({ ...form, keywords: e.target.value })} placeholder="pricing, CVE, outage" className="h-8 rounded-md border border-line bg-panel px-2 text-[12.5px]" />
            </label>

            <fieldset className="rounded-md border border-line p-2">
              <legend className="label px-1">Delivery channel</legend>
              <div className="flex flex-wrap gap-x-4 gap-y-1">
                <label className="flex items-center gap-1.5">
                  <input type="radio" name="channel" checked={form.channel === "web"} onChange={() => setForm({ ...form, channel: "web" })} className="accent-[var(--signal)]" />
                  <Bell className="size-3.5 text-fg-muted" /> Web (this browser)
                </label>
                <label className="flex items-center gap-1.5">
                  <input type="radio" name="channel" checked={form.channel === "webhook"} onChange={() => setForm({ ...form, channel: "webhook" })} className="accent-[var(--signal)]" />
                  <Webhook className="size-3.5 text-fg-muted" /> Webhook
                </label>
              </div>
              {form.channel === "webhook" && (
                <div className="mt-2 flex flex-col gap-1.5">
                  <input type="url" value={form.webhook_url} onChange={(e) => setForm({ ...form, webhook_url: e.target.value })} placeholder="https://example.com/hooks/websensor" required className="h-8 rounded-md border border-line bg-panel px-2 font-mono text-[12px]" aria-label="Webhook URL" />
                  <input value={form.webhook_secret} onChange={(e) => setForm({ ...form, webhook_secret: e.target.value })} placeholder="Shared secret (optional)" className="h-8 rounded-md border border-line bg-panel px-2 font-mono text-[12px]" aria-label="Webhook secret" autoComplete="off" />
                  <p className="text-[11px] leading-relaxed text-fg-subtle">
                    POST JSON per matching event. With a secret, each request carries <code className="text-fg-muted">X-WebSensor-Signature: sha256=…</code> — an HMAC-SHA256 of the raw body you can verify. HTTPS only; private, loopback and cloud-metadata addresses are rejected.
                  </p>
                </div>
              )}
            </fieldset>

            <button type="submit" disabled={busy} className="inline-flex h-8 items-center justify-center gap-1 rounded-md border border-line bg-panel-2 px-3 text-[12.5px] hover:border-line-strong disabled:opacity-60">
              <Bell className="size-3.5" /> {busy ? "Creating…" : "Create rule"}
            </button>
            {err && <p className="text-[11px] text-danger">{err}</p>}
            {created && <p className="flex items-center gap-1 text-[11px] text-signal"><Check className="size-3" /> Rule “{created}” created.</p>}
          </form>
        </Panel>

        <Panel title="Delivery status">
          <div className="flex flex-col gap-2 text-[12.5px]">
            <div className="flex items-center justify-between">
              <span>Web (this browser)</span>
              <Chip tone="ok">active</Chip>
            </div>
            <div className="flex items-center justify-between">
              <span>Webhook (HTTPS, signed)</span>
              <Chip tone="ok">active</Chip>
            </div>
            <div className="flex items-center justify-between">
              <span>Browser notifications</span>
              {perm === "granted" ? <Chip tone="ok">granted</Chip> : perm === "unsupported" ? <Chip>unsupported</Chip> : perm === "denied" ? <Chip tone="danger">denied</Chip> : <button type="button" onClick={() => Notification.requestPermission().then(setPerm)} className="h-7 rounded-md border border-line bg-panel-2 px-2 text-[12px] hover:border-line-strong">Enable</button>}
            </div>
            {["Email", "Push", "Slack", "Discord", "Telegram"].map((c) => (
              <div key={c} className="flex items-center justify-between text-fg-muted">
                <span>{c}</span>
                <Chip>planned</Chip>
              </div>
            ))}
          </div>
        </Panel>
      </aside>

      <div className="flex min-w-0 flex-col gap-4">
        <Panel title={<span>Rules <span className="font-mono text-fg-subtle">{alerts?.length ?? "…"}</span></span>} dense>
          {alerts === null ? (
            <SkeletonRows rows={3} />
          ) : alerts.length ? (
            <ul className="divide-y divide-line">
              {alerts.map((a) => (
                <li key={a.id} className={`grid grid-cols-[auto_minmax(0,1fr)_auto] items-start gap-3 px-3 py-2 text-[13px] ${a.enabled ? "" : "opacity-60"}`}>
                  <button type="button" role="switch" aria-checked={a.enabled} aria-label={a.enabled ? "Disable rule" : "Enable rule"} title={a.enabled ? "Disable" : "Enable"} onClick={() => setEnabled(a, !a.enabled)} className={`mt-0.5 inline-flex size-6 items-center justify-center rounded-md border ${a.enabled ? "border-signal/40 bg-signal-soft text-signal" : "border-line text-fg-subtle"}`}>
                    {a.enabled ? <BellRing className="size-3.5" /> : <BellOff className="size-3.5" />}
                  </button>
                  <div className="min-w-0">
                    <div className="flex flex-wrap items-center gap-2">
                      <span className="font-medium">{a.name}</span>
                      <Chip tone={a.channel === "webhook" ? "info" : "default"} className="font-mono">{a.channel === "webhook" ? <><Webhook className="size-3" /> webhook</> : "web"}</Chip>
                      {!a.enabled && <Chip>paused</Chip>}
                    </div>
                    <div className="mt-1 flex flex-wrap gap-1">{ruleChips(a.rule)}</div>
                    <div className="mt-1 flex flex-wrap gap-x-3 font-mono text-[11px] text-fg-subtle tabular">
                      <span>fired 24 h <span className="text-fg-muted">{a.fired_24h ?? 0}</span></span>
                      <span>total <span className="text-fg-muted">{a.fired_count ?? 0}</span></span>
                      <span>last {a.last_fired_at ? relTime(a.last_fired_at) : "never"}</span>
                      {a.channel === "webhook" && a.channel_config?.url && <span className="truncate">{a.channel_config.url}</span>}
                    </div>
                  </div>
                  <button type="button" aria-label={`Delete rule ${a.name}`} onClick={() => remove(a)} className="mt-0.5 text-fg-subtle hover:text-danger"><Trash2 className="size-3.5" /></button>
                </li>
              ))}
            </ul>
          ) : (
            <Empty>No rules yet — pick a preset or define conditions on the left.</Empty>
          )}
        </Panel>

        <Panel
          title={<span>Notifications {notifs && notifs.unread > 0 && <span className="ml-1 rounded-sm border border-signal/40 bg-signal-soft px-1 font-mono text-[10px] text-signal">{notifs.unread} unread</span>}</span>}
          action={notifs && notifs.unread > 0 ? <button type="button" onClick={markAllRead} className="text-[11px] text-fg-subtle hover:text-fg">mark all read</button> : undefined}
          dense
        >
          {notifs === null ? (
            <SkeletonRows rows={3} />
          ) : notifs.items.length ? (
            <ul className="divide-y divide-line">
              {notifs.items.map((n) => (
                <li key={n.id} className={`grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-3 px-3 py-1.5 text-[12.5px] ${n.read_at ? "" : "bg-panel-2/60"}`}>
                  <Score value={n.event.signal_score ?? n.event.importance} size="sm" kind="signal" />
                  <div className="min-w-0">
                    <Link href={`/event/${n.event.slug}`} className="block truncate font-medium hover:underline">{n.event.title}</Link>
                    <div className="flex flex-wrap gap-x-2 text-[11px] text-fg-subtle">
                      <span>rule “{n.alert_name}”</span>
                      <span>· {n.event.source.name}</span>
                      <span>· <span className="font-mono">{n.channel}</span></span>
                      <span className={n.status === "failed" || n.status === "error" ? "text-danger" : n.status === "delivered" || n.status === "sent" ? "text-ok" : ""}>· {n.status}</span>
                      {!n.read_at && <span className="text-signal">· new</span>}
                    </div>
                  </div>
                  <time dateTime={n.created_at} title={utcDateTime(n.created_at)} className="whitespace-nowrap font-mono text-[11px] text-fg-subtle tabular">{relTime(n.created_at)}</time>
                </li>
              ))}
            </ul>
          ) : (
            <Empty>No notifications yet. Rules are evaluated by the engine on every new event; deliveries are logged here.</Empty>
          )}
        </Panel>

        <Panel title={<span className="flex items-center gap-3">Fired in this session <LiveDot status={status} /></span>} dense>
          {fired.length ? (
            <ul className="divide-y divide-line">
              {fired.map((f, i) => (
                <li key={`${f.event.id}-${i}`} className="flex items-center gap-3 px-3 py-2 text-[13px] animate-fade-in">
                  <Score value={f.event.signal ?? f.event.importance} size="sm" kind="signal" />
                  <div className="min-w-0 flex-1">
                    <Link href={`/event/${f.event.slug}`} className="block truncate font-medium hover:underline">{f.event.title}</Link>
                    <div className="text-[11px] text-fg-subtle">rule “{f.alert.name}” · {f.event.source?.name} · {relTime(new Date(f.at))}</div>
                  </div>
                </li>
              ))}
            </ul>
          ) : (
            <Empty>Matching events will appear here while this page is open.</Empty>
          )}
        </Panel>
      </div>
    </div>
  );
}