<script setup lang="ts">
import { Link, usePage } from '@inertiajs/vue3';
import { computed } from 'vue';
import { useAuth } from '@/Composables/useAuth';
import * as LucideIcons from 'lucide-vue-next';
import { ChevronLeft, ChevronRight } from 'lucide-vue-next';

defineProps<{
    isCollapsed: boolean;
}>();

const emit = defineEmits<{
    (e: 'toggle'): void;
}>();

const { settings, hasPermission, hasRole } = useAuth();
const page = usePage();

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

// Filter menu items by user permissions/roles
const filteredNavigation = computed(() => {
    const rawNav = (page.props.navigation as any) || [];
    return rawNav.map((group: any) => {
        const items = group.items.filter((item: any) => {
            const permissionCheck = !item.permissions || item.permissions.length === 0 || item.permissions.some((p: string) => hasPermission(p));
            const roleCheck = !item.roles || item.roles.length === 0 || item.roles.some((r: string) => hasRole(r));
            return permissionCheck && roleCheck;
        });
        return { ...group, items };
    }).filter((group: any) => group.items.length > 0);
});

// Check if route is active
const isActive = (href: string) => {
    if (href === '/admin/dashboard') {
        return page.url === '/admin/dashboard';
    }
    if (href === '/admin/settings') {
        return page.url === '/admin/settings';
    }
    return page.url.startsWith(href);
};
</script>

<template>
    <aside
        :class="[
            'fixed top-0 bottom-0 left-0 z-40 hidden md:flex flex-col border-r border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-950 text-slate-900 dark:text-slate-100 transition-all duration-300 ease-in-out overflow-x-hidden',
            isCollapsed ? 'w-16' : 'w-64'
        ]"
    >
        <!-- Header: Logo & Title -->
        <div class="h-16 flex items-center justify-between px-4 border-b border-slate-200 dark:border-slate-800">
            <Link :href="route('dashboard')" class="flex items-center gap-3 overflow-hidden w-full">
                <img 
                    v-if="settings().site_logo" 
                    :src="settings().site_logo ?? undefined" 
                    alt="Logo" 
                    class="h-9 w-9 object-contain flex-shrink-0"
                />
                <div 
                    v-else 
                    class="h-9 w-9 rounded-lg bg-red-600 flex items-center justify-center flex-shrink-0 text-white font-bold text-lg shadow-md shadow-red-500/20"
                >
                    <span>{{ settings().site_name?.charAt(0) ?? 'L' }}</span>
                </div>
                
                <div v-if="!isCollapsed" class="flex flex-col min-w-0 transition-opacity duration-300">
                    <span class="font-semibold text-sm leading-none truncate">{{ settings().site_name }}</span>
                    <span class="text-[10px] text-slate-400 dark:text-slate-500 truncate mt-1 leading-none">{{ settings().site_description }}</span>
                </div>
            </Link>
        </div>

        <!-- Scrollable Navigation Area -->
        <div class="flex-1 overflow-y-auto overflow-x-hidden py-4 px-3 space-y-6">
            <div v-for="(group, gIdx) in filteredNavigation" :key="gIdx" class="space-y-1">
                <!-- Group Title -->
                <h3 
                    v-if="group.groupName && !isCollapsed" 
                    class="px-2 text-[10px] font-semibold tracking-wider text-slate-400 dark:text-slate-500 uppercase mb-2"
                >
                    {{ group.groupName }}
                </h3>
                
                <!-- Menu Items -->
                <div class="space-y-1">
                    <Link
                        v-for="(item, iIdx) in group.items"
                        :key="iIdx"
                        :href="item.href"
                        :class="[
                            'flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 group relative',
                            isActive(item.href) 
                                ? 'bg-red-50 dark:bg-red-950/40 text-red-600 dark:text-red-400' 
                                : 'hover:bg-slate-100 dark:hover:bg-slate-900 text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-100'
                        ]"
                    >
                        <!-- Active line indicator -->
                        <span 
                            v-if="isActive(item.href)" 
                            class="absolute left-0 top-2 bottom-2 w-1 rounded-r-md bg-red-600 dark:bg-red-400"
                        />
                        
                        <!-- Icon -->
                        <component 
                            :is="getIcon(item.icon)" 
                            :class="[
                                'h-5 w-5 flex-shrink-0 transition-colors',
                                isActive(item.href) ? 'text-red-600 dark:text-red-400' : 'text-slate-400 dark:text-slate-500 group-hover:text-slate-600 dark:group-hover:text-slate-300'
                            ]"
                        />
                        
                        <!-- Title -->
                        <span 
                            v-if="!isCollapsed" 
                            class="transition-opacity duration-300 whitespace-nowrap overflow-hidden text-ellipsis"
                        >
                            {{ item.title }}
                        </span>

                        <!-- Tooltip on collapsed state -->
                        <div 
                            v-if="isCollapsed" 
                            class="absolute left-full ml-2 px-2 py-1 bg-slate-900 dark:bg-slate-800 text-white text-xs rounded opacity-0 pointer-events-none group-hover:opacity-100 transition-opacity duration-200 z-50 shadow-md whitespace-nowrap"
                        >
                            {{ item.title }}
                        </div>
                    </Link>
                </div>
            </div>
        </div>

        <!-- Sidebar Footer Actions -->
        <div class="p-3 border-t border-slate-200 dark:border-slate-800 flex items-center justify-between gap-2">
            <button
                @click="emit('toggle')"
                class="h-8 w-8 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-900 flex items-center justify-center text-slate-500 dark:text-slate-400 transition-colors cursor-pointer"
            >
                <ChevronLeft v-if="!isCollapsed" class="h-5 w-5" />
                <ChevronRight v-else class="h-5 w-5" />
            </button>

            <div
                v-if="!isCollapsed"
                class="flex-1 flex items-center justify-center py-1.5 px-2.5 rounded-lg text-xs font-semibold bg-slate-50 dark:bg-slate-900/40 border border-slate-200 dark:border-slate-800 text-slate-400 dark:text-slate-500 font-mono select-none"
            >
                {{ settings().version || 'v1.0.0' }}
            </div>
        </div>
    </aside>
</template>
