"use client";

import { createContext, useContext, useState, useCallback, type ReactNode } from "react";
import { Check, X, AlertTriangle } from "lucide-react";

interface Toast {
  id: number;
  message: string;
  type: "success" | "error";
}

const ToastContext = createContext<{
  toast: (message: string, type?: "success" | "error") => void;
}>({ toast: () => {} });

export function useToast() {
  return useContext(ToastContext);
}

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

  const toast = useCallback((message: string, type: "success" | "error" = "success") => {
    const id = ++nextId;
    setToasts((t) => [...t, { id, message, type }]);
    setTimeout(() => setToasts((t) => t.filter((x) => x.id !== id)), 2500);
  }, []);

  return (
    <ToastContext.Provider value={{ toast }}>
      {children}
      <div className="fixed top-4 left-4 right-4 z-[100] flex flex-col items-center gap-2 pointer-events-none max-w-lg mx-auto">
        {toasts.map((t) => (
          <div
            key={t.id}
            className="card px-4 py-2.5 flex items-center gap-2 pointer-events-auto animate-slide-in"
            style={{
              background: t.type === "error" ? "rgba(255,59,48,0.15)" : "rgba(52,199,89,0.15)",
              border: `1px solid ${t.type === "error" ? "rgba(255,59,48,0.3)" : "rgba(52,199,89,0.3)"}`,
            }}
          >
            {t.type === "error" ? (
              <AlertTriangle size={14} style={{ color: "#ff3b30" }} />
            ) : (
              <Check size={14} style={{ color: "#34c759" }} />
            )}
            <span className="text-[13px]" style={{ color: t.type === "error" ? "#ff3b30" : "#34c759" }}>
              {t.message}
            </span>
          </div>
        ))}
      </div>
    </ToastContext.Provider>
  );
}