<script setup lang="ts">
import { ref } from 'vue'
import { router, Head } from '@inertiajs/vue3'
import AppLayout from '@/layouts/AppLayout.vue'
import { Toaster } from '@/components/ui/sonner'
import { Input } from '@/components/ui/input'
import { Button } from '@/components/ui/button'
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select'
import type { BreadcrumbItem } from '@/types'

const breadcrumbs: BreadcrumbItem[] = [
    { title: 'Панель управления', href: '/dashboard' },
    { title: 'Документация', href: '/documentation' },
    { title: 'Создать', href: '' },
]

const props = defineProps<{ categories: any[] }>()

const title = ref('')
const content = ref('')
const category_id = ref<string | null>(null)

function submit() {
    router.post('/documentation', {
        title: title.value,
        content: content.value,
        category_id: category_id.value,
    })
}
</script>

<template>
    <Head title="Создать документ" />

    <AppLayout :breadcrumbs="breadcrumbs">
        <Toaster />

        <div class="p-4 max-w-2xl flex flex-col gap-4">

            <!-- Header -->
            <div class="mb-4 flex flex-col gap-1">
                <h1 class="text-2xl sm:text-3xl font-bold">
                    Новый документ
                </h1>
                <p class="text-sm text-muted-foreground">
                    Добавление статьи в базу знаний
                </p>
            </div>

            <Input
                v-model="title"
                placeholder="Название документа"
            />

            <Select v-model="category_id">
                <SelectTrigger>
                    <SelectValue placeholder="Выберите категорию" />
                </SelectTrigger>
                <SelectContent>
                    <SelectItem :value="null">Без категории</SelectItem>
                    <SelectItem
                        v-for="c in categories"
                        :key="c.id"
                        :value="c.id"
                    >
                        {{ c.name }}
                    </SelectItem>
                </SelectContent>
            </Select>

            <textarea
                v-model="content"
                class="w-full min-h-[200px] rounded-md border px-3 py-2 text-sm"
                placeholder="Содержимое документа..."
            />

            <Button @click="submit">
                Сохранить
            </Button>

        </div>
    </AppLayout>
</template>
