<script setup lang="ts">
/**
 * 公告中心
 *
 * 展示当前生效的公告，按类型筛选 + 分页，置顶公告优先
 */
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ArrowRight, Bell, Clock, View } from '@element-plus/icons-vue'
import AppHeader from '@/components/layout/AppHeader.vue'
import AppFooter from '@/components/layout/AppFooter.vue'
import EmptyState from '@/components/common/EmptyState.vue'
import { getNoticePageApi } from '@/api/notice'
import type { NoticeItem } from '@/types/notice'
import type { PageResult } from '@/types/common'
import { formatDateTime } from '@/utils/date'
import { getNoticeTypeMeta, stripNoticeHtml, formatNoticeRange } from '@/utils/notice'

const router = useRouter()

const TYPE_TABS = [
  { label: '全部公告', value: undefined },
  { label: '重要', value: 1 },
  { label: '活动', value: 2 },
  { label: '普通', value: 0 }
] as const

const loading = ref(true)
const notices = ref<NoticeItem[]>([])
const page = ref<PageResult<NoticeItem>>({
  records: [],
  total: 0,
  current: 1,
  size: 10,
  pages: 0
})
const activeType = ref<0 | 1 | 2 | undefined>(undefined)

async function loadNotices() {
  loading.value = true
  try {
    page.value = await getNoticePageApi({
      current: page.value.current,
      size: page.value.size,
      type: activeType.value
    })
    notices.value = page.value.records || []
  } catch {
    notices.value = []
    page.value.total = 0
  } finally {
    loading.value = false
  }
}

function switchType(type?: 0 | 1 | 2) {
  if (activeType.value === type) return
  activeType.value = type
  page.value.current = 1
  loadNotices()
}

function onPageChange(current: number) {
  page.value.current = current
  loadNotices()
  window.scrollTo({ top: 0, behavior: 'smooth' })
}

function goDetail(notice: NoticeItem) {
  router.push(`/notice/${notice.id}`)
}

onMounted(() => {
  loadNotices()
})
</script>

<template>
  <div class="notice-page">
    <AppHeader />

    <main class="notice-main">
      <div class="container">
        <div class="page-head">
          <h1 class="page-title">
            <span class="title-badge">
              <el-icon :size="20"><Bell /></el-icon>
            </span>
            公告中心
          </h1>
          <p class="page-desc">零食商城的最新动态、系统通知与优惠活动</p>
        </div>

        <div class="filter-bar">
          <div class="type-tabs">
            <button
              v-for="tab in TYPE_TABS"
              :key="String(tab.value)"
              type="button"
              class="type-tab"
              :class="{ active: activeType === tab.value }"
              @click="switchType(tab.value)"
            >
              {{ tab.label }}
            </button>
          </div>
          <span class="total-text">共 {{ page.total }} 条公告</span>
        </div>

        <div v-if="loading" class="notice-list">
          <div v-for="i in 6" :key="i" class="notice-skeleton" />
        </div>

        <EmptyState
          v-else-if="notices.length === 0"
          description="暂无公告，稍后再来看看吧"
        />

        <template v-else>
          <div class="notice-list">
            <article
              v-for="notice in notices"
              :key="notice.id"
              class="notice-card"
              @click="goDetail(notice)"
            >
              <div class="card-body">
                <div class="card-badges">
                  <span
                    class="type-badge"
                    :class="getNoticeTypeMeta(notice.type).className"
                  >
                    {{ getNoticeTypeMeta(notice.type).label }}
                  </span>
                  <span v-if="notice.isTop === 1" class="top-badge">置顶</span>
                </div>
                <h2 class="notice-title">{{ notice.title }}</h2>
                <p class="notice-preview">{{ stripNoticeHtml(notice.content) }}</p>
                <div class="notice-meta">
                  <span class="meta-item">
                    <el-icon :size="14"><Clock /></el-icon>
                    {{ formatDateTime(notice.createTime) }}
                  </span>
                  <span class="meta-item">
                    <el-icon :size="14"><View /></el-icon>
                    {{ notice.viewCount ?? 0 }} 次浏览
                  </span>
                  <span class="meta-item">
                    有效期：{{ formatNoticeRange(notice.startTime, notice.endTime) }}
                  </span>
                </div>
              </div>
              <span class="card-arrow">
                <el-icon :size="18"><ArrowRight /></el-icon>
              </span>
            </article>
          </div>

          <div v-if="page.total > page.size" class="pagination-wrap">
            <el-pagination
              background
              layout="prev, pager, next"
              :current-page="page.current"
              :page-size="page.size"
              :total="page.total"
              @current-change="onPageChange"
            />
          </div>
        </template>
      </div>
    </main>

    <AppFooter />
  </div>
