<template>
  <div class="bg-white/95 dark:bg-surface-800/95 backdrop-blur-sm rounded-xl p-3.5 border border-surface-200 dark:border-surface-700 shadow-soft animate-slide-up select-none">
    <div class="flex items-center gap-3.5">
      <!-- 图标 -->
      <div 
        class="w-11 h-11 rounded-xl flex items-center justify-center shrink-0 transition-colors duration-300"
        :class="transfer.status === 'completed' ? 'bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400' : 'bg-surface-100 dark:bg-surface-700 text-primary-500'"
      >
        <component 
          :is="statusIcon" 
          :size="22" 
          :class="[
             transfer.status === 'completed' ? '' : 'text-primary-500 dark:text-primary-400',
             { 'animate-spin': transfer.status === 'transferring' }
          ]"
        />
      </div>

      <!-- 信息 -->
      <div class="flex-1 min-w-0">
        <div class="flex justify-between items-start">
            <h4 class="font-semibold text-sm text-surface-900 dark:text-white truncate pr-2" :title="transfer.name">{{ transfer.name }}</h4>
            <!-- 进度百分比/状态 -->
            <span class="text-xs font-bold shrink-0 tabular-nums" :class="statusClass">
              {{ transfer.status === 'completed' ? '已完成' : progressPercent + '%' }}
            </span>
        </div>
        <p class="text-xs text-surface-500 dark:text-surface-400 mt-0.5 flex items-center gap-1">
          <span class="tabular-nums">{{ formatSize(transfer.transferredBytes || 0) }}</span>
          <span class="opacity-50">/</span>
          <span class="tabular-nums">{{ formatSize(transfer.size) }}</span>
        </p>
      </div>
    </div>

    <!-- 进度条 -->
    <div 
      v-if="transfer.status === 'transferring' || transfer.status === 'pending'"
      class="mt-3 h-1.5 bg-surface-100 dark:bg-surface-700 rounded-full overflow-hidden relative"
    >
      <div 
        class="h-full bg-primary-500 rounded-full transition-all duration-300 relative overflow-hidden"
        :style="{ width: progressPercent + '%' }"
      >
        <!-- Shimmer effect on progress bar -->
        <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent w-full h-full -translate-x-full animate-[shimmer_1.5s_infinite]"></div>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="mt-3 flex justify-end gap-3 pt-1 border-t border-surface-100 dark:border-surface-700/50" v-if="(transfer.status === 'completed' && isReceiver && transfer.localPath) || (transfer.status === 'transferring' || transfer.status === 'pending')">
      <button
        v-if="transfer.status === 'transferring' || transfer.status === 'pending'"
        @click="emit('cancel', transfer.fileId)"
        class="text-xs font-medium px-2 py-1 rounded hover:bg-red-50 dark:hover:bg-red-900/20 text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-300 transition-colors"
      >
        取消传输
      </button>
      <button
        v-if="transfer.status === 'completed' && isReceiver && transfer.localPath"
        @click="emit('open')"
        class="text-xs font-medium px-3 py-1.5 rounded-lg bg-primary-50 dark:bg-primary-900/20 text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300 hover:bg-primary-100 dark:hover:bg-primary-900/40 transition-colors flex items-center gap-1.5"
      >
        <FolderOpen :size="14" />
        打开文件位置
      </button>
    </div>
  </div>
</template>
<script setup>
import { computed } from 'vue'
import { File, CheckCircle, XCircle, Loader, FolderOpen } 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-600 dark:text-green-400'
    case 'failed': return 'text-red-500'
    case 'cancelled': return 'text-surface-400'
    default: return 'text-primary-600 dark:text-primary-400'
  }
})

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>
