<script setup>
import { reactive, computed, ref } from 'vue'
import { formatTime } from '../utils/benchmarkUtils'
import GradientButton from '@/components/GradientButton.vue'
import { Button } from '@/components/ui/button'
import { Checkbox } from '@/components/ui/checkbox'
import { Card, CardContent } from '@/components/ui/card'
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table'
import { Spinner } from '@/components/ui/spinner'

const props = defineProps({
  data: { type: Array, required: true },
  selectedRowKeys: { type: Array, required: true },
  loading: { type: Boolean, default: false },
  loadingMore: { type: Boolean, default: false },
  hasMore: { type: Boolean, default: false },
})

const emit = defineEmits(['update:selectedRowKeys', 'export', 'loadMore', 'createAsyncTask'])

// 列定义
const columns = [
  { key: 'cover', title: '封面', width: '100px' },
  { key: 'desc', title: '描述', width: '200px' },
  { key: 'digg_count', title: '点赞', width: '80px', sortable: true },
  { key: 'comment_count', title: '评论', width: '80px', sortable: true },
  { key: 'share_count', title: '分享', width: '80px', sortable: true },
  { key: 'collect_count', title: '收藏', width: '80px', sortable: true },
  { key: 'duration_s', title: '时长', width: '80px', sortable: true },
  { key: 'create_time', title: '创建时间', width: '140px', sortable: true },
]

// 排序状态
const sortKey = ref('digg_count')
const sortOrder = ref('desc')

// 全选状态
const isAllSelected = computed(() => {
  return props.data.length > 0 && props.selectedRowKeys.length === props.data.length
})

// 切换排序
function handleSort(key) {
  if (sortKey.value === key) {
    sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc'
  } else {
    sortKey.value = key
    sortOrder.value = 'desc'
  }
  emit('update:selectedRowKeys', [])
}

// 选择切换
function handleSelectAll() {
  if (isAllSelected.value) {
    emit('update:selectedRowKeys', [])
  } else {
    emit('update:selectedRowKeys', props.data.map(item => String(item.id)))
  }
}

function handleSelect(id) {
  const key = String(id)
  const newKeys = [...props.selectedRowKeys]
  const index = newKeys.indexOf(key)
  if (index > -1) {
    newKeys.splice(index, 1)
  } else {
    newKeys.push(key)
  }
  emit('update:selectedRowKeys', newKeys)
}

// 排序后的数据
const sortedData = computed(() => {
  const data = [...props.data]
  const key = sortKey.value

  if (!key) return data

  return data.sort((a, b) => {
    const aVal = a[key] || 0
    const bVal = b[key] || 0
    return sortOrder.value === 'asc' ? aVal - bVal : bVal - aVal
  })
})

// 格式化数字
function formatNumber(value) {
  return value ? value.toLocaleString('zh-CN') : '0'
}
</script>

