/**
 * Phase 2: 全文阅读模式头部组件
 */

import { FullTextModeState } from '../../types/chat'
import { CapacityIndicator } from './CapacityIndicator'
import './FullTextModeHeader.css'

interface FullTextModeHeaderProps {
  state: FullTextModeState
  kbName: string
}

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

  return (
    <div className="fulltext-header">
      <div className="fulltext-info">
        <h2 className="fulltext-title">
          🌍 全文阅读模式
          <span className="kb-name">- {kbName}</span>
        </h2>
        <p className="fulltext-desc">
          已加载 <strong>{state.selectedFiles}</strong> 篇文献，可进行跨文献综合分析
        </p>
        <p className="fulltext-reason">{getReasonText(state.reason)}</p>
      </div>

      <CapacityIndicator
        selectedFiles={state.selectedFiles}
        totalFiles={state.totalFiles}
        usedTokens={state.usedTokens}
        maxTokens={state.totalTokens}
      />

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






