<script setup lang="ts">
import { Icon } from '@iconify/vue'
import { siteConfig } from '~/config/site'
import { formatPostDate, getSeriesSummaries, isVisiblePost, sortPostsByPublished } from '~/utils/posts'

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
}

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)
})

// 从 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'))

// 首页内容入口
const { data: homePosts } = await useAsyncData('home-posts', () =>
  queryCollection('posts')
    .order('pinned', 'DESC')
    .order('published', 'DESC')
    .all()
)

const visibleHomePosts = computed(() => sortPostsByPublished((homePosts.value || []).filter(isVisiblePost)))
const featuredPosts = computed(() => {
  const posts = [
    ...visibleHomePosts.value.filter(post => post.pinned),
    ...visibleHomePosts.value.filter(post => !post.pinned),
  ]
  const seen = new Set<string>()

  return posts.filter((post) => {
    const key = post.path || post.id || post.title || ''
    if (!key || seen.has(key)) return false
    seen.add(key)
    return true
  }).slice(0, 5)
})
const homeSeriesSummaries = computed(() => getSeriesSummaries(visibleHomePosts.value))
const homeSeries = computed(() => homeSeriesSummaries.value.slice(0, 3))
const homeSeriesCount = computed(() => homeSeriesSummaries.value.length)
const homeTagCount = computed(() => new Set(visibleHomePosts.value.flatMap(post => post.tags || [])).size)

const contentLinks = [
  { label: '文章', icon: 'mdi:post-outline', href: '/posts' },
  { label: '归档', icon: 'mdi:archive-outline', href: '/archive' },
  { label: '系列', icon: 'mdi:playlist-edit', href: '/series' },
]

const secondaryNavLinks = computed(() =>
  siteConfig.navLinks.filter(link => !contentLinks.some(item => item.href === link.href))
)
</script>

