import { memo } from 'react'
import { useTranslation } from 'react-i18next'
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '@/components/ui/alert-dialog'

interface ConfirmDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  /** 危险操作对象名进文案（如集群名），防误删 */
  name?: string
  title?: string
  description?: string
  confirmText?: string
  /** 确认中（提交 loading 态防双击） */
  loading?: boolean
  onConfirm: () => void
}

/**
 * 危险操作确认弹窗 — 替代原生 window.confirm()（阻塞主线程且样式与组件体系脱节）。
 * 默认为删除语义（红色确认钮）；文案必须带操作对象名。
 */
export const ConfirmDialog = memo(function ConfirmDialog({
  open,
  onOpenChange,
  name,
  title,
  description,
  confirmText,
  loading = false,
  onConfirm,
}: ConfirmDialogProps) {
  const { t } = useTranslation()
  const desc =
    description ??
    (name
      ? t('dialog.confirmDefault', { name })
      : t('dialog.confirmIrreversible'))
  const resolvedTitle = title ?? t('dialog.confirmTitle')
  const resolvedConfirmText = confirmText ?? t('dialog.confirmText')
  return (
    <AlertDialog open={open} onOpenChange={onOpenChange}>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>{resolvedTitle}</AlertDialogTitle>
          <AlertDialogDescription>{desc}</AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel disabled={loading}>{t('dialog.cancel')}</AlertDialogCancel>
          <AlertDialogAction
            disabled={loading}
            onClick={(e) => {
              // 阻止默认关闭，等异步完成由调用方控制
              e.preventDefault()
              onConfirm()
            }}
            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
          >
            {loading ? t('dialog.processing') : resolvedConfirmText}
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
})

export default ConfirmDialog