<template>
  <div class="page-xiaohongshu">
    <LayoutPageHero
      :title="seo.h1 || '小红书上的呼籁'"
      subtitle="来自真实客户的旅行笔记，点击查看原文"
      :breadcrumbs="[{ text: '小红书游记' }]"
      background-image="/images/seasons/summer-river.jpg"
    />

    <!-- TL;DR -->
    <section class="page-tldr" aria-label="小红书摘要">
      <div class="container">
        <div class="page-tldr-inner">
          <p>呼籁旅行小红书官方账号精选笔记：来自真实客户的旅行分享和体验记录，点击可查看原文。</p>
        </div>
      </div>
    </section>

    <!-- 账号名片 -->
    <section v-if="wallData" class="section section--account">
      <div class="container">
        <div class="account-card">
          <div class="account-card__inner">
            <div class="account-card__left">
              <div class="account-avatar">
                <img src="/images/xiaohongshu/profile.jpg" alt="呼籁旅行小红书头像" />
                <span class="account-avatar__badge">
                  <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
                </span>
              </div>
              <div class="account-meta">
                <div class="account-meta__name">
                  <h2>{{ wallData.account.name }}</h2>
                  <span class="account-meta__verified">蓝V认证 &middot; 旅行社</span>
                </div>
                <div class="account-meta__stats">
                  <div class="stat-item">
                    <span class="stat-item__value">{{ wallData.account.followers }}</span>
                    <span class="stat-item__label">粉丝</span>
                  </div>
                  <span class="stat-divider"></span>
                  <div class="stat-item">
                    <span class="stat-item__value">{{ wallData.account.likes }}</span>
                    <span class="stat-item__label">获赞与收藏</span>
                  </div>
                  <span class="stat-divider"></span>
                  <div class="stat-item">
                    <span class="stat-item__value">{{ wallData.notes.length }}</span>
                    <span class="stat-item__label">精选笔记</span>
                  </div>
                </div>
              </div>
            </div>
            <a
              :href="wallData.account.url"
              target="_blank"
              rel="noopener nofollow"
              class="follow-btn"
            >
              <svg viewBox="0 0 24 24" width="18" height="18"><circle cx="12" cy="12" r="11" fill="#fff" /><text x="12" y="16" text-anchor="middle" fill="#ff2442" font-size="10" font-weight="bold">书</text></svg>
              关注我们
            </a>
          </div>
        </div>
      </div>
    </section>

    <!-- 标签筛选 -->
    <section class="section section--tags">
      <div class="container">
        <div class="tag-bar">
          <button
            class="tag-pill"
            :class="{ 'tag-pill--active': activeTag === null }"
            @click="activeTag = null"
          >
            全部
          </button>
          <button
            v-for="tag in allTags"
            :key="tag"
            class="tag-pill"
            :class="{ 'tag-pill--active': activeTag === tag }"
            @click="activeTag = activeTag === tag ? null : tag"
          >
            {{ tag }}
          </button>
        </div>
      </div>
    </section>

    <!-- 瀑布流照片墙 -->
    <section class="section section--grid">
      <div class="container">
        <div class="masonry">
          <div v-for="(col, ci) in columns" :key="ci" class="masonry__col">
            <NuxtLink
              v-for="note in col"
              :key="note.id"
              :to="`/xiaohongshu/${note.id}`"
              class="note-card"
            >
              <div class="note-card__cover" :class="{ 'note-card__cover--wide': note.ratio === 'horizontal' }">
                <img
                  :src="note.cover"
                  :alt="note.title"
                  loading="lazy"
                  @error="handleImageError"
                />
                <div class="note-card__overlay">
                  <span class="note-card__read">查看原文</span>
                </div>
                <div class="note-card__tags">
                  <span v-for="tag in note.tags.slice(0, 2)" :key="tag" class="note-card__tag">{{ tag }}</span>
                </div>
              </div>
              <div class="note-card__body">
                <h3 class="note-card__title">{{ note.title }}</h3>
                <div class="note-card__footer">
                  <span class="note-card__author">
                    <svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor" opacity="0.4"><circle cx="12" cy="8" r="4"/><path d="M12 14c-6 0-8 3-8 3v1h16v-1s-2-3-8-3z"/></svg>
                    {{ note.author }}
                  </span>
                  <span class="note-card__likes">
                    <svg viewBox="0 0 24 24" width="13" height="13"><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>
              </div>
            </NuxtLink>
          </div>
        </div>

        <div class="grid-footer">
          <p class="grid-footer__notice">以上内容来自小红书平台客户自发分享，点击卡片查看详情并跳转原文</p>
          <a
            :href="wallData.account.url"
            target="_blank"
            rel="noopener nofollow"
            class="grid-footer__more"
          >
            在小红书查看更多
            <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>
    </section>

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

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

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