<template>
  <div class="mx-auto flex w-full max-w-4xl flex-col gap-10 px-4 py-8 sm:py-12">

    <!-- 站点身份 -->
    <section class="anim-fade-in-up">
      <div class="flex flex-col items-center gap-5 text-center sm:flex-row sm:items-center sm:text-left">
        <LayoutAvatarOrbit
          :src="siteConfig.avatar"
          :alt="siteConfig.siteName"
        />

        <div class="min-w-0 flex-1">
          <p class="text-sm font-medium text-muted-foreground">{{ siteConfig.subtitle }}</p>
          <h1 class="mt-1 text-4xl font-bold sm:text-5xl">{{ siteConfig.siteName }}</h1>
          <p class="mt-3 text-base leading-relaxed text-muted-foreground">
            {{ siteConfig.description }}。{{ siteConfig.bio }}
          </p>

          <div v-if="hitokoto" class="mt-4 text-sm leading-relaxed text-muted-foreground">
            <p class="italic">"{{ hitokoto.content }}"</p>
            <p class="mt-1 text-xs opacity-70">—— {{ hitokoto.user }} · {{ hitokoto.music }}</p>
          </div>

          <p class="mt-4 text-sm text-muted-foreground">
            您是第 <span id="busuanzi_value_site_pv" class="font-medium text-primary"></span> 个访客
          </p>
        </div>
      </div>

    </section>

    <!-- 辅助信息 -->
    <section class="anim-fade-in-up anim-delay-1">
      <div class="grid gap-4 md:grid-cols-2">
        <div class="rounded-xl border px-5 py-4" style="border-color: var(--color-border); background-color: var(--color-bg-card);">
          <h2 class="mb-3 text-sm font-semibold text-muted-foreground">社交</h2>
          <div class="flex flex-wrap gap-2">
            <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="h-5 w-5"
              />
              <span>{{ link.name }}</span>
            </a>
          </div>
        </div>

        <div class="rounded-xl border px-5 py-4" style="border-color: var(--color-border); background-color: var(--color-bg-card);">
          <h2 class="mb-3 text-sm font-semibold text-muted-foreground">更多页面</h2>
          <div class="flex flex-wrap gap-2">
            <NuxtLink
              v-for="link in secondaryNavLinks"
              :key="link.href"
              :to="link.href"
              class="btn-pill"
            >
              <Icon :icon="link.icon" class="h-5 w-5" />
              <span>{{ link.label }}</span>
            </NuxtLink>
          </div>
        </div>

        <div class="rounded-xl border px-5 py-4" style="border-color: var(--color-border); background-color: var(--color-bg-card);">
          <h2 class="mb-3 text-sm font-semibold text-muted-foreground">公告</h2>
          <div class="announcement-happy">
            <p class="announcement-text text-sm leading-relaxed">
              <strong>欢迎来到《{{ siteConfig.siteName }}》~ 用代码创造快乐，用热爱点亮生活 (☞ﾟヮﾟ)☞</strong>
            </p>
            <p class="announcement-text mt-1 text-sm leading-relaxed">
              遇到问题的话，可以去 <a href="https://github.com/wishesl/SuBlog/issues" target="_blank" rel="noopener noreferrer">Issues</a> 提反馈哦，会尽快修的！
            </p>
          </div>
        </div>

        <div class="rounded-xl border px-5 py-4" style="border-color: var(--color-border); background-color: var(--color-bg-card);">
          <h2 class="mb-3 text-sm font-semibold text-muted-foreground">小日历</h2>
          <div class="flex flex-wrap items-center gap-x-5 gap-y-3 text-sm">
            <div class="flex items-center gap-2">
              <Icon icon="mdi:calendar-weekend" class="h-5 w-5 text-muted-foreground" aria-hidden="true" />
              <span class="text-muted-foreground">{{ weekendStatus.label }}</span>
              <span class="font-semibold text-primary">{{ weekendStatus.value }}</span>
            </div>
            <div v-if="nextHoliday" class="flex items-center gap-2">
              <Icon icon="mdi:pine-tree" class="h-5 w-5 text-muted-foreground" aria-hidden="true" />
              <span class="text-muted-foreground">{{ nextHoliday.name }}</span>
              <span class="font-semibold text-primary">{{ holidayDays }} 天</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 内容入口 -->
    <section class="anim-fade-in-up anim-delay-2">
      <div class="mb-5 flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
        <div>
          <h2 class="text-2xl font-bold">文章更新</h2>
          <p class="mt-1 text-sm text-muted-foreground">
            {{ visibleHomePosts.length }} 篇文章 · {{ homeSeriesCount }} 个系列 · {{ homeTagCount }} 个标签
          </p>
        </div>

        <div class="flex flex-wrap gap-2">
          <NuxtLink
            v-for="link in contentLinks"
            :key="link.href"
            :to="link.href"
            class="btn-pill"
          >
            <Icon :icon="link.icon" class="h-5 w-5" />
            <span>{{ link.label }}</span>
          </NuxtLink>
        </div>
      </div>

      <div class="overflow-hidden rounded-xl border" style="border-color: var(--color-border); background-color: var(--color-bg-card);">
        <NuxtLink
          v-for="post in featuredPosts"
          :key="post.path || post.id"
          :to="post.path || '/posts'"
          class="group block border-b px-5 py-4 transition-colors last:border-b-0 hover:bg-muted"
          style="border-color: var(--color-border);"
        >
          <div class="mb-2 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
            <span
              v-if="post.pinned"
              class="rounded-full px-2 py-0.5 font-medium"
              style="background: var(--color-text); color: var(--color-bg);"
            >
              置顶
            </span>
            <time v-if="post.published">{{ formatPostDate(post.published) }}</time>
            <span v-if="post.series">· {{ post.series }}</span>
            <span v-if="post.difficulty">· {{ post.difficulty }}</span>
          </div>
          <h3 class="font-semibold transition-opacity group-hover:opacity-70">
            {{ post.title }}
          </h3>
          <p v-if="post.description" class="mt-1 line-clamp-2 text-sm leading-relaxed text-muted-foreground">
            {{ post.description }}
          </p>
        </NuxtLink>

        <p v-if="featuredPosts.length === 0" class="px-5 py-6 text-center text-sm text-muted-foreground">
          暂无文章
        </p>
      </div>

      <div v-if="homeSeries.length" class="mt-4 flex flex-wrap items-center gap-2">
        <span class="text-sm text-muted-foreground">系列入口</span>
        <NuxtLink
          v-for="series in homeSeries"
          :key="series.name"
          :to="series.path"
          class="tag-pill"
        >
          {{ series.name }} · {{ series.count }} 篇
        </NuxtLink>
      </div>
    </section>

  </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>
