import React, { createContext, useContext, useState, useCallback } from 'react';

const ToastContext = createContext();

export const useToast = () => {
  const context = useContext(ToastContext);
  if (!context) {
    throw new Error('useToast deve ser usado dentro de um ToastProvider');
  }
  return context;
};

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

  const addToast = useCallback((message, type = 'info', duration = 5000) => {
    const id = Date.now();
    const toast = { id, message, type, duration };
    
    setToasts((prev) => [...prev, toast]);

    if (duration > 0) {
      setTimeout(() => {
        removeToast(id);
      }, duration);
    }

    return id;
  }, []);

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

  const success = useCallback((message, duration) => {
    return addToast(message, 'success', duration);
  }, [addToast]);

  const error = useCallback((message, duration) => {
    return addToast(message, 'danger', duration);
  }, [addToast]);

  const warning = useCallback((message, duration) => {
    return addToast(message, 'warning', duration);
  }, [addToast]);

  const info = useCallback((message, duration) => {
    return addToast(message, 'info', duration);
  }, [addToast]);

  return (
    <ToastContext.Provider value={{ addToast, removeToast, success, error, warning, info }}>
      {children}
      <ToastContainer toasts={toasts} removeToast={removeToast} />
    </ToastContext.Provider>
  );
};

const ToastContainer = ({ toasts, removeToast }) => {
  const getIcon = (type) => {
    switch (type) {
      case 'success': return 'bi-check-circle-fill';
      case 'danger': return 'bi-x-circle-fill';
      case 'warning': return 'bi-exclamation-triangle-fill';
      case 'info': return 'bi-info-circle-fill';
      default: return 'bi-info-circle-fill';
    }
  };

  const getBgColor = (type) => {
    switch (type) {
      case 'success': return '#10b981';
      case 'danger': return '#ef4444';
      case 'warning': return '#f59e0b';
      case 'info': return '#3b82f6';
      default: return '#3b82f6';
    }
  };

  return (
    <div 
      className="toast-container position-fixed top-0 end-0 p-3"
      style={{ zIndex: 9999 }}
    >
      {toasts.map((toast) => (
        <div
          key={toast.id}
          className="toast show mb-2"
          role="alert"
          aria-live="assertive"
          aria-atomic="true"
          style={{ 
            background: '#1e293b',
            borderLeft: `4px solid ${getBgColor(toast.type)}`,
            minWidth: '300px',
          }}
        >
          <div className="toast-header" style={{ background: '#1e293b', borderBottom: '1px solid #334155' }}>
            <i className={`bi ${getIcon(toast.type)} me-2`} style={{ color: getBgColor(toast.type) }}></i>
            <strong className="me-auto text-white">
              {toast.type === 'success' && 'Sucesso'}
              {toast.type === 'danger' && 'Erro'}
              {toast.type === 'warning' && 'Atenção'}
              {toast.type === 'info' && 'Informação'}
            </strong>
            <button 
              type="button" 
              className="btn-close btn-close-white" 
              onClick={() => removeToast(toast.id)}
              aria-label="Fechar"
            ></button>
          </div>
          <div className="toast-body text-white">
            {toast.message}
          </div>
        </div>
      ))}
    </div>
  );
};

export default ToastProvider;
