import React from 'react'
import { X, 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 }) => {
  const hasActiveTransfers = transfers.some(t => t.status === 'transferring')
  const hasCompletedOrErrorTransfers = transfers.some(t => t.status === 'completed' || t.status === 'error')

  if (transfers.length === 0) {
    return (
      <div className="border-t border-gray-200 dark:border-gray-700 px-3 py-2">
        <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
          传输队列
        </span>
      </div>
    )
  }

  return (
    <div className="h-full flex flex-col border-t border-gray-200 dark:border-gray-700 px-3 py-2">
      <div className="flex items-center justify-between mb-2 shrink-0">
        <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="flex-1 overflow-y-auto space-y-2 min-h-0">
        {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"
          >
            <span className="text-gray-500">
              {transfer.type === 'upload' ? '↑' : '↓'}
            </span>
            <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-gray-500'
                    : 'bg-gray-600'
                }`}
                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-gray-500" />}
            {transfer.status === 'completed' && <CheckCircle size={14} className="text-gray-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>
  )
}