import { useEffect, useRef, useState } from "react";
import { IconBell, IconX } from "@tabler/icons-react";

export interface NextNotification { id: string; taskId: string | null; title: string; detail: string; kind: "ready" | "interrupted" | "confirmation" | "error"; read: boolean; timestamp: string; }
export interface NextNotificationState { revision: number; items: NextNotification[]; }

// Saved notifications arrive newest first. Keep the latest copy of each chat message.
function latestChatMessages(items: NextNotification[]) {
  const seen = new Set<string>();
  return items.filter((item) => {
    if (!item.taskId) return true;
    const key = JSON.stringify([item.taskId, item.kind, item.title, item.detail]);
    if (seen.has(key)) return false;
    seen.add(key);
    return true;
  });
}
export function NextNotificationCenter({ state, toasts, onAction, onOpen, onDismiss }: {
  state: NextNotificationState; toasts: NextNotification[];
  onAction: (action: "read" | "read_all" | "clear", id?: string) => Promise<void>;
  onOpen: (item: NextNotification) => void; onDismiss: (id: string) => void;
}) {
  const [opened, setOpened] = useState(false);
  const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
  const cancelClose = () => { if (closeTimer.current !== null) clearTimeout(closeTimer.current); closeTimer.current = null; };
  const closeCenter = () => { cancelClose(); setOpened(false); };
  const openOnHover = (event: React.PointerEvent) => { if (event.pointerType === "touch") return; cancelClose(); setOpened(true); };
  const closeAfterHover = (event: React.PointerEvent) => { if (event.pointerType === "touch") return; cancelClose(); closeTimer.current = setTimeout(() => { setOpened(false); closeTimer.current = null; }, 200); };
  useEffect(() => () => cancelClose(), []);
  const [filter, setFilter] = useState<"all" | "unread">("all");
  const [busy, setBusy] = useState(false);
  const root = useRef<HTMLDivElement>(null);
  const bell = useRef<HTMLButtonElement>(null);
  const list = useRef<HTMLDivElement>(null);
  const reading = useRef(new Set<string>());
  const actionRef = useRef(onAction);
  actionRef.current = onAction;
  const latest = latestChatMessages(state.items);
  const unread = latest.filter((item) => !item.read).length;
  const items = latest.filter((item) => filter === "all" || !item.read);
  useEffect(() => {
    if (!opened) return;
    const close = (event: PointerEvent) => { if (!root.current?.contains(event.target as Node)) closeCenter(); };
    const escape = (event: KeyboardEvent) => { if (event.key === "Escape") { closeCenter(); bell.current?.focus(); } };
    document.addEventListener("pointerdown", close);
    document.addEventListener("keydown", escape);
    return () => { document.removeEventListener("pointerdown", close); document.removeEventListener("keydown", escape); };
  }, [opened]);
  const unreadKey = JSON.stringify(items.filter(item => !item.read).map(item => item.id));
  useEffect(() => {
    if (!opened || !list.current || typeof IntersectionObserver === "undefined") return;
    const observer = new IntersectionObserver(entries => {
      for (const entry of entries) {
        const id = (entry.target as HTMLElement).dataset.notificationId;
        if (!entry.isIntersecting || !id || reading.current.has(id)) continue;
        reading.current.add(id);
        void actionRef.current("read", id).catch(() => reading.current.delete(id));
      }
    }, { root: list.current, threshold: 0.01 });
    for (const item of list.current.querySelectorAll("[data-notification-id][data-unread=true]")) observer.observe(item);
    return () => observer.disconnect();
  }, [opened, unreadKey]);
  async function mutate(action: "read" | "read_all" | "clear", id?: string) {
    setBusy(true);
    try { await onAction(action, id); } catch { /* The caller displays the error. */ } finally { setBusy(false); }
  }
  return <div className="next-notifications" ref={root}>
    <button ref={bell} className="next-icon-button" aria-label={unread > 0 ? "Notifications, unread" : "Notifications"} aria-expanded={opened} aria-controls="next-notification-panel" onPointerEnter={openOnHover} onPointerLeave={closeAfterHover} onClick={() => { cancelClose(); setOpened(true); }} title={unread ? "Unread notifications" : "Notifications"}>
      <IconBell size={18} />{unread > 0 && <span className="next-unread-dot" aria-hidden="true" />}
    </button>
    {opened && <section onPointerEnter={openOnHover} onPointerLeave={closeAfterHover} id="next-notification-panel" className="next-notification-panel" aria-label="Notification center">
      <div className="next-notification-heading"><strong>Notifications</strong><button className="next-icon-button" aria-label="Close notifications" onClick={() => { closeCenter(); bell.current?.focus(); }}><IconX size={16} /></button></div>
      <div className="next-notification-controls">
        <div role="group" aria-label="Notification filter"><button aria-pressed={filter === "all"} onClick={() => setFilter("all")}>All</button><button aria-pressed={filter === "unread"} onClick={() => setFilter("unread")}>Unread{unread > 0 ? ` (${unread})` : ""}</button></div>
        <button disabled={busy || unread === 0} onClick={() => void mutate("read_all")}>Mark all read</button>
        <button disabled={busy || state.items.length === 0} onClick={() => void mutate("clear")}>Clear all</button>
      </div>
      <div className="next-notification-list" ref={list}>
        {items.length === 0 && <p className="next-notification-empty">{filter === "unread" ? "No unread notifications" : "No notifications yet"}</p>}
        {items.map((item) => <article key={item.id} data-notification-id={item.id} data-unread={!item.read} className={`next-notification-item${item.read ? "" : " next-notification-unread"}`}>
          <button className="next-notification-message" disabled={busy} onClick={() => { void mutate("read", item.id); if (item.taskId) { closeCenter(); onOpen(item); } }}>
            <strong>{item.title}</strong>{item.detail && <span>{item.detail}</span>}<time dateTime={item.timestamp}>{new Date(item.timestamp).toLocaleString([], { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" })}</time>
          </button>
        </article>)}
      </div>
    </section>}
    <div className="next-toast-stack" aria-live="polite" aria-atomic="false">
      {toasts.map((item) => <article key={item.id} className={`next-toast next-toast-${item.kind}`}>
        <button className="next-toast-message" onClick={() => { if (item.taskId) onOpen(item); void mutate("read", item.id); onDismiss(item.id); }}><strong>{item.title}</strong>{item.detail && <span>{item.detail}</span>}</button>
        <button className="next-icon-button" aria-label={`Dismiss ${item.title}`} onClick={() => onDismiss(item.id)}><IconX size={16} /></button>
      </article>)}
    </div>
  </div>;
}