<script setup lang="ts">
import { Head, Link } from '@inertiajs/vue3';
import { Plus } from '@lucide/vue';
import Heading from '@/components/Heading.vue';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { dashboard } from '@/routes';
import type { BreadcrumbItem } from '@/types';

interface Group { id: number; name: string; }
interface MenuType { id: number; type: string; }
interface MenuRow {
    id: number;
    label: string;
    route: string | null;
    link: string | null;
    icon: string | null;
    section: string;
    sort_order: number;
    status: boolean;
    parent?: { label: string } | null;
    menuType?: { type: string } | null;
    groups: Group[];
}

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

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

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

    <div class="flex flex-col space-y-6">
        <div class="flex items-center justify-between gap-4">
            <Heading title="Manajemen Menu" description="Kelola menu sidebar dinamis & hak akses grup" />
            <Button as-child>
                <Link href="/menus/create"><Plus class="size-4" /> Tambah Menu</Link>
            </Button>
        </div>

        <div class="overflow-hidden rounded-xl border">
            <table class="w-full text-sm">
                <thead class="bg-muted/50 text-left text-xs uppercase text-muted-foreground">
                    <tr>
                        <th class="px-4 py-3 font-medium">Label</th>
                        <th class="px-4 py-3 font-medium">Section</th>
                        <th class="px-4 py-3 font-medium">Route / Link</th>
                        <th class="px-4 py-3 font-medium">Ikon</th>
                        <th class="px-4 py-3 font-medium">Urutan</th>
                        <th class="px-4 py-3 font-medium">Grup</th>
                        <th class="px-4 py-3 font-medium text-center">Status</th>
                        <th class="px-4 py-3 font-medium text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y">
                    <tr v-for="m in props.menus" :key="m.id" class="hover:bg-muted/30">
                        <td class="px-4 py-3 font-medium">
                            {{ m.label }}
                            <span v-if="m.parent" class="block text-xs text-muted-foreground">↳ {{ m.parent.label }}</span>
                        </td>
                        <td class="px-4 py-3 text-muted-foreground">{{ m.section }}</td>
                        <td class="px-4 py-3 font-mono text-xs text-muted-foreground">{{ m.route ?? m.link ?? '—' }}</td>
                        <td class="px-4 py-3 font-mono text-xs text-muted-foreground">{{ m.icon ?? '—' }}</td>
                        <td class="px-4 py-3 text-center tabular-nums">{{ m.sort_order }}</td>
                        <td class="px-4 py-3">
                            <div class="flex flex-wrap gap-1">
                                <Badge v-for="g in m.groups" :key="g.id" variant="secondary" class="capitalize">{{ g.name }}</Badge>
                            </div>
                        </td>
                        <td class="px-4 py-3 text-center">
                            <Badge :variant="m.status ? 'default' : 'outline'">{{ m.status ? 'Aktif' : 'Nonaktif' }}</Badge>
                        </td>
                        <td class="px-4 py-3 text-right">
                            <Button as-child variant="ghost" size="sm">
                                <Link :href="`/menus/${m.id}/edit`">Edit</Link>
                            </Button>
                        </td>
                    </tr>
                    <tr v-if="props.menus.length === 0">
                        <td colspan="8" class="px-4 py-8 text-center text-muted-foreground">Belum ada menu.</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>
