import React, { useState } from 'react';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '@/components/ui/alert-dialog';
import { Loader2 } from 'lucide-react';
import { cn } from '@/lib/utils';

export interface ConfirmDialogProps<T = any> {
  /** 对话框开关状态 */
  open: boolean;
  /** 对话框状态变化回调 */
  onOpenChange: (open: boolean) => void;
  /** 对话框标题 */
  title: string | React.ReactNode;
  /** 对话框描述文字（可选） */
  description?: string | React.ReactNode;
  /** 自定义内容区域（优先级高于 description） */
  children?: React.ReactNode;
  
  /** 传递给回调的数据项（可选） */
  item?: T;
  /** 确认操作的异步函数 */
  onConfirm: (item?: T) => Promise<void>;
  /** 成功后的回调（可选） */
  onSuccess?: (item?: T) => void;
  /** 失败后的回调（可选） */
  onError?: (error: any, item?: T) => void;
  /** 取消操作的回调（可选） */
  onCancel?: () => void;
  
  /** 确认前的验证函数（返回 false 阻止提交） */
  beforeConfirm?: (item?: T) => boolean | Promise<boolean>;
  
  /** 确认按钮文字 */
  confirmText?: string;
  /** 取消按钮文字 */
  cancelText?: string;
  /** 按钮样式变体 */
  variant?: 'default' | 'destructive' | 'success';
  
  /** 成功后是否自动关闭（默认 true） */
  autoCloseOnSuccess?: boolean;
  /** 失败后是否自动关闭（默认 true，配合 request.ts 拦截器） */
  autoCloseOnError?: boolean;
  /** loading 时是否禁用取消按钮（默认 true） */
  disableCancelWhenLoading?: boolean;
  
  /** 自定义最大宽度 */
  maxWidth?: 'sm' | 'md' | 'lg' | 'xl';
  /** 自定义类名 */
  className?: string;
}

/**
 * 确认对话框组件
 * 
 * 基于 shadcn/ui 的 AlertDialog 封装，提供异步操作的完整支持
 * 
 * @example
 * ```tsx
 * // 简单删除确认
 * <ConfirmDialog
 *   open={open}
 *   onOpenChange={setOpen}
 *   title="确认删除"
 *   description="此操作不可撤销"
 *   onConfirm={async () => await deleteAPI()}
 *   onSuccess={() => toast({ title: '删除成功' })}
 *   variant="destructive"
 * />
 * 
 * // 复杂内容 + 自定义
 * <ConfirmDialog
 *   open={open}
 *   onOpenChange={setOpen}
 *   title="确认删除"
 *   item={deletingItem}
 *   onConfirm={async (item) => await deleteTeam(item.id)}
 *   variant="destructive"
 * >
 *   <div className="space-y-3">
 *     <Alert variant="destructive">
 *       <AlertDescription>该团队还有成员</AlertDescription>
 *     </Alert>
 *   </div>
 * </ConfirmDialog>
 * ```
 */
export function ConfirmDialog<T = any>({
  open,
  onOpenChange,
  title,
  description,
  children,
  item,
  onConfirm,
  onSuccess,
  onError,
  onCancel,
  beforeConfirm,
  confirmText = '确定',
  cancelText = '取消',
  variant = 'default',
  autoCloseOnSuccess = true,
  autoCloseOnError = true,
  disableCancelWhenLoading = true,
  maxWidth = 'md',
  className,
}: ConfirmDialogProps<T>) {
  const [loading, setLoading] = useState(false);

  /**
   * 修复 Radix UI AlertDialog 关闭后 body.style.pointerEvents 残留的问题
   * 当对话框从打开变为关闭时，自动清理 body 样式
   */
  React.useEffect(() => {
    if (open === false) {
      // 延迟执行，确保在 AlertDialog 关闭动画之后
      const timer = setTimeout(() => {
        // 强制移除 body 的 pointer-events 限制
        if (document.body.style.pointerEvents === 'none') {
          document.body.style.pointerEvents = '';
        }
      }, 350); // 稍微比 AlertDialog 动画时间（200ms）长一点

      return () => clearTimeout(timer);
    }
  }, [open]);

  const handleConfirm = async () => {
    // 前置验证
    if (beforeConfirm) {
      try {
        const canProceed = await beforeConfirm(item);
        if (!canProceed) {
          return; // 验证失败，不继续执行
        }
      } catch (error) {
        console.error('前置验证失败:', error);
        return;
      }
    }

    setLoading(true);
    try {
      await onConfirm(item);
      
      // 成功后自动关闭
      if (autoCloseOnSuccess) {
        onOpenChange(false);
      }
      
      // 执行成功回调
      onSuccess?.(item);
    } catch (error) {
      // 失败后自动关闭（配合 request.ts 拦截器显示错误）
      if (autoCloseOnError) {
        onOpenChange(false);
      }
      
      // 执行失败回调
      onError?.(error, item);
    } finally {
      setLoading(false);
    }
  };

  const handleCancel = () => {
    onCancel?.();
    onOpenChange(false);
  };

  // 按钮样式映射
  const variantStyles = {
    default: '',
    destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
    success: 'bg-green-600 hover:bg-green-700 text-white',
  };

  // 最大宽度映射
  const maxWidthStyles = {
    sm: 'max-w-sm',
    md: 'max-w-md',
    lg: 'max-w-lg',
    xl: 'max-w-xl',
  };

  return (
    <AlertDialog open={open} onOpenChange={onOpenChange}>
      <AlertDialogContent className={cn(maxWidthStyles[maxWidth], className)}>
        <AlertDialogHeader>
          <AlertDialogTitle>{title}</AlertDialogTitle>
          {!children && description && (
            <AlertDialogDescription>{description}</AlertDialogDescription>
          )}
        </AlertDialogHeader>

        {/* 自定义内容区域 */}
        {children && <div className="py-4">{children}</div>}

        <AlertDialogFooter>
          <AlertDialogCancel
            disabled={disableCancelWhenLoading && loading}
            onClick={handleCancel}
          >
            {cancelText}
          </AlertDialogCancel>
          <AlertDialogAction
            onClick={handleConfirm}
            disabled={loading}
            className={cn(variantStyles[variant])}
          >
            {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
            {confirmText}
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}

