<template>
  <div class="h-full flex flex-col bg-surface-50/50 dark:bg-surface-900/50 relative">
    <!-- 背景装饰 -->
    <div class="absolute top-0 right-0 w-[500px] h-[500px] bg-blue-200/10 dark:bg-blue-900/10 rounded-full blur-[100px] pointer-events-none -translate-y-1/2 translate-x-1/2"></div>
    <div class="absolute bottom-0 left-0 w-[300px] h-[300px] bg-purple-300/10 dark:bg-purple-800/10 rounded-full blur-[80px] pointer-events-none translate-y-1/3 -translate-x-1/3"></div>

    <!-- 头部 -->
    <header class="relative z-10 px-8 py-6 pb-4">
      <div class="flex items-center justify-between mb-6">
        <div>
          <h1 class="text-2xl font-bold text-surface-900 dark:text-white tracking-tight">文件传输</h1>
          <p class="text-sm text-surface-500 dark:text-surface-400 mt-1">
            查看和管理所有文件传输记录
          </p>
        </div>
      </div>

      <!-- 统计卡片 -->
      <div class="grid grid-cols-4 gap-4 mb-6">
        <div class="bg-white/80 dark:bg-surface-800/80 backdrop-blur-sm rounded-2xl p-4 border border-surface-100 dark:border-surface-700/50 shadow-soft group hover:shadow-medium transition-all duration-300">
          <div class="flex items-center gap-3 mb-2">
            <div class="p-2 rounded-lg bg-surface-100 dark:bg-surface-700 text-surface-600 dark:text-surface-300">
                <FileText :size="18" />
            </div>
            <span class="text-sm font-medium text-surface-500 dark:text-surface-400">总计</span>
          </div>
          <div class="text-2xl font-bold text-surface-900 dark:text-white pl-1">{{ stats.total }}</div>
        </div>

        <div class="bg-blue-50/80 dark:bg-blue-900/20 backdrop-blur-sm rounded-2xl p-4 border border-blue-100 dark:border-blue-800/30 shadow-soft group hover:shadow-medium transition-all duration-300">
          <div class="flex items-center gap-3 mb-2">
            <div class="p-2 rounded-lg bg-blue-100 dark:bg-blue-800/50 text-blue-600 dark:text-blue-300">
                <ArrowUp :size="18" />
            </div>
            <span class="text-sm font-medium text-blue-600/70 dark:text-blue-300/70">发送</span>
          </div>
          <div class="text-2xl font-bold text-blue-700 dark:text-blue-100 pl-1">{{ stats.sending }}</div>
        </div>

        <div class="bg-green-50/80 dark:bg-green-900/20 backdrop-blur-sm rounded-2xl p-4 border border-green-100 dark:border-green-800/30 shadow-soft group hover:shadow-medium transition-all duration-300">
          <div class="flex items-center gap-3 mb-2">
            <div class="p-2 rounded-lg bg-green-100 dark:bg-green-800/50 text-green-600 dark:text-green-300">
                <ArrowDown :size="18" />
            </div>
            <span class="text-sm font-medium text-green-600/70 dark:text-green-300/70">接收</span>
          </div>
          <div class="text-2xl font-bold text-green-700 dark:text-green-100 pl-1">{{ stats.receiving }}</div>
        </div>

        <div class="bg-purple-50/80 dark:bg-purple-900/20 backdrop-blur-sm rounded-2xl p-4 border border-purple-100 dark:border-purple-800/30 shadow-soft group hover:shadow-medium transition-all duration-300">
          <div class="flex items-center gap-3 mb-2">
            <div class="p-2 rounded-lg bg-purple-100 dark:bg-purple-800/50 text-purple-600 dark:text-purple-300">
                <Activity :size="18" />
            </div>
            <span class="text-sm font-medium text-purple-600/70 dark:text-purple-300/70">进行中</span>
          </div>
          <div class="text-2xl font-bold text-purple-700 dark:text-purple-100 pl-1">{{ stats.inProgress }}</div>
        </div>
      </div>

      <!-- 标签切换 -->
      <div class="flex p-1 bg-surface-200/50 dark:bg-surface-800/50 rounded-xl w-fit backdrop-blur-sm">
        <button
          v-for="tab in [
            { key: 'all', label: '全部' },
            { key: 'sending', label: '发送' },
            { key: 'receiving', label: '接收' },
          ]"
          :key="tab.key"
          @click="activeTab = tab.key"
          class="px-6 py-2 rounded-lg text-sm font-medium transition-all duration-300 relative"
          :class="[
            activeTab === tab.key
              ? 'text-primary-600 dark:text-primary-300 shadow-sm bg-white dark:bg-surface-700'
              : 'text-surface-500 dark:text-surface-400 hover:text-surface-700 dark:hover:text-surface-200'
          ]"
        >
          {{ tab.label }}
        </button>
      </div>
    </header>

    <!-- 传输列表 -->
    <div class="flex-1 overflow-y-auto px-8 py-4 relative z-0 scroll-smooth">
      <!-- 空状态 -->
      <div 
        v-if="filteredTransfers.length === 0"
        class="h-64 flex flex-col items-center justify-center text-surface-400 dark:text-surface-500 animate-fade-in"
      >
        <div class="w-20 h-20 bg-surface-100 dark:bg-surface-800/50 rounded-3xl flex items-center justify-center mb-6 shadow-inner">
            <Inbox :size="40" class="text-surface-300 dark:text-surface-600" />
        </div>
        <p class="text-lg font-medium text-surface-600 dark:text-surface-300">暂无传输记录</p>
        <p class="text-sm mt-2 opacity-75">选择设备发送文件开始传输</p>
      </div>

      <!-- 传输列表 -->
      <div v-else class="space-y-3 pb-8 animate-slide-up">
        <transition-group
            enter-active-class="transition duration-300 ease-out"
            enter-from-class="transform translate-y-4 opacity-0"
            enter-to-class="transform translate-y-0 opacity-100"
            leave-active-class="transition duration-200 ease-in"
            leave-from-class="transform translate-y-0 opacity-100"
            leave-to-class="transform translate-y-4 opacity-0"
        >
            <FileProgress
            v-for="transfer in filteredTransfers"
            :key="transfer.fileId"
            :transfer="transfer"
            :is-receiver="transfer.toDevice === localDeviceId"
            @open="openLocation(transfer.localPath || '')"
            @cancel="cancelTransfer"
            class="hover:scale-[1.01] transition-transform duration-200"
            />
        </transition-group>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useChatStore } from '@/stores/chatStore'
