import React from 'react';
import { BaseNode } from '../BaseNode';
import { NodePort, BatchResult } from '../../../types/canvas';

interface BatchResultGridProps {
  id: string;
  data: {
    results?: BatchResult[];
    gridSize?: number;
    totalCount?: number;
    completedCount?: number;
  };
}

export const BatchResultGrid: React.FC<BatchResultGridProps> = ({ id, data }) => {
  const inputs: NodePort[] = [
    { id: 'batch-input', type: 'batch', label: '批量输入', position: 'input' }
  ];

  const results = data.results || [];
  const completedCount = results.filter(r => r.status === 'success').length;
  const totalCount = results.length;
  const gridSize = data.gridSize || 3;

  const getStatusIcon = (status: string) => {
    switch (status) {
      case 'loading': return '⏳';
      case 'success': return '✅';
      case 'error': return '❌';
      default: return '⏸️';
    }
  };

  const getStatusColor = (status: string) => {
    switch (status) {
      case 'loading': return 'text-blue-600';
      case 'success': return 'text-green-600';
      case 'error': return 'text-red-600';
      default: return 'text-gray-400';
    }
  };

  return (
    <BaseNode
      id={id}
      title="批量结果网格"
      inputs={inputs}
      className="min-w-80"
    >
      <div className="space-y-3">
        {/* 进度统计 */}
        {totalCount > 0 && (
          <div className="bg-gray-50 p-2 rounded">
            <div className="flex items-center justify-between text-xs">
              <span className="font-medium">批量处理进度</span>
              <span className="text-gray-600">{completedCount}/{totalCount}</span>
            </div>
            <div className="w-full bg-gray-200 rounded-full h-2 mt-1">
              <div 
                className="bg-blue-500 h-2 rounded-full transition-all duration-300"
                style={{ width: `${totalCount > 0 ? (completedCount / totalCount) * 100 : 0}%` }}
              />
            </div>
          </div>
        )}

        {/* 结果网格 */}
        {results.length > 0 ? (
          <div 
            className="grid gap-2 max-h-48 overflow-y-auto"
            style={{ 
              gridTemplateColumns: `repeat(${gridSize}, 1fr)` 
            }}
          >
            {results.map((item, index) => (
              <div 
                key={item.id || index}
                className="border border-gray-200 rounded p-1 bg-white hover:shadow-sm transition-shadow"
              >
                {/* 预览区域 */}
                <div className="aspect-square bg-gray-100 rounded mb-1 relative overflow-hidden">
                  {item.thumbnail ? (
                    <img 
                      src={item.thumbnail} 
                      alt={item.filename}
                      className="w-full h-full object-cover"
                    />
                  ) : (
                    <div className="w-full h-full flex items-center justify-center text-gray-400 text-xs">
                      {item.status === 'loading' ? '处理中...' : '无预览'}
                    </div>
                  )}
                  
                  {/* 状态指示器 */}
                  <div className="absolute top-1 right-1 text-xs">
                    {getStatusIcon(item.status)}
                  </div>
                </div>
                
                {/* 文件信息 */}
                <div className="text-xs">
                  <div className="truncate font-medium text-gray-800" title={item.filename}>
                    {item.filename}
                  </div>
                  <div className={`text-xs ${getStatusColor(item.status)}`}>
                    {item.status === 'loading' && '处理中...'}
                    {item.status === 'success' && '完成'}
                    {item.status === 'error' && '失败'}
                    {item.status === 'idle' && '等待中'}
                  </div>
                </div>
              </div>
            ))}
          </div>
        ) : (
          <div className="text-xs text-gray-400 text-center py-8">
            等待批量数据输入...
          </div>
        )}

        {/* 操作按钮 */}
        {results.length > 0 && (
          <div className="flex justify-between items-center text-xs">
            <span className="text-gray-500">
              {results.length} 个项目
            </span>
            <div className="space-x-2">
              <button className="text-blue-500 hover:text-blue-700 transition-colors">
                导出全部
              </button>
              <button className="text-green-500 hover:text-green-700 transition-colors">
                下载完成项
              </button>
            </div>
          </div>
        )}
      </div>
    </BaseNode>
  );
};
