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

interface MenuType { id: number; type: string; }
interface Group { id: number; name: string; }
interface Parent { id: number; label: string; }

const props = defineProps<{
    menuTypes: MenuType[];
    groups: Group[];
    parents: Parent[];
}>();

defineOptions({
    layout: {
        breadcrumbs: [
            { title: 'Dashboard', href: dashboard() },
            { title: 'Menu', href: '/menus' },
            { title: 'Baru', href: '/menus/create' },
        ] as BreadcrumbItem[],
    },
});

const form = useForm({
    label: '',
    route: '',
    link: '',
    icon: '',
    section: 'Utama',
    menu_type_id: props.menuTypes[0]?.id ?? '',
    parent_id: '' as string | number,
    sort_order: 0,
    status: true,
    groups: [] as number[],
});

const toggleGroup = (id: number, checked: boolean | string) => {
    if (checked) {
        if (!form.groups.includes(id)) form.groups.push(id);
    } else {
        form.groups = form.groups.filter((g) => g !== id);
    }
};

const submit = () => form.post('/menus');
</script>

<template>
    <Head title="Menu Baru" />

    <div class="flex flex-col space-y-6">
        <div>
            <Button as-child variant="ghost" size="sm" class="mb-2">
                <Link href="/menus"><ArrowLeft class="size-4" /> Kembali</Link>
            </Button>
            <Heading title="Menu Baru" description="Buat item menu sidebar" />
        </div>

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

            <div class="grid gap-4 sm:grid-cols-2">
                <div class="grid gap-2">
                    <Label for="route">Named Route</Label>
                    <Input id="route" v-model="form.route" placeholder="mis. campaigns.index" />
                    <InputError :message="form.errors.route" />
                </div>
                <div class="grid gap-2">
                    <Label for="link">Link (URL absolut)</Label>
                    <Input id="link" v-model="form.link" placeholder="https://…" />
                    <InputError :message="form.errors.link" />
                </div>
            </div>

            <div class="grid gap-4 sm:grid-cols-3">
                <div class="grid gap-2">
                    <Label for="icon">Ikon (Lucide)</Label>
                    <Input id="icon" v-model="form.icon" placeholder="mis. megaphone" />
                </div>
                <div class="grid gap-2">
                    <Label for="sort_order">Urutan</Label>
                    <Input id="sort_order" type="number" v-model="form.sort_order" min="0" />
                </div>
                <div class="grid gap-2">
                    <Label for="menu_type_id">Tipe Menu <span class="text-destructive">*</span></Label>
                    <select id="menu_type_id" v-model="form.menu_type_id" required class="mt-1 block w-full rounded-md border border-input bg-background px-3 py-2 text-sm">
                        <option v-for="t in props.menuTypes" :key="t.id" :value="t.id">{{ t.type }}</option>
                    </select>
                    <InputError :message="form.errors.menu_type_id" />
                </div>
            </div>

            <div v-if="props.parents.length > 0" class="grid gap-2">
                <Label for="parent_id">Parent (sub-menu dari)</Label>
                <select id="parent_id" v-model="form.parent_id" class="mt-1 block w-full rounded-md border border-input bg-background px-3 py-2 text-sm">
                    <option value="">— Tanpa Parent —</option>
                    <option v-for="p in props.parents" :key="p.id" :value="p.id">{{ p.label }}</option>
                </select>
            </div>

            <div class="space-y-3">
                <Label>Hak Akses Grup</Label>
                <div class="flex flex-wrap gap-4">
                    <label v-for="g in props.groups" :key="g.id" class="flex items-center gap-2 text-sm">
                        <Checkbox
                            :model-value="form.groups.includes(g.id)"
                            @update:model-value="(v) => toggleGroup(g.id, v)"
                        />
                        <span class="capitalize">{{ g.name }}</span>
                    </label>
                </div>
                <InputError :message="form.errors.groups" />
            </div>

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