</template>

<style lang="scss" scoped>
.notice-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: $bg-page;
}

.notice-main {
  flex: 1;
  padding: 28px 0 48px;
}

.container {
  max-width: $container-max;
  margin: 0 auto;
  padding: 0 24px;
}

// ==================== 页头 ====================
.page-head {
  margin-bottom: 20px;
}

.page-title {
  margin: 0;
  font-family: 'Fredoka', 'PingFang SC', sans-serif;
  font-size: $font-size-xxl;
  font-weight: 700;
  color: $color-text-primary;
  display: flex;
  align-items: center;
  gap: 10px;

  .title-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: $color-primary-light;
    color: $color-primary;
  }
}

.page-desc {
  margin: 10px 0 0;
  font-size: $font-size-sm;
  color: $color-text-secondary;
}

// ==================== 筛选栏 ====================
.filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 18px;
  margin-bottom: 24px;
  background: $bg-surface;
  border: 2px solid $color-border;
  border-radius: $radius-lg;
  box-shadow: $clay-shadow-sm;
}

.type-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.type-tab {
  flex-shrink: 0;
  min-height: 40px;
  padding: 0 18px;
  border: 2px solid transparent;
  border-radius: $radius-full;
  background: transparent;
  color: $color-text-secondary;
  font-size: $font-size-md;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s;

  &:hover {
    color: $color-primary;
    background: $color-primary-light;
  }

  &.active {
    color: #fff;
    background: linear-gradient(135deg, $color-primary, $color-cta);
    border-color: $color-border-dark;
    box-shadow: 0 3px 0 0 $color-primary-dark;
  }
}

.total-text {
  font-size: $font-size-sm;
  color: $color-text-secondary;
  font-weight: 500;
}

// ==================== 公告列表 ====================
.notice-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.notice-skeleton {
  height: 156px;
  border-radius: $radius-lg;
  background: $bg-hover;
}

.notice-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 24px;
  background: $bg-surface;
  border: 2px solid $color-border;
  border-radius: $radius-lg;
  box-shadow: $clay-shadow-sm;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;

  &:hover {
    transform: translateY(-3px);
    box-shadow: $clay-shadow-md;
    border-color: $color-border-dark;
  }
}

.card-body {
  flex: 1;
  min-width: 0;
}

.card-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.type-badge,
.top-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 10px;
  border-radius: $radius-full;
  font-size: $font-size-xs;
  font-weight: 700;
  line-height: 1.5;
}

.type-badge {
  &.type-normal {
    background: $bg-hover;
    color: $color-text-secondary;
  }

  &.type-important {
    background: #FEF3C7;
    color: $color-warning;
  }

  &.type-event {
    background: $color-primary-light;
    color: $color-primary;
  }
}

.top-badge {
  background: linear-gradient(135deg, $color-primary, $color-cta);
  color: #fff;
}

.notice-title {
  margin: 0 0 10px;
  font-size: $font-size-xl;
  font-weight: 700;
  color: $color-text-primary;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.notice-preview {
  margin: 0 0 14px;
  font-size: $font-size-sm;
  color: $color-text-regular;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notice-meta {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: $font-size-xs;
  color: $color-text-secondary;
}

.meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.card-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: 2px solid $color-border;
  border-radius: $radius-full;
  background: $color-primary-light;
  color: $color-primary;
  transition: transform 0.2s ease, border-color 0.2s ease;

  .notice-card:hover & {
    transform: translateX(3px);
    border-color: $color-primary;
  }
}

// ==================== 分页 ====================
.pagination-wrap {
  display: flex;
  justify-content: center;
  padding: 28px 0 8px;
}

// ==================== 响应式 ====================
@media (max-width: 640px) {
  .container {
    padding: 0 16px;
  }

  .page-title {
    font-size: $font-size-xl;
  }

  .notice-card {
    padding: 18px;
    gap: 12px;
  }

  .notice-title {
    font-size: $font-size-lg;
  }

  .notice-meta {
    gap: 12px;
  }

  .card-arrow {
    display: none;
  }
}
</style>
