"use client";

import {
  createContext,
  useContext,
  useState,
  useCallback,
  type ReactNode,
} from "react";
import * as ToastPrimitive from "@radix-ui/react-toast";
import { X } from "lucide-react";
import { cn } from "@/lib/utils/cn";

type ToastVariant = "default" | "success" | "error";

interface Toast {
  id: string;
  title: string;
  description?: string;
  variant?: ToastVariant;
}

interface ToastContextValue {
  toast: (t: Omit<Toast, "id">) => void;
}

const ToastContext = createContext<ToastContextValue | null>(null);

export const CORNER_STACK_SLOT_ID = "pandaprobe-corner-stack-slot";

let toastId = 0;

const variantStyles: Record<ToastVariant, string> = {
  default: "border-border bg-surface",
  success: "border-success/30 bg-success/5",
  error: "border-error/30 bg-error/5",
};

export function ToastProvider({ children }: { children: ReactNode }) {
  const [toasts, setToasts] = useState<Toast[]>([]);

  const addToast = useCallback((t: Omit<Toast, "id">) => {
    const id = String(++toastId);
    setToasts((prev) => [...prev, { ...t, id }]);
  }, []);

  const removeToast = useCallback((id: string) => {
    setToasts((prev) => prev.filter((t) => t.id !== id));
  }, []);

  return (
    <ToastContext.Provider value={{ toast: addToast }}>
      <ToastPrimitive.Provider swipeDirection="right" duration={4000}>
        {children}
        {toasts.map((t) => (
          <ToastPrimitive.Root
            key={t.id}
            className={cn(
              "border p-4 shadow-lg animate-slide-up",
              variantStyles[t.variant ?? "default"],
            )}
            onOpenChange={(open) => {
              if (!open) removeToast(t.id);
            }}
          >
            <div className="flex items-start gap-3">
              <div className="flex-1 min-w-0">
                <ToastPrimitive.Title className="text-sm font-mono text-text">
                  {t.title}
                </ToastPrimitive.Title>
                {t.description && (
                  <ToastPrimitive.Description className="mt-1 text-xs text-text-dim">
                    {t.description}
                  </ToastPrimitive.Description>
                )}
              </div>
              <ToastPrimitive.Close className="text-text-muted hover:text-text transition-colors">
                <X className="h-4 w-4" />
              </ToastPrimitive.Close>
            </div>
          </ToastPrimitive.Root>
        ))}
        <div
          className={cn(
            "fixed bottom-4 right-4 z-[100]",
            "flex max-w-sm flex-col items-end",
            "pointer-events-none",
          )}
        >
          <ToastPrimitive.Viewport className="flex w-full flex-col gap-2 pointer-events-auto outline-none" />
          <div
            id={CORNER_STACK_SLOT_ID}
            className="pointer-events-auto mt-2 empty:mt-0"
          />
        </div>
      </ToastPrimitive.Provider>
    </ToastContext.Provider>
  );
}

export function useToast(): ToastContextValue {
  const context = useContext(ToastContext);
  if (!context) {
    throw new Error("useToast must be used within a ToastProvider");
  }
  return context;
}
