/**
 * BatchProcessing Component
 * Part of VideoProcessingController - handles batch video processing
 */
import React from 'react';
import { Tooltip } from '../../ui/tooltip';
import { Badge } from '../../ui/badge';
import { Button } from '../../ui/button';
import { Progress } from '../../ui/progress';
import { Plus, Trash2 } from 'lucide-react';
import type { BatchItem } from '../types';

interface BatchProcessingProps {
  batchItems: BatchItem[];
  processingBatch: boolean;
  currentBatchItem: number;
  batchProgress: number;
  onAddBatchItem: () => void;
  onRemoveBatchItem: (id: string) => void;
  onStartBatchProcessing: () => void;
  calculateTotalDuration: (segments: Array<{ start?: number; end?: number }>) => number;
}

export const BatchProcessing: React.FC<BatchProcessingProps> = ({
  batchItems,
  processingBatch,
  currentBatchItem,
  batchProgress,
  onAddBatchItem,
  onRemoveBatchItem,
  onStartBatchProcessing,
  calculateTotalDuration,
}) => {
  return (
    <div className="batchContainer">
      <div className="batchHeader">
        <Button
          className="bg-[--accent-primary] hover:bg-[--accent-primary-hover] text-white"
          onClick={onAddBatchItem}
        >
          <Plus className="mr-1" size={16} />
          添加当前视频到批处理
        </Button>

        <Tooltip title="开始处理所有批次项">
          <Button
            className="bg-[--accent-primary] hover:bg-[--accent-primary-hover] text-white"
            onClick={onStartBatchProcessing}
            disabled={processingBatch || batchItems.length === 0}
          >
            {processingBatch ? '处理中...' : '开始批量处理'}
          </Button>
        </Tooltip>
      </div>

      {processingBatch && (
        <div className="batchProgress">
          <Progress value={batchProgress} />
          <div className="batchStatus">
            处理中: {currentBatchItem + 1}/{batchItems.length} - {batchItems[currentBatchItem]?.name}
          </div>
        </div>
      )}

      <div className="batchList">
        {batchItems.length === 0 ? (
          <div className="emptyBatch">
            <p>暂无批处理项目</p>
            <p>添加当前视频及其片段到批处理列表</p>
          </div>
        ) : (
          batchItems.map((item, index) => (
            <div
              key={item.id}
              className={`batchItem ${item.completed ? 'completed' : ''}`}
            >
              <div className="batchItemContent">
                <div className="batchItemHeader">
                  <div className="batchItemName">
                    <span className="batchNumber">{index + 1}.</span> {item.name}
                  </div>
                  <div className="batchItemActions">
                    {item.completed && (
                      <Badge variant="default" className="bg-green-500/20 text-green-400 border-green-500/30">已完成</Badge>
                    )}
                    <Button
                      variant="ghost"
                      size="icon-sm"
                      onClick={() => {
                        if (window.confirm('确定要移除此项目吗？')) {
                          onRemoveBatchItem(item.id);
                        }
                      }}
                      disabled={processingBatch}
                    >
                      <Trash2 size={16} />
                    </Button>
                  </div>
                </div>
                <div className="batchItemInfo">
                  <div>片段数量: {item.segments.length}</div>
                  <div>总时长: {calculateTotalDuration(item.segments)}秒</div>
                </div>
              </div>
            </div>
          ))
        )}
      </div>
    </div>
  );
};

export default BatchProcessing;
