<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import { Head, useForm, router, usePage } from '@inertiajs/vue3';
import AdminLayout from '@/Layouts/AdminLayout.vue';
import * as LucideIcons from 'lucide-vue-next';
import { Menu as MenuIcon, Plus, Edit2, Trash2, Save, Shield, Key, ArrowUpDown, Check, AlertCircle, Settings } from 'lucide-vue-next';

interface MenuItem {
    id: number;
    parent_id: number | null;
    group_name: string;
    title: string;
    href: string;
    icon: string | null;
    roles: string[] | null;
    permissions: string[] | null;
    sort_order: number;
    children?: MenuItem[];
}

interface Role {
    id: number;
    name: string;
}

interface Permission {
    id: number;
    name: string;
}

const props = defineProps<{
    menus: MenuItem[];
    parentOptions: { id: number; title: string }[];
    roles: Role[];
    permissions: Permission[];
    groups: string[];
}>();

const page = usePage<any>();

// State management
const isFormModalOpen = ref(false);
const isDeleteModalOpen = ref(false);
const editingMenu = ref<MenuItem | null>(null);
const menuToDelete = ref<MenuItem | null>(null);

// Group management states
const isManageGroupsOpen = ref(false);
const isRenamingGroup = ref(false);
const isDeletingGroup = ref(false);

const renameGroupForm = useForm({
    old_name: '',
    new_name: '',
});

const deleteGroupForm = useForm({
    group_name: '',
});

const openRenameGroupModal = (name: string) => {
    renameGroupForm.old_name = name;
    renameGroupForm.new_name = name;
    renameGroupForm.clearErrors();
    isRenamingGroup.value = true;
};

const submitRenameGroup = () => {
    renameGroupForm.post(route('menus.groups.rename'), {
        onSuccess: () => {
            isRenamingGroup.value = false;
        },
    });
};

const openDeleteGroupModal = (name: string) => {
    deleteGroupForm.group_name = name;
    deleteGroupForm.clearErrors();
    isDeletingGroup.value = true;
};

const submitDeleteGroup = () => {
    deleteGroupForm.post(route('menus.groups.delete'), {
        onSuccess: () => {
            isDeletingGroup.value = false;
        },
    });
};

// List of popular icons to present in the Picker dropdown
const availableIcons = [
    'LayoutDashboard', 'Users', 'ShieldCheck', 'Settings', 'History', 'Menu', 
    'Database', 'FileText', 'Folder', 'Bell', 'BookOpen', 'HelpCircle', 
    'Lock', 'CreditCard', 'BarChart3', 'Mail'
];

const getIcon = (name: string | null) => {
    if (!name) return LucideIcons.HelpCircle;
    const icon = (LucideIcons as any)[name];
    return icon || LucideIcons.HelpCircle;
};

const selectedGroup = ref('Main Menu');
const customGroupName = ref('');

const availableGroups = computed(() => {
    const list = [...props.groups];
    ['Main Menu', 'Administration'].forEach(g => {
        if (!list.includes(g)) {
            list.push(g);
        }
    });
    return list;
});

watch([selectedGroup, customGroupName], ([newSel, newCust]) => {
    if (newSel === '__new__') {
        form.group_name = newCust;
    } else {
        form.group_name = newSel;
    }
});

// Form config
const form = useForm({
    title: '',
    href: '',
    group_name: 'Main Menu',
    icon: 'HelpCircle',
    roles: [] as string[],
    permissions: [] as string[],
    sort_order: 1,
    parent_id: '' as string | number,
});

const openCreateModal = () => {
    editingMenu.value = null;
    form.clearErrors();
    form.reset();
    selectedGroup.value = 'Main Menu';
    customGroupName.value = '';
    isFormModalOpen.value = true;
};

