<script setup>
import { Link } from '@inertiajs/vue3'
import { HomeIcon, GlobeAltIcon, EnvelopeIcon, FolderIcon, Bars3Icon } from '@heroicons/vue/24/outline'
import { ref } from 'vue'

defineProps({
    navGroups: {
        type: Array,
        default: () => [],
    },
    user: {
        type: Object,
        default: null,
    },
})

const drawerOpen = ref(false)

const quickItems = [
    { name: 'Pano', icon: HomeIcon, href: 'customer.dashboard' },
    { name: 'Domains', icon: GlobeAltIcon, href: 'customer.domains.index' },
    { name: 'E-posta', icon: EnvelopeIcon, href: 'customer.email.index' },
    { name: 'Dosyalar', icon: FolderIcon, href: 'customer.files.index' },
]
</script>

<template>
    <!-- Bottom nav — only on mobile -->
    <div class="fixed bottom-0 left-0 right-0 z-40 border-t border-slate-200 bg-white shadow-lg lg:hidden dark:bg-slate-900 dark:border-slate-800">
        <div class="grid grid-cols-5">
            <Link
                v-for="item in quickItems"
                :key="item.name"
                :href="route(item.href)"
                class="flex flex-col items-center gap-1 py-2 text-xs text-slate-600 hover:bg-slate-50 dark:text-slate-300 dark:hover:bg-slate-800"
            >
                <component :is="item.icon" class="h-5 w-5" />
                <span>{{ item.name }}</span>
            </Link>
            <button
                @click="drawerOpen = true"
                class="flex flex-col items-center gap-1 py-2 text-xs text-slate-600 hover:bg-slate-50 dark:text-slate-300 dark:hover:bg-slate-800"
            >
                <Bars3Icon class="h-5 w-5" />
                <span>Daha</span>
            </button>
        </div>
    </div>

    <!-- Drawer — full nav on mobile -->
    <Teleport to="body">
        <Transition
            enter-active-class="transition duration-200 ease-out"
            enter-from-class="-translate-x-full"
            enter-to-class="translate-x-0"
            leave-active-class="transition duration-150 ease-in"
            leave-from-class="translate-x-0"
            leave-to-class="-translate-x-full"
        >
            <div v-if="drawerOpen" class="fixed inset-0 z-50 lg:hidden">
                <!-- Backdrop -->
                <div class="absolute inset-0 bg-slate-900/50" @click="drawerOpen = false" />
                <!-- Drawer panel -->
                <aside class="relative h-full w-72 overflow-y-auto bg-white dark:bg-slate-900" @click.stop>
                    <div class="flex items-center justify-between border-b border-slate-200 px-4 py-3 dark:border-slate-800">
                        <span class="text-sm font-semibold text-slate-900 dark:text-slate-100">Menü</span>
                        <button @click="drawerOpen = false" class="text-slate-400 hover:text-slate-600">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
                            </svg>
                        </button>
                    </div>
                    <nav class="space-y-3 px-3 py-3">
                        <div v-for="(group, gi) in navGroups" :key="gi">
                            <h3 v-if="group.title" class="px-3 pb-1 pt-2 text-[10px] font-semibold uppercase tracking-wider text-slate-400">
                                {{ group.title }}
                            </h3>
                            <Link
                                v-for="item in group.items"
                                :key="item.name"
                                :href="item.href"
                                @click="drawerOpen = false"
                                :class="[
                                    'flex items-center justify-between gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
                                    item.current()
                                        ? 'bg-indigo-50 text-indigo-700'
                                        : 'text-slate-700 hover:bg-slate-50 dark:text-slate-300 dark:hover:bg-slate-800',
                                ]"
                            >
                                <div class="flex items-center gap-3">
                                    <component :is="item.icon" :class="['h-5 w-5 flex-shrink-0', item.current() ? 'text-indigo-600' : 'text-slate-400']" />
                                    <span class="truncate">{{ item.name }}</span>
                                </div>
                                <span v-if="item.badge" class="rounded-full bg-amber-100 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-amber-700">
                                    {{ item.badge }}
                                </span>
                            </Link>
                        </div>
                    </nav>
                </aside>
            </div>
        </Transition>
    </Teleport>
</template>
