<template>
  <div v-if="article" class="page-news-detail">
    <LayoutPageHero
      :title="article.title"
      :subtitle="article.summary"
      :breadcrumbs="[{ text: '品牌资讯', to: '/news' }, { text: article.category }]"
    />

    <section class="section">
      <div class="container">
        <div class="news-layout">
          <!-- 主内容区 -->
          <main class="news-main">
            <!-- 文章元信息 -->
            <div class="article-meta">
              <span :class="['article-category', `article-category--${article.category}`]">{{ article.category }}</span>
              <span class="article-date">{{ formatDate(article.date || article.createdAt) }}</span>
              <span v-if="article.author" class="article-author">作者：{{ article.author }}</span>
            </div>

            <!-- 封面图 -->
            <div v-if="article.coverImage" class="article-cover">
              <img
                :src="article.coverImage"
                :alt="article.title"
                class="article-cover__img"
                referrerpolicy="no-referrer"
              />
            </div>

            <!-- 摘要 -->
            <div v-if="article.summary" class="article-summary">
              <p>{{ article.summary }}</p>
            </div>

            <!-- 正文 -->
            <div class="article-content" v-html="article.content" />

            <!-- 标签 -->
            <div v-if="article.tags?.length" class="article-tags">
              <span class="tags-label">标签：</span>
              <span v-for="tag in article.tags" :key="tag" class="article-tag">{{ tag }}</span>
            </div>

            <!-- 文章导航 -->
            <div v-if="prevArticle || nextArticle" class="article-nav">
              <NuxtLink v-if="prevArticle" :to="`/news/${prevArticle.id}`" class="article-nav__item article-nav__item--prev">
                <span class="article-nav__label">上一篇</span>
                <span class="article-nav__title">{{ prevArticle.title }}</span>
              </NuxtLink>
              <span v-else />
              <NuxtLink v-if="nextArticle" :to="`/news/${nextArticle.id}`" class="article-nav__item article-nav__item--next">
                <span class="article-nav__label">下一篇</span>
                <span class="article-nav__title">{{ nextArticle.title }}</span>
              </NuxtLink>
            </div>
          </main>

          <!-- 侧边栏 -->
          <aside class="news-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-articles">
                <li
                  v-for="art in otherArticles"
                  :key="art.id"
                  class="sidebar-article"
                  :class="{ 'sidebar-article--active': art.id === article.id }"
                >
                  <NuxtLink :to="`/news/${art.id}`" class="sidebar-article__link">
                    <span class="sidebar-article__category">{{ art.category }}</span>
                    <span class="sidebar-article__title">{{ art.title }}</span>
                  </NuxtLink>
                </li>
              </ul>
            </div>

            <div class="sidebar-card">
              <h3 class="sidebar-card__title">快速入口</h3>
              <div class="sidebar-links">
                <CommonInternalLink to="/products" text="查看旅行产品" />
                <CommonInternalLink to="/summer-camp" text="小蒙马亲子游学营" />
                <CommonInternalLink to="/faq" text="常见问答" />
                <CommonInternalLink to="/news" text="返回资讯列表" />
              </div>
            </div>
          </aside>
        </div>
      </div>
    </section>
  </div>

  <!-- 404 -->
  <div v-else class="page-not-found">
    <div class="container">
      <h1>动态不存在</h1>
      <NuxtLink to="/news">返回品牌资讯</NuxtLink>
    </div>
  </div>
</template>

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

const { data: newsData } = await usePublicApi('news')

const route = useRoute()
const allArticles = computed(() => newsData.value?.articles || [])
const article = computed(() => allArticles.value.find(a => a.id === route.params.slug))

if (!article.value) {
  throw createError({ statusCode: 404, statusMessage: '动态不存在' })
}

// SEO
useHead({
  title: article.value?.title,
  meta: [
    { name: 'description', content: article.value?.summary || '' },
    { name: 'keywords', content: (article.value?.tags || []).join(',') },
    { name: 'author', content: article.value?.author || '呼籁旅行' },
    { name: 'article:published_time', content: (article.value?.date || '') + 'T00:00:00+08:00' },
    { name: 'article:modified_time', content: (article.value?.date || '') + 'T00:00:00+08:00' },
    { name: 'geo.region', content: 'CN-NM' },
    { name: 'geo.placename', content: '呼伦贝尔' },
    { property: 'og:title', content: article.value?.title },
    { property: 'og:description', content: article.value?.summary || '' },
    { property: 'og:type', content: 'article' },
    { property: 'og:url', content: `https://1814.love/news/${article.value?.id}` },
    { property: 'og:site_name', content: '呼籁旅行' },
    { property: 'og:locale', content: 'zh_CN' },
  ],
  link: [
    { rel: 'canonical', href: `https://1814.love/news/${article.value?.id}` },
  ],
})

useBreadcrumbSchema([
  { text: '首页', to: '/' },
  { text: '品牌资讯', to: '/news' },
  { text: article.value?.title },
])

