<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import {
  Bell,
  Document,
  InfoFilled,
  QuestionFilled,
  Tickets,
  Warning,
} from '@element-plus/icons-vue'
import { fetchAnnouncements, type Announcement } from '@/features/announcement'
import { debugError } from '@/shared/utils/debug'
import { formatDateTime } from '@/shared/utils/time'

const router = useRouter()
const loading = ref(false)
const announcements = ref<Announcement[]>([])
const currentPage = ref(1)
const currentPageSize = ref(20)
const total = ref(0)
const activeCategory = ref<string>('')

const categories = [
  { value: '', label: '全部', icon: Tickets, color: '#64748b' },
  { value: 'notice', label: '通知公告', icon: Bell, color: '#3b82f6' },
  { value: 'tutorial', label: '使用教程', icon: Document, color: '#10b981' },
  { value: 'rule', label: '规则说明', icon: Warning, color: '#f59e0b' },
  { value: 'faq', label: '常见问题', icon: QuestionFilled, color: '#8b5cf6' },
]

const filteredCategories = computed(() => categories)

onMounted(loadAnnouncements)

async function loadAnnouncements() {
  loading.value = true
  try {
    const result = await fetchAnnouncements({
      category: activeCategory.value || undefined,
      page: currentPage.value,
      page_size: currentPageSize.value,
    })
    announcements.value = result.items
    total.value = result.total
  } catch (err) {
    debugError('加载公告失败', err)
  } finally {
    loading.value = false
  }
}

function handleCategoryChange(category: string) {
  activeCategory.value = category
  currentPage.value = 1
  loadAnnouncements()
}

function handleSizeChange() {
  currentPage.value = 1
  loadAnnouncements()
}

function handlePageChange() {
  loadAnnouncements()
}

function viewDetail(id: number) {
  router.push(`/announcements/${id}`)
}

function getCategoryInfo(category: string) {
  return categories.find(c => c.value === category) || categories[0]
}

function getCategoryLabel(category: string) {
  const cat = categories.find(c => c.value === category)
  return cat ? cat.label : category
}
</script>

<template>
  <section class="page announcements-page" v-loading="loading">
    <div class="announcements-hero">
      <div class="page-header">
        <p class="eyebrow">平台公告</p>
        <h1>公告中心</h1>
        <p>查看平台通知、使用教程、规则说明和常见问题解答</p>
      </div>
    </div>

    <div class="category-tabs">
      <button
        v-for="cat in filteredCategories"
        :key="cat.value"
        class="category-tab"
        :class="{ active: activeCategory === cat.value }"
        @click="handleCategoryChange(cat.value)"
      >
        <el-icon :style="{ color: activeCategory === cat.value ? cat.color : '#94a3b8' }">
          <component :is="cat.icon" />
        </el-icon>
        <span>{{ cat.label }}</span>
      </button>
    </div>

    <div class="announcements-list">
      <div v-if="announcements.length === 0" class="empty-state">
        <el-icon class="empty-icon"><InfoFilled /></el-icon>
        <p>暂无公告</p>
      </div>
      <div
        v-for="item in announcements"
        :key="item.id"
        class="announcement-card"
        @click="viewDetail(item.id)"
      >
        <div class="announcement-header">
          <div class="announcement-meta">
            <el-tag
              :type="getCategoryInfo(item.category)?.value === 'notice' ? 'primary' : 'info'"
              effect="plain"
              size="small"
              class="category-tag"
              :style="{
                borderColor: getCategoryInfo(item.category)?.color || '#94a3b8',
                color: getCategoryInfo(item.category)?.color || '#94a3b8',
              }"
            >
              <el-icon><component :is="getCategoryInfo(item.category)?.icon || Bell" /></el-icon>
              {{ getCategoryLabel(item.category) }}
            </el-tag>
            <el-tag v-if="item.is_pinned" type="warning" effect="plain" size="small">置顶</el-tag>
            <el-tag v-if="item.is_important" type="danger" effect="plain" size="small">重要</el-tag>
          </div>
          <span class="announcement-date">{{
            formatDateTime(item.published_at || item.created_at)
          }}</span>
        </div>
        <h3 class="announcement-title">{{ item.title }}</h3>
        <p class="announcement-preview">
          {{ item.content.substring(0, 120) }}{{ item.content.length > 120 ? '...' : '' }}
        </p>
        <div class="announcement-footer">
          <span class="view-count">
            <el-icon><Tickets /></el-icon>
            浏览 {{ item.view_count }}
          </span>
        </div>
      </div>
    </div>

    <div class="pagination-wrap" v-if="total > 0">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="currentPageSize"
        :total="total"
        :page-sizes="[10, 20, 50]"
        layout="total, sizes, prev, pager, next"
        @current-change="handlePageChange"
        @size-change="handleSizeChange"
      />
    </div>
  </section>
</template>

<style scoped>
.announcements-page {
  display: grid;
  gap: 20px;
}

.announcements-hero {
  padding: 32px;
  border: 1px solid #e6eaf2;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(99, 102, 241, 0.06)), #ffffff;
  box-shadow: 0 14px 36px rgba(17, 24, 39, 0.06);
}

.announcements-hero :deep(.page-header) {
  max-width: 100%;
}

.category-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 16px;
  border: 1px solid #e6eaf2;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(17, 24, 39, 0.05);
}

.category-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
  color: #64748b;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.category-tab:hover {
  border-color: #cbd5e1;
  background: #f1f5f9;
  transform: translateY(-1px);
}

.category-tab.active {
  border-color: #3b82f6;
  background: #eff6ff;
  color: #3b82f6;
}

.category-tab .el-icon {
  font-size: 16px;
}

.announcements-list {
  display: grid;
  gap: 16px;
}

.announcement-card {
  padding: 24px;
  border: 1px solid #e6eaf2;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(17, 24, 39, 0.05);
  cursor: pointer;
  transition: all 0.2s;
}

.announcement-card:hover {
  border-color: #3b82f6;
  box-shadow: 0 16px 40px rgba(59, 130, 246, 0.15);
  transform: translateY(-2px);
}

.announcement-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.announcement-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.category-tag {
  display: flex;
  align-items: center;
  gap: 4px;
}

.announcement-date {
  color: #94a3b8;
  font-size: 13px;
}

.announcement-title {
  margin: 0 0 12px;
  color: #111827;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}

.announcement-preview {
  margin: 0 0 16px;
  color: #64748b;
  font-size: 14px;
  line-height: 1.7;
}

.announcement-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
}

.view-count {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #94a3b8;
  font-size: 13px;
}

.view-count .el-icon {
  font-size: 14px;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  padding: 48px;
  border: 1px solid #e6eaf2;
  border-radius: 12px;
  background: #ffffff;
}

.empty-icon {
  margin-bottom: 16px;
  color: #cbd5e1;
  font-size: 64px;
}

.empty-state p {
  margin: 0;
  color: #94a3b8;
  font-size: 16px;
}

.pagination-wrap {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

@media (max-width: 720px) {
  .announcements-hero {
    padding: 20px;
  }

  .category-tabs {
    padding: 12px;
    gap: 8px;
  }

  .category-tab {
    padding: 8px 14px;
    font-size: 13px;
  }

  .announcement-card {
    padding: 18px;
  }

  .announcement-title {
    font-size: 16px;
  }

  .announcement-preview {
    font-size: 13px;
  }
}
</style>
