<script setup lang="ts">
import { resolveMediaUrl } from '@/lib/utils';
import admin from '@/routes/admin';
import { Link, usePage } from '@inertiajs/vue3';
import {
    Activity,
    BadgeDollarSign,
    Banknote,
    BarChart2,
    Briefcase,
    Building,
    CalendarClock,
    CalendarRange,
    CheckCircle,
    CheckSquare,
    ChevronLeft,
    ClipboardCheck,
    Clock,
    FileClock,
    FileText,
    Files,
    Gift,
    HardDrive,
    History,
    Layers,
    LayoutDashboard,
    LayoutList,
    LifeBuoy,
    ListTodo,
    Megaphone,
    Package,
    Palette,
    Scale,
    Settings,
    Settings2,
    ShieldCheck,
    Tags,
    TrendingUp,
    User,
    UserCheck,
    Users,
    Zap,
} from 'lucide-vue-next';
import { computed, onBeforeUnmount, onMounted, ref } from 'vue';

// Icon mapping
const icons: Record<string, any> = {
    LayoutDashboard,
    Users,
    Briefcase,
    ShieldCheck,
    ChevronLeft,
    LifeBuoy,
    Activity,
    BarChart2,
    User,
    Palette,
    Zap,
    History,
    Scale,
    Settings,
    UserCheck,
    Building,
    FileClock,
    Clock,
    CalendarClock,
    ClipboardCheck,
    Settings2,
    CheckCircle,
    CalendarRange,
    Files,
    CheckSquare,
    ListTodo,
    Package,
    HardDrive,
    Tags,
    BadgeDollarSign,
    Layers,
    LayoutList,
    Banknote,
    Gift,
    TrendingUp,
    FileText,
    Megaphone,
};

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

const emit = defineEmits(['toggleCollapse', 'update:activeSection']);

const page = usePage();
const permissions = computed(() => (page.props as any).auth.available_permissions || {});

const can = (permission: string) => {
    const auth = (page.props as any).auth;
    return auth?.is_super_admin || auth?.permissions?.includes(permission);
};

// Initialize active section based on current URL
const getInitialSection = () => {
    const url = page.url;
    // Check if URL matches any sub-module route
    // Since we don't have route name -> URL map here easily without traversing,
    // we rely on specific checks or passed 'active' state if we verified it.
    // For now, keep the heuristic logic but iterate permissions if possible?
    // Let's stick to the simpler heuristic or a "findSectionByUrl" logic if robust.

    // Heuristic fallback matching the static logic's intent:
    if (url.startsWith('/admin/users') || url.startsWith('/admin/roles') || url.startsWith('/admin/profile')) return 'account_section';
    if (url.startsWith('/admin/business') || url.startsWith('/admin/legal')) return 'business_settings';
    if (url.startsWith('/admin/employees') || url.startsWith('/admin/departments')) return 'hrm_section';
    if (url.startsWith('/admin/attendance') || url.startsWith('/employee/attendance') || url.startsWith('/attendance')) return 'attendance_section';
    if (url.startsWith('/admin/leave')) return 'leave_section';
    if (url.startsWith('/admin/assets') || url.startsWith('/admin/asset-categories')) return 'asset_section';
    if (url.startsWith('/admin/announcements')) return 'communication_section';
    if (
        url.startsWith('/admin/payroll') ||
        url.startsWith('/admin/salary-certificates') ||
        url.startsWith('/admin/bonuses') ||
        url.startsWith('/admin/salary-increments') ||
        url.startsWith('/admin/loans') ||
        url.startsWith('/admin/taxes') ||
        url.startsWith('/admin/tax-assignments')
    )
        return 'payroll_section';
    if (url.startsWith('/admin/activity-logs')) return 'logs_section';
    if (url.startsWith('/admin/dashboard') || url === '/admin') return 'system_section';

    return 'system_section'; // Default
};

const activeSectionKey = ref(getInitialSection());
const activeSection = computed(() => permissions.value[activeSectionKey.value]);

const switchSection = (key: string) => {
    activeSectionKey.value = key;
    emit('update:activeSection', key);
};

// Branding helper
const t = (key: string) => {
    return page.props.branding?.admin?.sidebar?.[key] || key;
};

const logoUrl = computed(() => resolveMediaUrl((page.props as any).branding?.business_settings?.logo_url));
const liveLogoUrl = ref('');
const displayLogoUrl = computed(() => liveLogoUrl.value || logoUrl.value);

const handleLogoPreview = (event: Event) => {
    const customEvent = event as CustomEvent<string>;
    liveLogoUrl.value = customEvent.detail || '';
};

onMounted(() => {
    window.addEventListener('branding-logo-preview', handleLogoPreview);
});

onBeforeUnmount(() => {
    window.removeEventListener('branding-logo-preview', handleLogoPreview);
});

