<template>
  <div v-if="note" class="page-xhs-detail">
    <LayoutPageHero
      :title="note.title"
      :subtitle="`来自小红书用户 @${note.author} 的真实旅行分享`"
      :breadcrumbs="[{ text: '小红书游记', to: '/xiaohongshu' }, { 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>
                </div>
                <span class="detail-author-bar__likes">
                  <svg viewBox="0 0 24 24" width="14" height="14"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" fill="#ff2442"/></svg>
                  {{ formatLikes(note.likes) }} 赞
                </span>
              </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-xhs-cta">
              <div class="detail-xhs-cta__icon">
                <svg viewBox="0 0 24 24" width="32" height="32"><circle cx="12" cy="12" r="11" fill="#ff2442" /><text x="12" y="16" text-anchor="middle" fill="white" font-size="10" font-weight="bold">书</text></svg>
              </div>
              <div class="detail-xhs-cta__text">
                <p class="detail-xhs-cta__hint">以上为笔记摘要，查看完整图文内容请前往小红书</p>
                <a
                  :href="note.url"
                  target="_blank"
                  rel="noopener nofollow"
                  class="detail-xhs-cta__btn"
                >
                  在小红书查看原文
                  <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="`/xiaohongshu/${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="`/xiaohongshu/${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--xhs">
              <div class="sidebar-card__account">
                <img src="/images/xiaohongshu/profile.jpg" alt="呼籁旅行" class="sidebar-card__avatar" />
                <div>
                  <h3 class="sidebar-card__name">{{ wallData.account.name }}</h3>
                  <span class="sidebar-card__badge">蓝V认证 &middot; 旅行社</span>
                </div>
              </div>
              <div class="sidebar-card__stats">
                <span>粉丝 <strong>{{ wallData.account.followers }}</strong></span>
                <span>获赞 <strong>{{ wallData.account.likes }}</strong></span>
              </div>
              <a
                :href="wallData.account.url"
                target="_blank"
                rel="noopener nofollow"
                class="sidebar-card__follow"
              >
                关注小红书
              </a>
            </div>

            <!-- 咨询 CTA -->
            <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="`/xiaohongshu/${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__author">@{{ n.author }}</span>
                    </div>
                  </NuxtLink>
                </li>
              </ul>
              <NuxtLink to="/xiaohongshu" class="sidebar-card__more">查看全部笔记 &rarr;</NuxtLink>
            </div>
          </aside>
        </div>
      </div>
    </section>

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

  <!-- 404 -->
  <div v-else class="page-not-found">
    <div class="container">
      <h1>笔记不存在</h1>
      <NuxtLink to="/xiaohongshu">返回小红书游记</NuxtLink>
    </div>
  </div>
</template>

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

const { data: wallData } = await usePublicApi('xiaohongshu-wall')

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

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

// SEO
useHead({
  title: `${note.value.title} - 客户旅行笔记 | 呼籁旅行`,
  meta: [
    { name: 'description', content: note.value.summary || `来自小红书用户 @${note.value.author} 的呼伦贝尔旅行笔记：${note.value.title}` },
    { name: 'keywords', content: `呼伦贝尔,${note.value.tags.join(',')},呼籁旅行,小红书,旅行笔记,${note.value.author}` },
    { name: 'author', content: note.value.author },
    { property: 'og:title', content: note.value.title },
    { property: 'og:description', content: note.value.summary },
    { property: 'og:type', content: 'article' },
    { property: 'og:image', content: note.value.cover },
    { property: 'og:url', content: `https://1814.love/xiaohongshu/${note.value.id}` },
    { property: 'og:site_name', content: '呼籁旅行' },
  ],
  link: [
    { rel: 'canonical', href: `https://1814.love/xiaohongshu/${note.value.id}` },
  ],
})

useBreadcrumbSchema([
  { text: '首页', to: '/' },
  { text: '小红书游记', to: '/xiaohongshu' },
  { 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)

// 相关笔记：同标签优先，取6条
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, 6)
})

function formatLikes(num) {
  if (num >= 10000) return (num / 10000).toFixed(1) + 'w'
  if (num >= 1000) return (num / 1000).toFixed(1) + 'k'
  return num
}
</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;
  }

  &__likes {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: @font-size-sm;
    color: @color-text-muted;

    svg { flex-shrink: 0; }
  }
}

.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;
}

// ===== 小红书原文 CTA =====
.detail-xhs-cta {
  display: flex;
  align-items: center;
  gap: @space-lg;
  padding: @space-xl;
  background: linear-gradient(135deg, #fff5f7 0%, #ffe8ec 100%);
  border-radius: @border-radius-lg;
  border: 1px solid rgba(255, 36, 66, 0.1);
  margin-bottom: @space-xl;

  &__icon {
    flex-shrink: 0;

    svg {
      display: block;
    }
  }

  &__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;
    background: #ff2442;
    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 {
      background: #e6203b;
      box-shadow: 0 4px 16px rgba(255, 36, 66, 0.3);

      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;

  &--xhs {
    border-color: rgba(255, 36, 66, 0.15);
    background: linear-gradient(180deg, #fff5f7 0%, #fff 40%);
  }

  &--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-card__account {
  display: flex;
  align-items: center;
  gap: @space-md;
  margin-bottom: @space-md;
}

.sidebar-card__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(255, 36, 66, 0.15);
  background: #fff;
}

.sidebar-card__name {
  font-size: @font-size-sm;
  font-weight: @font-weight-bold;
  color: @color-text-primary;
  margin: 0 0 2px;
}

.sidebar-card__badge {
  font-size: 11px;
  color: #ff2442;
  font-weight: @font-weight-medium;
}

.sidebar-card__stats {
  display: flex;
  gap: @space-lg;
  margin-bottom: @space-md;
  font-size: @font-size-sm;
  color: @color-text-muted;

  strong {
    color: @color-text-primary;
    font-weight: @font-weight-bold;
  }
}

.sidebar-card__follow {
  display: block;
  text-align: center;
  padding: @space-sm;
  background: #ff2442;
  color: #fff;
  border-radius: @border-radius-full;
  text-decoration: none;
  font-size: @font-size-sm;
  font-weight: @font-weight-medium;
  transition: background @transition-fast;

  &:hover {
    background: #e6203b;
  }
}

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

  &__author {
    font-size: 11px;
    color: @color-text-muted;
  }
}

// 404
.page-not-found {
  text-align: center;
  padding: @space-3xl 0;

  h1 { margin-bottom: @space-lg; }
  a { color: @color-primary; }
}
</style>
