<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { NCard, NButton, NInput, NModal, NForm, NFormItem, NSelect, NSkeleton, NPagination, NIcon, type FormRules } from 'naive-ui'
import { SendOutline } from '@vicons/ionicons5'
import { api } from '../../api/client'
import { toBeijingDate } from '../../utils/date'
import { useToast } from '../../composables/useToast'

const toast = useToast()
const notifications = ref<any[]>([])
const loading = ref(true)
const showModal = ref(false)
const form = ref({ title: '', content: '', target_type: 'all' })
const saving = ref(false)
const formRef = ref()
const rules: FormRules = {
  title: { required: true, message: '请输入公告标题', trigger: 'blur' },
}
const page = ref(1)
const pageSize = ref(20)
const total = ref(0)
onMounted(loadData)
async function loadData() {
  loading.value = true
  try { const { data } = await api.get('/admin/notifications', { params: { page: page.value, page_size: pageSize.value } }); notifications.value = data.items || []; total.value = data.total || 0 }
  finally { loading.value = false }
}
async function createNotif() {
  try { await formRef.value?.validate() } catch { return }
  saving.value = true
  try { await api.post('/admin/notifications', form.value); showModal.value = false; form.value = { title: '', content: '', target_type: 'all' }; loadData() }
  catch (e) { toast.apiError(e, '发布公告失败') }
  finally { saving.value = false }
}
</script>

<template>
  <div>
    <div style="display:flex;justify-content:space-between;margin-bottom:16px">
      <h2>🔔 系统公告</h2>
      <NButton type="primary" @click="showModal=true" class="sky-btn"><template #icon><NIcon size="14"><SendOutline /></NIcon></template>发布公告</NButton>
    </div>
    <NSkeleton v-if="loading" text :repeat="3" />
    <NCard v-for="n in notifications" :key="n.id" size="small" style="margin-bottom:8px" :title="n.title">
      <p>{{ n.content }}</p>
      <div style="font-size:11px;color:var(--text-muted);margin-top:8px">对象: {{ n.target_type }} · {{ toBeijingDate(n.created_at) }}</div>
    </NCard>
    <div v-if="total > pageSize" style="display:flex;justify-content:center;margin-top:16px">
      <NPagination :page="page" :page-size="pageSize" :item-count="total" @update:page="p => { page=p; loadData() }" />
    </div>
    <NModal v-model:show="showModal" title="发布公告">
      <NCard style="width:500px">
        <NForm ref="formRef" :model="form" :rules="rules" label-placement="left" label-width="80">
          <NFormItem path="title" label="标题" required><NInput v-model:value="form.title" /></NFormItem>
          <NFormItem path="content" label="内容"><NInput v-model:value="form.content" type="textarea" :autosize="{minRows:3}" /></NFormItem>
          <NFormItem label="对象"><NSelect v-model:value="form.target_type" :options="[{label:'全部用户',value:'all'}]" /></NFormItem>
          <NButton type="primary" :loading="saving" @click="createNotif" class="sky-btn"><template #icon><NIcon size="14"><SendOutline /></NIcon></template>发布</NButton>
        </NForm>
      </NCard>
    </NModal>
  </div>
</template>
