<template>
  <div v-if="note" class="page-youji-detail">
    <LayoutPageHero
      :title="note.title"
      :subtitle="`来自${note.platform}用户 @${note.author} 的旅行故事`"
      :breadcrumbs="[{ text: '客户游记', to: '/youji' }, { text: note.title }]"
      compact
    />

    <section class="section">
      <div class="container">
        <div class="detail-layout">
          <main class="detail-main">
            <!-- 封面 -->
            <div class="detail-cover" :class="{ 'detail-cover--wide': note.ratio === 'horizontal' }">
              <img :src="note.cover" :alt="note.title" />
            </div>

            <!-- 正文 -->
            <article class="detail-content">
              <div class="detail-author-bar">
                <div class="detail-author-bar__left">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor" opacity="0.5"><circle cx="12" cy="8" r="4"/><path d="M12 14c-6 0-8 3-8 3v1h16v-1s-2-3-8-3z"/></svg>
                  <span class="detail-author-bar__name">{{ note.author }}</span>
                  <span class="detail-author-bar__platform" :style="{ background: platformColor(note.platform) }">{{ note.platform }}</span>
                </div>
              </div>

              <h2 class="detail-content__title">{{ note.title }}</h2>

              <div class="detail-content__body">
                <p>{{ note.summary }}</p>
              </div>

              <div class="detail-tags">
                <span v-for="tag in note.tags" :key="tag" class="detail-tag">#{{ tag }}</span>
              </div>
            </article>

            <!-- 查看原文 CTA -->
            <div class="detail-cta" :style="{ '--platform-color': platformColor(note.platform) }">
              <div class="detail-cta__icon">
                <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="var(--platform-color)" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
              </div>
              <div class="detail-cta__text">
                <p class="detail-cta__hint">以上为文章摘要，查看完整图文内容请前往原平台</p>
                <a
                  :href="note.url"
                  target="_blank"
                  rel="noopener nofollow"
                  class="detail-cta__btn"
                  :style="{ background: platformColor(note.platform) }"
                >
                  在{{ note.platform }}查看原文
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
                </a>
              </div>
            </div>

            <!-- 前后导航 -->
            <div class="detail-nav">
              <NuxtLink
                v-if="prevNote"
                :to="`/youji/${prevNote.id}`"
                class="detail-nav__item detail-nav__item--prev"
              >
                <span class="detail-nav__label">上一篇</span>
                <span class="detail-nav__title">{{ prevNote.title }}</span>
              </NuxtLink>
              <div v-else />
              <NuxtLink
                v-if="nextNote"
                :to="`/youji/${nextNote.id}`"
                class="detail-nav__item detail-nav__item--next"
              >
                <span class="detail-nav__label">下一篇</span>
                <span class="detail-nav__title">{{ nextNote.title }}</span>
              </NuxtLink>
            </div>
          </main>

          <!-- 侧边栏 -->
          <aside class="detail-sidebar">
            <div class="sidebar-card sidebar-card--cta">
              <h3 class="sidebar-card__title">想要同款旅行体验？</h3>
              <p class="sidebar-card__desc">联系呼籁定制师，一对一规划专属行程</p>
              <CommonInternalLink to="/contact" text="免费咨询定制师" />
            </div>

            <div class="sidebar-card">
              <h3 class="sidebar-card__title">更多客户游记</h3>
              <ul class="sidebar-notes">
                <li
                  v-for="n in relatedNotes"
                  :key="n.id"
                  class="sidebar-note"
                  :class="{ 'sidebar-note--active': n.id === note.id }"
                >
                  <NuxtLink :to="`/youji/${n.id}`" class="sidebar-note__link">
                    <img :src="n.cover" :alt="n.title" class="sidebar-note__thumb" />
                    <div class="sidebar-note__info">
                      <span class="sidebar-note__title">{{ n.title }}</span>
                      <span class="sidebar-note__meta">
                        <span :style="{ color: platformColor(n.platform) }">{{ n.platform }}</span> &middot; @{{ n.author }}
                      </span>
                    </div>
                  </NuxtLink>
                </li>
              </ul>
              <NuxtLink to="/youji" class="sidebar-card__more">查看全部游记 &rarr;</NuxtLink>
            </div>

            <div class="sidebar-card">
              <h3 class="sidebar-card__title">相关内容</h3>
              <div class="sidebar-links">
                <CommonInternalLink to="/xiaohongshu" text="小红书游记" />
                <CommonInternalLink to="/reviews" text="客户评价" />
                <CommonInternalLink to="/products" text="旅行产品详情" />
              </div>
            </div>
          </aside>
        </div>
      </div>
    </section>

    <CommonSectionCTA
      title="想拥有同款草原体验？"
      description="联系定制师，开始规划您的呼伦贝尔之旅"
      :links="[
        { to: '/products', text: '查看旅行产品' },
        { to: '/contact', text: '联系定制师' },
      ]"
    />
  </div>

  <div v-else class="page-not-found">
    <div class="container">
      <h1>游记不存在</h1>
      <NuxtLink to="/youji">返回客户游记</NuxtLink>
    </div>
  </div>
