"use client";

import { useEffect } from "react";
import toast, { Toaster } from "react-hot-toast";
import { AlertCircle, CheckCircle2, Info, XCircle } from "lucide-react";
import { configureNotifier, type NotifyLevel } from "@/lib/notify";
import { cn } from "@/lib/utils";

const LEVEL_STYLES: Record<NotifyLevel, { icon: typeof Info; cls: string; iconCls: string }> = {
  success: {
    icon: CheckCircle2,
    cls: "border-accent-200 bg-accent-50 text-accent-800 dark:border-accent-500/40 dark:bg-slate-900 dark:text-accent-300",
    iconCls: "text-accent-600 dark:text-accent-400",
  },
  error: {
    icon: XCircle,
    cls: "border-rose-200 bg-rose-50 text-rose-800 dark:border-rose-500/40 dark:bg-slate-900 dark:text-rose-300",
    iconCls: "text-rose-600 dark:text-rose-400",
  },
  warning: {
    icon: AlertCircle,
    cls: "border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-500/40 dark:bg-slate-900 dark:text-amber-300",
    iconCls: "text-amber-600 dark:text-amber-400",
  },
  info: {
    icon: Info,
    cls: "border-slate-200 bg-white text-slate-700 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200",
    iconCls: "text-slate-500 dark:text-slate-400",
  },
};

function showToast(message: string, level: NotifyLevel) {
  const { icon: Icon, cls, iconCls } = LEVEL_STYLES[level];
  toast.custom((t) => (
    <div
      role="alert"
      className={cn(
        "flex max-w-sm items-start gap-2.5 rounded-2xl border px-4 py-3 shadow-lg transition-all duration-200",
        cls,
        t.visible ? "translate-y-0 opacity-100" : "-translate-y-2 opacity-0",
      )}
    >
      <Icon aria-hidden className={cn("mt-0.5 h-5 w-5 shrink-0", iconCls)} />
      <p className="text-sm font-medium leading-snug">{message}</p>
    </div>
  ));
}

/** Wires the app-wide `notify()` seam to real toasts. Mount once near the app root. */
export function ToastBridge() {
  useEffect(() => {
    configureNotifier(showToast);
  }, []);

  return <Toaster position="top-right" gutter={8} toastOptions={{ duration: 4000 }} />;
}
