<script setup lang="ts">
import { Icon } from '@iconify/vue'
import { siteConfig } from '~/config/site'

const now = new Date()
const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())

const dayOfWeek = today.getDay()

const weekendStatus = getWeekendStatus(dayOfWeek)

type WeekendStatus = {
  label: string
  value: string
}

// 从 API 获取法定节假日
const { data: holidaysData } = await useAsyncData('holidays', () =>
  $fetch('https://timor.tech/api/holiday/year/' + today.getFullYear()).catch(() => null)
)

const nextHoliday = computed(() => {
  if (!holidaysData.value) return null
  const list = holidaysData.value?.holiday
  if (!list) return null
  const entries = Object.values(list) as any[]
  const upcoming = entries
    .filter((h: any) => h.date && new Date(h.date + 'T00:00:00') >= today)
    .sort((a: any, b: any) => a.date.localeCompare(b.date))
  return upcoming[0] || null
})

const holidayDays = computed(() => {
  if (!nextHoliday.value) return null
  return daysUntil(new Date(nextHoliday.value.date + 'T00:00:00'))
})

function daysUntil(d: Date): number {
  return Math.ceil((d.getTime() - today.getTime()) / 86400000)
}

function getWeekendStatus(dayOfWeek: number): WeekendStatus {
  if (dayOfWeek === 5) return { label: '周末', value: '明天就是' }
  if (dayOfWeek === 6) return { label: '周末', value: '周末愉快' }
  if (dayOfWeek === 0) return { label: '周末', value: '余额 1 天' }

  return {
    label: '周末',
    value: `还有 ${(6 - dayOfWeek + 7) % 7} 天`,
  }
}

useHead({
  script: [
    { src: '//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js', async: true, defer: true },
  ],
})

// 网易云热评
const { data: hitokoto } = await useAsyncData('wyy-comment', () => $fetch<{ user: string; music: string; content: string }>('/api/wyy'))

onMounted(() => {
  const el = document.getElementById('busuanzi_value_site_pv')
  if (!el) return
  el.textContent = '1'

  const animate = (target: number) => {
    if (target <= 1) return
    const duration = 800
    const start = performance.now()
    const tick = (now: number) => {
      const progress = Math.min((now - start) / duration, 1)
      const eased = 1 - Math.pow(1 - progress, 3)
      el.textContent = Math.floor(1 + (target - 1) * eased).toLocaleString()
      if (progress < 1) requestAnimationFrame(tick)
    }
    requestAnimationFrame(tick)
  }

  const observer = new MutationObserver(() => {
    const val = parseInt(el.textContent || '0', 10)
    if (val > 1) {
      observer.disconnect()
      animate(val)
    }
  })
  observer.observe(el, { childList: true, characterData: true, subtree: true })

  setTimeout(() => observer.disconnect(), 10000)
})
</script>

