<template>
  <div>
    <div class="flex items-center justify-between mb-6">
      <div>
        <NuxtLink to="/admin/book" class="text-sm text-white/40 hover:text-white/60 transition-colors">
          ← Chapitres
        </NuxtLink>
        <h1 class="font-display text-2xl font-bold text-white mt-1">
          {{ chapter?.slug }}
        </h1>
      </div>
      <AdminSaveButton :saving="saving" :saved="saved" @save="save" />
    </div>

    <template v-if="chapter">
      <AdminFormSection title="Frontmatter" open>
        <textarea
          v-model="frontmatter"
          class="fm-textarea"
          rows="6"
          spellcheck="false"
        />
      </AdminFormSection>

      <AdminFormSection title="Contenu Markdown" open>
        <AdminMarkdownEditor v-model="body" :rows="30" />
      </AdminFormSection>
    </template>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  layout: 'admin',
  middleware: 'admin',
})

const route = useRoute()
const slug = computed(() => route.params.slug as string)

const { data: chapter } = await useFetch(() => `/api/admin/chapters/${slug.value}`)

const frontmatter = ref('')
const body = ref('')

watch(chapter, (val) => {
  if (val) {
    frontmatter.value = val.frontmatter ?? ''
    body.value = val.body ?? ''
  }
}, { immediate: true })

const saving = ref(false)
const saved = ref(false)

async function save() {
  saving.value = true
  saved.value = false
  try {
    await $fetch(`/api/admin/chapters/${slug.value}`, {
      method: 'PUT',
      body: {
        frontmatter: frontmatter.value,
        body: body.value,
      },
    })
    saved.value = true
    setTimeout(() => { saved.value = false }, 2000)
  }
  finally {
    saving.value = false
  }
}
</script>

<style scoped>
.fm-textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid hsl(20 8% 18%);
  border-radius: 0.5rem;
  background: hsl(20 8% 4%);
  color: hsl(36 80% 76%);
  font-family: var(--font-mono, monospace);
  font-size: 0.85rem;
  line-height: 1.7;
  resize: vertical;
}

.fm-textarea:focus {
  outline: none;
  border-color: hsl(12 76% 48% / 0.5);
}
</style>
