<script setup lang="ts">
import { Head, Link, useForm } from '@inertiajs/vue3';
import { ArrowLeft } from '@lucide/vue';
import { computed } from 'vue';
import Heading from '@/components/Heading.vue';
import InputError from '@/components/InputError.vue';
import RichTextEditor from '@/components/RichTextEditor.vue';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { dashboard } from '@/routes';
import type { BreadcrumbItem } from '@/types';

interface JenisOption { value: string; label: string; }
interface Kategori {
    id: number;
    nama_kategori: string;
    judul: string | null;
    deskripsi: string | null;
    alias: string;
    jenis: string;
    status: boolean;
}

const props = defineProps<{
    kategori: Kategori;
    jenisOptions: JenisOption[];
}>();

defineOptions({
    layout: {
        breadcrumbs: [
            { title: 'Dashboard', href: dashboard() },
            { title: 'Kategori Landing', href: '/kategoris' },
            { title: 'Edit', href: '/kategoris' },
        ] as BreadcrumbItem[],
    },
});

const form = useForm({
    nama_kategori: props.kategori.nama_kategori,
    judul: props.kategori.judul ?? '',
    deskripsi: props.kategori.deskripsi ?? '',
    alias: props.kategori.alias,
    jenis: props.kategori.jenis,
    status: props.kategori.status,
});

const isRedirect = computed(() => form.jenis === 'Redirect');

const submit = () => form.put(`/kategoris/${props.kategori.id}`);
</script>

<template>
    <Head title="Edit Kategori" />

    <div class="flex flex-col space-y-6">
        <div>
            <Button as-child variant="ghost" size="sm" class="mb-2">
                <Link href="/kategoris"><ArrowLeft class="size-4" /> Kembali</Link>
            </Button>
            <Heading :title="`Edit: ${props.kategori.nama_kategori}`" description="Ubah kategori landing" />
        </div>

        <form @submit.prevent="submit" class="max-w-2xl space-y-6">
            <div class="grid gap-2">
                <Label for="nama_kategori">Nama Kategori <span class="text-destructive">*</span></Label>
                <Input id="nama_kategori" v-model="form.nama_kategori" required />
                <InputError :message="form.errors.nama_kategori" />
            </div>

            <div class="grid gap-2">
                <Label for="alias">Alias (URL publik)</Label>
                <Input
                    id="alias"
                    v-model="form.alias"
                    :disabled="isRedirect"
                    :placeholder="isRedirect ? 'kode unik digenerate otomatis' : ''"
                />
                <p v-if="isRedirect" class="text-xs text-muted-foreground">
                    Jenis Redirect: kode unik digenerate otomatis saat simpan (bila alias saat ini slug, akan diganti kode unik).
                </p>
                <InputError :message="form.errors.alias" />
            </div>

            <div class="grid gap-2">
                <Label for="judul">Judul (halaman perantara)</Label>
                <Input id="judul" v-model="form.judul" />
            </div>

            <div class="grid gap-2">
                <Label for="deskripsi">Deskripsi</Label>
                <RichTextEditor id="deskripsi" v-model="form.deskripsi" />
                <p class="text-xs text-muted-foreground">Tampil di halaman landing.</p>
            </div>

            <div class="grid gap-4 sm:grid-cols-2">
                <div class="grid gap-2">
                    <Label for="jenis">Jenis <span class="text-destructive">*</span></Label>
                    <select id="jenis" v-model="form.jenis" required class="mt-1 block w-full rounded-md border border-input bg-background px-3 py-2 text-sm">
                        <option v-for="j in jenisOptions" :key="j.value" :value="j.value">{{ j.label }}</option>
                    </select>
                    <InputError :message="form.errors.jenis" />
                </div>
                <div class="grid gap-2">
                    <Label for="status">Status</Label>
                    <select id="status" v-model="form.status" class="mt-1 block w-full rounded-md border border-input bg-background px-3 py-2 text-sm">
                        <option :value="true">Aktif</option>
                        <option :value="false">Nonaktif</option>
                    </select>
                </div>
            </div>

            <div class="flex justify-end gap-2">
                <Button as-child variant="outline" type="button">
                    <Link href="/kategoris">Batal</Link>
                </Button>
                <Button type="submit" :disabled="form.processing">Simpan</Button>
            </div>
        </form>
    </div>
</template>
