import React, { createContext, useContext, useState } from 'react';
import { createPortal } from 'react-dom';
import { CheckSquare, XCircle, CheckCircle, Eye } from 'lucide-react';

interface DialogOptions {
  type?: 'info' | 'confirm' | 'error' | 'success';
  title: string;
  message: string;
  onConfirm?: () => void;
  onCancel?: () => void;
}

interface DialogContextType {
  showAlert: (title: string, message: string, type?: 'info' | 'error' | 'success') => void;
  showConfirm: (title: string, message: string, onConfirm: () => void, onCancel?: () => void) => void;
}

const DialogContext = createContext<DialogContextType | undefined>(undefined);

export const useDialog = () => {
  const context = useContext(DialogContext);
  if (!context) {
    throw new Error('useDialog must be used within a DialogProvider');
  }
  return context;
};

export const DialogProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [isOpen, setIsOpen] = useState(false);
  const [options, setOptions] = useState<DialogOptions | null>(null);

  const showAlert = (title: string, message: string, type: 'info' | 'error' | 'success' = 'info') => {
    setOptions({
      title,
      message,
      type,
    });
    setIsOpen(true);
  };

  const showConfirm = (title: string, message: string, onConfirm: () => void, onCancel?: () => void) => {
    setOptions({
      title,
      message,
      type: 'confirm',
      onConfirm,
      onCancel,
    });
    setIsOpen(true);
  };

  const handleClose = () => {
    if (options?.onCancel) {
      options.onCancel();
    }
    setIsOpen(false);
  };

  const handleConfirm = () => {
    if (options?.onConfirm) {
      options.onConfirm();
    }
    setIsOpen(false);
  };

  return (
    <DialogContext.Provider value={{ showAlert, showConfirm }}>
      {children}
      {isOpen && options && createPortal(
        <div className="fixed inset-0 z-[100000] flex items-center justify-center p-6 bg-slate-900/60 backdrop-blur-sm animate-in fade-in duration-200">
          <div className="bg-white rounded-[2.5rem] w-full max-w-sm p-8 text-center shadow-2xl animate-in zoom-in-95 border border-slate-100 flex flex-col justify-between">
            <div>
              <div className={`w-16 h-16 rounded-full flex items-center justify-center text-2xl mx-auto mb-6 ${
                options.type === 'confirm' ? "bg-amber-50 text-amber-500" :
                options.type === 'error' ? "bg-rose-50 text-rose-500" :
                options.type === 'success' ? "bg-emerald-50 text-emerald-500" :
                "bg-blue-50 text-blue-500"
              }`}>
                {options.type === 'confirm' && <CheckSquare className="w-8 h-8" />}
                {options.type === 'error' && <XCircle className="w-8 h-8" />}
                {options.type === 'success' && <CheckCircle className="w-8 h-8" />}
                {(options.type === 'info' || !options.type) && <Eye className="w-8 h-8" />}
              </div>
              <h3 className="text-xl font-black text-slate-800 uppercase mb-2 tracking-tight">
                {options.title}
              </h3>
              <p className="text-slate-500 text-xs font-semibold leading-relaxed mb-8">
                {options.message}
              </p>
            </div>

            <div className="flex gap-4">
              {options.type === 'confirm' ? (
                <>
                  <button 
                    onClick={handleClose} 
                    className="flex-1 py-3 bg-slate-100 hover:bg-slate-200 text-slate-500 rounded-xl font-black uppercase text-[10px] tracking-widest transition-all"
                  >
                    No, Cancel
                  </button>
                  <button 
                    onClick={handleConfirm} 
                    className="flex-1 py-3 bg-[#1A202C] hover:bg-black text-white rounded-xl font-black uppercase text-[10px] tracking-widest transition-all shadow-md"
                  >
                    Yes, Proceed
                  </button>
                </>
              ) : (
                <button 
                  onClick={handleClose} 
                  className={`w-full py-3 text-white rounded-xl font-black uppercase text-[10px] tracking-widest transition-all shadow-md ${
                    options.type === 'error' ? "bg-rose-500 hover:bg-rose-600 shadow-rose-100" :
                    options.type === 'success' ? "bg-emerald-500 hover:bg-emerald-600 shadow-emerald-100" :
                    "bg-[#1A202C] hover:bg-black shadow-slate-100"
                  }`}
                >
                  Okay
                </button>
              )}
            </div>
          </div>
        </div>,
        document.body
      )}
    </DialogContext.Provider>
  );
};
