<script setup lang="ts">
import { onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import { storeToRefs } from 'pinia'
import { useAnnouncementsStore } from '@/stores/announcements'
import { useI18n } from 'vue-i18n'

const { t, locale } = useI18n()

const route = useRoute()
const store = useAnnouncementsStore()
const { current, detailLoading, error } = storeToRefs(store)

function load() {
  store.fetchById(route.params.id as string)
}

onMounted(load)
watch(() => route.params.id, load)
watch(locale, load)

function fmtDate(s: string): string {
  if (!s) return ''
  return s.replace('T', ' ').slice(0, 16)
}
</script>

<template>
  <main class="page-main">
    <div class="page-container content">
      <div class="page-header">
        <h1 class="page-title">{{ t('announcements.title') }}</h1>
        <RouterLink to="/announcements" class="back-link">&lt; {{ t('announcements.back') }}</RouterLink>
      </div>

      <div v-if="detailLoading" class="skeleton-card" />

      <div v-else-if="current" class="article-card dark-card">
        <h2 class="article-title">{{ current.title }}</h2>
        <p class="article-date num">{{ fmtDate(current.publishedAt) }}</p>
        <div class="article-divider" />
        <div class="article-body" v-html="current.content" />
        <p v-if="current.author" class="article-author">{{ current.author }}</p>
      </div>

      <div v-else class="empty">
        <p>{{ error || t('common.noData') }}</p>
        <RouterLink to="/announcements" class="back-btn">{{ t('announcements.backToList') }}</RouterLink>
      </div>
    </div>
  </main>
</template>

<style scoped>
.content {
  padding-top: var(--space-8);
  padding-bottom: var(--space-16);
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-8);
}

.page-title {
  font-size: var(--text-h1);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
}

.back-link {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  transition: color var(--transition);
}
.back-link:hover { color: var(--color-text-primary); }

/* Skeleton */
.skeleton-card {
  height: 400px;
  background: linear-gradient(90deg, var(--color-bg-card) 25%, rgba(255,255,255,0.05) 50%, var(--color-bg-card) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
  border-radius: var(--radius-lg);
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* 文章卡片 */
.article-card {
  padding: var(--space-12) var(--space-8);
  max-width: 820px;
  margin: 0 auto;
}

.article-title {
  font-size: var(--text-h2);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  text-align: center;
  margin-bottom: var(--space-3);
}

.article-date {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  text-align: center;
}

.article-divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-8) 0;
}

.article-body {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: 1.8;
  word-break: break-word;
}
.article-body :deep(p) { margin-bottom: var(--space-4); }
.article-body :deep(img) { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.article-body :deep(h1),
.article-body :deep(h2),
.article-body :deep(h3) {
  color: var(--color-text-primary);
  font-weight: var(--fw-semibold);
  margin: var(--space-6) 0 var(--space-3);
}
.article-body :deep(a) { color: var(--color-primary); text-decoration: underline; }
.article-body :deep(ul),
.article-body :deep(ol) { padding-left: var(--space-6); margin-bottom: var(--space-4); }
.article-body :deep(table) {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-4) 0;
}
.article-body :deep(td),
.article-body :deep(th) {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  font-size: var(--text-small);
}

.article-author {
  margin-top: var(--space-8);
  font-size: var(--text-small);
  color: var(--color-text-muted);
  text-align: right;
}

.empty {
  padding: var(--space-16);
  text-align: center;
  color: var(--color-text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.back-btn {
  padding: var(--space-2) var(--space-6);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  color: var(--color-primary);
  font-size: var(--text-small);
}
</style>
