<template>
  <div class="store-page">
    <Breadcrumb />

    <a-skeleton animation :loading="loading" class="doc-detail-skeleton">
      <StoreDetailSkeleton />
      <template #content>
        <article v-if="article" class="doc-article">
          <header class="doc-article__header">
            <div class="doc-article__title-row">
              <GoodsEmoji :icon="article.cover" size="xl" :fallback="DEFAULT_ARTICLE_EMOJI" :aria-label="article.title" />
              <h1 class="store-section-title">{{ article.title }}</h1>
            </div>
            <div class="doc-article__meta">
              <a-tag size="small">{{ categoryName }}</a-tag>
              <span>{{ formatTime(article.time) }}</span>
            </div>
          </header>
          <div class="rich-content" v-html="article.content" />
        </article>
        <a-empty v-else description="文档不存在或已下线">
          <a-button type="primary" @click="$router.push('/doc')">返回文档中心</a-button>
        </a-empty>
      </template>
    </a-skeleton>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { Notification } from '@arco-design/web-vue'
import { getArticle, getArticleCategories } from '@/api/article'
import GoodsEmoji from '@/components/store/GoodsEmoji.vue'
import StoreDetailSkeleton from '@/components/skeleton/StoreDetailSkeleton.vue'
import { DEFAULT_ARTICLE_EMOJI } from '@/utils/storeFormat'

const route = useRoute()
const loading = ref(false)
const article = ref(null)
const categories = ref([])

const categoryName = computed(() => {
  if (!article.value) return ''
  const cat = categories.value.find(c => c.slug === article.value.type)
  return cat?.name || article.value.type || '文档'
})

const formatTime = (time) => {
  if (!time) return '-'
  return new Date(Number(time)).toLocaleString('zh-CN')
}

const loadCategories = async () => {
  const res = await getArticleCategories()
  if (res?.code === 0) categories.value = res.data || []
}

const loadArticle = async () => {
  const slug = route.params.slug
  if (!slug) return
  loading.value = true
  article.value = null
  try {
    const res = await getArticle({ slug })
    if (!res || res.code !== 0) {
      return
    }
    article.value = res.data
    if (article.value?.title) {
      document.title = `${article.value.title} - RunForge`
    }
  } catch (e) {
    Notification.error({ title: '加载文档失败', content: e.message || '请稍后再试' })
  } finally {
    loading.value = false
  }
}

watch(() => route.params.slug, loadArticle)
onMounted(async () => {
  await loadCategories()
  await loadArticle()
})
</script>

<style scoped lang="less">
@import '@/styles/store-theme.less';

.doc-detail-skeleton {
  width: 100%;
}

.doc-article {
  background: @store-card-bg;
  border: 1px solid @store-card-border;
  border-radius: @store-radius;
  padding: clamp(16px, 4vw, 32px);
  box-shadow: @store-shadow;

  &__header {
    margin-bottom: 20px;
  }

  &__title-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
  }

  &__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    font-size: 0.8rem;
    color: @store-text-muted;
    margin-top: 12px;
  }
}

.rich-content {
  line-height: 1.75;
  color: @store-text-muted;
  word-break: break-word;

  :deep(img) {
    max-width: 100%;
    height: auto;
  }

  :deep(h1),
  :deep(h2),
  :deep(h3) {
    color: @store-primary;
    margin-top: 1.25em;
  }

  :deep(a) {
    color: @store-accent;
  }

  :deep(pre),
  :deep(code) {
    background: @store-bg;
    border-radius: 4px;
  }
}
</style>
