<template>
  <div style="max-width: 900px;">
    <n-space justify="space-between" align="center" style="margin-bottom: 20px;">
      <div>
        <div style="font-size: 20px; font-weight: 600; color: #111827; margin-bottom: 4px;">景点详情</div>
        <div style="font-size: 13px; color: #9ca3af;">管理各景点的详细介绍 · 对应官网「目的地」详情页</div>
      </div>
      <a href="/destinations" target="_blank">
        <n-button>查看前台</n-button>
      </a>
    </n-space>

    <n-spin v-if="!loaded" style="display:block; padding: 60px; text-align: center;" />
    <template v-else>
      <n-space vertical :size="8">
        <NuxtLink
          v-for="item in items"
          :key="item._index"
          :to="`/admin/content/destinations-detail/${item._index}`"
          style="text-decoration: none;"
        >
          <n-card hoverable>
            <n-space justify="space-between" align="center">
              <div>
                <div style="font-size: 15px; font-weight: 600; color: #111827; margin-bottom: 4px;">{{ item.name || '未命名' }}</div>
                <div v-if="item.subtitle" style="font-size: 13px; color: #6b7280;">{{ item.subtitle }}</div>
              </div>
              <n-space align="center">
                <n-tag v-if="item.tag" type="success" size="small">{{ item.tag }}</n-tag>
                <span style="font-size: 20px; color: #d1d5db;">&rsaquo;</span>
              </n-space>
            </n-space>
          </n-card>
        </NuxtLink>
      </n-space>
    </template>
  </div>
</template>

<script setup>
import { NButton, NCard, NSpace, NTag, NSpin } from 'naive-ui'

definePageMeta({ layout: 'admin', middleware: 'admin' })
const { adminFetch } = useAdmin()
const items = ref([]); const loaded = ref(false)
onMounted(async () => {
  try {
    const res = await adminFetch('/api/admin/site-content?key=destinations-detail')
    const data = res.data
    const arr = Array.isArray(data) ? data : (data.destinations || [])
    items.value = arr.map((d, i) => ({
      _index: i, name: d.name || '', subtitle: d.subtitle || '', tag: d.tag || '', id: d.id || '',
    }))
  } catch {}
  loaded.value = true
})
</script>
