<template>
  <main class="destination-detail" v-if="dest">
    <section class="dest-hero">
      <div class="container">
        <nav class="breadcrumb" aria-label="面包屑导航">
          <NuxtLink to="/">首页</NuxtLink> / <NuxtLink to="/destinations">目的地</NuxtLink> / <span>{{ dest.name }}</span>
        </nav>
        <div class="hero-content">
          <span class="dest-tag">{{ dest.tag }}</span>
          <h1>{{ dest.name }}</h1>
          <p class="hero-subtitle">{{ dest.subtitle }}</p>
        </div>
      </div>
    </section>

    <section class="dest-description">
      <div class="container">
        <p>{{ dest.description }}</p>
      </div>
    </section>

    <section class="dest-highlights" v-if="dest.highlights?.length">
      <div class="container">
        <h2>景点亮点</h2>
        <ul>
          <li v-for="(h, i) in dest.highlights" :key="i">{{ h }}</li>
        </ul>
      </div>
    </section>

    <section class="dest-season">
      <div class="container">
        <h2>推荐游览季节</h2>
        <div class="season-card">
          <p class="season-desc">{{ dest.bestSeason.description }}</p>
        </div>
      </div>
    </section>

    <section class="dest-tips" v-if="dest.tips?.length">
      <div class="container">
        <h2>实用旅行贴士</h2>
        <ul>
          <li v-for="(tip, i) in dest.tips" :key="i">{{ tip }}</li>
        </ul>
      </div>
    </section>

    <section class="dest-products" v-if="relatedProducts.length">
      <div class="container">
        <h2>包含此景点的行程</h2>
        <p class="products-intro">以下呼籁定制游产品涵盖{{ dest.name }}，由专属领队带队深度游览。</p>
        <div class="product-links">
          <NuxtLink
            v-for="p in relatedProducts"
            :key="p.id"
            :to="productUrl(p.id)"
            class="product-link"
          >
            <span class="product-name">{{ p.name }}</span>
            <span class="product-meta">{{ p.days }}天{{ p.nights }}晚 · {{ p.tag }}</span>
          </NuxtLink>
        </div>
      </div>
    </section>

    <section class="dest-cta">
      <div class="container">
        <h2>想去{{ dest.name }}？让定制师为你规划</h2>
        <p>微信添加 hulai1814，定制师一对一为你安排深度游览方案</p>
        <NuxtLink to="/contact" class="cta-button">联系定制师</NuxtLink>
      </div>
    </section>
  </main>
</template>

<script setup>
import useSEO from '~/composables/useSEO'
import { useBreadcrumbSchema } from '~/composables/useJsonLd'

const { data: destinationsData } = await usePublicApi('destinations-detail')
const { data: productsData } = await usePublicApi('products')
const { data: winterProductsData } = await usePublicApi('winter-products')
const { data: autumnProductsData } = await usePublicApi('autumn-products')

const route = useRoute()
const destId = route.params.id

const dest = computed(() => (destinationsData.value?.destinations || []).find(d => d.id === destId))

if (!dest.value) {
  throw createError({ statusCode: 404, statusMessage: '目的地不存在' })
}

// SEO
const seoOverrides = {
  title: dest.value?.seo?.title,
  description: dest.value?.seo?.description,
}
useSEO('destinations', seoOverrides)

useHead({
  meta: [
    { name: 'keywords', content: dest.value?.seo?.keywords },
  ],
})

// JSON-LD: TouristAttraction
useHead({
  script: [
    {
      type: 'application/ld+json',
      innerHTML: JSON.stringify({
        '@context': 'https://schema.org',
        '@type': 'TouristAttraction',
        name: dest.value?.name,
        description: dest.value?.description,
        url: `https://1814.love/destinations/${dest.value?.id}`,
        touristType: '家庭游客,亲子游,摄影爱好者',
        isAccessibleForFree: false,
        photo: dest.value?.heroImage ? { '@type': 'ImageObject', url: `https://1814.love${dest.value.heroImage}` } : undefined,
        containedInPlace: {
          '@type': 'AdministrativeArea',
          name: '呼伦贝尔',
          address: {
            '@type': 'PostalAddress',
            addressLocality: '呼伦贝尔市',
            addressRegion: '内蒙古自治区',
            addressCountry: 'CN',
          },
        },
        publicAccess: true,
        availableLanguage: 'Chinese',
      }),
    },
    {
      type: 'application/ld+json',
      innerHTML: JSON.stringify({
        '@context': 'https://schema.org',
        '@type': 'Article',
        headline: dest.value?.seo?.title || dest.value?.name,
        description: dest.value?.seo?.description || dest.value?.description,
        url: `https://1814.love/destinations/${dest.value?.id}`,
        author: { '@id': 'https://1814.love/#organization' },
        publisher: { '@id': 'https://1814.love/#organization' },
        dateModified: new Date().toISOString().split('T')[0],
        about: {
          '@type': 'TouristAttraction',
          name: dest.value?.name,
        },
        keywords: dest.value?.seo?.keywords,
      }),
    },
  ],
})

