xiaoxia-saas/apps/web/src/pages/assets/components/BatchMarkModal.tsx

import React from "react"
import { Modal as AntModal, Tag, Radio } from "antd"

/* ============================================================
 * BatchMarkModal — 批量智能标记弹窗
 * ============================================================ */
export type SmartViewType = "recommended" | "caution" | "high_risk"

export interface BatchMarkModalProps {
  open: boolean
  selectedCount: number
  onCancel: () => void
  onOk: () => void
  smartView: SmartViewType
  onSmartViewChange: (value: SmartViewType) => void
  confirmLoading?: boolean
}

const BatchMarkModal: React.FC<BatchMarkModalProps> = ({
  open,
  selectedCount,
  onCancel,
  onOk,
  smartView,
  onSmartViewChange,
  confirmLoading,
}) => (
  <AntModal
    title={`批量智能标记（${selectedCount} 个素材）`}
    open={open}
    onCancel={onCancel}
    onOk={onOk}
    confirmLoading={confirmLoading}
    okText="确认标记"
    cancelText="取消"
  >
    <div className="xx-batch-mark-modal">
      <p className="xx-batch-mark-hint">将选中的 {selectedCount} 个素材标记为：</p>
      <Radio.Group
        value={smartView}
        onChange={(e) => onSmartViewChange(e.target.value)}
        className="xx-batch-mark-options"
      >
        <div className="xx-batch-mark-option">
          <Radio value="recommended">
            <Tag color="success">推荐</Tag>
            <span className="xx-batch-mark-desc">质量优良，可直接用于生产</span>
          </Radio>
        </div>
        <div className="xx-batch-mark-option">
          <Radio value="caution">
            <Tag color="warning">慎用</Tag>
            <span className="xx-batch-mark-desc">存在一定问题，需人工审核后再使用</span>
          </Radio>
        </div>
        <div className="xx-batch-mark-option">
          <Radio value="high_risk">
            <Tag color="error">高风险</Tag>
            <span className="xx-batch-mark-desc">存在严重问题，不建议使用</span>
          </Radio>
        </div>
      </Radio.Group>
    </div>
  </AntModal>
)

export default BatchMarkModal