// JSON-LD NewsArticle schema
useHead({
  script: [{
    type: 'application/ld+json',
    children: JSON.stringify({
      '@context': 'https://schema.org',
      '@type': 'NewsArticle',
      '@id': `https://1814.love/news/${article.value?.id}#article`,
      headline: article.value?.title,
      description: article.value?.summary,
      articleBody: article.value?.content,
      image: article.value?.coverImage ? `https://1814.love${article.value.coverImage}` : 'https://1814.love/images/logo.png',
      author: {
        '@type': 'Organization',
        '@id': 'https://1814.love/#organization',
        name: article.value?.author || '呼籁旅行',
        url: 'https://1814.love',
      },
      publisher: {
        '@type': 'Organization',
        '@id': 'https://1814.love/#organization',
        name: '呼籁旅行',
        url: 'https://1814.love',
        logo: {
          '@type': 'ImageObject',
          url: 'https://1814.love/images/logo.png',
          width: 200,
          height: 200,
        },
      },
      datePublished: (article.value?.date || '') + 'T00:00:00+08:00',
      dateModified: (article.value?.date || '') + 'T00:00:00+08:00',
      articleSection: article.value?.category,
      mainEntityOfPage: {
        '@type': 'WebPage',
        '@id': `https://1814.love/news/${article.value?.id}`,
      },
      inLanguage: 'zh-CN',
      keywords: (article.value?.tags || []).join(','),
    }),
  }],
})

const currentIndex = computed(() => allArticles.value.findIndex(a => a.id === article.value?.id))
const prevArticle = computed(() => currentIndex.value > 0 ? allArticles.value[currentIndex.value - 1] : null)
const nextArticle = computed(() => currentIndex.value >= 0 && currentIndex.value < allArticles.value.length - 1 ? allArticles.value[currentIndex.value + 1] : null)

const otherArticles = computed(() => allArticles.value.filter(a => a.id !== article.value?.id).slice(0, 8))

function formatDate(dateStr) {
  if (!dateStr) return ''
  const d = new Date(dateStr.includes('T') ? dateStr : dateStr + 'T00:00:00')
  if (isNaN(d.getTime())) return ''
  return `${d.getFullYear()}年${d.getMonth() + 1}月${d.getDate()}日`
}
</script>

<style lang="less" scoped>
.news-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: @space-2xl;

  .respond-lg({
    grid-template-columns: 1fr 300px;
    align-items: start;
  });
}

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

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: @space-md;
  margin-bottom: @space-lg;
  font-size: @font-size-sm;
  color: @color-text-muted;
}

.article-category {
  padding: 3px @space-sm;
  border-radius: @border-radius-sm;
  font-size: @font-size-xs;
  font-weight: @font-weight-medium;

  &--产品 {
    background: @color-primary;
    color: #fff;
  }

  &--活动 {
    background: @color-accent;
    color: #fff;
  }

  &--公告 {
    background: @color-text-secondary;
    color: #fff;
  }
}

.article-cover {
  margin-bottom: @space-xl;
  border-radius: @border-radius-lg;
  overflow: hidden;
  background: @color-primary-bg;

  &__img {
    width: 100%;
    height: auto;
    display: block;
  }
}

.article-summary {
  padding: @space-lg;
  background: @color-primary-bg;
  border-left: 4px solid @color-primary;
  border-radius: 0 @border-radius-md @border-radius-md 0;
  margin-bottom: @space-xl;

  p {
    margin: 0;
    font-size: @font-size-md;
    color: @color-text-secondary;
    line-height: @line-height-base;
  }
}

.article-content {
  color: @color-text-secondary;
  line-height: @line-height-base;
  font-size: @font-size-base;

  :deep(h2) {
    font-size: @font-size-xl;
    font-weight: @font-weight-bold;
    color: @color-text-primary;
    margin: @space-2xl 0 @space-lg;
    padding-bottom: @space-sm;
    border-bottom: 2px solid @color-primary-bg;

    &:first-child {
      margin-top: 0;
    }
  }

  :deep(h3) {
    font-size: @font-size-lg;
    font-weight: @font-weight-bold;
    color: @color-text-primary;
    margin: @space-xl 0 @space-md;
  }

  :deep(p) {
    margin: 0 0 @space-lg;
  }

  :deep(ul), :deep(ol) {
    margin: 0 0 @space-lg;
    padding-left: @space-xl;
  }

  :deep(li) {
    margin-bottom: @space-sm;
    line-height: @line-height-base;
  }

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

  :deep(blockquote) {
    margin: @space-lg 0;
    padding: @space-md @space-lg;
    border-left: 4px solid @color-primary;
    background: @color-primary-bg;
    color: @color-text-secondary;
  }

  :deep(a) {
    color: @color-primary;
    text-decoration: underline;

    &:hover {
      color: @color-primary-dark;
    }
  }

  :deep(img) {
    max-width: 100%;
    height: auto;
    border-radius: @border-radius-lg;
    display: block;
    margin: @space-md auto;
  }
}

.article-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: @space-sm;
  margin-top: @space-2xl;
  padding-top: @space-lg;
  border-top: 1px solid @color-border;
}

.tags-label {
  font-size: @font-size-sm;
  color: @color-text-muted;
}

.article-tag {
  padding: 3px @space-sm;
  background: @color-primary-bg;
  color: @color-primary;
  border-radius: @border-radius-sm;
  font-size: @font-size-xs;
}

.article-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: @space-md;
  margin-top: @space-2xl;
  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);
  }
}

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

.sidebar-articles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-article {
  &--active .sidebar-article__link {
    background: @color-primary-bg;
    color: @color-primary;
  }

  &__link {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: @space-sm;
    border-radius: @border-radius-sm;
    text-decoration: none;
    transition: background @transition-fast;

    &:hover {
      background: @color-primary-bg;
    }
  }

  &__category {
    font-size: @font-size-xs;
    color: @color-primary;
  }

  &__title {
    font-size: @font-size-sm;
    color: @color-text-secondary;
    line-height: @line-height-tight;
    .text-clamp(2);
  }
}

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