<script setup lang="ts">
import { ref } from 'vue'
import { router, usePage, Head } from '@inertiajs/vue3'
import AppLayout from '@/layouts/AppLayout.vue'
import type { BreadcrumbItem } from '@/types'

import { Input } from '@/components/ui/input'
import { Button } from '@/components/ui/button'
import { Textarea } from '@/components/ui/textarea'
import { Toaster } from '@/components/ui/sonner'
import { toast } from 'vue-sonner'

const props = defineProps<{
    doc: {
        id: number
        title: string
        content: string
    }
}>()

const form = ref({
    title: props.doc.title,
    content: props.doc.content,
})

const loading = ref(false)

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

function submit() {
    loading.value = true

    router.put(`/documentation/${props.doc.id}`, form.value, {
        onSuccess: () => {
            toast.success('Документ обновлён')
        },
        onError: () => {
            toast.error('Ошибка обновления')
        },
        onFinish: () => {
            loading.value = false
        }
    })
}
</script>

<template>
    <Head title="Редактирование документа" />

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

        <div class="p-4 max-w-3xl mx-auto">

            <!-- Header -->
            <div class="mb-6">
                <h1 class="text-2xl sm:text-3xl font-bold">
                    Редактирование документа
                </h1>
                <p class="text-sm text-muted-foreground">
                    Обновите информацию в базе знаний
                </p>
            </div>

            <!-- Form -->
            <div class="space-y-4 bg-white p-6 rounded-xl border shadow-sm">

                <div class="space-y-2">
                    <label class="text-sm font-medium">Заголовок</label>
                    <Input
                        v-model="form.title"
                        placeholder="Введите заголовок"
                    />
                </div>

                <div class="space-y-2">
                    <label class="text-sm font-medium">Содержимое</label>
                    <Textarea
                        v-model="form.content"
                        rows="10"
                        placeholder="Описание, инструкции, ссылки..."
                    />
                </div>

                <div class="flex justify-between gap-3 pt-4">
                    <Button
                        variant="outline"
                        @click="$inertia.visit('/documentation')"
                    >
                        Назад
                    </Button>

                    <Button
                        :disabled="loading"
                        @click="submit"
                    >
                        {{ loading ? 'Сохранение...' : 'Сохранить' }}
                    </Button>
                </div>

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