</template>

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

const { data: youjiData } = await usePublicApi('youji')

const route = useRoute()
const allNotes = computed(() => youjiData.value?.notes || [])
const note = computed(() => allNotes.value.find(n => n.id === route.params.id))

if (!note.value) {
  throw createError({ statusCode: 404, statusMessage: '游记不存在' })
}

const platformColors = {
  '美篇': '#e4393c',
  '微信公众号': '#07c160',
  '抖音': '#161823',
  '微博': '#ff8200',
}
function platformColor(name) {
  return platformColors[name] || '#666'
}

useHead({
  title: `${note.value.title} - 客户游记 | 呼籁旅行`,
  meta: [
    { name: 'description', content: note.value.summary.slice(0, 160) },
    { name: 'keywords', content: `呼伦贝尔,${note.value.tags.join(',')},呼籁旅行,客户游记,${note.value.platform},${note.value.author}` },
    { name: 'author', content: note.value.author },
    { property: 'og:title', content: note.value.title },
    { property: 'og:description', content: note.value.summary.slice(0, 160) },
    { property: 'og:type', content: 'article' },
    { property: 'og:image', content: note.value.cover },
    { property: 'og:url', content: `https://1814.love/youji/${note.value.id}` },
    { property: 'og:site_name', content: '呼籁旅行' },
  ],
  link: [
    { rel: 'canonical', href: `https://1814.love/youji/${note.value.id}` },
  ],
})

useBreadcrumbSchema([
  { text: '首页', to: '/' },
  { text: '客户游记', to: '/youji' },
  { text: note.value.title },
])

const currentIndex = computed(() => allNotes.value.findIndex(n => n.id === note.value?.id))
const prevNote = computed(() => currentIndex.value > 0 ? allNotes.value[currentIndex.value - 1] : null)
const nextNote = computed(() => currentIndex.value < allNotes.value.length - 1 ? allNotes.value[currentIndex.value + 1] : null)

const relatedNotes = computed(() => {
  if (!note.value) return []
  const sameTag = allNotes.value.filter(n => n.id !== note.value.id && n.tags.some(t => note.value.tags.includes(t)))
  const others = allNotes.value.filter(n => n.id !== note.value.id && !sameTag.includes(n))
  return [...sameTag, ...others].slice(0, 5)
})
</script>

<style lang="less" scoped>
.detail-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: @space-2xl;
  .respond-lg({ grid-template-columns: 1fr 320px; align-items: start; });
}

.detail-main { min-width: 0; }

.detail-cover {
  border-radius: @border-radius-lg;
  overflow: hidden;
  margin-bottom: @space-xl;
  aspect-ratio: 3 / 4;
  max-height: 560px;
  background: @gradient-cool;
  &--wide { aspect-ratio: 4 / 3; max-height: 480px; }
  img { width: 100%; height: 100%; object-fit: cover; display: block; }
}

.detail-content { margin-bottom: @space-xl; }

.detail-author-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: @space-lg;
  padding-bottom: @space-md;
  border-bottom: 1px solid @color-divider;

  &__left { display: flex; align-items: center; gap: @space-sm; }
  &__name { font-size: @font-size-sm; font-weight: @font-weight-medium; color: @color-text-secondary; }
  &__platform {
    padding: 2px 10px;
    color: #fff;
    font-size: 11px;
    border-radius: @border-radius-full;
    font-weight: @font-weight-medium;
  }
}

.detail-content__title {
  font-size: @font-size-2xl;
  font-weight: @font-weight-bold;
  color: @color-text-primary;
  margin: 0 0 @space-lg;
  line-height: @line-height-tight;
  .respond-md({ font-size: @font-size-3xl; });
}