const openEditModal = (item: MenuItem) => {
    editingMenu.value = item;
    form.clearErrors();
    form.title = item.title;
    form.href = item.href;
    form.icon = item.icon || 'HelpCircle';
    form.roles = item.roles || [];
    form.permissions = item.permissions || [];
    form.sort_order = item.sort_order;
    form.parent_id = item.parent_id || '';

    // Set dropdown states
    if (availableGroups.value.includes(item.group_name)) {
        selectedGroup.value = item.group_name;
        customGroupName.value = '';
    } else {
        selectedGroup.value = '__new__';
        customGroupName.value = item.group_name;
    }
    form.group_name = item.group_name;

    isFormModalOpen.value = true;
};

const submitForm = () => {
    const data = {
        ...form.data(),
        parent_id: form.parent_id === '' ? null : Number(form.parent_id),
    };

    if (editingMenu.value) {
        router.put(route('menus.update', editingMenu.value.id), data, {
            onSuccess: () => {
                isFormModalOpen.value = false;
                form.reset();
            },
        });
    } else {
        router.post(route('menus.store'), data, {
            onSuccess: () => {
                isFormModalOpen.value = false;
                form.reset();
            },
        });
    }
};

const openDeleteModal = (item: MenuItem) => {
    menuToDelete.value = item;
    isDeleteModalOpen.value = true;
};

const deleteMenuItem = () => {
    if (!menuToDelete.value) return;
    router.delete(route('menus.destroy', menuToDelete.value.id), {
        onSuccess: () => {
            isDeleteModalOpen.value = false;
            menuToDelete.value = null;
        },
    });
};

const toggleRole = (roleName: string) => {
    const idx = form.roles.indexOf(roleName);
    if (idx > -1) {
        form.roles.splice(idx, 1);
    } else {
        form.roles.push(roleName);
    }
};

const togglePermission = (permName: string) => {
    const idx = form.permissions.indexOf(permName);
    if (idx > -1) {
        form.permissions.splice(idx, 1);
    } else {
        form.permissions.push(permName);
    }
};

