/**
 * 确认弹窗组件 - 统一样式
 * ========================
 * 
 * 使用场景：删除确认、退出确认、危险操作确认
 * 
 * 示例：
 * <ConfirmModal
 *   open={showDeleteModal}
 *   type="danger"
 *   icon={<WarningIcon />}
 *   title={<>确认删除形象 <strong>「{name}」</strong> 吗？</>}
 *   description="此操作不可撤销，本地文件将同时被清除"
 *   confirmText="确认删除"
 *   onConfirm={handleConfirm}
 *   onCancel={handleCancel}
 * />
 */

import './ConfirmModal.css';

interface ConfirmModalProps {
  open: boolean;
  onClose?: () => void;
  onConfirm: () => void;
  onCancel: () => void;
  type?: 'warning' | 'danger' | 'info';
  icon?: React.ReactNode;
  title: React.ReactNode;
  description?: string;
  confirmText?: string;
  cancelText?: string;
  confirmButtonType?: 'primary' | 'danger';
  hideCancel?: boolean;
}

// 默认图标 - 警告
const WarningIcon = () => (
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
    <line x1="12" y1="9" x2="12" y2="13" />
    <line x1="12" y1="17" x2="12.01" y2="17" />
  </svg>
);

// 默认图标 - 信息
const InfoIcon = () => (
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <circle cx="12" cy="12" r="10" />
    <line x1="12" y1="16" x2="12" y2="12" />
    <line x1="12" y1="8" x2="12.01" y2="8" />
  </svg>
);

export default function ConfirmModal({
  open,
  onClose,
  onConfirm,
  onCancel,
  type = 'warning',
  icon,
  title,
  description,
  confirmText = '确认',
  cancelText = '取消',
  confirmButtonType = 'primary',
  hideCancel = false,
}: ConfirmModalProps) {
  if (!open) {return null;}

  // 根据类型选择默认图标
  const getDefaultIcon = () => {
    switch (type) {
      case 'danger':
      case 'warning':
        return <WarningIcon />;
      case 'info':
      default:
        return <InfoIcon />;
    }
  };

  // 图标颜色（统一使用灰色调）
  const getIconColor = () => {
    switch (type) {
      case 'danger':
      case 'warning':
      case 'info':
      default:
        return 'var(--text-tertiary)'; // 灰色
    }
  };

  const handleClose = () => {
    onCancel();
    onClose?.();
  };

  const handleConfirm = () => {
    onConfirm();
    onClose?.();
  };

  return (
    <div className="confirm-modal-overlay" onClick={handleClose}>
      <div className="confirm-modal-container" onClick={e => e.stopPropagation()}>
        {/* 关闭按钮 */}
        <button className="confirm-modal-close" onClick={handleClose}>
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <line x1="18" y1="6" x2="6" y2="18" />
            <line x1="6" y1="6" x2="18" y2="18" />
          </svg>
        </button>

        {/* 图标 */}
        <div className="confirm-modal-icon" style={{ color: getIconColor() }}>
          {icon || getDefaultIcon()}
        </div>

        {/* 标题 */}
        <div className="confirm-modal-title">{title}</div>

        {/* 描述 */}
        {description && (
          <div className="confirm-modal-description">{description}</div>
        )}

        {/* 按钮组 */}
        <div className="confirm-modal-actions">
          {!hideCancel && (
            <button className="confirm-modal-btn cancel" onClick={handleClose}>
              {cancelText}
            </button>
          )}
          <button
            className={`confirm-modal-btn ${confirmButtonType}`}
            onClick={handleConfirm}
          >
            {confirmText}
          </button>
        </div>
      </div>
    </div>
  );
}
