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

useSeoMeta({
  title: `友链 - ${siteConfig.siteName}`,
  description: '友情链接，欢迎互相访问交流',
})
</script>

<template>
  <div class="container mx-auto max-w-6xl 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 anim-fade-in-up anim-delay-1">
      <div class="rounded-xl border p-6" 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="mb-4 space-y-2 text-sm text-muted-foreground">
          <p><span class="font-semibold text-foreground">网站名称：</span>{{ siteConfig.siteName }}</p>
          <p><span class="font-semibold text-foreground">网站地址：</span>{{ siteConfig.url }}</p>
          <p><span class="font-semibold text-foreground">网站描述：</span>{{ siteConfig.description }}</p>
          <p><span class="font-semibold text-foreground">网站头像：</span>{{ siteConfig.avatar }}</p>
        </div>
        <div class="rounded-lg p-4 text-sm" style="background: var(--color-bg-hover);">
          <p class="mb-2 font-semibold">申请方式：</p>
          <ol class="list-decimal list-inside space-y-1 text-muted-foreground">
            <li>请先在你的网站添加本站友链</li>
            <li>通过以下任意方式提交你的网站信息（名称、地址、描述、头像）</li>
            <li>审核通过后会添加到友链列表</li>
          </ol>
          <div class="mt-3 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="w-4 h-4"
              />
              <span>{{ link.name }}</span>
            </a>
          </div>
        </div>
      </div>
    </div>

    <!-- 友链列表 -->
    <div class="anim-fade-in-up anim-delay-2">
      <h2 class="mb-6 text-2xl font-bold">友链列表 ({{ siteConfig.friends.length }})</h2>
      <div v-if="siteConfig.friends.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">
        <a
          v-for="friend in siteConfig.friends"
          :key="friend.url"
          :href="friend.url"
          target="_blank"
          rel="noopener noreferrer"
          class="block rounded-xl border p-4 transition-all hover:shadow-lg"
          style="border-color: var(--color-border); background-color: var(--color-bg-card);"
        >
          <div class="flex items-start gap-4">
            <div class="shrink-0">
              <img
                v-if="friend.avatar"
                :src="friend.avatar"
                :alt="friend.name"
                style="width:64px;height:64px;border-radius:50%;object-fit:cover;display:block"
                @error="(e) => { e.target.style.display = 'none'; e.target.nextElementSibling.style.display = 'flex' }"
              />
              <div
                style="width:64px;height:64px;border-radius:50%;background:#e5e7eb;display:none;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;color:#6b7280"
              >
                {{ friend.name.charAt(0) }}
              </div>
            </div>
            <div class="flex-1 overflow-hidden">
              <div class="mb-1 truncate font-semibold">{{ friend.name }}</div>
              <div class="line-clamp-2 text-sm text-muted-foreground">
                {{ friend.description || '暂无描述' }}
              </div>
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>
</template>