.detail-content__body {
  p {
    font-size: @font-size-base;
    color: @color-text-secondary;
    line-height: @line-height-relaxed;
    margin: 0 0 @space-md;
    .respond-md({ font-size: @font-size-md; });
  }
}

.detail-tags { display: flex; flex-wrap: wrap; gap: @space-sm; margin-top: @space-lg; }
.detail-tag {
  padding: 4px 14px;
  background: @color-primary-bg;
  color: @color-primary;
  border-radius: @border-radius-full;
  font-size: @font-size-sm;
  font-weight: @font-weight-medium;
}

.detail-cta {
  display: flex;
  align-items: center;
  gap: @space-lg;
  padding: @space-xl;
  background: @color-bg-gray;
  border-radius: @border-radius-lg;
  border: 1px solid @color-border;
  margin-bottom: @space-xl;

  &__icon { flex-shrink: 0; }
  &__hint { font-size: @font-size-sm; color: @color-text-muted; margin: 0 0 @space-sm; }
  &__btn {
    display: inline-flex;
    align-items: center;
    gap: @space-sm;
    padding: 10px @space-xl;
    color: #fff;
    border-radius: @border-radius-full;
    text-decoration: none;
    font-size: @font-size-sm;
    font-weight: @font-weight-bold;
    transition: all @transition-base;
    white-space: nowrap;

    svg { transition: transform @transition-fast; }
    &:hover {
      opacity: 0.9;
      box-shadow: 0 4px 16px rgba(0,0,0,0.15);
      svg { transform: translateX(3px); }
    }
  }
}

.detail-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: @space-md;
  padding-top: @space-lg;
  border-top: 1px solid @color-border;

  &__item {
    padding: @space-md;
    background: @color-bg-white;
    border: 1px solid @color-border;
    border-radius: @border-radius-md;
    text-decoration: none;
    transition: all @transition-base;
    display: flex;
    flex-direction: column;
    gap: @space-xs;
    &:hover { border-color: @color-primary; background: @color-primary-bg; }
    &--next { text-align: right; }
  }
  &__label { font-size: @font-size-xs; color: @color-text-muted; }
  &__title { font-size: @font-size-sm; color: @color-text-primary; line-height: @line-height-tight; .text-clamp(2); }
}

.detail-sidebar {
  display: flex;
  flex-direction: column;
  gap: @space-lg;
  position: sticky;
  top: 90px;
}

.sidebar-card {
  background: @color-bg-white;
  border: 1px solid @color-border;
  border-radius: @border-radius-lg;
  padding: @space-lg;

  &--cta { background: @color-primary-bg; border-color: @color-primary-lighter; }
  &__title { font-size: @font-size-base; font-weight: @font-weight-bold; color: @color-text-primary; margin: 0 0 @space-sm; }
  &__desc { font-size: @font-size-sm; color: @color-text-secondary; line-height: @line-height-base; margin: 0 0 @space-md; }
  &__more {
    display: block;
    text-align: center;
    margin-top: @space-md;
    padding-top: @space-md;
    border-top: 1px solid @color-divider;
    font-size: @font-size-sm;
    color: @color-primary;
    text-decoration: none;
    font-weight: @font-weight-medium;
    &:hover { color: @color-primary-dark; }
  }
}

.sidebar-notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: @space-sm; }
.sidebar-note {
  &--active .sidebar-note__link { background: @color-primary-bg; }
  &__link {
    display: flex;
    gap: @space-sm;
    padding: @space-sm;
    border-radius: @border-radius-md;
    text-decoration: none;
    transition: background @transition-fast;
    &:hover { background: @color-bg-gray; }
  }
  &__thumb { width: 48px; height: 48px; border-radius: @border-radius-sm; object-fit: cover; flex-shrink: 0; }
  &__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  &__title { font-size: @font-size-sm; color: @color-text-primary; line-height: @line-height-tight; .text-clamp(2); }
  &__meta { font-size: 11px; color: @color-text-muted; }
}

.sidebar-links { display: flex; flex-direction: column; gap: @space-sm; }

.page-not-found {
  text-align: center;
  padding: @space-3xl 0;
  h1 { margin-bottom: @space-lg; }
  a { color: @color-primary; }
}
</style>
