/**
 * AlertDialog 组件
 * 
 * 提示对话框组件
 * 基于 Modal 组件构建，用于显示提示信息
 * 支持多种变体（default、success、warning、error）
 * 
 * @created 2025-11-22
 * @component
 */

'use client'

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

interface AlertDialogProps {
  isOpen: boolean
  onClose: () => void
  title: string
  message: string | ReactNode
  buttonText?: string
  variant?: 'default' | 'success' | 'warning' | 'error'
}

export default function AlertDialog({
  isOpen,
  onClose,
  title,
  message,
  buttonText = '确定',
  variant = 'default',
}: AlertDialogProps) {
  const styles = useThemeStyles()

  const getButtonStyle = () => {
    switch (variant) {
      case 'success':
        return { base: styles.buttonStyles.success, colors: 'bg-emerald-600 hover:bg-emerald-700 text-white' }
      case 'warning':
        return { base: styles.buttonStyles.secondary, colors: 'bg-white dark:bg-slate-800 border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-200' }
      case 'error':
        return { base: styles.buttonStyles.danger, colors: 'bg-red-600 hover:bg-red-700 text-white' }
      default:
        return { base: styles.buttonStyles.primary, colors: 'bg-indigo-600 hover:bg-indigo-700 text-white' }
    }
  }

  return (
    <Modal
      isOpen={isOpen}
      onClose={onClose}
      title={title}
      size="xs"
      footer={
        <button
          type="button"
          onClick={onClose}
          className={cn(
            getButtonStyle().base,
            styles.buttonModifiers.compact,
            getButtonStyle().colors // 显式添加背景色和文字色
          )}
        >
          {buttonText}
        </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>
  )
}