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

const { t, locale } = useI18n()
const store = useAnnouncementsStore()
const { list, loading, error, hasMore } = storeToRefs(store)

onMounted(() => store.fetchList(1))
watch(locale, () => store.fetchList(1))

function fmtDate(s: string): string {
  if (!s) return ''
  // 接口返回形如 "2024-10-18 12:34:56"，截取到分钟即可
  return s.replace('T', ' ').slice(0, 16)
}
</script>

<template>
  <main class="page-main">
    <div class="page-container content">
      <h1 class="page-title">{{ t('announcements.title') }}</h1>

      <div v-if="loading && list.length === 0" class="skeleton-list">
        <div v-for="i in 8" :key="i" class="skeleton-item" />
      </div>

      <div v-else-if="error && list.length === 0" class="empty">
        <p>{{ error }}</p>
        <button class="retry-btn" @click="store.fetchList(1)">{{ t('common.retry') }}</button>
      </div>

      <div v-else-if="list.length === 0" class="empty">{{ t('announcements.noAnnouncements') }}</div>

      <div v-else>
        <div class="announcement-list">
          <RouterLink
            v-for="item in list"
            :key="item.id"
            :to="`/announcements/${item.id}`"
            class="announcement-row"
          >
            <span class="row-title">{{ item.title }}</span>
            <span class="row-date num">{{ fmtDate(item.publishedAt) }}</span>
          </RouterLink>
        </div>

        <div v-if="hasMore" class="load-more">
          <button class="load-btn" :disabled="loading" @click="store.loadMore()">
            {{ loading ? t('common.loading') : t('announcements.loadMore') }}
          </button>
        </div>
      </div>
    </div>
  </main>
</template>

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

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

/* 列表 */
.announcement-list {
  display: flex;
  flex-direction: column;
}

.announcement-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-border);
  transition: opacity var(--transition);
}
.announcement-row:first-child { border-top: 1px solid var(--color-border); }
.announcement-row:hover { opacity: 0.7; }

.row-title {
  font-size: var(--text-body);
  color: var(--color-text-primary);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row-date {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

/* 加载更多 */
.load-more {
  display: flex;
  justify-content: center;
  margin-top: var(--space-8);
}
.load-btn {
  padding: var(--space-3) var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-size: var(--text-small);
  transition: border-color var(--transition), color var(--transition);
}
.load-btn:hover:not(:disabled) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.load-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Empty / Error */
.empty {
  padding: var(--space-16) 0;
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-small);
}
.retry-btn {
  margin-top: var(--space-4);
  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);
}

/* Skeleton */
.skeleton-list { display: flex; flex-direction: column; gap: 0; }
.skeleton-item {
  height: 60px;
  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-bottom: 1px solid var(--color-border);
}
@keyframes shimmer { to { background-position: -200% 0; } }
</style>
