Toast

"use client";

import {
  useEffect,
  useId,
  useRef,
  useState,
  useSyncExternalStore,
  type ComponentProps,
  type FocusEvent,
  type ReactNode,
} from "react";
import "./toast.css";

export type ToastOptions = {
  /** A second line under the message. */
  description?: ReactNode;
  /** One button, such as Undo. Clicking it runs onClick and dismisses the toast. */
  action?: { label: string; onClick: () => void };
  /** Milliseconds before it dismisses itself. Infinity keeps it until dismissed. */
  duration?: number;
};

type Item = ToastOptions & {
  id: string;
  message: ReactNode;
  duration: number;
  closing: boolean;
};

/* Module-level store: toast() works from anywhere on the client, no provider needed. */

const LIMIT = 4;
const EXIT_MS = 200;
const NONE: Item[] = [];
let items: Item[] = NONE;
let count = 0;
const listeners = new Set<() => void>();

function emit(next: Item[]) {
  items = next;
  for (const listener of listeners) listener();
}

function subscribe(listener: () => void) {
  listeners.add(listener);
  return () => {
    listeners.delete(listener);
  };
}

/** Queues a message. Returns its id, for dismissToast. */
export function toast(message: ReactNode, options: ToastOptions = {}): string {
  const id = `eq-toast-${++count}`;
  const item: Item = { duration: 6000, ...options, id, message, closing: false };
  const open = items.filter((entry) => !entry.closing);
  if (open.length >= LIMIT) dismissToast(open[0].id);
  emit([...items, item]);
  return id;
}

/** Plays the exit and removes the toast. */
export function dismissToast(id: string) {
  if (!items.some((entry) => entry.id === id && !entry.closing)) return;
  emit(items.map((entry) => (entry.id === id ? { ...entry, closing: true } : entry)));
  window.setTimeout(() => emit(items.filter((entry) => entry.id !== id)), EXIT_MS);
}

/* Only the first mounted Toaster renders, so a second one cannot show every toast twice. */

const NO_HOSTS: string[] = [];
let hosts: string[] = NO_HOSTS;
const hostListeners = new Set<() => void>();

function setHosts(next: string[]) {
  hosts = next;
  for (const listener of hostListeners) listener();
}

function subscribeHosts(listener: () => void) {
  hostListeners.add(listener);
  return () => {
    hostListeners.delete(listener);
  };
}

export type ToasterProps = ComponentProps<"section"> & {
  /** Accessible name of the notifications region. */
  label?: string;
};

export function Toaster({ label = "Notifications", className, ref, ...rest }: ToasterProps) {
  const hostId = useId();
  const list = useSyncExternalStore(subscribe, () => items, () => NONE);
  const hostList = useSyncExternalStore(subscribeHosts, () => hosts, () => NO_HOSTS);
  const [hovered, setHovered] = useState(false);
  const [focused, setFocused] = useState(false);
  const region = useRef<HTMLElement>(null);
  const active = hostList[0] === hostId;
  const visible = list.filter((entry) => !entry.closing).length;
  const shown = useRef(0);

  useEffect(() => {
    setHosts([...hosts, hostId]);
    return () => setHosts(hosts.filter((host) => host !== hostId));
  }, [hostId]);

  // Kept open from mount, so the live region exists before the first message arrives.
  useEffect(() => {
    const element = region.current;
    if (active && element && !element.matches(":popover-open")) element.showPopover();
  }, [active]);

  // The top layer stacks in opening order. When a new toast arrives while a modal dialog is
  // open, show the region again so it moves above that dialog.
  useEffect(() => {
    const element = region.current;
    const added = visible > shown.current;
    shown.current = visible;
    if (!added || !element || !document.querySelector("dialog:modal")) return;
    if (element.matches(":popover-open")) element.hidePopover();
    element.showPopover();
  }, [visible]);

  // A focused toast that is removed may not fire blur, so check focus whenever the list changes.
  useEffect(() => {
    if (focused && !region.current?.contains(document.activeElement)) setFocused(false);
  }, [list, focused]);

  if (!active) return null;

  function setRegion(node: HTMLElement | null) {
    region.current = node;
    if (typeof ref === "function") ref(node);
    else if (ref) ref.current = node;
  }

  function handleBlur(event: FocusEvent<HTMLElement>) {
    if (!event.currentTarget.contains(event.relatedTarget)) setFocused(false);
  }

  return (
    <section
      {...rest}
      ref={setRegion}
      popover="manual"
      aria-label={label}
      className={["eq-toaster", className].filter(Boolean).join(" ")}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      onFocus={() => setFocused(true)}
      onBlur={handleBlur}
    >
      <div className="eq-toaster-list" role="status" aria-live="polite">
        {list.map((item) => (
          <Toast key={item.id} item={item} paused={hovered || focused} />
        ))}
      </div>
    </section>
  );
}

function Toast({ item, paused }: { item: Item; paused: boolean }) {
  const remaining = useRef(item.duration);

  // Counts down only while nothing hovers or focuses the region; pausing keeps what is left.
  useEffect(() => {
    if (paused || item.closing || !Number.isFinite(item.duration)) return;
    const started = Date.now();
    const timer = window.setTimeout(() => dismissToast(item.id), remaining.current);
    return () => {
      window.clearTimeout(timer);
      remaining.current -= Date.now() - started;
    };
  }, [paused, item.closing, item.duration, item.id]);

  return (
    <div className="eq-toast" data-closing={item.closing || undefined}>
      <div className="eq-toast-text">
        <p className="eq-toast-message">{item.message}</p>
        {item.description != null && <p className="eq-toast-description">{item.description}</p>}
      </div>
      {item.action && (
        <button
          type="button"
          className="eq-toast-action"
          onClick={() => {
            item.action?.onClick();
            dismissToast(item.id);
          }}
        >
          {item.action.label}
        </button>
      )}
      <button
        type="button"
        className="eq-toast-close"
        aria-label="Dismiss"
        onClick={() => dismissToast(item.id)}
      >
        <svg
          viewBox="0 0 16 16"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.5"
          strokeLinecap="round"
          aria-hidden="true"
        >
          <path d="M4.5 4.5l7 7M11.5 4.5l-7 7" />
        </svg>
      </button>
    </div>
  );
}