<template>
  <div class="flex flex-col items-center gap-8 px-4 pt-4 pb-12">

    <!-- 公告卡片 -->
    <div class="w-full max-w-2xl text-center anim-fade-in-up">
      <div class="announcement-happy rounded-xl p-6">
        <p class="announcement-text text-sm md:text-base">
          <strong>欢迎来到《{{ siteConfig.siteName }}》~ 用代码创造快乐，用热爱点亮生活 (☞ﾟヮﾟ)☞</strong>
        </p>
        <p class="announcement-text text-sm md:text-base mt-1">
          遇到问题的话，可以去 <a href="https://github.com/wishesl/SuBlog/issues" target="_blank" rel="noopener noreferrer">Issues</a> 提反馈哦，会尽快修的！
        </p>
      </div>
    </div>

    <!-- 头像 -->
    <div class="anim-fade-in-up anim-delay-1">
      <img
        :src="siteConfig.avatar"
        :alt="siteConfig.siteName"
        class="h-32 w-32 rounded-full shadow-lg"
      />
    </div>

    <!-- 标题 + 口号 + 访客 -->
    <div class="text-center anim-fade-in-up anim-delay-2">
      <h1 class="text-4xl font-bold mb-2">{{ siteConfig.siteName }}</h1>
      <p v-if="hitokoto" class="text-sm italic leading-relaxed mb-1" style="color: var(--color-text-secondary)">
        "{{ hitokoto.content }}"
      </p>
      <p v-if="hitokoto" class="text-xs opacity-60 mb-1" style="color: var(--color-text-secondary)">
        —— {{ hitokoto.user }} · {{ hitokoto.music }}
      </p>
      <p class="text-sm mt-6" style="color: var(--color-text-secondary)">
        您是第 <span id="busuanzi_value_site_pv" class="font-medium" style="color: var(--color-primary)"></span> 个访客
      </p>
    </div>

    <!-- 放假倒计时 -->
    <div class="w-full max-w-sm anim-fade-in-up anim-delay-3">
      <div class="card relative overflow-hidden py-4">
        <div class="flex items-center justify-center gap-6 text-sm">
          <div class="flex items-center gap-2">
            <img src="https://api.iconify.design/mdi:calendar-weekend.svg?color=%239ca3af" alt="" class="w-4 h-4" />
            <span class="text-muted-foreground">{{ weekendStatus.label }}</span>
            <span class="font-semibold" style="color: var(--color-primary);">{{ weekendStatus.value }}</span>
          </div>
          <template v-if="nextHoliday">
            <span class="text-muted-foreground/30">|</span>
            <div class="flex items-center gap-2">
              <img src="https://api.iconify.design/mdi:pine-tree.svg?color=%239ca3af" alt="" class="w-4 h-4" />
              <span class="text-muted-foreground">{{ nextHoliday.name }}</span>
              <span class="font-semibold" style="color: var(--color-primary);">{{ holidayDays }} 天</span>
            </div>
          </template>
        </div>
      </div>
    </div>

    <!-- 社交卡片 -->
    <div class="w-full max-w-2xl mx-auto anim-fade-in-up anim-delay-4">
      <div class="card relative overflow-hidden py-6">
        <div class="absolute inset-0 flex items-center justify-center pointer-events-none select-none z-0">
          <span class="text-5xl font-black tracking-widest" style="color: var(--color-text); opacity: 0.04;">社交</span>
        </div>
        <div class="relative z-10 px-6 flex flex-wrap gap-3 justify-center">
          <a
            v-for="link in siteConfig.socialLinks"
            :key="link.name"
            :href="link.url"
            target="_blank"
            rel="noopener noreferrer"
            class="btn-pill"
          >
            <img
              :src="`https://api.iconify.design/${link.icon}.svg?color=${encodeURIComponent(link.color || 'currentColor')}`"
              :alt="link.name"
              class="w-5 h-5"
            />
            <span>{{ link.name }}</span>
          </a>
        </div>
      </div>
    </div>

    <!-- 导航卡片 -->
    <div class="w-full max-w-2xl mx-auto anim-fade-in-up anim-delay-5">
      <div class="card relative overflow-hidden py-6">
        <div class="absolute inset-0 flex items-center justify-center pointer-events-none select-none z-0">
          <span class="text-5xl font-black tracking-widest" style="color: var(--color-text); opacity: 0.04;">导航</span>
        </div>
        <div class="relative z-10 px-6 flex flex-wrap gap-3 justify-center">
          <NuxtLink
            v-for="link in siteConfig.navLinks"
            :key="link.href"
            :to="link.href"
            class="btn-pill"
          >
            <Icon :icon="link.icon" class="w-5 h-5" />
            <span>{{ link.label }}</span>
          </NuxtLink>
        </div>
      </div>
    </div>

  </div>
</template>

<style scoped>
@keyframes rainbow-flow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.announcement-happy {
  animation: rainbow-flow 3s linear infinite;
}

.announcement-text,
.announcement-text * {
  background: linear-gradient(90deg,
    oklch(0.78 0.18 0),
    oklch(0.78 0.18 45),
    oklch(0.78 0.18 90),
    oklch(0.78 0.18 135),
    oklch(0.78 0.18 180),
    oklch(0.78 0.18 225),
    oklch(0.78 0.18 270),
    oklch(0.78 0.18 315),
    oklch(0.78 0.18 360)
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rainbow-flow 3s linear infinite;
}

</style>
