import React from 'react';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";

interface ConfirmDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  title?: string;
  description?: string;
  confirmText?: string;
  cancelText?: string;
  onConfirm: () => void;
  variant?: 'default' | 'destructive';
}

/**
 * ConfirmDialog - 确认对话框组件
 * 
 * 用于需要用户确认的操作，替代原生 window.confirm()
 * 
 * @example
 * ```tsx
 * const [open, setOpen] = useState(false);
 * 
 * <ConfirmDialog
 *   open={open}
 *   onOpenChange={setOpen}
 *   title="确认删除？"
 *   description="此操作无法撤销"
 *   onConfirm={handleDelete}
 *   variant="destructive"
 * />
 * ```
 */
export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
  open,
  onOpenChange,
  title = '确认操作',
  description = '此操作无法撤销，确定要继续吗？',
  confirmText = '确认',
  cancelText = '取消',
  onConfirm,
  variant = 'default'
}) => {
  const handleConfirm = () => {
    onConfirm();
    onOpenChange(false);
  };

  return (
    <AlertDialog open={open} onOpenChange={onOpenChange}>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>{title}</AlertDialogTitle>
          <AlertDialogDescription>{description}</AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>{cancelText}</AlertDialogCancel>
          <AlertDialogAction 
            onClick={handleConfirm}
            className={variant === 'destructive' ? 'bg-red-500 hover:bg-red-600' : ''}
          >
            {confirmText}
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
};

/**
 * useConfirm - 确认对话框 Hook
 * 
 * 提供更简洁的 API 来使用确认对话框
 * 
 * @example
 * ```tsx
 * const { confirm, ConfirmDialog } = useConfirm();
 * 
 * const handleDelete = () => {
 *   confirm({
 *     title: '确认删除？',
 *     description: '此操作无法撤销',
 *     onConfirm: async () => {
 *       await deleteItem();
 *     }
 *   });
 * };
 * 
 * return (
 *   <>
 *     <Button onClick={handleDelete}>删除</Button>
 *     <ConfirmDialog />
 *   </>
 * );
 * ```
 */
export const useConfirm = () => {
  const [state, setState] = React.useState<{
    open: boolean;
    title?: string;
    description?: string;
    confirmText?: string;
    cancelText?: string;
    variant?: 'default' | 'destructive';
    onConfirm?: () => void;
  }>({ open: false });

  const confirm = (options: {
    title?: string;
    description?: string;
    confirmText?: string;
    cancelText?: string;
    variant?: 'default' | 'destructive';
    onConfirm: () => void;
  }) => {
    setState({ open: true, ...options });
  };

  const ConfirmDialogComponent = React.useCallback(() => (
    <ConfirmDialog
      open={state.open}
      onOpenChange={(open) => setState((prev) => ({ ...prev, open }))}
      title={state.title}
      description={state.description}
      confirmText={state.confirmText}
      cancelText={state.cancelText}
      variant={state.variant}
      onConfirm={() => {
        state.onConfirm?.();
      }}
    />
  ), [state]);

  return { confirm, ConfirmDialog: ConfirmDialogComponent };
};