// Helper to resolve route URL safely
const resolveRouteUrl = (routeKey?: string) => {
    if (!routeKey) return null;

    // Handle 'admin.' routes using the imported wayfinder objects
    if (routeKey.startsWith('admin.')) {
        const parts = routeKey.replace('admin.', '').split('.');
        let current: any = admin;

        for (const part of parts) {
            if (current && current[part]) {
                current = current[part];
            } else {
                return null;
            }
        }

        if (current && typeof current.url === 'function') {
            return current.url();
        }
    }

    // Fallback: Use manual URL construction if needed, or if it's a non-admin route (e.g. employee) which we can't resolve via 'admin' object.
    // Ideally we should import 'employee' routes too if we need them.
    // attempts to simple heuristic if wayfinder fails ??
    // For now return null so it falls back to module.url
    return null;
};

// Helper to format menu string: converts snake_case to Title Case
const formatMenuLabel = (key: string) => {
    const text = t(key);
    // If translation doesn't match or returns snake case, format it
    if (text === key || text.includes('_')) {
        return text
            .split('_')
            .map((word: string) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
            .join(' ');
    }
    return text;
};
</script>

<template>
    <aside
        id="admin-sidebar"
        class="fixed inset-y-0 start-0 top-0 z-50 flex h-screen border-e border-admin-sidebar-border bg-admin-sidebar transition-all duration-300 ease-in-out lg:sticky dark:border-admin-sidebar-border-dark dark:bg-admin-sidebar-dark"
        :class="{ 'w-18': isCollapsed, 'w-75': !isCollapsed }"
    >
        <!-- TIER 1: Command Rail -->
        <div class="z-20 flex w-18 shrink-0 flex-col items-center space-y-6 bg-admin-sidebar-rail py-4 dark:bg-admin-sidebar-rail-dark">
            <Link
                :href="admin.dashboard.url()"
                class="flex aspect-square h-14 w-14 shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-lg transition-colors hover:brightness-110 dark:border-slate-700 dark:bg-slate-800"
            >
                <img v-if="displayLogoUrl" :src="displayLogoUrl" class="h-full w-full object-cover" />
                <Zap v-else :size="20" fill="currentColor" class="text-(--brand-primary)" />
            </Link>

            <div class="flex w-full flex-1 flex-col items-center space-y-2">
                <template v-for="(section, key) in permissions" :key="key">
                    <button
                        v-if="Object.keys(section.sub_modules || {}).some((k) => can(k))"
                        @click="switchSection(String(key))"
                        class="admin-rail-btn group relative flex w-full flex-col items-center py-3 transition-all"
                        :class="activeSectionKey === key ? 'active-rail' : 'rail-icon hover:brightness-110'"
                    >
                        <component :is="icons[section.icon] || Zap" :size="20" class="mb-1" />
                        <span
                            class="rail-label pointer-events-none absolute left-17.5 z-50 rounded-lg bg-slate-800 px-3 py-1.5 text-xs font-bold whitespace-nowrap text-white opacity-0 shadow-xl transition-opacity group-hover:pointer-events-auto group-hover:opacity-100"
                        >
                            {{ __(formatMenuLabel(String(section.label))) }}
                        </span>
                    </button>
                </template>
            </div>

            <div class="flex w-full flex-col items-center space-y-4 border-t border-slate-800/50 px-4 pt-4">
                <button
                    @click="emit('toggleCollapse')"
                    class="rail-icon group relative hidden h-10 w-10 items-center justify-center rounded-xl transition-all hover:bg-slate-800 hover:text-sky-400 lg:flex"
                >
                    <ChevronLeft :size="20" :class="{ 'rotate-180': isCollapsed }" />
                    <span
                        class="rail-label pointer-events-none absolute left-17.5 z-50 rounded-lg bg-slate-800 px-3 py-1.5 text-xs font-bold whitespace-nowrap text-white opacity-0 shadow-xl transition-opacity group-hover:pointer-events-auto group-hover:opacity-100"
                        >{{ __(t('collapse')) }}</span
                    >
                </button>
                <button
                    class="rail-icon group relative flex h-10 w-10 items-center justify-center rounded-xl transition-all hover:bg-slate-800 hover:text-sky-400"
                >
                    <LifeBuoy :size="20" />
                    <span
                        class="rail-label pointer-events-none absolute left-17.5 z-50 rounded-lg bg-slate-800 px-3 py-1.5 text-xs font-bold whitespace-nowrap text-white opacity-0 shadow-xl transition-opacity group-hover:pointer-events-auto group-hover:opacity-100"
                        >{{ __(t('support')) }}</span
                    >
                </button>
            </div>
        </div>

        <!-- TIER 2: Sub-menu -->
        <div
            id="tier-2-container"
            class="flex h-full flex-col overflow-hidden bg-admin-sidebar transition-all duration-300 ease-in-out dark:bg-admin-sidebar-dark"
            :class="isCollapsed ? 'pointer-events-none w-0 opacity-0' : 'w-57 opacity-100'"
        >
            <div class="border-sidebar-border dark:border-sidebar-border-dark border-b p-5">
                <h2
                    class="line-clamp-1 text-xl font-extrabold tracking-tight text-slate-900 dark:text-white"
                    :title="$page.props.branding.business_settings?.business_name"
                >
                    {{ $page.props.branding.business_settings?.business_name || __(t('tier_title')) }}
                </h2>
                <p class="mt-1.5 text-xs leading-snug font-semibold text-slate-500">
                    {{ $page.props.branding.business_settings?.tagline || __(t('tier_subtitle')) }}
                </p>
            </div>

            <div class="flex-1 space-y-1 overflow-y-auto p-4">
                <div v-if="activeSection" class="animate-fade-in">
                    <div class="mb-3 px-4 text-[11px] font-bold tracking-widest text-slate-400 uppercase">
                        {{ __(t(activeSection.label)) }}
                    </div>

                    <template v-for="(module, key) in activeSection.sub_modules" :key="key">
                        <Link
                            v-if="can(String(key))"
                            :href="resolveRouteUrl(module.route) || module.url || '#'"
                            class="flex items-center space-x-3 rounded-lg px-3 py-2.5 text-sm whitespace-nowrap transition-all"
                            :class="
                                (() => {
                                    let currentPath = $page.url.split('?')[0];

                                    // Special override for generated pages to map to their parent list base URL
                                    if (currentPath === '/admin/bonuses/generate') {
                                        currentPath = '/admin/bonuses/generations';
                                    }

                                    let bestMatchUrl = '';
                                    for (const k in activeSection.sub_modules) {
                                        const tUrl = activeSection.sub_modules[k].url ? activeSection.sub_modules[k].url.split('?')[0] : '';
                                        if (
                                            tUrl &&
                                            (currentPath === tUrl || currentPath.startsWith(tUrl + '/')) &&
                                            tUrl.length > bestMatchUrl.length
                                        ) {
                                            bestMatchUrl = tUrl;
                                        }
                                    }
                                    const thisUrl = module.url ? module.url.split('?')[0] : '';
                                    return bestMatchUrl && thisUrl === bestMatchUrl;
                                })()
                                    ? 'nav-link-active bg-admin-active font-bold text-admin-active-text'
                                    : 'text-slate-500 hover:bg-slate-50 dark:text-slate-400 dark:hover:bg-slate-800'
                            "
                        >
                            <component
                                :is="icons[module.icon] || Zap"
                                :size="16"
                                class="shrink-0"
                                :class="{
                                    'opacity-70': !(
                                        $page.url.startsWith(module.url) ||
                                        (module.route && $page.url.startsWith('/' + module.route.replace('.', '/').replace('index', ''))) ||
                                        (module.url === '/admin/bonuses/generations' && $page.url.startsWith('/admin/bonuses/generate'))
                                    ),
                                }"
                            />
                            <span>{{ __(formatMenuLabel(String(module.label))) }}</span>
                        </Link>
                    </template>

                    <!-- Special Case: My Profile (if not in permissions, user might still need it) -->
                    <!-- Usually Profile is common. If it's not in permissions, add it manually under Account section or generic? -->
                    <!-- For now, we only render what's in permissions. Profile is handled via User dropdown usually, but if we want it in sidebar: -->
                    <template v-if="activeSectionKey === 'account_section'">
                        <Link
                            :href="admin.profile.edit.url()"
                            class="flex items-center space-x-3 rounded-lg px-3 py-2.5 text-sm whitespace-nowrap transition-all"
                            :class="
                                $page.url.startsWith(admin.profile.edit.definition.url)
                                    ? 'nav-link-active bg-admin-active font-bold text-admin-active-text'
                                    : 'text-slate-500 hover:bg-slate-50 dark:text-slate-400 dark:hover:bg-slate-800'
                            "
                        >
                            <User :size="16" class="opacity-70" />
                            <span class="text-sm">{{ __(t('my_profile')) }}</span>
                        </Link>
                    </template>
                </div>
            </div>
        </div>
    </aside>
</template>

<style scoped>
.active-rail {
    background-color: var(--admin-active-item-bg);
    color: var(--admin-active-item-text) !important;
    border-right: 4px solid var(--admin-active-item-border);
}
:global(.dark) .active-rail {
    background-color: var(--admin-active-item-bg-dark);
    color: var(--admin-active-item-text-dark) !important;
    border-right: 4px solid var(--admin-active-item-border-dark);
}

[dir='rtl'] .active-rail {
    border-right: none;
    border-left: 4px solid var(--admin-active-item-border);
}
[dir='rtl'] :global(.dark) .active-rail {
    border-left: 4px solid var(--admin-active-item-border-dark);
}

.nav-link-active {
    background-color: var(--admin-active-item-bg);
    color: var(--admin-active-item-text);
    font-weight: 700;
}
:global(.dark) .nav-link-active {
    background-color: var(--admin-active-item-bg-dark);
    color: var(--admin-active-item-text-dark);
}

.animate-fade-in {
    animation: fadeIn 0.4s ease-out;
}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.rail-icon {
    color: var(--admin-sidebar-icon);
}
:global(.dark) .rail-icon {
    color: var(--admin-sidebar-icon-dark);
}
</style>