const seo = useSEO('xiaohongshu')

useBreadcrumbSchema([
  { text: '首页', to: '/' },
  { text: '小红书游记' },
])

const activeTag = ref(null)

// 提取高频标签（按出现次数排序，最多显示8个）
const allTags = computed(() => {
  const tagCount = {}
  ;(wallData.value?.notes || []).forEach(n => n.tags?.forEach(t => {
    tagCount[t] = (tagCount[t] || 0) + 1
  }))
  return Object.entries(tagCount)
    .sort((a, b) => b[1] - a[1])
    .slice(0, 8)
    .map(([tag]) => tag)
})

// 筛选笔记
const filteredNotes = computed(() => {
  if (!activeTag.value) return wallData.value?.notes || []
  return (wallData.value?.notes || []).filter(n => n.tags?.includes(activeTag.value))
})

// 瀑布流分列 - 移动2列，桌面3列（通过CSS控制第3列显隐）
const columns = computed(() => {
  const cols = [[], [], []]
  filteredNotes.value.forEach((note, i) => {
    cols[i % 3].push(note)
  })
  return cols
})

function formatLikes(num) {
  if (num >= 10000) return (num / 10000).toFixed(1) + 'w'
  if (num >= 1000) return (num / 1000).toFixed(1) + 'k'
  return num
}

function handleImageError(e) {
  e.target.closest('.note-card__cover').classList.add('note-card__cover--fallback')
}
</script>

<style lang="less" scoped>
// ===== 账号名片区 =====
.section--account {
  padding-top: 0;
  padding-bottom: 0;
  margin-top: -@space-xl;
  position: relative;
  z-index: 2;
}

.account-card {
  background: @color-bg-white;
  border-radius: @border-radius-xl;
  box-shadow: @shadow-lg;
  overflow: hidden;
}

.account-card__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: @space-lg @space-xl;
  gap: @space-md;
  flex-wrap: wrap;

  .respond-md({
    padding: @space-xl @space-2xl;
  });
}

.account-card__left {
  display: flex;
  align-items: center;
  gap: @space-md;

  .respond-md({
    gap: @space-lg;
  });
}

.account-avatar {
  position: relative;
  width: 56px;
  height: 56px;
  flex-shrink: 0;

  .respond-md({
    width: 72px;
    height: 72px;
  });

  img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid @color-bg-white;
    box-shadow: 0 2px 12px rgba(255, 36, 66, 0.15);
    background: @color-bg-white;
  }
}

.account-avatar__badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 22px;
  height: 22px;
  background: #ff2442;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border: 2px solid @color-bg-white;

  .respond-md({
    width: 26px;
    height: 26px;
  });
}

.account-meta__name {
  display: flex;
  align-items: center;
  gap: @space-sm;
  flex-wrap: wrap;
  margin-bottom: @space-xs;

  h2 {
    font-size: @font-size-md;
    font-weight: @font-weight-bold;
    color: @color-text-primary;
    margin: 0;
    line-height: 1;

    .respond-md({
      font-size: @font-size-xl;
    });
  }
}

