<script setup lang="ts">
definePageMeta({ title: '新建文章' })

const { fetchData } = useClientApi()

const state = reactive({
  title: '',
  slug: '',
  excerpt: '',
  bodyMarkdown: '',
  visibility: 'private',
})
const loading = ref(false)

async function submit() {
  loading.value = true
  try {
    const { post } = await fetchData<{ post: { id: number } }>('/api/me/posts', {
      method: 'POST',
      body: {
        title: state.title,
        slug: state.slug,
        excerpt: state.excerpt,
        bodyMarkdown: state.bodyMarkdown,
        visibility: state.visibility,
      },
    })
    const id = post.id
    await navigateTo(`/me/posts/${id}`)
  } finally {
    loading.value = false
  }
}
</script>

<template>
  <UContainer class="py-8 max-w-6xl space-y-6">
    <div class="flex flex-wrap items-center justify-between gap-3">
      <h1 class="text-2xl font-semibold tracking-tight">
        新建文章
      </h1>
      <UButton to="/me/posts" variant="ghost" color="neutral">
        返回列表
      </UButton>
    </div>

    <UForm :state="state" class="space-y-6" @submit.prevent="submit">
      <UCard :ui="{ body: 'p-4 sm:p-6' }">
        <PostBodyMarkdownEditor v-model="state.bodyMarkdown" />
        <UFormField label="正文" name="bodyMarkdown" required class="sr-only" />
      </UCard>

      <UCard :ui="{ body: 'p-4 sm:p-6 space-y-4' }">
        <UCollapsible :unmount-on-hide="false" :default-open="true">
          <UButton
            type="button"
            color="neutral"
            variant="subtle"
            block
            class="justify-between font-medium"
            label="文章设置"
            trailing
            trailing-icon="i-lucide-chevron-down"
          />
          <template #content>
            <div class="pt-4 space-y-4 border-t border-default mt-4">
              <UFormField label="标题" name="title" required>
                <UInput v-model="state.title" />
              </UFormField>
              <UFormField label="slug" name="slug" required>
                <UInput v-model="state.slug" />
              </UFormField>
              <UFormField label="摘要" name="excerpt" required>
                <UInput v-model="state.excerpt" />
              </UFormField>
              <UFormField label="可见性" name="visibility">
                <USelect
                  v-model="state.visibility"
                  :items="[
                    { label: '私密', value: 'private' },
                    { label: '公开', value: 'public' },
                    { label: '仅链接', value: 'unlisted' },
                  ]"
                />
              </UFormField>
            </div>
          </template>
        </UCollapsible>
      </UCard>

      <div class="flex flex-wrap gap-2">
        <UButton type="submit" :loading="loading">
          创建
        </UButton>
      </div>
    </UForm>
  </UContainer>
</template>