import { useDeviceStore } from '@/stores/deviceStore'
import FileProgress from '@/components/FileProgress.vue'
import { FileText, ArrowUp, ArrowDown, Activity, Inbox } from 'lucide-vue-next'

const chatStore = useChatStore()
const deviceStore = useDeviceStore()

const activeTab = ref('all')
const localDeviceId = computed(() => deviceStore.localDevice?.deviceId || '')

// 过滤传输记录
const filteredTransfers = computed(() => {
  const localId = deviceStore.localDevice?.deviceId || ''
  const transfers = Array.from(chatStore.transfers.values())
  // 倒序排列，最新的在前面
  const sortedTransfers = transfers.sort((a, b) => (b.createdAt || 0) - (a.createdAt || 0))
  
  switch (activeTab.value) {
    case 'sending':
      return sortedTransfers.filter(t => t.fromDevice === localId)
    case 'receiving':
      return sortedTransfers.filter(t => t.toDevice === localId)
    default:
      return sortedTransfers
  }
})

// 统计
const stats = computed(() => {
  const localId = deviceStore.localDevice?.deviceId || ''
  const transfers = Array.from(chatStore.transfers.values())
  
  return {
    total: transfers.length,
    sending: transfers.filter(t => t.fromDevice === localId).length,
    receiving: transfers.filter(t => t.toDevice === localId).length,
    completed: transfers.filter(t => t.status === 'completed').length,
    inProgress: transfers.filter(t => t.status === 'transferring' || t.status === 'pending').length,
  }
})

// 打开文件位置
function openLocation(path) {
  chatStore.openFileLocation(path)
}

// 取消传输
async function cancelTransfer(fileId) {
  await chatStore.cancelTransfer(fileId)
}

onMounted(async () => {
  // 加载所有设备的传输历史
  for (const device of deviceStore.deviceList) {
    await chatStore.loadTransferHistory(device.deviceId)
  }
})
</script>
