import { useEffect } from 'react'
import { createPortal } from 'react-dom'
import { X, AlertTriangle } from 'lucide-react'
import { useLanguage } from '../i18n/LanguageContext'

export default function Modal({ 
  isOpen, 
  onClose, 
  title, 
  children, 
  size = 'md',
  // Confirmation mode props
  isConfirm = false,
  confirmText,
  cancelText,
  onConfirm,
  danger = false,
}) {
  const { t } = useLanguage()
  
  // Default translations
  const finalConfirmText = confirmText || (danger ? t('common.delete') : t('common.save'))
  const finalCancelText = cancelText || t('common.cancel')
  useEffect(() => {
    if (isOpen) {
      document.body.style.overflow = 'hidden'
    } else {
      document.body.style.overflow = ''
    }
    return () => { document.body.style.overflow = '' }
  }, [isOpen])

  if (!isOpen) return null

  const sizeClasses = {
    sm: 'max-w-md',
    md: 'max-w-lg',
    lg: 'max-w-2xl',
    xl: 'max-w-4xl',
  }

  // Confirmation dialog
  if (isConfirm) {
    return createPortal(
      <div className="fixed inset-0 z-[9999] flex items-center justify-center px-4">
        {/* Backdrop */}
        <div
          className="fixed inset-0 bg-black/40 backdrop-blur-sm animate-backdrop-in"
          onClick={onClose}
        />
        
        {/* Modal content */}
        <div className="relative bg-white rounded-2xl shadow-2xl w-full max-w-md animate-scale-in">
          <div className="p-6">
            {danger && (
              <div className="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center mx-auto mb-4">
                <AlertTriangle className="w-6 h-6 text-red-600" />
              </div>
            )}
            <h3 className="text-lg font-semibold text-text-primary text-center mb-2">{title}</h3>
            <div className="text-sm text-text-secondary text-center mb-6">
              {children}
            </div>
            <div className="flex items-center gap-3">
              <button
                onClick={onClose}
                className="flex-1 px-4 py-2.5 text-sm font-medium text-text-secondary hover:bg-surface-tertiary rounded-lg transition-colors"
              >
                {finalCancelText}
              </button>
              <button
                onClick={() => {
                  onConfirm?.();
                  onClose();
                }}
                className={`flex-1 px-4 py-2.5 text-sm font-medium text-white rounded-lg shadow-sm transition-colors ${
                  danger 
                    ? 'bg-red-600 hover:bg-red-700' 
                    : 'bg-brand-primary hover:bg-brand-primary-light'
                }`}
              >
                {finalConfirmText}
              </button>
            </div>
          </div>
        </div>
      </div>,
      document.body
    )
  }

  // Regular modal
  return createPortal(
    <div className="fixed inset-0 z-[9999] flex items-start justify-center pt-[10vh] px-4">
      {/* Backdrop */}
      <div
        className="fixed inset-0 bg-black/40 backdrop-blur-sm animate-backdrop-in"
        onClick={onClose}
      />
      
      {/* Modal content */}
      <div className={`relative bg-white rounded-2xl shadow-2xl w-full ${sizeClasses[size]} max-h-[80vh] flex flex-col animate-scale-in`}>
        {/* Header */}
        <div className="flex items-center justify-between px-6 py-4 border-b border-border shrink-0">
          <h3 className="text-lg font-semibold text-text-primary">{title}</h3>
          <button
            onClick={onClose}
            className="p-1.5 rounded-lg hover:bg-surface-tertiary text-text-tertiary hover:text-text-primary transition-colors"
          >
            <X className="w-5 h-5" />
          </button>
        </div>
        
        {/* Body */}
        <div className="px-6 py-4 overflow-y-auto flex-1">
          {children}
        </div>
      </div>
    </div>,
    document.body
  )
}