<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { NButton, NCard, NEmpty, NPagination, NSkeleton, NSpace, NTag, NIcon } from 'naive-ui'
import { CheckmarkCircleOutline } from '@vicons/ionicons5'
import { api } from '../../api/client'
import type { NotificationItem } from '../../types'
import { useToast } from '../../composables/useToast'
import { toBeijingDateTime } from '../../utils/date'

const toast = useToast()
const items = ref<NotificationItem[]>([])
const loading = ref(true)
const markAllLoading = ref(false)
const page = ref(1)
const pageSize = ref(20)
const total = ref(0)

onMounted(loadNotifications)

async function loadNotifications() {
  loading.value = true
  try {
    const { data } = await api.get('/notifications', { params: { page: page.value, page_size: pageSize.value } })
    items.value = data.items || []
    total.value = data.total || 0
  } catch (e) { toast.apiError(e, '加载通知失败') }
  finally { loading.value = false }
}

async function markRead(nid: string) {
  try {
    await api.post(`/notifications/${nid}/read`)
    const n = items.value.find(i => i.id === nid)
    if (n) n.is_read = true
  } catch (e) { toast.apiError(e, '标记已读失败') }
}

async function markAllRead() {
  markAllLoading.value = true
  try {
    await api.post('/notifications/read-all')
    items.value.forEach(i => { i.is_read = true })
  } catch (e) { toast.apiError(e, '操作失败') }
  finally { markAllLoading.value = false }
}

async function handleDelete(nid: string) {
  try {
    await api.delete(`/notifications/${nid}`)
    items.value = items.value.filter(i => i.id !== nid)
    toast.success('已删除')
  } catch (e) { toast.apiError(e, '删除失败') }
}
</script>

<template>
  <div class="notif-page">
    <div class="notif-header">
      <h2 style="margin:0">🔔 通知中心</h2>
      <NButton size="small" :loading="markAllLoading" @click="markAllRead" v-if="items.some(i => !i.is_read)" class="sky-btn"><template #icon><NIcon size="14"><CheckmarkCircleOutline /></NIcon></template>
        全部标为已读
      </NButton>
    </div>

    <NSkeleton v-if="loading" text :repeat="6" />

    <NEmpty v-else-if="!items.length" description="暂无通知" />

    <NCard v-for="n in items" :key="n.id" size="small" class="notif-card" :class="{ 'notif-unread': !n.is_read }">
      <div>
        <div class="notif-title-row">
          <NTag v-if="!n.is_read" size="tiny" type="info" :bordered="false">未读</NTag>
          <strong class="notif-title">{{ n.title }}</strong>
        </div>
        <div v-if="n.content" class="notif-content">{{ n.content }}</div>
        <div class="notif-meta">
          <span class="notif-time">{{ toBeijingDateTime(n.created_at) }}</span>
          <NSpace>
            <NButton v-if="!n.is_read" size="tiny" text @click="markRead(n.id)">标为已读</NButton>
            <NButton size="tiny" text type="error" @click="handleDelete(n.id)">删除</NButton>
          </NSpace>
        </div>
      </div>
    </NCard>

    <div v-if="total > pageSize" style="display:flex;justify-content:center;margin-top:24px">
      <NPagination :page="page" :page-size="pageSize" :item-count="total" @update:page="p => { page=p; loadNotifications() }" />
    </div>
  </div>
</template>

<style scoped>
.notif-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;
}
.notif-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.notif-card {
  margin-bottom: 6px;
  background: var(--bg-card) !important;
}
.notif-card.notif-unread {
  background: var(--bg-hover) !important;
}
.notif-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.notif-title {
  font-size: 14px;
  color: var(--text-primary);
}
.notif-content {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.notif-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
}
.notif-time {
  color: var(--text-muted);
}
@media (max-width: 768px) {
  .notif-page { padding: 12px; }
  .notif-header h2 { font-size: 20px; }
  .notif-header { margin-bottom: 16px; }
}
</style>
