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

useSeoMeta({
  title: `赞助 - ${siteConfig.siteName}`,
  description: '感谢您的支持，您的赞助将帮助我持续创作优质内容',
})

const route = useRoute()

const ratio = computed(() => {
  const v = Number(route.query.ratio)
  return Number.isFinite(v) && v > 0 ? v : 0
})

function formatAmount(amount: string): string {
  if (!ratio.value) return amount
  const match = amount.match(/^([\d.]+)(.*)$/)
  if (!match) return amount
  const num = (parseFloat(match[1]) * ratio.value).toFixed(2)
  return num + match[2]
}
</script>

<template>
  <div class="container mx-auto max-w-4xl px-4 py-12">
    <div class="mb-8 text-center anim-fade-in-up">
      <h1 class="mb-4 text-4xl font-bold">赞助支持</h1>
      <p class="text-lg text-muted-foreground">感谢您的支持，您的赞助将帮助我持续创作优质内容</p>
    </div>

    <!-- 微信支付 -->
    <div class="mb-8 rounded-xl border p-6 text-center anim-fade-in-up anim-delay-1" style="border-color: var(--color-border); background-color: var(--color-bg-card);">
      <h2 class="mb-2 text-xl font-semibold">微信支付</h2>
      <p class="mb-4 text-sm text-muted-foreground">扫描下方二维码向我赞助</p>
      <div class="flex justify-center py-4">
        <img
          :src="siteConfig.sponsors.qrcode.wechat"
          alt="微信支付二维码"
          class="h-64 w-64 rounded-lg"
        />
      </div>
    </div>

    <!-- 支付宝 -->
    <div class="mb-12 rounded-xl border p-6 text-center anim-fade-in-up anim-delay-2" style="border-color: var(--color-border); background-color: var(--color-bg-card);">
      <h2 class="mb-2 text-xl font-semibold">支付宝</h2>
      <p class="text-lg text-muted-foreground py-8">敬请期待 ✧</p>
    </div>

    <!-- 赞助名单 -->
    <div class="anim-fade-in-up anim-delay-3">
      <h2 class="mb-6 text-2xl font-bold">赞助名单</h2>
      <div v-if="siteConfig.sponsors.list.length === 0" class="rounded-xl border p-12 text-center text-muted-foreground" style="border-color: var(--color-border); background-color: var(--color-bg-card);">
        暂无赞助记录，期待你的出现 ✧
      </div>
      <div v-else class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        <div
          v-for="sponsor in siteConfig.sponsors.list"
          :key="sponsor.name"
          class="rounded-xl border p-4"
          style="border-color: var(--color-border); background-color: var(--color-bg-card);"
        >
          <div class="flex items-center gap-4">
            <img
              v-if="sponsor.avatar"
              :src="sponsor.avatar"
              :alt="sponsor.name"
              class="h-12 w-12 shrink-0 rounded-full object-cover"
            />
            <div v-else class="flex h-12 w-12 shrink-0 items-center justify-center rounded-full text-lg font-bold" style="background: var(--color-bg-hover); color: var(--color-text-secondary);">
              {{ sponsor.text || sponsor.name.charAt(0) }}
            </div>
            <div class="flex-1 min-w-0">
              <div class="font-semibold">{{ sponsor.name }}</div>
              <div class="text-sm text-muted-foreground">{{ sponsor.date }}</div>
              <div v-if="sponsor.amount" class="text-sm font-medium text-primary mt-1">{{ formatAmount(sponsor.amount) }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