<template>
  <Card v-if="data.length > 0" class="border-0 shadow-sm bg-white/80 backdrop-blur-sm">
    <CardContent class="p-5">
      <div class="flex justify-between items-center mb-4">
        <div class="text-xs text-gray-500 mb-3">分析结果</div>
        <div class="flex items-center gap-3">
          <GradientButton
            :text="`导出Excel (${selectedRowKeys.length}/20)`"
            size="small"
            @click="$emit('export')"
            :disabled="data.length === 0 || selectedRowKeys.length === 0 || selectedRowKeys.length > 20"
            icon="download"
          />
          <GradientButton
            :text="`批量分析 (${selectedRowKeys.length}/20)`"
            size="small"
            @click="$emit('createAsyncTask')"
            :disabled="data.length === 0 || selectedRowKeys.length === 0 || selectedRowKeys.length > 20"
            icon="clock-circle"
          />
        </div>
      </div>

      <!-- 表格 -->
      <div class="overflow-x-auto max-h-[calc(100vh-400px)] overflow-y-auto
        [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar]:h-1.5
        [&::-webkit-scrollbar-track]:bg-transparent
        [&::-webkit-scrollbar-thumb]:bg-gray-300 [&::-webkit-scrollbar-thumb]:rounded">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead class="w-[40px]">
                <Checkbox
                  :checked="isAllSelected"
                  @update:checked="handleSelectAll"
                  class="scale-85"
                />
              </TableHead>
              <TableHead
                v-for="col in columns"
                :key="col.key"
                :class="[col.width && `w-[${col.width}]`, col.sortable && 'cursor-pointer']"
                @click="col.sortable && handleSort(col.key)"
              >
                <div class="flex items-center gap-1">
                  {{ col.title }}
                  <span v-if="col.sortable" class="opacity-40 transition-opacity">
                    <svg v-if="sortKey !== col.key" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <path d="M7 15l5 5 5-5M7 9l5-5 5 5"/>
                    </svg>
                    <svg v-else-if="sortOrder === 'asc'" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <path d="M12 19V5M5 12l7-7 7 7"/>
                    </svg>
                    <svg v-else width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <path d="M12 5v14M5 12l7 7 7-7"/>
                    </svg>
                  </span>
                </div>
              </TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            <TableRow v-if="loading">
              <TableCell :col-span="columns.length + 1" class="h-32 text-center">
                <Spinner class="mx-auto" />
              </TableCell>
            </TableRow>
            <TableRow
              v-else
              v-for="record in sortedData"
              :key="record.id"
              class="hover:bg-gray-50 transition-colors"
            >
              <TableCell class="w-[40px]">
                <Checkbox
                  :checked="selectedRowKeys.includes(String(record.id))"
                  @update:checked="handleSelect(record.id)"
                  class="scale-85"
                />
              </TableCell>
              <TableCell>
                <div class="relative inline-block">
                  <a v-if="record.cover && record.share_url" :href="record.share_url" target="_blank" class="block cursor-pointer group">
                    <img :src="record.cover" alt="cover" loading="lazy"
                      class="w-20 h-11 object-cover rounded border border-gray-200
                        transition-all duration-200 group-hover:scale-[1.02] group-hover:shadow-md" />
                    <span v-if="record.is_top"
                      class="absolute top-1 left-1 px-1.5 py-0.5 text-[10px] text-white bg-red-500 rounded">置顶</span>
                  </a>
                  <template v-else-if="record.cover">
                    <img :src="record.cover" alt="cover" loading="lazy" class="w-20 h-11 object-cover rounded border border-gray-200" />
                    <span v-if="record.is_top"
                      class="absolute top-1 left-1 px-1.5 py-0.5 text-[10px] text-white bg-red-500 rounded">置顶</span>
                  </template>
                  <span v-else class="text-xs text-gray-400">无封面</span>
                </div>
              </TableCell>
              <TableCell>
                <span :title="record.desc" class="block max-w-[180px] truncate">{{ record.desc || '-' }}</span>
              </TableCell>
              <TableCell>{{ formatNumber(record.digg_count) }}</TableCell>
              <TableCell>{{ formatNumber(record.comment_count) }}</TableCell>
              <TableCell>{{ formatNumber(record.share_count) }}</TableCell>
              <TableCell>{{ formatNumber(record.collect_count) }}</TableCell>
              <TableCell>{{ record.duration_s ? `${record.duration_s}s` : '-' }}</TableCell>
              <TableCell>{{ formatTime(record.create_time) }}</TableCell>
            </TableRow>
          </TableBody>
        </Table>
      </div>

      <!-- 加载更多 -->
      <div v-if="hasMore" class="text-center pt-4 border-t border-gray-100">
        <Button
          :disabled="loadingMore"
          size="lg"
          variant="outline"
          @click="$emit('loadMore')"
          class="max-w-[200px] h-10 text-base rounded-lg"
        >
          <Spinner v-if="loadingMore" class="mr-2 h-4 w-4" />
          {{ loadingMore ? '加载中...' : '加载更多内容' }}
        </Button>
        <div class="text-xs text-gray-500 mt-2">已加载 {{ data.length }} 条</div>
      </div>
      <div v-else-if="data.length > 0" class="text-center py-3 text-xs text-gray-500 border-t border-gray-100">
        已加载全部内容
      </div>
    </CardContent>
  </Card>
</template>

<style scoped>
</style>
