/**
 * 统一的 Modal 组件
 * 支持多种尺寸和样式
 */
import React, { useEffect } from "react";
import { X } from "lucide-react";
import type { LucideIcon } from "lucide-react";

export type ModalSize = "sm" | "md" | "lg" | "xl";

export interface ModalProps {
  open: boolean;
  onClose: () => void;
  title?: string;
  icon?: LucideIcon;
  iconColor?: string;
  children?: React.ReactNode;
  footer?: React.ReactNode;
  size?: ModalSize;
  closeOnOverlayClick?: boolean;
}

const sizeCls: Record<ModalSize, string> = {
  sm: "max-w-md",
  md: "max-w-lg",
  lg: "max-w-2xl",
  xl: "max-w-4xl",
};

const Modal: React.FC<ModalProps> = ({ 
  open, 
  onClose, 
  title, 
  icon: Icon,
  iconColor = "text-blue-600",
  children, 
  footer, 
  size = "md",
  closeOnOverlayClick = true,
}) => {
  // Disable body scroll when modal is open
  useEffect(() => {
    if (open) {
      // Prevent body scroll using overflow + padding to prevent layout shift
      const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
      document.body.style.overflow = 'hidden';
      document.body.style.paddingRight = `${scrollbarWidth}px`; // Prevent layout shift when scrollbar disappears
      
      return () => {
        // Restore body scroll
        document.body.style.overflow = '';
        document.body.style.paddingRight = '';
      };
    }
  }, [open]);

  if (!open) return null;

  const handleOverlayClick = () => {
    if (closeOnOverlayClick) {
      onClose();
    }
  };

  return (
    <div className="fixed inset-0 z-[90] flex items-start sm:items-center justify-center overflow-y-auto p-4 sm:p-6">
      {/* Overlay */}
      <div 
        className="fixed inset-0 bg-black/50 backdrop-blur-sm" 
        onClick={handleOverlayClick}
        aria-hidden="true"
      />
      
      {/* Modal Content */}
      <div 
        className={`relative w-full ${sizeCls[size]} my-8 bg-white text-slate-900 border border-slate-200 rounded-lg shadow-2xl`}
        role="dialog"
        aria-modal="true"
      >
        {/* Header */}
        <div className="px-5 sm:px-6 py-4 flex items-center justify-between border-b border-slate-200 sticky top-0 bg-white rounded-t-lg z-10">
          <div className="flex items-center gap-3">
            {Icon && (
              <div className={`p-2 rounded-md ${iconColor.includes('red') ? 'bg-red-50' : iconColor.includes('green') ? 'bg-emerald-50' : 'bg-blue-50'}`}>
                <Icon className={`w-5 h-5 ${iconColor}`} />
              </div>
            )}
            {title && (
              <h2 className="font-semibold text-base sm:text-lg">{title}</h2>
            )}
          </div>
          <button 
            onClick={onClose} 
            className="p-2 hover:bg-slate-100 rounded-md transition-colors"
            aria-label="Close modal"
          >
            <X className="w-5 h-5 text-slate-500" />
          </button>
        </div>
        
        {/* Content */}
        <div className="px-5 sm:px-6 py-4 max-h-[calc(100vh-12rem)] sm:max-h-[calc(100vh-10rem)] overflow-y-auto">
          {children}
        </div>
        
        {/* Footer */}
        {footer && (
          <div className="px-5 sm:px-6 py-4 border-t border-slate-200 bg-slate-50 sticky bottom-0 rounded-b-lg flex items-center justify-end gap-3">
            {footer}
          </div>
        )}
      </div>
    </div>
  );
};

export default Modal;
