import React from 'react'
import { X, ArrowUp, ArrowDown, CheckCircle, XCircle, Loader } from 'lucide-react'
import type { TransferItem } from '../../types'

interface TransferQueueProps {
  transfers: TransferItem[]
  onClear: () => void
  onRemove: (id: string) => void
}

export const TransferQueue: React.FC<TransferQueueProps> = ({ transfers, onClear, onRemove }) => {
  if (transfers.length === 0) {
    return null
  }

  return (
    <div className="border-t border-gray-200 dark:border-gray-700 p-3 bg-gray-50 dark:bg-gray-800/50">
      <div className="flex items-center justify-between mb-2">
        <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
          传输队列 ({transfers.length})
        </span>
        <button
          onClick={onClear}
          className="text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
        >
          清空
        </button>
      </div>
      <div className="space-y-2 max-h-32 overflow-y-auto">
        {transfers.map((transfer) => (
          <div
            key={transfer.id}
            className="flex items-center gap-2 text-sm bg-white dark:bg-gray-700 rounded px-2 py-1"
          >
            {transfer.type === 'upload' ? (
              <ArrowUp size={14} className="text-blue-500" />
            ) : (
              <ArrowDown size={14} className="text-green-500" />
            )}
            <span className="flex-1 truncate max-w-[120px]">{transfer.name}</span>
            <div className="flex-1 h-2 bg-gray-200 dark:bg-gray-600 rounded-full overflow-hidden">
              <div
                className={`h-full transition-all ${
                  transfer.status === 'error'
                    ? 'bg-red-500'
                    : transfer.status === 'completed'
                    ? 'bg-green-500'
                    : 'bg-blue-500'
                }`}
                style={{ width: `${transfer.progress}%` }}
              />
            </div>
            <span className="text-xs text-gray-500 w-12">
              {transfer.status === 'completed'
                ? '完成'
                : transfer.status === 'error'
                ? '失败'
                : `${transfer.progress}%`}
            </span>
            {transfer.status === 'transferring' && <Loader size={14} className="animate-spin text-blue-500" />}
            {transfer.status === 'completed' && <CheckCircle size={14} className="text-green-500" />}
            {transfer.status === 'error' && <XCircle size={14} className="text-red-500" />}
            <button
              onClick={() => onRemove(transfer.id)}
              className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
            >
              <X size={12} />
            </button>
          </div>
        ))}
      </div>
    </div>
  )
}
