<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 { File } 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())
  
  switch (activeTab.value) {
    case 'sending':
      return transfers.filter(t => t.fromDevice === localId)
    case 'receiving':
      return transfers.filter(t => t.toDevice === localId)
    default:
      return transfers
  }
})

// 统计
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').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>

<template>
  <div class="h-full flex flex-col">
    <!-- 头部 -->
    <header class="bg-white dark:bg-gray-800 border-b border-surface-200 dark:border-gray-700 px-6 py-4">
      <h1 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">文件传输</h1>

      <!-- 统计卡片 -->
      <div class="grid grid-cols-4 gap-4 mb-4">
        <div class="bg-surface-50 dark:bg-gray-700 rounded-lg p-3 text-center">
          <div class="text-2xl font-semibold text-gray-900 dark:text-white">{{ stats.total }}</div>
          <div class="text-sm text-gray-500 dark:text-gray-400">总计</div>
        </div>
        <div class="bg-blue-50 dark:bg-blue-900/30 rounded-lg p-3 text-center">
          <div class="text-2xl font-semibold text-blue-600 dark:text-blue-400">{{ stats.sending }}</div>
          <div class="text-sm text-blue-500 dark:text-blue-400">发送</div>
        </div>
        <div class="bg-green-50 dark:bg-green-900/30 rounded-lg p-3 text-center">
          <div class="text-2xl font-semibold text-green-600 dark:text-green-400">{{ stats.receiving }}</div>
          <div class="text-sm text-green-500 dark:text-green-400">接收</div>
        </div>
        <div class="bg-purple-50 dark:bg-purple-900/30 rounded-lg p-3 text-center">
          <div class="text-2xl font-semibold text-purple-600 dark:text-purple-400">{{ stats.inProgress }}</div>
          <div class="text-sm text-purple-500 dark:text-purple-400">进行中</div>
        </div>
      </div>

      <!-- 标签切换 -->
      <div class="flex gap-2">
        <button
          v-for="tab in [
            { key: 'all', label: '全部' },
            { key: 'sending', label: '发送' },
            { key: 'receiving', label: '接收' },
          ]"
          :key="tab.key"
          @click="activeTab = tab.key"
          class="px-4 py-2 rounded-lg text-sm font-medium transition-colors"
          :class="[
            activeTab === tab.key
              ? 'bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400'
              : 'text-gray-500 dark:text-gray-400 hover:bg-surface-100 dark:hover:bg-gray-700'
          ]"
        >
          {{ tab.label }}
        </button>
      </div>
    </header>

    <!-- 传输列表 -->
    <div class="flex-1 overflow-y-auto p-6">
      <!-- 空状态 -->
      <div 
        v-if="filteredTransfers.length === 0"
        class="h-full flex flex-col items-center justify-center text-gray-400 dark:text-gray-500"
      >
        <File :size="64" class="mb-4 opacity-50" />
        <p class="text-lg">暂无传输记录</p>
        <p class="text-sm mt-1">选择设备发送文件开始传输</p>
      </div>

      <!-- 传输列表 -->
      <div v-else class="space-y-3">
        <FileProgress
          v-for="transfer in filteredTransfers"
          :key="transfer.fileId"
          :transfer="transfer"
          :is-receiver="transfer.toDevice === localDeviceId"
          @open="openLocation(transfer.localPath || '')"
          @cancel="cancelTransfer"
        />
      </div>
    </div>
  </div>
</template>
