WebFTP/components/TransferQueue.tsx

import React, { useState } from 'react';
import { TransferItem } from '../types';
import { ArrowUp, ArrowDown, CheckCircle, XCircle, Clock, Trash2 } from 'lucide-react';

interface TransferQueueProps {
  queue: TransferItem[];
  onCancelAll: () => void;
  onClearCompleted: () => void;
}

const TransferQueue: React.FC<TransferQueueProps> = ({ queue, onCancelAll, onClearCompleted }) => {
  const [activeTab, setActiveTab] = useState<'active' | 'completed'>('active');

  const filteredQueue = queue.filter(item => {
    if (activeTab === 'active') {
      return item.status === 'queued' || item.status === 'transferring';
    } else {
      return item.status === 'completed' || item.status === 'failed';
    }
  });

  return (
    <div className="flex flex-col h-full bg-white border border-slate-300 rounded-lg overflow-hidden shadow-sm">
      <div className="bg-slate-50 px-3 py-1 border-b border-slate-200 flex justify-between items-center">
        <div className="flex space-x-2">
          <button
            className={`px-3 py-1 text-xs font-semibold rounded-t-md transition-colors ${activeTab === 'active' ? 'bg-white text-blue-600 border-t border-l border-r border-slate-200 -mb-[1px] relative z-10' : 'text-slate-500 hover:text-slate-700'}`}
            onClick={() => setActiveTab('active')}
          >
            전송 대기 ({queue.filter(i => i.status === 'queued' || i.status === 'transferring').length})
          </button>
          <button
            className={`px-3 py-1 text-xs font-semibold rounded-t-md transition-colors ${activeTab === 'completed' ? 'bg-white text-emerald-600 border-t border-l border-r border-slate-200 -mb-[1px] relative z-10' : 'text-slate-500 hover:text-slate-700'}`}
            onClick={() => setActiveTab('completed')}
          >
            전송 완료 ({queue.filter(i => i.status === 'completed' || i.status === 'failed').length})
          </button>
        </div>

        {activeTab === 'active' && filteredQueue.length > 0 && (
          <button
            onClick={onCancelAll}
            className="flex items-center gap-1 px-2 py-1 text-xs text-red-500 hover:bg-red-50 rounded transition-colors"
          >
            <Trash2 size={12} />
            모두 취소
          </button>
        )}
        {activeTab === 'completed' && filteredQueue.length > 0 && (
          <button
            onClick={onClearCompleted}
            className="flex items-center gap-1 px-2 py-1 text-xs text-slate-500 hover:bg-slate-200 rounded transition-colors"
          >
            <Trash2 size={12} />
            목록 제거
          </button>
        )}
      </div>

      <div className="flex-1 overflow-y-auto bg-white">
        <table className="w-full text-xs text-left border-collapse">
          <thead className="bg-slate-50 text-slate-500 sticky top-0 border-b border-slate-200">
            <tr>
              <th className="p-2 w-8"></th>
              <th className="p-2">파일명</th>
              <th className="p-2 w-20">구분</th>
              <th className="p-2 w-40 text-center">요청</th>
              <th className="p-2 w-40 text-center">완료</th>
              <th className="p-2 w-32 text-center">소요</th>
              <th className="p-2 w-32">진행률</th>
              <th className="p-2 w-24 text-right">속도</th>
            </tr>
          </thead>
          <tbody>
            {filteredQueue.map((item) => (
              <tr key={item.id} className="border-b border-slate-100 hover:bg-slate-50 text-slate-700">
                <td className="p-2 text-center">
                  {item.status === 'completed' && <CheckCircle size={14} className="text-emerald-500" />}
                  {item.status === 'failed' && <XCircle size={14} className="text-red-500" />}
                  {item.status === 'queued' && <Clock size={14} className="text-slate-400" />}
                  {item.status === 'transferring' && (
                    <div className="w-3 h-3 rounded-full border-2 border-blue-500 border-t-transparent animate-spin mx-auto"></div>
                  )}
                </td>
                <td className="p-2 truncate max-w-[150px] font-medium" title={item.filename}>{item.filename}</td>
                <td className="p-2">
                  <span className={`flex items-center gap-1 ${item.direction === 'upload' ? 'text-blue-600' : 'text-green-600'}`}>
                    {item.direction === 'upload' ? <ArrowUp size={12} /> : <ArrowDown size={12} />}
                    {item.direction === 'upload' ? '업로드' : '다운로드'}
                  </span>
                </td>
                <td className="p-2 text-center text-xs text-slate-500">
                  {item.requestedAt ? new Date(item.requestedAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' }) : '-'}
                </td>
                <td className="p-2 text-center text-xs text-slate-500">
                  {item.completedAt ? new Date(item.completedAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' }) : '-'}
                </td>
                <td className="p-2 text-center text-xs text-slate-500">
                  {item.completedAt && item.requestedAt ? `${((item.completedAt - item.requestedAt) / 1000).toFixed(1)}s` : '-'}
                </td>
                <td className="p-2">
                  <div className="w-full bg-slate-100 rounded-full h-2 overflow-hidden border border-slate-200">
                    <div
                      className={`h-full transition-all duration-200 ${item.status === 'completed' ? 'bg-emerald-500' :
                        item.status === 'failed' ? 'bg-red-500' : 'bg-blue-500'
                        }`}
                      style={{ width: `${item.progress}%` }}
                    />
                  </div>
                </td>
                <td className="p-2 text-right font-mono text-slate-500">{item.speed}</td>
              </tr>
            ))}
            {filteredQueue.length === 0 && (
              <tr>
                <td colSpan={8} className="p-8 text-center text-slate-400 italic">
                  {activeTab === 'active' ? '대기 중인 전송 파일이 없습니다.' : '완료된 전송 내역이 없습니다.'}
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default TransferQueue;