const selectIcon = (iconName: string) => {
    form.icon = iconName;
};
</script>

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

    <AdminLayout>
        <div class="space-y-6">
            <!-- Header Section -->
            <div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
                <div>
                    <h1 class="text-2xl font-bold tracking-tight text-slate-900 dark:text-slate-50">Menu Manager</h1>
                    <p class="text-sm text-slate-500 dark:text-slate-400 mt-1">
                        Configure database-driven sidebar menus, sorting order, and access filters.
                    </p>
                </div>
                <div class="flex items-center gap-3">
                    <button
                        @click="isManageGroupsOpen = true"
                        class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold text-slate-700 dark:text-slate-200 bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 hover:bg-slate-50 dark:hover:bg-slate-900 rounded-lg shadow-sm transition-all focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 cursor-pointer"
                    >
                        <Settings class="h-4 w-4" />
                        Manage Groups
                    </button>
                    <button
                        @click="openCreateModal"
                        class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold text-white bg-red-600 hover:bg-red-700 rounded-lg shadow-sm transition-all focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 cursor-pointer"
                    >
                        <Plus class="h-4 w-4" />
                        Add Menu Item
                    </button>
                </div>
            </div>

            <!-- Toast Messages -->
            <div v-if="page.props.flash?.success" class="bg-emerald-50 dark:bg-emerald-950/30 border border-emerald-200 dark:border-emerald-900/50 text-emerald-800 dark:text-emerald-400 rounded-xl p-4 text-sm flex items-center gap-3">
                <Check class="h-5 w-5 text-emerald-600 dark:text-emerald-400 shrink-0" />
                <span>{{ page.props.flash?.success }}</span>
            </div>
            <div v-if="page.props.flash?.error" class="bg-rose-50 dark:bg-rose-950/30 border border-rose-200 dark:border-rose-900/50 text-rose-800 dark:text-rose-400 rounded-xl p-4 text-sm flex items-center gap-3">
                <AlertCircle class="h-5 w-5 text-rose-600 dark:text-rose-400 shrink-0" />
                <span>{{ page.props.flash?.error }}</span>
            </div>

            <!-- Menus List Grouped by Group Name -->
            <div class="grid grid-cols-1 gap-6">
                <div v-if="menus.length === 0" class="bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-xl p-12 text-center text-slate-500 dark:text-slate-400">
                    No menu items found. Click "Add Menu Item" to create one.
                </div>

                <div 
                    v-for="parent in menus" 
                    :key="parent.id"
                    class="bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-xl shadow-sm p-5 space-y-4"
                >
                    <div class="flex items-center justify-between border-b border-slate-100 dark:border-slate-900 pb-3">
                        <div class="flex items-center gap-3">
                            <div class="h-8 w-8 rounded-lg bg-red-50 dark:bg-red-950/30 flex items-center justify-center border border-red-100 dark:border-red-900/40">
                                <component :is="getIcon(parent.icon)" class="h-4.5 w-4.5 text-red-600 dark:text-red-400" />
                            </div>
                            <div>
                                <h3 class="text-sm font-semibold text-slate-900 dark:text-slate-100">{{ parent.title }}</h3>
                                <span class="text-[10px] bg-slate-100 dark:bg-slate-900 px-1.5 py-0.5 rounded text-slate-500 dark:text-slate-400 font-mono">{{ parent.href }}</span>
                            </div>
                        </div>
                        <div class="flex items-center gap-4">
                            <div class="text-xs text-slate-400 dark:text-slate-500">
                                Order: <span class="font-semibold text-slate-700 dark:text-slate-300">#{{ parent.sort_order }}</span> | Group: <span class="font-semibold text-slate-700 dark:text-slate-300">{{ parent.group_name }}</span>
                            </div>
                            <div class="flex items-center gap-1.5">
                                <button
                                    @click="openEditModal(parent)"
                                    class="p-1 rounded-lg text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-900 hover:text-slate-900 dark:hover:text-slate-200 transition-colors"
                                >
                                    <Edit2 class="h-3.5 w-3.5" />
                                </button>
                                <button
                                    @click="openDeleteModal(parent)"
                                    class="p-1 rounded-lg text-slate-400 hover:bg-red-50 dark:hover:bg-red-950/20 hover:text-red-600 dark:hover:text-red-400 transition-colors"
                                >
                                    <Trash2 class="h-3.5 w-3.5" />
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Required Badges -->
                    <div class="flex flex-wrap gap-2 text-xs">
                        <span class="text-slate-400 select-none">Access restrictions:</span>
                        <span v-if="(!parent.roles || parent.roles.length === 0) && (!parent.permissions || parent.permissions.length === 0)" class="text-emerald-600 dark:text-emerald-400 italic">Public (All users)</span>
                        
                        <span 
                            v-for="role in parent.roles" 
                            :key="role"
                            class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-slate-100 text-slate-700 border border-slate-200 dark:bg-slate-900 dark:text-slate-350 dark:border-slate-800"
                        >
                            <Shield class="h-3 w-3" />
                            Role: {{ role }}
                        </span>
                        
                        <span 
                            v-for="perm in parent.permissions" 
                            :key="perm"
                            class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-red-50 text-red-700 border border-red-100 dark:bg-red-950/20 dark:text-red-400 dark:border-red-900/40"
                        >
                            <Key class="h-3 w-3" />
                            Perm: {{ perm }}
                        </span>
                    </div>

                    <!-- Sub-menus (Children) if any -->
                    <div v-if="parent.children && parent.children.length > 0" class="pl-8 border-l border-slate-150 dark:border-slate-850 space-y-3 mt-3">
                        <div 
                            v-for="child in parent.children" 
                            :key="child.id"
                            class="flex items-center justify-between py-1 bg-slate-50/40 dark:bg-slate-900/10 p-2 rounded-lg"
                        >
                            <div class="flex items-center gap-2.5">
                                <component :is="getIcon(child.icon)" class="h-3.5 w-3.5 text-slate-450 dark:text-slate-500" />
                                <span class="text-xs font-medium text-slate-700 dark:text-slate-300">{{ child.title }}</span>
                                <span class="text-[9px] bg-slate-100 dark:bg-slate-850 px-1 py-0.2 rounded text-slate-450 font-mono">{{ child.href }}</span>
                            </div>
                            <div class="flex items-center gap-3">
                                <span class="text-[10px] text-slate-400 font-mono">Order: #{{ child.sort_order }}</span>
                                <div class="flex items-center gap-1">
                                    <button
                                        @click="openEditModal(child)"
                                        class="p-1 rounded text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-900 transition-colors"
                                    >
                                        <Edit2 class="h-3 w-3" />
                                    </button>
                                    <button
                                        @click="openDeleteModal(child)"
                                        class="p-1 rounded text-slate-400 hover:bg-red-50 dark:hover:bg-red-950/20 hover:text-red-650 transition-colors"
                                    >
                                        <Trash2 class="h-3 w-3" />
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Add/Edit Form Modal -->
        <div 
            v-if="isFormModalOpen" 
            class="fixed inset-0 z-50 flex items-center justify-center p-4 animate-fade-in"
        >
            <div 
                @click="isFormModalOpen = false"
                class="fixed inset-0 bg-slate-950/60 backdrop-blur-sm transition-opacity"
            />

            <div class="relative bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-xl shadow-2xl w-full max-w-xl overflow-hidden flex flex-col max-h-[90vh] animate-in zoom-in-95 duration-200">
                <div class="px-6 py-4 border-b border-slate-200 dark:border-slate-800 flex items-center justify-between bg-slate-50/50 dark:bg-slate-900/50">
                    <h3 class="text-base font-semibold text-slate-900 dark:text-slate-50">
                        {{ editingMenu ? 'Edit Menu Item' : 'Add Menu Item' }}
                    </h3>
                    <button 
                        @click="isFormModalOpen = false"
                        class="rounded-lg p-1 text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-900 hover:text-slate-600 dark:hover:text-slate-300 transition-colors"
                    >
                        &times;
                    </button>
                </div>

                <form @submit.prevent="submitForm" class="flex flex-col overflow-hidden">
                    <div class="p-6 overflow-y-auto space-y-4">
                        <div class="grid grid-cols-2 gap-4">
                            <!-- Title -->
                            <div class="space-y-1">
                                <label for="menu-title" class="block text-xs font-semibold uppercase tracking-wider text-slate-500">Menu Title</label>
                                <input
                                    id="menu-title"
                                    v-model="form.title"
                                    type="text"
                                    required
                                    placeholder="e.g. Audit Logs"
                                    class="w-full px-3 py-2 text-sm bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-lg text-slate-950 dark:text-slate-50 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent transition-all"
                                />
                            </div>

                            <!-- Path/URL -->
                            <div class="space-y-1">
                                <label for="menu-href" class="block text-xs font-semibold uppercase tracking-wider text-slate-500">Path / URL</label>
                                <input
                                    id="menu-href"
                                    v-model="form.href"
                                    type="text"
                                    required
                                    placeholder="e.g. /logs"
                                    class="w-full px-3 py-2 text-sm bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-lg text-slate-950 dark:text-slate-50 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent transition-all"
                                />
                            </div>
                        </div>

                        <div class="grid grid-cols-2 gap-4">
                            <!-- Group Name -->
                            <div class="space-y-1">
                                <label for="menu-group" class="block text-xs font-semibold uppercase tracking-wider text-slate-500">Group Name</label>
                                <select
                                    id="menu-group"
                                    v-model="selectedGroup"
                                    class="w-full px-3 py-2 text-sm bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-lg text-slate-950 dark:text-slate-50 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent transition-all"
                                >
                                    <option v-for="group in availableGroups" :key="group" :value="group">{{ group }}</option>
                                    <option value="__new__">+ Create New Group...</option>
                                </select>
                            </div>

                            <!-- Parent Selector -->
                            <div class="space-y-1">
                                <label for="menu-parent" class="block text-xs font-semibold uppercase tracking-wider text-slate-500">Parent Menu <span class="text-[10px] text-slate-400 normal-case">(Optional)</span></label>
                                <select
                                    id="menu-parent"
                                    v-model="form.parent_id"
                                    class="w-full px-3 py-2 text-sm bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-lg text-slate-950 dark:text-slate-50 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent transition-all"
                                >
                                    <option value="">None (Top Level)</option>
                                    <option 
                                        v-for="parent in parentOptions" 
                                        :key="parent.id" 
                                        :value="parent.id"
                                        :disabled="editingMenu?.id === parent.id"
                                    >
                                        {{ parent.title }}
                                    </option>
                                </select>
                            </div>
                        </div>

                        <!-- Custom Group Name Input -->
                        <div v-if="selectedGroup === '__new__'" class="space-y-1 animate-in slide-in-from-top duration-200">
                            <label for="custom-menu-group" class="block text-xs font-semibold uppercase tracking-wider text-slate-500">Custom Group Name</label>
                            <input
                                id="custom-menu-group"
                                v-model="customGroupName"
                                type="text"
                                required
                                placeholder="Type custom group name..."
                                class="w-full px-3 py-2 text-sm bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-lg text-slate-950 dark:text-slate-50 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent transition-all"
                            />
                        </div>

                        <div class="grid grid-cols-2 gap-4">
                            <!-- Sort Order -->
                            <div class="space-y-1">
                                <label for="menu-sort" class="block text-xs font-semibold uppercase tracking-wider text-slate-500">Sort Order</label>
                                <input
                                    id="menu-sort"
                                    v-model="form.sort_order"
                                    type="number"
                                    required
                                    class="w-full px-3 py-2 text-sm bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-lg text-slate-950 dark:text-slate-50 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent transition-all"
                                />
                            </div>
                        </div>

                        <!-- Icon Picker -->
                        <div class="space-y-2">
                            <span class="block text-xs font-semibold uppercase tracking-wider text-slate-500">Select Icon</span>
                            <div class="grid grid-cols-8 gap-2 border border-slate-200 dark:border-slate-800 rounded-lg p-3 bg-slate-50/50 dark:bg-slate-900/30">
                                <button
                                    v-for="iconName in availableIcons"
                                    :key="iconName"
                                    type="button"
                                    @click="selectIcon(iconName)"
                                    :class="[
                                        'h-10 w-10 flex items-center justify-center rounded-lg border transition-all',
                                        form.icon === iconName
                                            ? 'bg-red-500 border-red-500 text-white shadow-sm'
                                            : 'bg-white border-slate-200 hover:bg-slate-100 dark:bg-slate-900 dark:border-slate-800 dark:hover:bg-slate-850 text-slate-700 dark:text-slate-350'
                                    ]"
                                    :title="iconName"
                                >
                                    <component :is="getIcon(iconName)" class="h-4.5 w-4.5" />
                                </button>
                            </div>
                        </div>

                        <!-- Access Filters: Roles & Permissions checklists -->
                        <div class="grid grid-cols-2 gap-4">
                            <!-- Roles Checklist -->
                            <div class="space-y-2">
                                <span class="block text-xs font-semibold uppercase tracking-wider text-slate-500">Require Roles</span>
                                <div class="border border-slate-200 dark:border-slate-800 rounded-lg p-2.5 bg-slate-50/50 dark:bg-slate-900/30 max-h-36 overflow-y-auto space-y-2">
                                    <div 
                                        v-for="role in roles" 
                                        :key="role.id"
                                        @click="toggleRole(role.name)"
                                        class="flex items-center space-x-2 cursor-pointer select-none text-xs"
                                    >
                                        <div 
                                            :class="[
                                                'h-4 w-4 rounded border flex items-center justify-center transition-all',
                                                form.roles.includes(role.name) 
                                                    ? 'bg-red-500 border-red-500 text-white' 
                                                    : 'border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900'
                                            ]"
                                        >
                                            <Check v-if="form.roles.includes(role.name)" class="h-2.5 w-2.5 stroke-[3]" />
                                        </div>
                                        <span class="font-medium text-slate-700 dark:text-slate-350 capitalize">{{ role.name }}</span>
                                    </div>
                                </div>
                            </div>

                            <!-- Permissions Checklist -->
                            <div class="space-y-2">
                                <span class="block text-xs font-semibold uppercase tracking-wider text-slate-500">Require Permissions</span>
                                <div class="border border-slate-200 dark:border-slate-800 rounded-lg p-2.5 bg-slate-50/50 dark:bg-slate-900/30 max-h-36 overflow-y-auto space-y-2">
                                    <div 
                                        v-for="perm in permissions" 
                                        :key="perm.id"
                                        @click="togglePermission(perm.name)"
                                        class="flex items-center space-x-2 cursor-pointer select-none text-xs"
                                    >
                                        <div 
                                            :class="[
                                                'h-4 w-4 rounded border flex items-center justify-center transition-all',
                                                form.permissions.includes(perm.name) 
                                                    ? 'bg-red-500 border-red-500 text-white' 
                                                    : 'border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900'
                                            ]"
                                        >
                                            <Check v-if="form.permissions.includes(perm.name)" class="h-2.5 w-2.5 stroke-[3]" />
                                        </div>
                                        <span class="font-medium text-slate-700 dark:text-slate-350 capitalize">{{ perm.name }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="px-6 py-4 border-t border-slate-200 dark:border-slate-800 flex justify-end gap-3 bg-slate-50/50 dark:bg-slate-900/50">
                        <button
                            type="button"
                            @click="isFormModalOpen = false"
                            class="px-4 py-2 text-sm font-medium text-slate-700 dark:text-slate-300 bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-900 transition-colors focus:outline-none"
                        >
                            Cancel
                        </button>
                        <button
                            type="submit"
                            :disabled="form.processing"
                            class="px-4 py-2 text-sm font-semibold text-white bg-red-600 hover:bg-red-700 rounded-lg shadow-sm transition-all focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 disabled:opacity-50"
                        >
                            <span v-if="form.processing">Saving...</span>
                            <span v-else>Save Changes</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Delete Confirmation Modal -->
        <div 
            v-if="isDeleteModalOpen" 
            class="fixed inset-0 z-50 flex items-center justify-center p-4"
        >
            <div 
                @click="isDeleteModalOpen = false"
                class="fixed inset-0 bg-slate-950/60 backdrop-blur-sm"
            />
            
            <div class="relative bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-xl shadow-2xl w-full max-w-md overflow-hidden flex flex-col animate-in zoom-in-95 duration-200">
                <div class="p-6 text-center space-y-4">
                    <div class="mx-auto h-12 w-12 rounded-full bg-red-50 dark:bg-red-950/30 flex items-center justify-center border border-red-100 dark:border-red-900/50 text-red-600 dark:text-red-400">
                        <Trash2 class="h-6 w-6" />
                    </div>
                    <div class="space-y-1">
                        <h3 class="text-base font-bold text-slate-900 dark:text-slate-50">Delete Menu Item</h3>
                        <p class="text-sm text-slate-500 dark:text-slate-400 leading-normal">
                            Are you sure you want to delete <span class="font-semibold text-slate-950 dark:text-slate-50">{{ menuToDelete?.title }}</span>? This action will permanently remove it from the sidebar navigation.
                        </p>
                    </div>
                </div>

                <div class="px-6 py-4 border-t border-slate-200 dark:border-slate-800 flex justify-end gap-3 bg-slate-50/50 dark:bg-slate-900/50">
                    <button
                        type="button"
                        @click="isDeleteModalOpen = false"
                        class="px-4 py-2 text-sm font-medium text-slate-700 dark:text-slate-350 bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-900 transition-colors cursor-pointer"
                    >
                        Cancel
                    </button>
                    <button
                        type="button"
                        @click="deleteMenuItem"
                        class="px-4 py-2 text-sm font-semibold text-white bg-red-600 hover:bg-red-700 rounded-lg shadow-sm transition-all focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 cursor-pointer"
                    >
                        Delete
                    </button>
                </div>
            </div>
        </div>

        <!-- Manage Groups Modal -->
        <div 
            v-if="isManageGroupsOpen" 
            class="fixed inset-0 z-50 flex items-center justify-center p-4 animate-fade-in"
        >
            <div 
                @click="isManageGroupsOpen = false"
                class="fixed inset-0 bg-slate-950/60 backdrop-blur-sm"
            />
            
            <div class="relative bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-xl shadow-2xl w-full max-w-md overflow-hidden flex flex-col animate-in zoom-in-95 duration-200">
                <div class="px-6 py-4 border-b border-slate-200 dark:border-slate-800 flex items-center justify-between bg-slate-50/50 dark:bg-slate-900/50">
                    <h3 class="text-base font-semibold text-slate-900 dark:text-slate-50">Manage Menu Groups</h3>
                    <button 
                        @click="isManageGroupsOpen = false"
                        class="rounded-lg p-1 text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-900 hover:text-slate-650 cursor-pointer text-xl"
                    >
                        &times;
                    </button>
                </div>

                <div class="p-6 space-y-4 max-h-[60vh] overflow-y-auto">
                    <div v-if="groups.length === 0" class="text-center text-xs text-slate-500 italic">
                        No groups found.
                    </div>
                    <div 
                        v-for="group in groups" 
                        :key="group"
                        class="flex items-center justify-between py-2 border-b border-slate-100 dark:border-slate-900 last:border-0"
                    >
                        <span class="text-sm font-medium text-slate-800 dark:text-slate-200">{{ group }}</span>
                        <div class="flex items-center gap-1.5">
                            <button
                                @click="openRenameGroupModal(group)"
                                class="p-1 text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-900 rounded transition-colors cursor-pointer"
                                title="Rename Group"
                            >
                                <Edit2 class="h-3.5 w-3.5" />
                            </button>
                            <button
                                @click="openDeleteGroupModal(group)"
                                class="p-1 text-red-500 hover:bg-red-50 dark:hover:bg-red-950/20 rounded transition-colors cursor-pointer"
                                title="Delete Group"
                            >
                                <Trash2 class="h-3.5 w-3.5" />
                            </button>
                        </div>
                    </div>
                </div>

                <div class="px-6 py-4 border-t border-slate-200 dark:border-slate-800 flex justify-end bg-slate-50/50 dark:bg-slate-900/50">
                    <button
                        type="button"
                        @click="isManageGroupsOpen = false"
                        class="px-4 py-2 text-sm font-medium text-slate-700 dark:text-slate-350 bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-900 transition-colors cursor-pointer"
                    >
                        Close
                    </button>
                </div>
            </div>
        </div>

        <!-- Rename Group Modal -->
        <div 
            v-if="isRenamingGroup" 
            class="fixed inset-0 z-50 flex items-center justify-center p-4 animate-fade-in"
        >
            <div 
                @click="isRenamingGroup = false"
                class="fixed inset-0 bg-slate-950/60 backdrop-blur-sm"
            />
            
            <div class="relative bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-xl shadow-2xl w-full max-w-md overflow-hidden flex flex-col animate-in zoom-in-95 duration-200">
                <div class="px-6 py-4 border-b border-slate-200 dark:border-slate-800 flex items-center justify-between bg-slate-50/50 dark:bg-slate-900/50">
                    <h3 class="text-base font-semibold text-slate-900 dark:text-slate-50">Rename Menu Group</h3>
                    <button 
                        @click="isRenamingGroup = false"
                        class="rounded-lg p-1 text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-900 hover:text-slate-600 dark:hover:text-slate-300 cursor-pointer text-xl"
                    >
                        &times;
                    </button>
                </div>

                <form @submit.prevent="submitRenameGroup" class="space-y-4 p-6">
                    <div class="space-y-1.5">
                        <label class="block text-xs font-semibold uppercase tracking-wider text-slate-500">New Group Name</label>
                        <input
                            v-model="renameGroupForm.new_name"
                            type="text"
                            required
                            class="w-full px-3 py-2 text-sm bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-lg text-slate-950 dark:text-slate-50 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent transition-all"
                        />
                        <span v-if="renameGroupForm.errors.new_name" class="text-xs text-red-600 dark:text-red-400 font-medium block mt-1">{{ renameGroupForm.errors.new_name }}</span>
                    </div>

                    <div class="flex justify-end gap-3 pt-4 border-t border-slate-100 dark:border-slate-900">
                        <button
                            type="button"
                            @click="isRenamingGroup = false"
                            class="px-4 py-2 text-sm font-medium text-slate-700 dark:text-slate-350 bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-900 transition-colors cursor-pointer"
                        >
                            Cancel
                        </button>
                        <button
                            type="submit"
                            :disabled="renameGroupForm.processing"
                            class="px-4 py-2 text-sm font-semibold text-white bg-red-600 hover:bg-red-700 rounded-lg shadow-sm transition-all focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 disabled:opacity-50 cursor-pointer"
                        >
                            Save Changes
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Delete Group Modal -->
        <div 
            v-if="isDeletingGroup" 
            class="fixed inset-0 z-50 flex items-center justify-center p-4 animate-fade-in"
        >
            <div 
                @click="isDeletingGroup = false"
                class="fixed inset-0 bg-slate-950/60 backdrop-blur-sm"
            />
            
            <div class="relative bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-xl shadow-2xl w-full max-w-md overflow-hidden flex flex-col animate-in zoom-in-95 duration-200">
                <div class="p-6 text-center space-y-4">
                    <div class="mx-auto h-12 w-12 rounded-full bg-red-50 dark:bg-red-950/30 flex items-center justify-center border border-red-100 dark:border-red-900/50 text-red-600 dark:text-red-400">
                        <Trash2 class="h-6 w-6" />
                    </div>
                    <div class="space-y-1">
                        <h3 class="text-base font-bold text-slate-900 dark:text-slate-50">Delete Menu Group</h3>
                        <p class="text-sm text-slate-500 dark:text-slate-400 leading-normal">
                            Are you sure you want to delete the group <span class="font-semibold text-slate-950 dark:text-slate-50">{{ deleteGroupForm.group_name }}</span>? **This will permanently delete all menu items belonging to this group.**
                        </p>
                    </div>
                </div>

                <div class="px-6 py-4 border-t border-slate-200 dark:border-slate-800 flex justify-end gap-3 bg-slate-50/50 dark:bg-slate-900/50">
                    <button
                        type="button"
                        @click="isDeletingGroup = false"
                        class="px-4 py-2 text-sm font-medium text-slate-700 dark:text-slate-350 bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-900 transition-colors cursor-pointer"
                    >
                        Cancel
                    </button>
                    <button
                        type="button"
                        @click="submitDeleteGroup"
                        :disabled="deleteGroupForm.processing"
                        class="px-4 py-2 text-sm font-semibold text-white bg-red-600 hover:bg-red-700 rounded-lg shadow-sm transition-all focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 disabled:opacity-50 cursor-pointer"
                    >
                        Yes, Delete Group
                    </button>
                </div>
            </div>
        </div>
    </AdminLayout>
</template>
