<script lang="ts" setup>
import { Link, useForm } from '@inertiajs/vue3'
import { watch } from 'vue'
import AdminLayout from '@/Layouts/AdminLayout.vue'
import type { KnowledgeBaseCategory } from '@/types'

interface Props {
  parentCategories: Pick<KnowledgeBaseCategory, 'id' | 'name'>[]
}

defineOptions({ layout: AdminLayout })

const props = defineProps<Props>()

const parentOptions = [
  { title: 'None (Root Category)', value: null },
  ...props.parentCategories.map(c => ({ title: c.name, value: c.id })),
]

const form = useForm({
  name: '',
  slug: '',
  description: '',
  icon: '',
  parent_id: null as number | null,
  sort_order: 0,
  is_visible: true,
})

function generateSlug(name: string): string {
  return name
    .toLowerCase()
    .replace(/[^a-z0-9]+/g, '-')
    .replace(/^-|-$/g, '')
}

let slugManuallyEdited = false

watch(() => form.name, (newName: string) => {
  if (!slugManuallyEdited) {
    form.slug = generateSlug(newName)
  }
})

function onSlugInput(): void {
  slugManuallyEdited = true
}

function submit(): void {
  form.post('/knowledge-base/categories', {
    preserveScroll: true,
  })
}
</script>

<template>
  <div>
    <!-- Header -->
    <div class="d-flex align-center justify-space-between mb-6">
      <div>
        <div class="d-flex align-center gap-2 mb-1">
          <Link href="/knowledge-base/categories" class="text-decoration-none">
            <VBtn icon="tabler-arrow-left" variant="text" size="small" />
          </Link>
          <span class="text-h4 font-weight-bold">Create Category</span>
        </div>
        <div class="text-body-2 text-medium-emphasis ms-10">
          Add a new knowledge base category
        </div>
      </div>
    </div>

    <form @submit.prevent="submit">
      <VRow>
        <!-- Category Details -->
        <VCol cols="12" lg="8">
          <VCard title="Category Details" class="mb-6">
            <VCardText>
              <VRow>
                <VCol cols="12">
                  <VTextField
                    v-model="form.name"
                    label="Name"
                    placeholder="e.g. Getting Started, Billing, VPS Management"
                    :error-messages="form.errors.name"
                  />
                </VCol>
                <VCol cols="12">
                  <VTextField
                    v-model="form.slug"
                    label="Slug"
                    placeholder="e.g. getting-started"
                    :error-messages="form.errors.slug"
                    @input="onSlugInput"
                  />
                </VCol>
                <VCol cols="12">
                  <VTextarea
                    v-model="form.description"
                    label="Description"
                    placeholder="Brief description of this category"
                    rows="3"
                    :error-messages="form.errors.description"
                  />
                </VCol>
                <VCol cols="12" md="6">
                  <VTextField
                    v-model="form.icon"
                    label="Icon"
                    placeholder="e.g. tabler-server"
                    :error-messages="form.errors.icon"
                  />
                  <p class="text-body-2 text-medium-emphasis mt-1">
                    Use Tabler icon names (e.g. tabler-server, tabler-credit-card)
                  </p>
                </VCol>
                <VCol cols="12" md="6">
                  <VSelect
                    v-model="form.parent_id"
                    label="Parent Category"
                    :items="parentOptions"
                    :error-messages="form.errors.parent_id"
                  />
                </VCol>
              </VRow>
            </VCardText>
          </VCard>
        </VCol>

        <!-- Sidebar -->
        <VCol cols="12" lg="4">
          <VCard title="Options" class="mb-6">
            <VCardText>
              <VTextField
                v-model="form.sort_order"
                label="Sort Order"
                type="number"
                min="0"
                placeholder="0"
                :error-messages="form.errors.sort_order"
                class="mb-4"
              />
              <p class="text-body-2 text-medium-emphasis mb-4">
                Lower values appear first in the list.
              </p>
              <VSwitch
                v-model="form.is_visible"
                label="Visible"
                color="primary"
                :error-messages="form.errors.is_visible"
              />
            </VCardText>
          </VCard>

          <!-- Actions -->
          <VCard>
            <VCardText>
              <VBtn
                type="submit"
                color="primary"
                block
                :loading="form.processing"
                :disabled="form.processing"
                prepend-icon="tabler-check"
                class="mb-3"
              >
                Create Category
              </VBtn>
              <Link href="/knowledge-base/categories" class="text-decoration-none">
                <VBtn
                  variant="outlined"
                  block
                >
                  Cancel
                </VBtn>
              </Link>
            </VCardText>
          </VCard>
        </VCol>
      </VRow>
    </form>
  </div>
</template>
