/**
 * @factory/ui — Toast (thin React layer over the PURE `ToastStore`).
 *
 * `toastStore` (default export singleton) uses the real clock; tests build
 * their own `ToastStore` with an injected clock (src/toast-store.ts).
 * `ToastProvider` renders the store's current items; `useToasts` exposes
 * push/dismiss to call sites.
 */
import * as React from "react";
import { clsx } from "clsx";
import { ToastStore, type Toast, type ToastKind } from "../toast-store.js";

/** App-wide singleton store (real timers). */
export const toastStore = new ToastStore();

const KIND_COLOR: Record<ToastKind, string> = {
  info: "var(--info)",
  success: "var(--success)",
  warning: "var(--warning)",
  error: "var(--destructive)",
};

export function useToasts() {
  const push = React.useCallback(
    (kind: ToastKind, message: string, ttl?: number) => toastStore.push(kind, message, ttl),
    [],
  );
  const dismiss = React.useCallback((id: string) => toastStore.dismiss(id), []);
  return { push, dismiss } as const;
}

export interface ToastProviderProps {
  /** Override the store (tests / per-route stores). */
  store?: ToastStore;
  /** Max toasts rendered at once (default 5, newest win). */
  max?: number;
  children?: React.ReactNode;
}

export function ToastProvider({ store = toastStore, max = 5, children }: ToastProviderProps) {
  const [items, setItems] = React.useState<readonly Toast[]>(() => store.items());
  React.useEffect(() => store.subscribe(setItems), [store]);
  const visible = items.slice(-max);

  return (
    <>
      {children}
      <div
        aria-live="polite"
        aria-label="Notifications"
        className="fixed bottom-4 right-4 z-[60] flex w-80 flex-col gap-2"
      >
        {visible.map((t) => (
          <div
            key={t.id}
            role="status"
            className={clsx(
              "flex items-start justify-between gap-3 rounded-md border border-border",
              "bg-popover px-3 py-2.5 text-sm text-popover-foreground shadow-md",
            )}
            style={{ borderLeft: `3px solid ${KIND_COLOR[t.kind]}` }}
          >
            <span>{t.message}</span>
            <button
              type="button"
              aria-label="Dismiss notification"
              onClick={() => store.dismiss(t.id)}
              className="cursor-pointer text-muted-foreground hover:text-foreground"
            >
              ✕
            </button>
          </div>
        ))}
      </div>
    </>
  );
}