// 面包屑
useBreadcrumbSchema([
  { text: '首页', to: '/' },
  { text: '景区攻略', to: '/destinations' },
  { text: dest.value?.name },
])

// 关联产品详情——从三个产品线数据中查找
const allVersions = computed(() => [
  ...(productsData.value?.versions || []),
  ...(winterProductsData.value?.versions || []),
  ...(autumnProductsData.value?.versions || []),
])
const relatedProducts = computed(() => (dest.value?.relatedProducts || [])
  .map(pid => allVersions.value.find(v => v.id === pid))
  .filter(Boolean)
)

function productUrl(id) {
  if (id.startsWith('autumn-')) return '/products/autumn'
  if (id.startsWith('winter-')) return '/products/winter'
  if (id === 'summer-camp') return '/summer-camp'
  return `/products/${id}`
}
</script>

<style scoped>
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}
.dest-hero {
  background: linear-gradient(135deg, #f0f5f1, #e8ede9);
  padding: 40px 0 48px;
}
.breadcrumb {
  font-size: 14px;
  color: #7a857c;
  margin-bottom: 24px;
}
.breadcrumb a {
  color: #3a7d44;
  text-decoration: none;
}
.dest-tag {
  display: inline-block;
  background: #3a7d44;
  color: #fff;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 12px;
}
h1 {
  font-size: 32px;
  font-weight: 800;
  color: #1a1f1c;
  line-height: 1.3;
  margin-bottom: 10px;
}
.hero-subtitle {
  font-size: 17px;
  color: #4a5e4d;
}
.dest-description {
  padding: 40px 0;
}
.dest-description p {
  font-size: 17px;
  line-height: 1.9;
  color: #3d4a40;
}
.dest-highlights {
  padding: 40px 0;
  background: #fafbfa;
}
.dest-highlights h2,
.dest-season h2,
.dest-tips h2,
.dest-products h2 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #1a1f1c;
}
.dest-highlights ul {
  list-style: none;
  padding: 0;
}
.dest-highlights li {
  padding: 14px 0;
  border-bottom: 1px solid #eef0ef;
  font-size: 16px;
  line-height: 1.6;
  color: #3d4a40;
  padding-left: 24px;
  position: relative;
}
.dest-highlights li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #3a7d44;
  font-weight: 700;
}
.dest-season {
  padding: 40px 0;
}
.season-card {
  background: #f0f5f1;
  border-radius: 10px;
  padding: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
}
.season-primary,
.season-secondary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 120px;
}
.season-label {
  font-size: 12px;
  color: #7a857c;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.season-value {
  font-size: 18px;
  font-weight: 700;
  color: #3a7d44;
}
.season-desc {
  flex: 1 1 100%;
  font-size: 15px;
  line-height: 1.7;
  color: #4a5e4d;
  margin: 0;
}
.dest-tips {
  padding: 40px 0;
  background: #fafbfa;
}
.dest-tips ul {
  list-style: none;
  padding: 0;
}
.dest-tips li {
  padding: 14px 0;
  border-bottom: 1px solid #eef0ef;
  font-size: 16px;
  line-height: 1.6;
  color: #3d4a40;
  padding-left: 28px;
  position: relative;
}
.dest-tips li::before {
  content: '💡';
  position: absolute;
  left: 0;
  font-size: 14px;
}
.dest-products {
  padding: 40px 0;
}
.products-intro {
  font-size: 15px;
  color: #4a5e4d;
  margin-bottom: 20px;
}
.product-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.product-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border: 1px solid #d8e4da;
  border-radius: 8px;
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}
.product-link:hover {
  border-color: #3a7d44;
  background: #f0f5f1;
}
.product-name {
  font-size: 16px;
  font-weight: 600;
  color: #1a1f1c;
}
.product-meta {
  font-size: 14px;
  color: #7a857c;
}
.dest-cta {
  padding: 48px 0;
  text-align: center;
  background: linear-gradient(135deg, #f0f5f1, #e8ede9);
}
.dest-cta h2 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #1a1f1c;
}
.dest-cta p {
  color: #4a5e4d;
  margin-bottom: 20px;
}
.cta-button {
  display: inline-block;
  background: #3a7d44;
  color: #fff;
  padding: 12px 32px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
}
.cta-button:hover {
  background: #2e6435;
}
</style>
