<template>
  <div>
    <n-space justify="space-between" align="center" style="margin-bottom: 20px;">
      <div>
        <h1 style="margin: 0 0 4px; font-size: 22px; color: #1a1a2e;">合作伙伴</h1>
        <p style="margin: 0; font-size: 13px; color: #888;">管理政府、协会、学术、景区、酒店等合作伙伴信息</p>
      </div>
      <n-space>
        <n-button tag="a" href="/partners" target="_blank">查看前台 ↗</n-button>
        <n-button type="primary" :loading="saving" @click="save">保存</n-button>
      </n-space>
    </n-space>

    <n-spin :show="!loaded">
      <template v-if="loaded">
        <n-card
          v-for="section in sections"
          :key="section.key"
          style="margin-bottom: 12px;"
        >
          <template #header>
            <n-space justify="space-between" align="center" style="cursor: pointer;" @click="open[section.key] = !open[section.key]">
              <span>{{ section.label }} ({{ (data[section.key] || []).length }})</span>
              <n-space>
                <n-button size="small" type="primary" @click.stop="addItem(section.key, section.template)">添加</n-button>
                <span style="color: #999; font-size: 12px;">{{ open[section.key] ? '▼' : '▶' }}</span>
              </n-space>
            </n-space>
          </template>

          <div v-show="open[section.key]">
            <div
              v-for="(item, i) in (data[section.key] || [])"
              :key="i"
              style="display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap;"
            >
              <n-input v-model:value="item.name" placeholder="名称" style="flex: 2; min-width: 100px;" />
              <n-input v-if="item.type !== undefined" v-model:value="item.type" placeholder="类型" style="flex: 1; min-width: 80px;" />
              <n-input v-if="item.description !== undefined" v-model:value="item.description" placeholder="描述" style="flex: 2; min-width: 100px;" />
              <n-input v-if="item.relationship !== undefined" v-model:value="item.relationship" placeholder="关系" style="flex: 1; min-width: 80px;" />
              <n-input v-if="item.platform !== undefined" v-model:value="item.platform" placeholder="平台" style="flex: 1; min-width: 80px;" />
              <n-input v-if="item.status !== undefined" v-model:value="item.status" placeholder="状态" style="flex: 1; min-width: 80px;" />
              <n-input v-if="item.detail !== undefined" v-model:value="item.detail" placeholder="详情" style="flex: 2; min-width: 100px;" />
              <n-input v-if="item.outlet !== undefined" v-model:value="item.outlet" placeholder="媒体" style="flex: 1; min-width: 80px;" />
              <n-input v-if="item.title !== undefined" v-model:value="item.title" placeholder="标题" style="flex: 2; min-width: 100px;" />
              <n-input v-if="item.date !== undefined" v-model:value="item.date" placeholder="日期" style="flex: 1; min-width: 80px;" />
              <n-input v-if="item.url !== undefined" v-model:value="item.url" placeholder="链接" style="flex: 1; min-width: 80px;" />
              <n-input v-if="item.summary !== undefined" v-model:value="item.summary" placeholder="摘要" style="flex: 2; min-width: 100px;" />
              <n-space v-if="item.verified !== undefined" align="center">
                <n-switch v-model:value="item.verified" size="small" />
                <span style="font-size: 12px; color: #666; white-space: nowrap;">已认证</span>
              </n-space>
              <n-button size="small" type="error" @click="data[section.key].splice(i, 1)">删</n-button>
            </div>
            <p v-if="!(data[section.key] || []).length" style="color: #ccc; font-size: 13px; text-align: center; padding: 10px;">暂无数据</p>
          </div>
        </n-card>
      </template>
    </n-spin>
  </div>
</template>

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

definePageMeta({ layout: 'admin', middleware: 'admin' })
const { adminFetch } = useAdmin()
const message = useMessage()
const data = ref({})
const loaded = ref(false)
const saving = ref(false)
const open = reactive({})

const sections = [
  { key: 'govPartners', label: '政府合作', template: { name: '', type: '', description: '', verified: false } },
  { key: 'associations', label: '行业协会', template: { name: '', type: '', relationship: '', verified: false } },
  { key: 'academicCoops', label: '学术合作', template: { name: '', type: '', relationship: '', description: '', verified: false } },
  { key: 'scenicPartners', label: '景区合作', template: { name: '', description: '', verified: false } },
  { key: 'hotelPartners', label: '酒店合作', template: { name: '', description: '', verified: false } },
  { key: 'platformEndorsements', label: '平台认证', template: { platform: '', status: '', detail: '', verified: false } },
  { key: 'mediaReports', label: '媒体报道', template: { outlet: '', title: '', date: '', url: '', summary: '' } },
]

function addItem(key, template) {
  if (!data.value[key]) data.value[key] = []
  data.value[key].push({ ...template })
}

async function load() {
  const res = await adminFetch('/api/admin/site-content?key=partners')
  data.value = res.data
  loaded.value = true
}

async function save() {
  saving.value = true
  try {
    await adminFetch('/api/admin/site-content', { method: 'PUT', body: { key: 'partners', data: data.value } })
    message.success('已保存')
  } catch {
    message.error('保存失败')
  } finally {
    saving.value = false
  }
}

onMounted(load)
</script>
