import React from 'react';
import {
  Clock,
  Play,
  Pause,
  Square,
  RefreshCw,
  CheckCircle,
  AlertCircle,
  TrendingUp
} from 'lucide-react';

interface ExtractionProgressProps {
  isExtracting: boolean;
  progress: number;
  currentFile: string;
  totalFiles: number;
  processedFiles?: number;
  failedFiles?: number;
  estimatedTimeRemaining?: number;
  currentSpeed?: number;
}

/**
 * 关键帧提取进度组件
 * 遵循 Tauri 开发规范和 UI/UX 设计标准
 */
export const ExtractionProgress: React.FC<ExtractionProgressProps> = ({
  isExtracting,
  progress,
  currentFile,
  totalFiles,
  processedFiles = 0,
  failedFiles = 0,
  estimatedTimeRemaining,
  currentSpeed
}) => {
  // 格式化时间
  const formatTime = (seconds: number): string => {
    if (seconds < 60) {
      return `${Math.round(seconds)}秒`;
    } else if (seconds < 3600) {
      const minutes = Math.floor(seconds / 60);
      const remainingSeconds = Math.round(seconds % 60);
      return `${minutes}分${remainingSeconds}秒`;
    } else {
      const hours = Math.floor(seconds / 3600);
      const minutes = Math.floor((seconds % 3600) / 60);
      return `${hours}小时${minutes}分钟`;
    }
  };

  // 格式化处理速度
  const formatSpeed = (speed: number): string => {
    return `${speed.toFixed(1)} 文件/秒`;
  };

  // 计算成功率
  const successRate = processedFiles > 0 ? ((processedFiles - failedFiles) / processedFiles * 100) : 0;

  return (
    <div className="bg-white rounded-lg shadow-sm border p-6 space-y-6">
      {/* 标题 */}
      <div className="flex items-center gap-3">
        {isExtracting ? (
          <RefreshCw className="w-5 h-5 text-blue-600 animate-spin" />
        ) : (
          <Clock className="w-5 h-5 text-gray-600" />
        )}
        <h3 className="text-lg font-semibold text-gray-900">
          {isExtracting ? '正在提取关键帧...' : '提取进度'}
        </h3>
      </div>

      {/* 主要进度条 */}
      <div className="space-y-3">
        <div className="flex items-center justify-between text-sm">
          <span className="text-gray-600">总体进度</span>
          <span className="font-medium text-gray-900">{Math.round(progress)}%</span>
        </div>
        
        <div className="w-full bg-gray-200 rounded-full h-3 overflow-hidden">
          <div
            className="h-full bg-gradient-to-r from-blue-500 to-blue-600 rounded-full transition-all duration-300 ease-out"
            style={{ width: `${progress}%` }}
          />
        </div>
        
        <div className="flex items-center justify-between text-xs text-gray-500">
          <span>{processedFiles} / {totalFiles} 文件</span>
          {estimatedTimeRemaining && estimatedTimeRemaining > 0 && (
            <span>预计剩余: {formatTime(estimatedTimeRemaining)}</span>
          )}
        </div>
      </div>

      {/* 当前处理文件 */}
      {currentFile && (
        <div className="space-y-2">
          <div className="text-sm font-medium text-gray-700">当前处理文件:</div>
          <div className="p-3 bg-blue-50 rounded-lg border border-blue-200">
            <div className="flex items-center gap-2">
              <Play className="w-4 h-4 text-blue-600 flex-shrink-0" />
              <span className="text-sm text-blue-800 truncate" title={currentFile}>
                {currentFile.split('/').pop() || currentFile}
              </span>
            </div>
          </div>
        </div>
      )}

      {/* 统计信息 */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div className="text-center p-3 bg-gray-50 rounded-lg">
          <div className="text-2xl font-bold text-gray-900">{totalFiles}</div>
          <div className="text-xs text-gray-500">总文件数</div>
        </div>
        
        <div className="text-center p-3 bg-green-50 rounded-lg">
          <div className="text-2xl font-bold text-green-600">{processedFiles - failedFiles}</div>
          <div className="text-xs text-gray-500">成功处理</div>
        </div>
        
        <div className="text-center p-3 bg-red-50 rounded-lg">
          <div className="text-2xl font-bold text-red-600">{failedFiles}</div>
          <div className="text-xs text-gray-500">处理失败</div>
        </div>
        
        <div className="text-center p-3 bg-blue-50 rounded-lg">
          <div className="text-2xl font-bold text-blue-600">{Math.round(successRate)}%</div>
          <div className="text-xs text-gray-500">成功率</div>
        </div>
      </div>

      {/* 性能指标 */}
      {(currentSpeed || estimatedTimeRemaining) && (
        <div className="space-y-3">
          <div className="text-sm font-medium text-gray-700">性能指标</div>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {currentSpeed && (
              <div className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
                <TrendingUp className="w-4 h-4 text-green-600" />
                <div>
                  <div className="text-sm font-medium text-gray-900">处理速度</div>
                  <div className="text-xs text-gray-500">{formatSpeed(currentSpeed)}</div>
                </div>
              </div>
            )}
            
            {estimatedTimeRemaining && estimatedTimeRemaining > 0 && (
              <div className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
                <Clock className="w-4 h-4 text-blue-600" />
                <div>
                  <div className="text-sm font-medium text-gray-900">预计剩余时间</div>
                  <div className="text-xs text-gray-500">{formatTime(estimatedTimeRemaining)}</div>
                </div>
              </div>
            )}
          </div>
        </div>
      )}

      {/* 状态指示器 */}
      <div className="flex items-center justify-center gap-4 pt-4 border-t">
        {isExtracting ? (
          <div className="flex items-center gap-2 text-blue-600">
            <RefreshCw className="w-4 h-4 animate-spin" />
            <span className="text-sm font-medium">正在处理中...</span>
          </div>
        ) : processedFiles > 0 ? (
          <div className="flex items-center gap-2 text-green-600">
            <CheckCircle className="w-4 h-4" />
            <span className="text-sm font-medium">处理完成</span>
          </div>
        ) : (
          <div className="flex items-center gap-2 text-gray-500">
            <Pause className="w-4 h-4" />
            <span className="text-sm font-medium">等待开始</span>
          </div>
        )}
      </div>

      {/* 错误提示 */}
      {failedFiles > 0 && !isExtracting && (
        <div className="p-4 bg-red-50 border border-red-200 rounded-lg">
          <div className="flex items-start gap-3">
            <AlertCircle className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" />
            <div>
              <div className="text-sm font-medium text-red-800">
                有 {failedFiles} 个文件处理失败
              </div>
              <div className="text-xs text-red-600 mt-1">
                请检查文件格式是否支持，或查看详细错误信息
              </div>
            </div>
          </div>
        </div>
      )}

      {/* 完成提示 */}
      {!isExtracting && processedFiles > 0 && failedFiles === 0 && (
        <div className="p-4 bg-green-50 border border-green-200 rounded-lg">
          <div className="flex items-start gap-3">
            <CheckCircle className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
            <div>
              <div className="text-sm font-medium text-green-800">
                所有文件处理完成！
              </div>
              <div className="text-xs text-green-600 mt-1">
                成功提取了 {processedFiles} 个文件的关键帧
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};
