<template>
  <div style="max-width: 900px;">
    <NBreadcrumb style="margin-bottom: 16px;">
      <NBreadcrumbItem>
        <NuxtLink to="/admin/content/selector">产品选择器</NuxtLink>
      </NBreadcrumbItem>
      <NBreadcrumbItem>推荐理由</NBreadcrumbItem>
    </NBreadcrumb>

    <NSpace justify="space-between" align="center" style="margin-bottom: 16px;">
      <div style="font-size: 20px; font-weight: 600; color: #111827;">推荐理由</div>
      <NSpace :size="8">
        <NuxtLink to="/admin/content/selector">
          <NButton>返回</NButton>
        </NuxtLink>
        <NButton type="primary" :loading="saving" @click="handleSave">保存</NButton>
      </NSpace>
    </NSpace>

    <NSpin :show="!loaded">
      <template v-if="loaded">
        <div style="font-size: 13px; color: #6b7280; margin-bottom: 20px;">
          每个产品在不同匹配情况下展示的推荐文案。
        </div>

        <NCard
          v-for="(reasons, pid) in matchReasons"
          :key="pid"
          style="margin-bottom: 16px;"
        >
          <template #header>
            <span style="font-size: 14px; font-weight: 600; color: #374151;">{{ pid }}</span>
          </template>
          <NForm label-placement="top">
            <NFormItem
              v-for="(text, rKey) in reasons"
              :key="rKey"
              :label="rKey"
              :label-style="{ fontFamily: 'monospace', fontSize: '12px', color: '#9ca3af' }"
            >
              <NInput v-model:value="matchReasons[pid][rKey]" />
            </NFormItem>
          </NForm>
        </NCard>

        <div class="save-bar">
          <NuxtLink to="/admin/content/selector">
            <NButton>返回</NButton>
          </NuxtLink>
          <NButton type="primary" :loading="saving" @click="handleSave">保存</NButton>
        </div>
      </template>
    </NSpin>
  </div>
</template>

<script setup>
import { NButton, NCard, NSpace, NInput, NForm, NFormItem, NSpin, NBreadcrumb, NBreadcrumbItem } from 'naive-ui'
import { useMessage } from 'naive-ui'

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

async function load() {
  const res = await adminFetch('/api/admin/site-content?key=selector')
  fullData.value = res.data
  matchReasons.value = JSON.parse(JSON.stringify(res.data.matchReasons || {}))
  loaded.value = true
}

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

onMounted(load)
</script>

<style scoped>
.save-bar { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 8px; padding: 16px 0; margin-top: 24px; background: #f0f2f5; border-top: 1px solid #e5e7eb; }
</style>
