"use client";
import * as React from "react";
import { CheckCircle2, AlertTriangle, Info, X, XCircle } from "lucide-react";
import { cn } from "@/lib/utils";

type ToastKind = "success" | "error" | "info" | "warning";
interface ToastItem {
  id: number;
  kind: ToastKind;
  title: string;
  description?: string;
  duration: number;
}

type Listener = (items: ToastItem[]) => void;
let items: ToastItem[] = [];
let seq = 1;
const listeners = new Set<Listener>();

function publish() {
  for (const l of listeners) l([...items]);
}

function push(kind: ToastKind, title: string, description?: string, duration = 4200) {
  const id = seq++;
  items = [...items, { id, kind, title, description, duration }];
  publish();
  if (duration > 0) setTimeout(() => dismiss(id), duration);
  return id;
}

export function dismiss(id: number) {
  items = items.filter((t) => t.id !== id);
  publish();
}

export const toast = {
  success: (title: string, description?: string) => push("success", title, description),
  error: (title: string, description?: string) => push("error", title, description, 6000),
  info: (title: string, description?: string) => push("info", title, description),
  warning: (title: string, description?: string) => push("warning", title, description, 5000),
};

const ICONS: Record<ToastKind, React.ReactNode> = {
  success: <CheckCircle2 className="size-4 text-success" />,
  error: <XCircle className="size-4 text-danger" />,
  info: <Info className="size-4 text-info" />,
  warning: <AlertTriangle className="size-4 text-warning" />,
};

export function Toaster() {
  const [list, setList] = React.useState<ToastItem[]>([]);
  React.useEffect(() => {
    listeners.add(setList);
    return () => {
      listeners.delete(setList);
    };
  }, []);
  if (list.length === 0) return null;
  return (
    <div className="pointer-events-none fixed inset-x-0 bottom-[calc(env(safe-area-inset-bottom)+12px)] z-[100] flex flex-col items-center gap-2 px-4 sm:items-end sm:right-4 sm:left-auto" role="status" aria-live="polite">
      {list.map((t) => (
        <div key={t.id} className={cn("pointer-events-auto flex w-full max-w-sm items-start gap-2.5 rounded-lg border border-border bg-bg-elevated p-3 shadow-lg animate-fade-up")}>
          <span className="mt-0.5">{ICONS[t.kind]}</span>
          <div className="min-w-0 flex-1">
            <p className="text-sm font-medium leading-5">{t.title}</p>
            {t.description ? <p className="mt-0.5 text-xs text-fg-muted leading-4 break-words">{t.description}</p> : null}
          </div>
          <button onClick={() => dismiss(t.id)} className="rounded p-0.5 text-fg-subtle hover:text-fg" aria-label="Dismiss">
            <X className="size-3.5" />
          </button>
        </div>
      ))}
    </div>
  );
}