<script setup>
import { computed } from 'vue'
import { File, CheckCircle, XCircle, Loader } from 'lucide-vue-next'

const props = defineProps({
  transfer: {
    type: Object,
    required: true
  },
  isReceiver: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['open', 'cancel'])

// 格式化文件大小
function formatSize(bytes) {
  if (bytes < 1024) return bytes + ' B'
  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'
  if (bytes < 1024 * 1024 * 1024) return (bytes / 1024 / 1024).toFixed(1) + ' MB'
  return (bytes / 1024 / 1024 / 1024).toFixed(1) + ' GB'
}

// 进度百分比
const progressPercent = computed(() => Math.round(props.transfer.progress * 100))

// 状态样式
const statusClass = computed(() => {
  switch (props.transfer.status) {
    case 'completed': return 'text-green-500'
    case 'failed': return 'text-red-500'
    case 'cancelled': return 'text-gray-400'
    default: return 'text-primary-500'
  }
})

const statusIcon = computed(() => {
  switch (props.transfer.status) {
    case 'completed': return CheckCircle
    case 'failed': return XCircle
    case 'cancelled': return XCircle
    case 'transferring': return Loader
    default: return File
  }
})
</script>

<template>
  <div class="bg-white dark:bg-gray-800 rounded-xl p-4 border border-surface-200 dark:border-gray-700">
    <div class="flex items-center gap-3">
      <!-- 图标 -->
      <div 
        class="w-10 h-10 rounded-lg flex items-center justify-center"
        :class="transfer.status === 'completed' ? 'bg-green-100 dark:bg-green-900/30' : 'bg-surface-100 dark:bg-gray-700'"
      >
        <component 
          :is="statusIcon" 
          :size="20" 
          :class="[statusClass, { 'animate-spin': transfer.status === 'transferring' }]"
        />
      </div>

      <!-- 信息 -->
      <div class="flex-1 min-w-0">
        <h4 class="font-medium text-gray-900 dark:text-white truncate">{{ transfer.name }}</h4>
        <p class="text-sm text-gray-500 dark:text-gray-400">
          {{ formatSize(transfer.transferredBytes || 0) }} / {{ formatSize(transfer.size) }}
        </p>
      </div>

      <!-- 进度/操作 -->
      <div class="text-right">
        <span class="text-sm font-medium" :class="statusClass">
          {{ transfer.status === 'completed' ? '完成' : progressPercent + '%' }}
        </span>
      </div>
    </div>

    <!-- 进度条 -->
    <div 
      v-if="transfer.status === 'transferring' || transfer.status === 'pending'"
      class="mt-3 h-1.5 bg-surface-100 dark:bg-gray-700 rounded-full overflow-hidden"
    >
      <div 
        class="h-full bg-primary-500 rounded-full transition-all duration-300"
        :style="{ width: progressPercent + '%' }"
      />
    </div>

    <!-- 操作按钮 -->
    <div class="mt-3 flex justify-end gap-3">
      <button
        v-if="transfer.status === 'transferring' || transfer.status === 'pending'"
        @click="emit('cancel', transfer.fileId)"
        class="text-sm text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-300"
      >
        取消传输
      </button>
      <button
        v-if="transfer.status === 'completed' && isReceiver && transfer.localPath"
        @click="emit('open')"
        class="text-sm text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300"
      >
        打开文件位置
      </button>
    </div>
  </div>
</template>
