/**
 * ConfirmDialog 组件
 * 
 * 确认对话框组件
 * 基于 Modal 组件构建，用于需要用户确认的操作
 * 支持多种变体（default、danger）和加载状态
 * 
 * @created 2025-11-22
 * @component
 */

'use client'

import { ReactNode } from 'react'
import Modal from './Modal'
import { useThemeStyles, cn } from '@/lib/ui-styles'

interface ConfirmDialogProps {
  isOpen: boolean
  onClose: () => void
  onConfirm: () => void
  title: string
  message: string | ReactNode
  confirmText?: string
  cancelText?: string
  variant?: 'default' | 'danger'
  loading?: boolean
}

export default function ConfirmDialog({
  isOpen,
  onClose,
  onConfirm,
  title,
  message,
  confirmText = '确认',
  cancelText = '取消',
  variant = 'default',
  loading = false,
}: ConfirmDialogProps) {
  const styles = useThemeStyles()

  const handleConfirm = () => {
    if (!loading) {
      onConfirm()
    }
  }

  return (
    <Modal
      isOpen={isOpen}
      onClose={onClose}
      title={title}
      size="xs"
      closeOnOverlayClick={!loading}
      closeOnEscape={!loading}
      footer={
        <>
          <button
            type="button"
            onClick={onClose}
            disabled={loading}
            className={cn(
              styles.buttonStyles.secondary,
              styles.buttonModifiers.compact,
              'bg-white dark:bg-slate-800 border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-200' // 显式添加背景色和文字色
            )}
          >
            {cancelText}
          </button>
          <button
            type="button"
            onClick={handleConfirm}
            disabled={loading}
            className={cn(
              variant === 'danger' ? styles.buttonStyles.danger : styles.buttonStyles.primary,
              styles.buttonModifiers.compact,
              variant === 'danger'
                ? 'bg-red-600 hover:bg-red-700 text-white' // danger 按钮
                : 'bg-indigo-600 hover:bg-indigo-700 text-white', // primary 按钮
            )}
          >
            {loading ? '处理中...' : confirmText}
          </button>
        </>
      }
    >
      <div className="py-2 text-sm leading-relaxed text-slate-700 dark:text-slate-200">
        {typeof message === 'string' ? (
          <p>{message}</p>
        ) : (
          message
        )}
      </div>
    </Modal>
  )
}