/**
 * Phase 2: 用量说明模态框
 */

import { Modal } from 'antd'
import { FullTextModeState } from '../../types/chat'
import { CapacityIndicator } from './CapacityIndicator'
import './UsageInfoModal.css'

interface UsageInfoModalProps {
  visible: boolean
  onClose: () => void
  state: FullTextModeState
  kbName: string
}

export function UsageInfoModal({ visible, onClose, state, kbName }: UsageInfoModalProps) {
  const getReasonText = (reason: string) => {
    switch (reason) {
      case 'all_included':
        return '✅ 所有文献已加载'
      case 'file_limit':
        return '⚠️ 已达到文件数限制（50篇）'
      case 'token_limit':
        return '⚠️ 已达到Token限制（980K）'
      default:
        return ''
    }
  }

  return (
    <Modal
      title={`🌍 全文阅读模式 - ${kbName}`}
      open={visible}
      onCancel={onClose}
      footer={null}
      width={700}
      className="usage-info-modal"
    >
      <div className="usage-modal-content">
        {/* 基本信息 */}
        <div className="usage-info">
          <p className="usage-desc">
            已加载 <strong>{state.selectedFiles}</strong> 篇文献，可进行跨文献综合分析
          </p>
          <p className="usage-reason">{getReasonText(state.reason)}</p>
        </div>

        {/* 容量指示器 */}
        <div className="usage-capacity">
          <CapacityIndicator
            selectedFiles={state.selectedFiles}
            totalFiles={state.totalFiles}
            usedTokens={state.usedTokens}
            maxTokens={state.totalTokens}
          />
        </div>

        {/* 已加载文档列表 */}
        <div className="usage-docs">
          <h3 className="usage-docs-title">已加载文献列表</h3>
          <div className="usage-doc-list">
            {state.loadedDocs.map((doc, index) => (
              <div key={doc.id} className="usage-doc-item">
                <span className="doc-index">{index + 1}</span>
                <span className="doc-icon">📄</span>
                <span className="doc-name" title={doc.filename}>{doc.filename}</span>
                {doc.tokensCount && (
                  <span className="doc-tokens">
                    {Math.round(doc.tokensCount / 1000)}K tokens
                  </span>
                )}
              </div>
            ))}
          </div>
        </div>

        {/* 使用说明 */}
        <div className="usage-tips">
          <h4 className="tips-title">💡 使用提示</h4>
          <ul className="tips-list">
            <li>全文阅读模式适合进行文献综述、趋势分析</li>
            <li>可以提问跨文献的综合性问题</li>
            <li>AI会基于所有已加载文献进行回答</li>
            <li>如需深度分析单篇文献，建议切换到"逐篇精读"模式</li>
          </ul>
        </div>
      </div>
    </Modal>
  )
}









