import React, { createContext, useContext, useState, ReactNode } from "react";

type Toast = {
  id: string;
  message: string;
  type: "success" | "error" | "info" | "warning";
  position?: ToastPosition; // Optional position for each toast
};

type ToastPosition =
  | "top-left"
  | "top-center"
  | "top-right"
  | "bottom-left"
  | "bottom-center"
  | "bottom-right";

type ToastContextType = {
  addToast: (
    message: string,
    type: Toast["type"],
    position?: ToastPosition
  ) => void;
  removeToast: (id: string) => void;
};

const ToastContext = createContext<ToastContextType | undefined>(undefined);

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

  const addToast = (
    message: string,
    type: Toast["type"],
    position: ToastPosition = "bottom-center" // Default position
  ) => {
    const id = Math.random().toString(36).substr(2, 9); // Generate a unique ID
    setToasts((prev) => [...prev, { id, message, type, position }]);

    // Auto-remove toast after 3 seconds
    setTimeout(() => removeToast(id), 3000);
  };

  const removeToast = (id: string) => {
    setToasts((prev) => prev.filter((toast) => toast.id !== id));
  };

  return (
    <ToastContext.Provider value={{ addToast, removeToast }}>
      {children}
      <div className={`toast-container ${"bottom-center"}`}>
        {toasts.map((toast) => (
          <div
            key={toast.id}
            className={`toast ${toast.type}`}
            onClick={() => removeToast(toast.id)} // Allow manual dismissal
          >
            {toast.message}
          </div>
        ))}
      </div>
    </ToastContext.Provider>
  );
};

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

export default ToastProvider;