"use client";
import { AlertTriangle, CheckCircle2, Info, X, XCircle } from "lucide-react";
import clsx from "clsx";
import { useToast, type ToastKind } from "@/lib/toast";

const ICON: Record<ToastKind, typeof Info> = { info: Info, success: CheckCircle2, warning: AlertTriangle, error: XCircle };
const STYLE: Record<ToastKind, string> = {
  info: "border-accent/40 bg-surface-1",
  success: "border-ok/50 bg-surface-1",
  warning: "border-warn/60 bg-surface-1",
  error: "border-crit/60 bg-surface-1",
};
const ICON_STYLE: Record<ToastKind, string> = { info: "text-accent", success: "text-ok", warning: "text-warn-ink", error: "text-crit" };

export function Toaster() {
  const { toasts, dismiss } = useToast();
  if (!toasts.length) return null;
  return (
    <div className="pointer-events-none fixed inset-x-0 bottom-16 z-50 flex flex-col items-center gap-2 px-3 sm:bottom-4 sm:items-end sm:pr-4" aria-live="polite">
      {toasts.map((t) => {
        const Icon = ICON[t.kind];
        return (
          <div key={t.id} role="status" className={clsx("pointer-events-auto flex w-full max-w-sm items-start gap-2 rounded-lg border p-3 shadow-lg", STYLE[t.kind])}>
            <Icon className={clsx("mt-0.5 h-4 w-4 shrink-0", ICON_STYLE[t.kind])} aria-hidden />
            <div className="min-w-0 flex-1">
              <div className="text-sm font-medium break-words">{t.title}</div>
              {t.detail && <div className="text-xs text-ink-2 break-words">{t.detail}</div>}
              {t.requestId && (
                <div className="mt-0.5 font-mono text-[11px] text-ink-3">request_id {t.requestId}</div>
              )}
            </div>
            <button className="btn btn-ghost btn-sm -mr-1 -mt-1 px-1" onClick={() => dismiss(t.id)} aria-label="Dismiss">
              <X className="h-3.5 w-3.5" />
            </button>
          </div>
        );
      })}
    </div>
  );
}