.account-meta__verified {
  display: inline-block;
  padding: 2px 10px;
  background: linear-gradient(135deg, #ff2442 0%, #ff6b81 100%);
  color: #fff;
  font-size: 11px;
  border-radius: @border-radius-full;
  font-weight: @font-weight-medium;
  letter-spacing: 0.3px;
}

.account-meta__stats {
  display: flex;
  align-items: center;
  gap: @space-md;
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stat-item__value {
  font-size: @font-size-md;
  font-weight: @font-weight-bold;
  color: @color-text-primary;
  line-height: 1;

  .respond-md({
    font-size: @font-size-lg;
  });
}

.stat-item__label {
  font-size: 11px;
  color: @color-text-muted;
  line-height: 1;
}

.stat-divider {
  width: 1px;
  height: 28px;
  background: @color-border;
}

.follow-btn {
  display: inline-flex;
  align-items: center;
  gap: @space-sm;
  padding: 10px @space-xl;
  background: linear-gradient(135deg, #ff2442 0%, #ff6b81 100%);
  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;
  box-shadow: 0 4px 16px rgba(255, 36, 66, 0.25);
  letter-spacing: 0.5px;

  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(255, 36, 66, 0.35);
  }
}

// ===== 标签筛选 =====
.section--tags {
  padding-top: @space-xl;
  padding-bottom: 0;
}

.tag-bar {
  display: flex;
  flex-wrap: wrap;
  gap: @space-sm;
  justify-content: center;
}

.tag-pill {
  padding: 6px 18px;
  border: 1.5px solid @color-border;
  border-radius: @border-radius-full;
  background: @color-bg-white;
  color: @color-text-secondary;
  font-size: @font-size-sm;
  cursor: pointer;
  transition: all @transition-fast;
  font-family: inherit;
  line-height: 1.4;

  &:hover {
    border-color: @color-text-muted;
    color: @color-text-primary;
  }

  &--active {
    background: @color-primary;
    border-color: @color-primary;
    color: #fff;
    font-weight: @font-weight-medium;

    &:hover {
      background: @color-primary-dark;
      border-color: @color-primary-dark;
      color: #fff;
    }
  }
}

// ===== 瀑布流网格 =====
.section--grid {
  padding-top: @space-xl;
}

.masonry {
  display: flex;
  gap: @space-md;

  .respond-md({
    gap: @space-lg;
  });
}

.masonry__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: @space-md;

  .respond-md({
    gap: @space-lg;
  });

  // 移动端隐藏第3列
  &:nth-child(3) {
    display: none;

    .respond-md({
      display: flex;
    });
  }
}

// ===== 笔记卡片（精致版） =====
.note-card {
  display: block;
  background: @color-bg-white;
  border-radius: @border-radius-lg;
  overflow: hidden;
  text-decoration: none;
  box-shadow: @shadow-sm;
  transition: all @transition-base;

  &:hover {
    box-shadow: @shadow-card-hover;
    transform: translateY(-4px);

    .note-card__overlay {
      opacity: 1;
    }

    .note-card__cover img {
      transform: scale(1.05);
    }
  }
}

.note-card__cover {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: @gradient-cool;

  &--wide {
    aspect-ratio: 4 / 3;
  }

  &--fallback {
    display: flex;
    align-items: center;
    justify-content: center;

    &::after {
      content: '暂无封面';
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: @font-size-sm;
      color: @color-text-muted;
      background: @gradient-cool;
    }

    img {
      display: none;
    }
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
}

.note-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 50%);
  opacity: 0;
  transition: opacity @transition-base;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: @space-xl;
}

.note-card__read {
  padding: 6px 20px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: @border-radius-full;
  font-size: @font-size-xs;
  font-weight: @font-weight-medium;
  color: @color-text-primary;
  backdrop-filter: blur(4px);
}

.note-card__tags {
  position: absolute;
  top: @space-sm;
  left: @space-sm;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.note-card__tag {
  padding: 3px 10px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(8px);
  border-radius: @border-radius-full;
  font-size: 11px;
  color: @color-text-secondary;
  font-weight: @font-weight-medium;
}

.note-card__body {
  padding: 14px @space-md;
}

.note-card__title {
  font-size: @font-size-sm;
  font-weight: @font-weight-bold;
  color: @color-text-primary;
  margin: 0 0 10px;
  line-height: @line-height-tight;
  .text-clamp(2);
}

.note-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.note-card__author {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: @color-text-muted;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60%;
}

.note-card__likes {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  color: @color-text-muted;

  svg {
    flex-shrink: 0;
  }
}

// ===== 底部 =====
.grid-footer {
  text-align: center;
  margin-top: @space-3xl;
  padding-top: @space-xl;
  border-top: 1px solid @color-divider;
}

.grid-footer__notice {
  font-size: @font-size-sm;
  color: @color-text-muted;
  margin-bottom: @space-lg;
}

.grid-footer__more {
  display: inline-flex;
  align-items: center;
  gap: @space-sm;
  padding: 12px @space-2xl;
  border: 2px solid #ff2442;
  color: #ff2442;
  border-radius: @border-radius-full;
  text-decoration: none;
  font-size: @font-size-sm;
  font-weight: @font-weight-bold;
  transition: all @transition-base;
  letter-spacing: 0.3px;

  svg {
    transition: transform @transition-fast;
  }

  &:hover {
    background: #ff2442;
    color: #fff;
    box-shadow: 0 4px 16px rgba(255, 36, 66, 0.25);

    svg {
      stroke: #fff;
      transform: translateX(3px);
    }
  }
}
</style>
