<template>
  <div style="max-width: 1100px">
    <n-space justify="space-between" align="center" style="margin-bottom: 20px">
      <div>
        <h1 style="margin: 0 0 4px; font-size: 20px; font-weight: 600; color: #111827">景点对比</h1>
        <p style="margin: 0; font-size: 13px; color: #9ca3af">管理「亲子游目的地怎么选」对比页面内容</p>
      </div>
      <n-space>
        <n-button type="primary" :loading="saving" @click="save">保存</n-button>
      </n-space>
    </n-space>

    <n-spin :show="!loaded">
      <template v-if="loaded">
        <n-card title="页面信息">
          <n-form label-placement="top">
            <n-form-item label="标题"><n-input v-model:value="data.title" /></n-form-item>
            <n-form-item label="副标题"><n-input v-model:value="data.subtitle" /></n-form-item>
            <n-form-item label="介绍"><n-input v-model:value="data.intro" type="textarea" :rows="3" /></n-form-item>
          </n-form>
        </n-card>

        <!-- 对比目的地 -->
        <n-card title="对比目的地" style="margin-top: 16px">
          <template #header-extra><n-button size="small" @click="data.destinations.push({ id: '', name: '', tag: '', highlight: '' })">添加</n-button></template>
          <div v-for="(dest, i) in data.destinations" :key="i" style="margin-bottom: 12px; padding: 12px; border: 1px solid #e5e7eb; border-radius: 6px;">
            <n-space justify="space-between" style="margin-bottom: 8px">
              <span style="font-weight: 500">{{ dest.name || '目的地 ' + (i+1) }}</span>
              <n-button size="tiny" type="error" quaternary @click="data.destinations.splice(i, 1)">删除</n-button>
            </n-space>
            <n-grid :cols="4" :x-gap="12">
              <n-gi><n-form-item label="ID" :show-feedback="false"><n-input v-model:value="dest.id" /></n-form-item></n-gi>
              <n-gi><n-form-item label="名称" :show-feedback="false"><n-input v-model:value="dest.name" /></n-form-item></n-gi>
              <n-gi><n-form-item label="标签" :show-feedback="false"><n-input v-model:value="dest.tag" /></n-form-item></n-gi>
              <n-gi><n-form-item label="推荐高亮" :show-feedback="false"><n-select v-model:value="dest.highlight" :options="[{label:'是',value:true},{label:'否',value:false}]" /></n-form-item></n-gi>
            </n-grid>
          </div>
        </n-card>

        <!-- 对比维度 -->
        <n-card title="对比维度" style="margin-top: 16px">
          <template #header-extra><n-button size="small" @click="data.dimensions.push({ label: '', icon: '', values: data.destinations.map(() => '') })">添加维度</n-button></template>
          <n-collapse>
            <n-collapse-item v-for="(dim, di) in data.dimensions" :key="di" :name="di">
              <template #header><strong>{{ dim.icon }} {{ dim.label || '维度 ' + (di+1) }}</strong></template>
              <template #header-extra><n-button size="tiny" type="error" quaternary @click.stop="data.dimensions.splice(di, 1)">删除</n-button></template>
              <n-grid :cols="2" :x-gap="12">
                <n-gi><n-form-item label="维度名称"><n-input v-model:value="dim.label" /></n-form-item></n-gi>
                <n-gi><n-form-item label="图标"><n-input v-model:value="dim.icon" /></n-form-item></n-gi>
              </n-grid>
              <div v-for="(dest, vi) in data.destinations" :key="vi">
                <n-form-item :label="dest.name || '目的地 ' + (vi+1)">
                  <n-input v-model:value="dim.values[vi]" type="textarea" :rows="2" />
                </n-form-item>
              </div>
            </n-collapse-item>
          </n-collapse>
        </n-card>

        <!-- 坦诚说明 -->
        <n-card title="坦诚说明" style="margin-top: 16px">
          <n-form label-placement="top">
            <n-form-item label="标题"><n-input v-model:value="data.honestNote.title" /></n-form-item>
            <n-form-item label="副标题"><n-input v-model:value="data.honestNote.subtitle" /></n-form-item>
            <n-form-item label="要点列表（每行一项）">
              <n-input :value="(data.honestNote.items||[]).join('\n')" @update:value="v => data.honestNote.items = v.split('\n').filter(Boolean)" type="textarea" :rows="6" placeholder="每行一个要点" />
            </n-form-item>
          </n-form>
        </n-card>

        <!-- 结语 -->
        <n-card title="结语" style="margin-top: 16px">
          <n-form label-placement="top">
            <n-form-item label="标题"><n-input v-model:value="data.closing.title" /></n-form-item>
            <n-form-item label="内容"><n-input v-model:value="data.closing.text" type="textarea" :rows="3" /></n-form-item>
          </n-form>
        </n-card>

        <!-- 数据来源 -->
        <n-card title="数据来源" style="margin-top: 16px">
          <n-form-item :show-feedback="false">
            <n-input v-model:value="data.dataSources" type="textarea" :rows="2" />
          </n-form-item>
        </n-card>
      </template>
    </n-spin>
  </div>
</template>

<script setup>
import { NButton, NCard, NSpace, NInput, NForm, NFormItem, NSpin, NGrid, NGi, NCollapse, NCollapseItem, NSelect } 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)

async function load() {
  const res = await adminFetch('/api/admin/site-content?key=destinations')
  data.value = typeof res.data === 'string' ? JSON.parse(res.data) : res.data
  if (!data.value.destinations) data.value.destinations = []
  if (!data.value.dimensions) data.value.dimensions = []
  if (!data.value.honestNote || typeof data.value.honestNote !== 'object') data.value.honestNote = { title: '', subtitle: '', items: [] }
  if (!data.value.closing || typeof data.value.closing !== 'object') data.value.closing = { title: '', text: '' }
  if (!data.value.dataSources) data.value.dataSources = ''
  loaded.value = true
}

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

onMounted(load)
</script>
