<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { invoke } from '@tauri-apps/api/core'
import { Trash2, FolderOpen } from 'lucide-vue-next'
import { formatDistanceToNow } from 'date-fns'
import { zhCN } from 'date-fns/locale'

interface HistoryItem {
  id: string
  title: string
  thumbnail: string
  url: string
  output_path: string
  timestamp: string
  status: string
  format: string
}

const history = ref<HistoryItem[]>([])

async function loadHistory() {
  try {
    const res = await invoke<HistoryItem[]>('get_history')
    // Sort by timestamp desc
    history.value = res.sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime())
  } catch (e) {
    console.error(e)
  }
}

async function clearHistory() {
  await invoke('clear_history')
  history.value = []
}

async function deleteItem(id: string) {
    try {
        await invoke('delete_history_item', { id })
        history.value = history.value.filter(h => h.id !== id)
    } catch (e) {
        console.error(e)
    }
}

async function openFolder(path: string) {
  await invoke('open_in_explorer', { path })
}

onMounted(loadHistory)
</script>

<template>
  <div class="max-w-5xl mx-auto p-8">
    <header class="mb-8 flex justify-between items-center">
      <div>
        <h1 class="text-3xl font-bold text-zinc-900 dark:text-white">下载历史</h1>
        <!-- <p class="text-gray-500 dark:text-gray-400 mt-2">管理您的下载记录。</p> -->
      </div>
      <button 
        @click="clearHistory"
        v-if="history.length > 0"
        class="text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 px-4 py-2 rounded-lg transition-colors text-sm font-medium flex items-center gap-2"
      >
        <Trash2 class="w-4 h-4" />
        清空所有
      </button>
    </header>

    <div v-if="history.length === 0" class="text-center py-20">
        <div class="bg-gray-100 dark:bg-zinc-900 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
            <FolderOpen class="w-8 h-8 text-gray-400" />
        </div>
        <h3 class="text-lg font-medium text-zinc-900 dark:text-white">暂无下载</h3>
        <p class="text-gray-500">您的下载记录将显示在这里。</p>
    </div>

    <div v-else class="bg-white dark:bg-zinc-900 rounded-2xl shadow-sm border border-gray-200 dark:border-zinc-800 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left">
                <thead class="bg-gray-50 dark:bg-zinc-800/50 text-xs uppercase text-gray-500 font-medium">
                    <tr>
                        <th class="px-6 py-4">媒体</th>
                        <th class="px-6 py-4">日期</th>
                        <th class="px-6 py-4">格式</th>
                        <th class="px-6 py-4">状态</th>
                        <th class="px-6 py-4 text-right">操作</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100 dark:divide-zinc-800">
                    <tr v-for="item in history" :key="item.id" class="hover:bg-gray-50 dark:hover:bg-zinc-800/50 transition-colors">
                        <td class="px-6 py-4">
                            <div class="flex items-center gap-4">
                                <img :src="item.thumbnail || '/placeholder.png'" class="w-12 h-12 rounded-lg object-cover bg-gray-200" />
                                <div class="max-w-xs">
                                    <div class="font-medium text-zinc-900 dark:text-white truncate" :title="item.title">{{ item.title }}</div>
                                    <div class="text-xs text-gray-500 truncate">{{ item.url }}</div>
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-4 text-sm text-gray-500 whitespace-nowrap">
                            {{ formatDistanceToNow(new Date(item.timestamp), { addSuffix: true, locale: zhCN }) }}
                        </td>
                        <td class="px-6 py-4 text-sm text-gray-500">
                            <span class="bg-gray-100 dark:bg-zinc-800 px-2 py-1 rounded text-xs font-mono">{{ item.format }}</span>
                        </td>
                        <td class="px-6 py-4">
                            <span 
                                class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium"
                                :class="item.status === 'success' ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400' : 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'"
                            >
                                <span class="w-1.5 h-1.5 rounded-full" :class="item.status === 'success' ? 'bg-green-500' : 'bg-red-500'"></span>
                                {{ item.status === 'success' ? '已完成' : '失败' }}
                            </span>
                        </td>
                        <td class="px-6 py-4 text-right whitespace-nowrap">
                            <button 
                                @click="openFolder(item.output_path)"
                                class="p-2 text-gray-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors"
                                title="打开输出文件夹"
                            >
                                <FolderOpen class="w-4 h-4" />
                            </button>
                            <button 
                                @click="deleteItem(item.id)"
                                class="p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors ml-1"
                                title="删除记录"
                            >
                                <Trash2 class="w-4 h-4" />
                            </button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
  </div>
</template>