/**
 * Phase 3: 批处理模式 - 执行进度组件
 */

import React from 'react';
import { Progress, Spin } from 'antd';
import type { BatchTask } from '../../api/batchApi';
import './BatchProgress.css';

interface BatchProgressProps {
  task: BatchTask;
}

export function BatchProgress({ task }: BatchProgressProps) {
  const percent = task.total_documents > 0 
    ? Math.round((task.completed_count / task.total_documents) * 100)
    : 0;

  const successCount = task.completed_count - task.failed_count;
  const processingCount = task.status === 'processing' ? 1 : 0;
  const pendingCount = task.total_documents - task.completed_count - processingCount;

  return (
    <div className="batch-progress">
      <div className="progress-header">
        <Spin spinning={task.status === 'processing'} />
        <span className="progress-title">
          {task.status === 'processing' ? '批处理执行中...' : '批处理已完成'}
        </span>
      </div>

      {/* 进度条 */}
      <div className="progress-bar">
        <Progress
          percent={percent}
          status={task.status === 'failed' ? 'exception' : task.status === 'processing' ? 'active' : 'success'}
          strokeColor={{
            '0%': '#108ee9',
            '100%': '#87d068',
          }}
        />
        <div className="progress-text">
          {task.completed_count} / {task.total_documents} 篇
        </div>
      </div>

      {/* 统计信息 */}
      <div className="progress-stats">
        <div className="stat-item stat-success">
          <div className="stat-label">✅ 成功</div>
          <div className="stat-value">{successCount}</div>
        </div>
        <div className="stat-item stat-failed">
          <div className="stat-label">❌ 失败</div>
          <div className="stat-value">{task.failed_count}</div>
        </div>
        <div className="stat-item stat-processing">
          <div className="stat-label">🔄 处理中</div>
          <div className="stat-value">{processingCount}</div>
        </div>
        <div className="stat-item stat-pending">
          <div className="stat-label">⏳ 等待</div>
          <div className="stat-value">{pendingCount}</div>
        </div>
      </div>

      {/* 时间信息 */}
      <div className="progress-time">
        {task.duration_seconds ? (
          <div className="time-item">
            <span className="time-label">总用时：</span>
            <span className="time-value">{formatDuration(task.duration_seconds)}</span>
          </div>
        ) : (
          <div className="time-item">
            <span className="time-label">已用时：</span>
            <span className="time-value">
              {formatDuration(Math.floor((Date.now() - new Date(task.started_at).getTime()) / 1000))}
            </span>
          </div>
        )}
        
        {task.status === 'processing' && task.completed_count > 0 && (
          <div className="time-item">
            <span className="time-label">平均速度：</span>
            <span className="time-value">
              {Math.round((Date.now() - new Date(task.started_at).getTime()) / task.completed_count / 1000)}秒/篇
            </span>
          </div>
        )}
      </div>

      {/* 任务信息 */}
      <div className="task-info">
        <div className="info-row">
          <span className="info-label">任务名称：</span>
          <span className="info-value">{task.name}</span>
        </div>
        <div className="info-row">
          <span className="info-label">使用模型：</span>
          <span className="info-value">{task.model_type}</span>
        </div>
      </div>
    </div>
  );
}

/**
 * 格式化时长
 */
function formatDuration(seconds: number): string {
  if (seconds < 60) {
    return `${seconds}秒`;
  }
  
  const minutes = Math.floor(seconds / 60);
  const remainingSeconds = seconds % 60;
  
  return `${minutes}分${remainingSeconds}秒`;
}









