/**
 * Phase 2: 容量指示器组件
 * 显示文件数和Token使用情况
 */

import './CapacityIndicator.css'

interface CapacityIndicatorProps {
  selectedFiles: number
  totalFiles: number
  usedTokens: number
  maxTokens: number
}

export function CapacityIndicator({
  selectedFiles,
  totalFiles,
  usedTokens,
  maxTokens,
}: CapacityIndicatorProps) {
  const filePercentage = Math.round((selectedFiles / totalFiles) * 100)
  const tokenPercentage = Math.round((usedTokens / maxTokens) * 100)

  const getStatusColor = (percentage: number) => {
    if (percentage > 90) return '#ff4d4f' // 红色
    if (percentage > 75) return '#faad14' // 橙色
    return '#52c41a' // 绿色
  }

  return (
    <div className="capacity-indicator">
      <h3 className="capacity-title">📊 容量使用情况</h3>
      
      {/* 文件数 */}
      <div className="capacity-item">
        <div className="capacity-label">
          <span>文件数</span>
          <span className="capacity-value">
            {selectedFiles} / {totalFiles} 篇
          </span>
        </div>
        <div className="capacity-bar-container">
          <div
            className="capacity-bar"
            style={{
              width: `${filePercentage}%`,
              background: getStatusColor(filePercentage),
            }}
          />
        </div>
        <div className="capacity-percentage">{filePercentage}%</div>
      </div>

      {/* Token数 */}
      <div className="capacity-item">
        <div className="capacity-label">
          <span>Token容量</span>
          <span className="capacity-value">
            {Math.round(usedTokens / 1000)}K / {Math.round(maxTokens / 1000)}K
          </span>
        </div>
        <div className="capacity-bar-container">
          <div
            className="capacity-bar"
            style={{
              width: `${tokenPercentage}%`,
              background: getStatusColor(tokenPercentage),
            }}
          />
        </div>
        <div className="capacity-percentage">{tokenPercentage}%</div>
      </div>

      {/* 警告信息 */}
      {(filePercentage > 90 || tokenPercentage > 90) && (
        <div className="capacity-warning">
          ⚠️ 容量即将达到上限，建议减少文献数量
        </div>
      )}

      {/* 剩余Token信息 */}
      <div className="capacity-info">
        剩余对话空间: {Math.round((maxTokens - usedTokens) / 1000)}K tokens
      </div>
    </div>
  )
}






