<script setup lang="ts">
import type { CompetitionItem } from './data'
import { NButton, NCard, NTag, NTooltip } from 'naive-ui'
import { computed } from 'vue'
import { useRouterPush } from '@/hooks/common/router'

const props = defineProps<Props>()

const emit = defineEmits<{
  (e: 'copy', item: CompetitionItem): void
  (e: 'delete', item: CompetitionItem): void
}>()

const { routerPushByKey } = useRouterPush()

interface Props {
  item: CompetitionItem
}

// 状态配置：颜色和文本
const statusConfig = computed(() => {
  if (props.item.status === 'ongoing') {
    return { type: 'success', text: '进行中', bgClass: 'bg-green-100 text-green-600' }
  }
  if (props.item.status === 'ended') {
    return { type: 'danger', text: '已结束', bgClass: 'bg-red-100 text-red-600' }
  }
  return { type: 'default', text: '未开始', bgClass: 'bg-gray-100 text-gray-500' }
})

// 处理标题换行
const formattedTitle = computed(() => props.item.title.replace(/\n/g, '<br/>'))

function toDetail(item: CompetitionItem) {
  routerPushByKey('competition_competition-detail', { query: { id: item.id } })
}

// 随机背景色池
const bgColors = [
  'bg-blue-50/80',
  'bg-green-50/80',
  'bg-purple-50/80',
  'bg-orange-50/80',
  'bg-red-50/80',
  'bg-teal-50/80',
  'bg-indigo-50/80',
  'bg-pink-50/80',
  'bg-yellow-50/80',
  'bg-cyan-50/80',
]

// 基于 ID 生成确定性的随机颜色
const decorationBgClass = computed(() => {
  const idStr = String(props.item.id || '')
  let hash = 0
  for (let i = 0; i < idStr.length; i++) {
    hash = idStr.charCodeAt(i) + ((hash << 5) - hash)
  }
  const index = Math.abs(hash) % bgColors.length
  return bgColors[index]
})
</script>

<template>
  <NCard
    :bordered="false"
    class="group relative h-full overflow-hidden border border-transparent rounded-2xl transition-all duration-300 hover:scale-[1.02] hover:border-blue-500 hover:shadow-xl hover:-translate-y-2"
    content-style="padding: 34px; display: flex; flex-direction: column; height: 100%;" @click="toDetail(item)"
  >
    <!-- 特殊背景装饰 (所有卡片显示，随机颜色) -->
    <div
      class="pointer-events-none absolute right-0 top-0 z-0 h-32 w-32 rounded-bl-full transition-transform duration-800 ease-out -mr-6 -mt-8 group-hover:scale-150"
      :class="decorationBgClass"
    />

    <!-- 操作按钮 (Hover 显示) -->
    <div
      class="absolute right-4 top-4 z-20 flex gap-2 opacity-0 transition-opacity duration-300 group-hover:opacity-100"
    >
      <NTooltip>
        <template #trigger>
          <NButton
            circle secondary size="small" class="shadow-sm backdrop-blur-sm !bg-white/80 hover:!bg-white"
            @click.stop="emit('copy', item)"
          >
            <template #icon>
              <icon-ic-baseline-content-copy class="text-icon" />
            </template>
          </NButton>
        </template>
        复制活动
      </NTooltip>

      <NTooltip>
        <template #trigger>
          <NButton
            circle secondary size="small" type="error"
            class="shadow-sm backdrop-blur-sm !bg-white/80 hover:!bg-red-50" @click.stop="emit('delete', item)"
          >
            <template #icon>
              <icon-ic-baseline-delete class="text-icon" />
            </template>
          </NButton>
        </template>
        删除活动
      </NTooltip>
    </div>

    <div class="relative z-10 h-full flex flex-col justify-between">
      <!-- 顶部内容 -->
      <div>
        <!-- 状态标签 -->
        <div class="mb-4">
          <NTag :bordered="false" size="small" round class="px-3 font-medium" :class="[statusConfig.bgClass]">
            {{ statusConfig.text }}
          </NTag>
        </div>

        <!-- 标题 -->
        <h3
          class="mb-3 min-h-[3rem] text-lg text-gray-800 font-bold leading-tight dark:text-white"
          v-html="formattedTitle"
        />

        <!-- 日期 -->
        <div class="mb-6 flex items-center text-gray-400">
          <icon-ic-baseline-calendar-month class="mr-2 text-xl" />
          <span class="text-base font-bold">{{ item.date }} ～ {{ item.endDate }}</span>
        </div>
      </div>

      <!-- 底部内容 -->
      <div class="flex items-center justify-between border-t border-gray-50 pt-4 dark:border-gray-800">
        <span class="flex items-center text-xs text-gray-500 font-medium">
          <icon-ic-baseline-group class="mr-2 text-xl" />
          {{ item.teamCount }} 支参赛队伍
        </span>
        <NButton text type="primary" size="small" class="font-bold hover:underline">
          查看配置详情
        </NButton>
      </div>
    </div>
  </NCard>
</template>

<style scoped>
/* 可选：微调样式 */
</style>
