'use client';

import { createContext, useContext, useState, ReactNode, useCallback } from 'react';
import { Toast, ToastContainer } from 'react-bootstrap';

interface ToastData {
  id: number;
  message: string;
  variant: string;
}

interface ToastContextType {
  showToast: (message: string, variant?: string) => void;
}

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

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

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

  const showToast = useCallback((message: string, variant: string = 'dark') => {
    const id = Date.now();
    setToasts((prev) => [...prev, { id, message, variant }]);
  }, []);

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

  return (
    <ToastContext.Provider value={{ showToast }}>
      {children}
      <ToastContainer position="bottom-end" className="position-fixed p-3" style={{ zIndex: 9999 }}>
        {toasts.map((toast) => (
          <Toast
            key={toast.id}
            show
            delay={6000}
            autohide
            bg={toast.variant}
            onClose={() => removeToast(toast.id)}
          >
            <Toast.Header closeButton>
              <b className="me-auto text-dark">Message</b>
            </Toast.Header>
            <Toast.Body
              className={
                toast.variant === 'dark' ||
                toast.variant === 'secondary' ||
                toast.variant === 'danger' ||
                toast.variant === 'primary'
                  ? 'text-white'
                  : 'text-dark'
              }
            >
              {toast.message}
            </Toast.Body>
          </Toast>
        ))}
      </ToastContainer>
    </ToastContext.Provider>
  );
};