<script setup lang="ts">
import { ref, onMounted, h } from 'vue'
import { NButton, NDataTable, NTag, NSkeleton, NPagination, NPopconfirm, NSpace, NIcon } from 'naive-ui'
import { RefreshOutline } from '@vicons/ionicons5'
import { api } from '../../api/client'
import { toBeijingDate } from '../../utils/date'
import { useToast } from '../../composables/useToast'

const toast = useToast()
const items = ref<any[]>([])
const loading = ref(true)
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('/settings/feedback', { 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 resolveItem(fid: string) {
  try { await api.post('/settings/feedback/' + fid + '/resolve'); toast.success('已标记为已处理'); await loadData() }
  catch (e) { toast.apiError(e, '操作失败') }
}
async function deleteItem(fid: string) {
  try { await api.delete('/settings/feedback/' + fid); toast.success('已删除'); await loadData() }
  catch (e) { toast.apiError(e, '删除失败') }
}
const typeMap: Record<string,string> = { bug:'错误', help:'求助', suggestion:'建议' }
const cols = [
  { title: '用户', key: 'user_id', width: 80, render: (r: any) => r.user_id?.slice(0,8)+'...' },
  { title: '类型', key: 'type', width: 70, render: (r: any) => h(NTag, { size:'tiny', type: r.type==='bug'?'error':r.type==='help'?'warning':'info' }, typeMap[r.type]||r.type) },
  { title: '内容', key: 'detail', ellipsis: true, minWidth: 200 },
  { title: '状态', key: 'resolved', width: 60, render: (r: any) => r.resolved ? h(NTag, {size:'tiny',type:'success'}, '已处理') : h(NTag, {size:'tiny',type:'error'}, '待处理') },
  { title: '时间', key: 'created_at', width: 90, render: (r: any) => toBeijingDate(r.created_at) || '—' },
  { title: '操作', key: 'actions', width: 120, render: (r: any) => h(NSpace, null, [
    !r.resolved ? h(NButton, {size:'tiny', onClick: ()=>resolveItem(r.id) }, '处理') : null,
    h(NPopconfirm, { onPositiveClick: ()=>deleteItem(r.id) }, { trigger: () => h(NButton, {size:'tiny', type:'error'}, '删除') }),
  ])},
]
const scrollX = 620
</script>

<template>
  <div>
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px">
      <h2 style="margin:0">💬 用户反馈 ({{ total }})</h2>
      <NSpace>
        <NButton size="small" @click="loadData" class="sky-btn"><template #icon><NIcon size="14"><RefreshOutline /></NIcon></template>刷新</NButton>
      </NSpace>
    </div>
    <NSkeleton v-if="loading" text :repeat="5" />
    <NDataTable v-else :columns="cols" :data="items" size="small" :bordered="false" :scroll-x="scrollX" />
    <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>
  </div>
</template>
