"use client"
import * as React from "react"
import Link from "next/link"
import {
    UserCog,
    Users,
    ShieldCheck,
    Key,
    ChevronRight,
    LogOut,
    MonitorSmartphone,
    TriangleAlert,
    KeyRound,
    CircleUserRound,
    Bell,
    LayoutDashboard,
    Diamond,
    Briefcase,
    UserCheck,
    CheckSquare,
    // CalendarDays,
    Target,
    TrendingUp,
    FileText,
    BarChart3,
    Settings,
    Receipt,
    Layers,
    Megaphone,
    Wallet,
} from "lucide-react"

import {
    Sidebar,
    SidebarContent,
    SidebarFooter,
    SidebarHeader,
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
    SidebarGroup,
    SidebarGroupContent,
    SidebarMenuSub,
    SidebarMenuSubItem,
    useSidebar,
} from "@/components/ui/sidebar"
import {
    Collapsible,
    CollapsibleContent,
    CollapsibleTrigger,
} from "@/components/ui/collapsible"
import { cn } from "@/lib/utils"
import { usePathname, useRouter, useSearchParams } from "next/navigation"

import { useAppDispatch, useAppSelector } from "@/store/hooks"
import { clearCredentials } from "@/store/slices/auth-slice"
import { setSelectedTeam, selectSelectedTeam } from "@/store/slices/team-filter-slice"
import { useLogoutMutation, useGetProfileQuery } from "@/api/rtk/auth-api"
import { useTeamsQuery } from "@/hooks/use-teams-query"
import { useSession } from "next-auth/react"
import { clientSignOut } from "@/lib/client-sign-out"
import { useAuthToken } from "@/hooks/use-auth-token"
import { useNotificationUnreadCount } from "@/lib/notification-unread-store"
import {
    canAccessResource,
    canSeeAllTeamsInApp,
    canVerifyClientMeetingVerification,
    canViewSalesTargets,
    filterTeamsVisibleToUser,
    hasPermission,
    type PermissionSource,
} from "@/lib/permissions"
import { formatTeamLabelForUi } from "@/lib/deal-display"
import {
    buildHierarchicalTeamFilterOptions,
    formatTeamFilterLabel,
    isValidTeamFilterValue,
    TEAM_FILTER_ALL,
    type TeamFilterValue,
} from "@/lib/team-filter"
import { PROFILE_SETTINGS_PATH } from "@/lib/app-paths"


import {
    Combobox,
    ComboboxContent,
    ComboboxEmpty,
    ComboboxInput,
    ComboboxItem,
    ComboboxList,
    ComboboxTrigger,
} from "@/components/ui/combobox"
import { Button } from "@/components/ui/button"
import { UserAvatar } from "@/components/ui/user-avatar"
import {
    Tooltip,
    TooltipContent,
    TooltipTrigger,
} from "@/components/ui/tooltip"
import {
    Popover,
    PopoverContent,
    PopoverTrigger,
} from "@/components/ui/popover"

import { LogoutConfirmDialog } from "@/components/auth/logout-confirm-dialog"
import { NavItem } from "@/types/nav"
import { SidebarCloseButton } from "@/components/sidebar-close-button"
import { SidebarLink } from "@/components/sidebar-link"

const navItemsBeforePipeline: NavItem[] = [
    { title: "Leads", url: "/leads", icon: Diamond, subject: "lead" },
    { title: "Deals", url: "/sales-deals", icon: Briefcase, subject: "deal" },
]

/** Next.js sometimes fails to leave a dynamic child (e.g. /leads/[id]) when using <Link> to the parent; force client navigation. */
function shouldForceNavToListPath(
    pathname: string | null | undefined,
    basePath: string,
): boolean {
    if (!pathname) return false
    if (pathname === basePath || pathname === `${basePath}/`) return false
    return pathname.startsWith(`${basePath}/`)
}

const navItemsBeforeTeams: NavItem[] = [
    // Contacts (/contacts) hidden from sidebar — re-add with lucide-react `Contact` icon + subject "contact"
    { title: "Customers", url: "/customers", icon: UserCheck, subject: "customer" },
    // { title: "Companies", url: "/companies", icon: Hexagon, subject: "company" },
]

const navItemsAfterTeams: NavItem[] = [
    // { title: "Calendar", url: "/calendar", icon: CalendarDays, alwaysShow: true },
    { title: "Tasks", url: "/tasks", icon: CheckSquare, subject: "task" },
    { title: "Activities", url: "/activities", icon: Target, subject: "activity" },
    { title: "Forecasts", url: "/forecasts", icon: TrendingUp, subject: "report" },
    // { title: "Profile", url: "/settings?tab=profile", icon: CircleUserRound, alwaysShow: true },
]

// ────────────────────────────────────────────────────────────────────────────

// ────────────────────────────────────────────────────────────────────────────

export function AppSidebar() {
    const pathname = usePathname()
    const searchParams = useSearchParams()
    const router = useRouter()
    const { data: session } = useSession()
    const dispatch = useAppDispatch()
    const { state: sidebarState } = useSidebar()
    const isCollapsed = sidebarState === "collapsed"
    const [userMgmtPopoverOpen, setUserMgmtPopoverOpen] = React.useState(false)
    const [analyticsPopoverOpen, setAnalyticsPopoverOpen] = React.useState(false)
    const [teamsPopoverOpen, setTeamsPopoverOpen] = React.useState(false)
    const [marketingPopoverOpen, setMarketingPopoverOpen] = React.useState(false)
    const [showLogoutConfirm, setShowLogoutConfirm] = React.useState(false)
    const [logoutInProgress, setLogoutInProgress] = React.useState(false)
    const [logoutMutation] = useLogoutMutation()
    const { token } = useAuthToken()
    const selectedTeamFromRedux = useAppSelector(selectSelectedTeam)
    const backendUser = (session as { backendUser?: PermissionSource } | null)?.backendUser
    const hasSessionAccess = React.useCallback(
        (subject: string) => canAccessResource(backendUser, subject),
        [backendUser]
    )

    const { data: teams } = useTeamsQuery()
    const { data: profile } = useGetProfileQuery(undefined, { skip: !token })

    const permissionSourceForNav: PermissionSource =
        backendUser ?? profile ?? null
    const canReadLoginSessions = hasPermission(
        permissionSourceForNav,
        "READ",
        "LOGIN_SESSION",
    )
    const canReadSuspiciousActivity = hasPermission(
        permissionSourceForNav,
        "READ",
        "SUSPICIOUS_ACTIVITY",
    )
    const canReadPasswordResetRequests = hasPermission(
        permissionSourceForNav,
        "READ",
        "PASSWORD_RESET_REQUEST",
    )

    const visibleTeams = React.useMemo(() => {
        if (teams == null) return []

        const permissionSource: PermissionSource = backendUser ?? profile ?? null
        const viewerId =
            profile?.id ??
            (typeof backendUser === "object" && backendUser !== null && "id" in backendUser
                ? String((backendUser as { id: string }).id)
                : "")

        if (!canSeeAllTeamsInApp(permissionSource) && !viewerId) return []
        return filterTeamsVisibleToUser(teams, viewerId, permissionSource)
    }, [teams, profile, backendUser])

    const permissionSourceForTeams: PermissionSource = backendUser ?? profile ?? null
    const canSeeAllTeams = canSeeAllTeamsInApp(permissionSourceForTeams)

    const teamFilterOptions = React.useMemo(() => {
        const options = buildHierarchicalTeamFilterOptions(visibleTeams)
        if (!canSeeAllTeams) {
            return options.filter((option) => option.value !== TEAM_FILTER_ALL)
        }
        return options
    }, [visibleTeams, canSeeAllTeams])

    const selectedTeamSlug = selectedTeamFromRedux

    const selectedTeamLabel = React.useMemo(() => {
        const label = formatTeamFilterLabel(selectedTeamSlug, { teams: visibleTeams })
        if (label === "Division" || label === selectedTeamSlug) {
            const option = teamFilterOptions.find((o) => o.value === selectedTeamSlug)
            return option?.label ?? label
        }
        if (teamFilterOptions.some((o) => o.group === "team" && o.value === selectedTeamSlug)) {
            return formatTeamLabelForUi(label)
        }
        return label
    }, [selectedTeamSlug, visibleTeams, teamFilterOptions])

    const [teamFilterOpen, setTeamFilterOpen] = React.useState(false)

    React.useEffect(() => {
        if (visibleTeams.length === 0) return
        if (!isValidTeamFilterValue(selectedTeamSlug, visibleTeams)) {
            const fallback = teamFilterOptions[0]?.value ?? TEAM_FILTER_ALL
            dispatch(setSelectedTeam(fallback))
        }
    }, [visibleTeams, selectedTeamSlug, teamFilterOptions, dispatch])


    const confirmLogout = async () => {
        setLogoutInProgress(true)
        try {
            try {
                await logoutMutation().unwrap()
            } catch {
                // Proceed to clear client state even if API fails (e.g. token expired)
            }
            dispatch(clearCredentials())
            const fullPath =
                pathname +
                (searchParams.toString() ? `?${searchParams.toString()}` : "")
            await clientSignOut({
                callbackUrl: `/login?callbackUrl=${encodeURIComponent(fullPath)}`,
            })
        } catch {
            setShowLogoutConfirm(false)
        } finally {
            setLogoutInProgress(false)
        }
    }

    const unreadCount = useNotificationUnreadCount()
    const isNotificationsActive =
        pathname === "/notifications" || pathname.startsWith("/notifications/")
    const isSettingsActive =
        pathname === "/settings" || pathname.startsWith("/settings/")
    const isProfileActive =
        pathname === "/settings" &&
        (searchParams.get("tab") === "profile" || searchParams.get("tab") == null)
    const canAccessSettings = hasSessionAccess("settings")
    const accountPopoverItems = React.useMemo(() => {
        const items = ["Profile"]
        if (canAccessSettings) items.push("Settings")
        if (canReadLoginSessions) items.push("Login sessions")
        if (canReadSuspiciousActivity) items.push("Suspicious activity")
        if (canReadPasswordResetRequests) items.push("Reset Requests")
        items.push("Log out")
        return items
    }, [
        canAccessSettings,
        canReadLoginSessions,
        canReadSuspiciousActivity,
        canReadPasswordResetRequests,
    ])
    const showAdmin =
        hasSessionAccess("user") ||
        hasSessionAccess("role") ||
        hasSessionAccess("permission")

    const showAnalyticsDashboard = hasSessionAccess("dashboard")
    const showAnalyticsReports = hasPermission(
        permissionSourceForNav,
        "READ",
        "REPORT",
    )

    const showAnalyticsBdrReports = hasPermission(
        permissionSourceForNav,
        "READ",
        "BDR_METRICS",
    )

    const showSalesTargets = canViewSalesTargets(
        permissionSourceForNav,
        teams ?? undefined,
    )

    const showTransactions = hasPermission(
        permissionSourceForNav,
        "READ",
        "TRANSACTION",
    )

    const showMarketing = hasPermission(
        permissionSourceForNav,
        "READ",
        "MARKETING",
    )

    const showTeamsNav = hasSessionAccess("team")
    const showDivisionsNav = hasPermission(
        permissionSourceForNav,
        "READ",
        "DIVISION",
    )
    const showTeamsGroup = showTeamsNav || showDivisionsNav
    const isTeamsGroupActive =
        pathname === "/teams" ||
        pathname.startsWith("/teams/") ||
        pathname === "/divisions" ||
        pathname.startsWith("/divisions/")

    const showAnalyticsGroup =
        showAnalyticsDashboard ||
        showAnalyticsReports ||
        showAnalyticsBdrReports ||
        showSalesTargets ||
        showTransactions
    const isAnalyticsActive =
        pathname === "/" ||
        pathname === "/reports" ||
        pathname.startsWith("/bdr-metrics") ||
        pathname.startsWith("/sales-targets") ||
        pathname.startsWith("/transactions")

    const isMarketingGroupActive =
        pathname === "/marketing" ||
        pathname.startsWith("/marketing/")
    const isLoginSessionsActive = pathname === "/users/sessions"
    const isSuspiciousActivityActive = pathname === "/users/suspicious-activity"
    const isPasswordResetRequestsActive =
        pathname === "/users/password-reset-requests"

    const handleTeamSelect = (value: TeamFilterValue) => {
        dispatch(setSelectedTeam(value))
        setTeamFilterOpen(false)
        if (value === TEAM_FILTER_ALL) {
            router.push("/leads")
            return
        }
        if (value.startsWith("division:")) {
            const divisionId = value.slice("division:".length)
            router.push(`/leads?divisionId=${divisionId}`)
            return
        }
        router.push(`/leads?team=${value}`)
    }

    return (
        <>
            <Sidebar className="shadow-none" collapsible="icon">

                {/* ── Logo ── */}
                <SidebarHeader className="border-b border-black/6 p-0">
                    <div className={cn(
                        "flex items-center justify-between gap-2 px-[18px] py-[22px] transition-[padding] duration-200",
                        "group-data-[collapsible=icon]:flex-col group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:gap-2 group-data-[collapsible=icon]:px-2 group-data-[collapsible=icon]:py-3"
                    )}>
                        <div className="flex items-center gap-3 min-w-0 group-data-[collapsible=icon]:justify-center">
                            <Tooltip>
                                <TooltipTrigger asChild>
                                    <div className="bg-accent flex size-8 shrink-0 items-center justify-center rounded-lg font-['Lexend'] text-sm font-extrabold text-white cursor-default">
                                        J
                                    </div>
                                </TooltipTrigger>
                                <TooltipContent side="right" align="center" hidden={!isCollapsed}>
                                    Jumppace
                                </TooltipContent>
                            </Tooltip>
                            <div className="flex flex-col overflow-hidden group-data-[collapsible=icon]:hidden">
                                <span className="font-['Lexend'] text-sm font-bold leading-none text-[#101828]">Jumppace</span>
                                <span className="mt-1 text-[10px] tracking-[0.06em] text-[#575a62]">SALES HUB</span>
                            </div>
                        </div>
                        <Tooltip>
                            <TooltipTrigger asChild>
                                <span className="group-data-[collapsible=icon]:flex group-data-[collapsible=icon]:justify-center">
                                    <SidebarCloseButton />
                                </span>
                            </TooltipTrigger>
                            <TooltipContent side="right" align="center" hidden={!isCollapsed}>
                                Close sidebar
                            </TooltipContent>
                        </Tooltip>
                    </div>
                </SidebarHeader>

                <SidebarContent className="py-3 px-2.5 overflow-y-auto scrollbar-themed group-data-[collapsible=icon]:px-2 group-data-[collapsible=icon]:py-4 group-data-[collapsible=icon]:gap-4">
                    {/* ── Teams Selector ── */}
                    <SidebarGroup className="group-data-[collapsible=icon]:hidden">
                        <div className="px-2 mb-2">
                            <span className="font-['Lexend_Deca'] text-[9px] font-bold uppercase tracking-widest text-[#575a62] group-data-[collapsible=icon]:hidden">
                                Filter by Team
                            </span>
                        </div>
                        <Popover open={teamFilterOpen} onOpenChange={setTeamFilterOpen}>
                            <PopoverTrigger asChild>
                                <Button
                                    variant="outline"
                                    className="h-9 w-full justify-between text-[13px] font-['Lexend_Deca'] bg-white/40 backdrop-blur-sm border-white/20 shadow-sm hover:bg-white/50"
                                >
                                    <span className="truncate">{selectedTeamLabel || "Select team or division"}</span>
                                    <ChevronRight size={14} className="shrink-0 opacity-50 rotate-90" />
                                </Button>
                            </PopoverTrigger>
                            <PopoverContent
                                align="start"
                                className="w-[var(--radix-popover-trigger-width)] p-1 bg-white/95 backdrop-blur-md border-white/30 shadow-xl max-h-72 overflow-y-auto scrollbar-themed"
                            >
                                {teamFilterOptions.length === 0 ? (
                                    <div className="px-3 py-2 text-[12px] text-gray-500">No teams found.</div>
                                ) : (
                                    teamFilterOptions.map((option) => {
                                        const team = visibleTeams.find(
                                            (t) =>
                                                t.name.toLowerCase().replace(/\s+/g, "-") === option.value,
                                        )
                                        const isSelected = selectedTeamSlug === option.value
                                        return (
                                            <button
                                                key={option.value}
                                                type="button"
                                                onClick={() => handleTeamSelect(option.value)}
                                                className={cn(
                                                    "w-full flex items-center gap-2 rounded-lg px-2.5 py-2 text-left transition-colors",
                                                    option.indent && "pl-6",
                                                    option.group === "division" && "mt-1 font-semibold",
                                                    isSelected
                                                        ? "bg-[#6C63FF]/10 text-[#6C63FF]"
                                                        : "hover:bg-white/70 text-gray-800",
                                                )}
                                            >
                                                {option.group === "team" && team ? (
                                                    <div
                                                        className="size-2 shrink-0 rounded-full shadow-sm"
                                                        style={{ backgroundColor: team.color }}
                                                    />
                                                ) : (
                                                    <div className="size-2 shrink-0 rounded-full bg-gray-300" />
                                                )}
                                                <span className="font-['Lexend_Deca'] text-[13px] truncate">
                                                    {option.group === "team"
                                                        ? formatTeamLabelForUi(option.label)
                                                        : option.label}
                                                </span>
                                            </button>
                                        )
                                    })
                                )}
                            </PopoverContent>
                        </Popover>
                    </SidebarGroup>

                    {/* ── Main Nav (permission-gated by session abilities) ── */}
                    <SidebarGroup className="group-data-[collapsible=icon]:flex group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:flex-col group-data-[collapsible=icon]:gap-0">
                        <SidebarMenu className="gap-0.5 w-full min-w-0 group-data-[collapsible=icon]:flex group-data-[collapsible=icon]:flex-col group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:gap-2 group-data-[collapsible=icon]:min-w-0">
                            {showAnalyticsGroup && (
                                <SidebarMenuItem className="w-full group-data-[collapsible=icon]:flex group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:min-h-8">
                                    <div className="w-full group-data-[collapsible=icon]:hidden">
                                        <Collapsible
                                            className="group/collapsible w-full"
                                            defaultOpen={isAnalyticsActive}
                                        >
                                            <CollapsibleTrigger asChild>
                                                <SidebarMenuButton
                                                    tooltip="Sales Analytics"
                                                    className={cn(
                                                        "flex h-[38px] items-center gap-[10px] rounded-[10px] border-none px-3 py-[9px] font-['Lexend_Deca'] text-[13px] font-normal transition-all duration-150",
                                                        isAnalyticsActive
                                                            ? "bg-[#1d1d39] text-white font-semibold"
                                                            : "bg-transparent text-[#101828] hover:bg-[#1d1d39] hover:text-white",
                                                    )}
                                                >
                                                    <BarChart3 className="size-[15px] shrink-0" />
                                                    <span className="flex-1">Sales Analytics</span>
                                                    <ChevronRight className="ml-auto size-3 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
                                                </SidebarMenuButton>
                                            </CollapsibleTrigger>
                                            <CollapsibleContent>
                                                <SidebarMenuSub className="mx-0 border-l border-black/6 ml-[14px] pl-3 mt-0.5 gap-0.5">
                                                    {showAnalyticsDashboard && (
                                                        <SidebarMenuSubItem>
                                                            <SidebarLink
                                                                href="/"
                                                                icon={LayoutDashboard}
                                                                label="Dashboard"
                                                                isActive={pathname === "/"}
                                                                activeClassName="text-accent bg-accent/10 font-semibold"
                                                                inactiveClassName="text-[#575a62] hover:bg-[#1d1d39] hover:text-white"
                                                                className="w-full"
                                                            />
                                                        </SidebarMenuSubItem>
                                                    )}
                                                    {showAnalyticsReports && (
                                                        <SidebarMenuSubItem>
                                                            <SidebarLink
                                                                href="/reports"
                                                                icon={FileText}
                                                                label="Reports"
                                                                isActive={pathname === "/reports" || pathname.startsWith("/reports/")}
                                                                activeClassName="text-accent bg-accent/10 font-semibold"
                                                                inactiveClassName="text-[#575a62] hover:bg-[#1d1d39] hover:text-white"
                                                                className="w-full"
                                                            />
                                                        </SidebarMenuSubItem>
                                                    )}
                                                    {showAnalyticsBdrReports && (
                                                        <SidebarMenuSubItem>
                                                            <SidebarLink
                                                                href="/bdr-metrics"
                                                                icon={TrendingUp}
                                                                label="BDR Reports"
                                                                isActive={pathname.startsWith("/bdr-metrics")}
                                                                activeClassName="text-accent bg-accent/10 font-semibold"
                                                                inactiveClassName="text-[#575a62] hover:bg-[#1d1d39] hover:text-white"
                                                                className="w-full"
                                                            />
                                                        </SidebarMenuSubItem>
                                                    )}
                                                    {showSalesTargets && (
                                                        <SidebarMenuSubItem>
                                                            <SidebarLink
                                                                href="/sales-targets"
                                                                icon={Target}
                                                                label="Sales targets"
                                                                isActive={pathname.startsWith("/sales-targets")}
                                                                activeClassName="text-accent bg-accent/10 font-semibold"
                                                                inactiveClassName="text-[#575a62] hover:bg-[#1d1d39] hover:text-white"
                                                                className="w-full"
                                                            />
                                                        </SidebarMenuSubItem>
                                                    )}
                                                    {showTransactions && (
                                                        <SidebarMenuSubItem>
                                                            <SidebarLink
                                                                href="/transactions"
                                                                icon={Receipt}
                                                                label="Transactions"
                                                                isActive={pathname.startsWith("/transactions")}
                                                                activeClassName="text-accent bg-accent/10 font-semibold"
                                                                inactiveClassName="text-[#575a62] hover:bg-[#1d1d39] hover:text-white"
                                                                className="w-full"
                                                            />
                                                        </SidebarMenuSubItem>
                                                    )}
                                                </SidebarMenuSub>
                                            </CollapsibleContent>
                                        </Collapsible>
                                    </div>
                                    <div className="hidden w-full group-data-[collapsible=icon]:flex group-data-[collapsible=icon]:justify-center">
                                        <Popover open={analyticsPopoverOpen} onOpenChange={setAnalyticsPopoverOpen}>
                                            <PopoverTrigger asChild>
                                                <SidebarMenuButton
                                                    className={cn(
                                                        "flex h-8 min-h-8 w-8 min-w-8 shrink-0 p-0 justify-center items-center rounded-lg border-none font-['Lexend_Deca'] text-[13px] font-normal transition-all duration-150",
                                                        isAnalyticsActive
                                                            ? "bg-[#1d1d39] text-white"
                                                            : "bg-transparent text-[#101828] hover:bg-[#1d1d39] hover:text-white",
                                                    )}
                                                >
                                                    <BarChart3 className="size-4 shrink-0" />
                                                </SidebarMenuButton>
                                            </PopoverTrigger>
                                            <PopoverContent
                                                side="right"
                                                align="start"
                                                sideOffset={8}
                                                className="w-52 p-1.5 rounded-xl rounded-tr-[20px] rounded-br-[20px] border border-border/80 border-r border-white/60 bg-sidebar shadow-lg backdrop-blur-[15px]"
                                            >
                                                <nav className="flex flex-col gap-0.5">
                                                    {showAnalyticsDashboard && (
                                                        <SidebarLink
                                                            href="/"
                                                            icon={LayoutDashboard}
                                                            label="Dashboard"
                                                            isActive={pathname === "/"}
                                                            onClick={() => setAnalyticsPopoverOpen(false)}
                                                        />
                                                    )}
                                                    {showAnalyticsReports && (
                                                        <SidebarLink
                                                            href="/reports"
                                                            icon={FileText}
                                                            label="Reports"
                                                            isActive={pathname === "/reports"}
                                                            onClick={() => setAnalyticsPopoverOpen(false)}
                                                        />
                                                    )}
                                                    {showAnalyticsBdrReports && (
                                                        <SidebarLink
                                                            href="/bdr-metrics"
                                                            icon={TrendingUp}
                                                            label="BDR Reports"
                                                            isActive={pathname.startsWith("/bdr-metrics")}
                                                            onClick={() => setAnalyticsPopoverOpen(false)}
                                                        />
                                                    )}
                                                    {showSalesTargets && (
                                                        <SidebarLink
                                                            href="/sales-targets"
                                                            icon={Target}
                                                            label="Sales targets"
                                                            isActive={pathname.startsWith("/sales-targets")}
                                                            onClick={() => setAnalyticsPopoverOpen(false)}
                                                        />
                                                    )}
                                                    {showTransactions && (
                                                        <SidebarLink
                                                            href="/transactions"
                                                            icon={Receipt}
                                                            label="Transactions"
                                                            isActive={pathname.startsWith("/transactions")}
                                                            onClick={() => setAnalyticsPopoverOpen(false)}
                                                        />
                                                    )}
                                                </nav>
                                            </PopoverContent>
                                        </Popover>
                                    </div>
                                </SidebarMenuItem>
                            )}
                            {showMarketing && (
                                <SidebarMenuItem className="w-full group-data-[collapsible=icon]:flex group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:min-h-8">
                                    <div className="w-full group-data-[collapsible=icon]:hidden">
                                        <Collapsible
                                            className="group/collapsible w-full"
                                            defaultOpen={isMarketingGroupActive}
                                        >
                                            <CollapsibleTrigger asChild>
                                                <SidebarMenuButton
                                                    tooltip="Marketing"
                                                    className={cn(
                                                        "flex h-[38px] items-center gap-[10px] rounded-[10px] border-none px-3 py-[9px] font-['Lexend_Deca'] text-[13px] font-normal transition-all duration-150",
                                                        isMarketingGroupActive
                                                            ? "bg-[#1d1d39] text-white font-semibold"
                                                            : "bg-transparent text-[#101828] hover:bg-[#1d1d39] hover:text-white",
                                                    )}
                                                >
                                                    <Megaphone className="size-[15px] shrink-0" />
                                                    <span className="flex-1">Marketing</span>
                                                    <ChevronRight className="ml-auto size-3 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
                                                </SidebarMenuButton>
                                            </CollapsibleTrigger>
                                            <CollapsibleContent>
                                                <SidebarMenuSub className="mx-0 border-l border-black/6 ml-[14px] pl-3 mt-0.5 gap-0.5">
                                                    <SidebarMenuSubItem>
                                                        <SidebarLink
                                                            href="/marketing/spending"
                                                            icon={Wallet}
                                                            label="Spending"
                                                            isActive={
                                                                pathname === "/marketing/spending" ||
                                                                pathname.startsWith("/marketing/spending/")
                                                            }
                                                            activeClassName="text-accent bg-accent/10 font-semibold"
                                                            inactiveClassName="text-[#575a62] hover:bg-[#1d1d39] hover:text-white"
                                                            className="w-full"
                                                        />
                                                    </SidebarMenuSubItem>
                                                    <SidebarMenuSubItem>
                                                        <SidebarLink
                                                            href="/marketing/dashboard"
                                                            icon={LayoutDashboard}
                                                            label="Dashboard"
                                                            isActive={
                                                                pathname === "/marketing/dashboard" ||
                                                                pathname.startsWith("/marketing/dashboard/")
                                                            }
                                                            activeClassName="text-accent bg-accent/10 font-semibold"
                                                            inactiveClassName="text-[#575a62] hover:bg-[#1d1d39] hover:text-white"
                                                            className="w-full"
                                                        />
                                                    </SidebarMenuSubItem>
                                                    <SidebarMenuSubItem>
                                                        <SidebarLink
                                                            href="/marketing/analytics"
                                                            icon={BarChart3}
                                                            label="Marketing analytics"
                                                            isActive={
                                                                pathname === "/marketing/analytics" ||
                                                                pathname.startsWith("/marketing/analytics/")
                                                            }
                                                            activeClassName="text-accent bg-accent/10 font-semibold"
                                                            inactiveClassName="text-[#575a62] hover:bg-[#1d1d39] hover:text-white"
                                                            className="w-full"
                                                        />
                                                    </SidebarMenuSubItem>
                                                </SidebarMenuSub>
                                            </CollapsibleContent>
                                        </Collapsible>
                                    </div>
                                    <div className="hidden w-full group-data-[collapsible=icon]:flex group-data-[collapsible=icon]:justify-center">
                                        <Popover open={marketingPopoverOpen} onOpenChange={setMarketingPopoverOpen}>
                                            <PopoverTrigger asChild>
                                                <SidebarMenuButton
                                                    className={cn(
                                                        "flex h-8 min-h-8 w-8 min-w-8 shrink-0 p-0 justify-center items-center rounded-lg border-none font-['Lexend_Deca'] text-[13px] font-normal transition-all duration-150",
                                                        isMarketingGroupActive
                                                            ? "bg-[#1d1d39] text-white"
                                                            : "bg-transparent text-[#101828] hover:bg-[#1d1d39] hover:text-white",
                                                    )}
                                                >
                                                    <Megaphone className="size-4 shrink-0" />
                                                </SidebarMenuButton>
                                            </PopoverTrigger>
                                            <PopoverContent
                                                side="right"
                                                align="start"
                                                sideOffset={8}
                                                className="w-52 p-1.5 rounded-xl rounded-tr-[20px] rounded-br-[20px] border border-border/80 border-r border-white/60 bg-sidebar shadow-lg backdrop-blur-[15px]"
                                            >
                                                <nav className="flex flex-col gap-0.5">
                                                    <SidebarLink
                                                        href="/marketing/spending"
                                                        icon={Wallet}
                                                        label="Spending"
                                                        isActive={
                                                            pathname === "/marketing/spending" ||
                                                            pathname.startsWith("/marketing/spending/")
                                                        }
                                                        onClick={() => setMarketingPopoverOpen(false)}
                                                    />
                                                    <SidebarLink
                                                        href="/marketing/dashboard"
                                                        icon={LayoutDashboard}
                                                        label="Dashboard"
                                                        isActive={
                                                            pathname === "/marketing/dashboard" ||
                                                            pathname.startsWith("/marketing/dashboard/")
                                                        }
                                                        onClick={() => setMarketingPopoverOpen(false)}
                                                    />
                                                    <SidebarLink
                                                        href="/marketing/analytics"
                                                        icon={BarChart3}
                                                        label="Marketing analytics"
                                                        isActive={
                                                            pathname === "/marketing/analytics" ||
                                                            pathname.startsWith("/marketing/analytics/")
                                                        }
                                                        onClick={() => setMarketingPopoverOpen(false)}
                                                    />
                                                </nav>
                                            </PopoverContent>
                                        </Popover>
                                    </div>
                                </SidebarMenuItem>
                            )}
                            {navItemsBeforePipeline.map((item) => {
                                const canAccess = item.alwaysShow || (item.subject && hasSessionAccess(item.subject))
                                if (!canAccess) return null
                                const isActive = pathname === item.url || (item.url !== "/" && pathname.startsWith(item.url))
                                const forceListNav =
                                    item.url === "/leads" || item.url === "/sales-deals"
                                        ? shouldForceNavToListPath(pathname, item.url)
                                        : false
                                return (
                                    <SidebarMenuItem key={item.title} className="w-full group-data-[collapsible=icon]:flex group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:min-h-8">
                                        <SidebarMenuButton
                                            asChild
                                            tooltip={item.title}
                                            className={cn(
                                                "flex h-[38px] items-center gap-[10px] rounded-[10px] border-none px-3 py-[9px] font-['Lexend_Deca'] text-[13px] font-normal transition-all duration-150",
                                                "group-data-[collapsible=icon]:h-8! group-data-[collapsible=icon]:min-h-8! group-data-[collapsible=icon]:w-8! group-data-[collapsible=icon]:min-w-8! group-data-[collapsible=icon]:shrink-0! group-data-[collapsible=icon]:p-0! group-data-[collapsible=icon]:justify-center! group-data-[collapsible=icon]:items-center! group-data-[collapsible=icon]:rounded-lg",
                                                isActive
                                                    ? "bg-[#1d1d39] text-white font-semibold"
                                                    : "bg-transparent text-[#101828] hover:bg-[#1d1d39] hover:text-white"
                                            )}
                                        >
                                            <Link
                                                href={item.url}
                                                className="group/navlink relative flex items-center justify-center gap-2 w-full min-w-0 group-data-[collapsible=icon]:w-8 group-data-[collapsible=icon]:min-w-8 group-data-[collapsible=icon]:h-8 group-data-[collapsible=icon]:min-h-8 group-data-[collapsible=icon]:shrink-0 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:items-center"
                                                onClick={(e) => {
                                                    if (!forceListNav) return
                                                    if (e.defaultPrevented) return
                                                    if (
                                                        e.button !== 0 ||
                                                        e.metaKey ||
                                                        e.ctrlKey ||
                                                        e.shiftKey ||
                                                        e.altKey
                                                    ) {
                                                        return
                                                    }
                                                    e.preventDefault()
                                                    router.push(item.url)
                                                }}
                                            >
                                                <item.icon className="size-[15px] shrink-0 min-w-[15px] min-h-[15px] group-data-[collapsible=icon]:size-4 group-data-[collapsible=icon]:min-w-4 group-data-[collapsible=icon]:min-h-4" />
                                                <span className="flex-1 group-data-[collapsible=icon]:hidden">{item.title}</span>
                                                <ChevronRight className={cn(
                                                    "size-3 shrink-0 group-data-[collapsible=icon]:hidden transition-opacity duration-150",
                                                    isActive ? "opacity-100" : "opacity-0 group-hover/navlink:opacity-100"
                                                )} />
                                            </Link>
                                        </SidebarMenuButton>
                                    </SidebarMenuItem>
                                )
                            })}

                            {/* QA Verify Leads - short name. Only visible to users with CLIENT_MEETING_VERIFICATION (QA) permission */}
                            {(() => {
                              const canVerifyQa = canVerifyClientMeetingVerification(permissionSourceForNav)
                              if (!canVerifyQa) return null
                              const qaPath = "/qa-verify-leads"
                              const isQaActive = pathname === qaPath || pathname.startsWith(qaPath + "/")
                              return (
                                <SidebarMenuItem className="w-full group-data-[collapsible=icon]:flex group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:min-h-8">
                                  <SidebarMenuButton
                                    asChild
                                    tooltip="QA Verify"
                                    className={cn(
                                      "flex h-[38px] items-center gap-[10px] rounded-[10px] border-none px-3 py-[9px] font-['Lexend_Deca'] text-[13px] font-normal transition-all duration-150",
                                      "group-data-[collapsible=icon]:h-8! group-data-[collapsible=icon]:min-h-8! group-data-[collapsible=icon]:w-8! group-data-[collapsible=icon]:min-w-8! group-data-[collapsible=icon]:shrink-0! group-data-[collapsible=icon]:p-0! group-data-[collapsible=icon]:justify-center! group-data-[collapsible=icon]:items-center! group-data-[collapsible=icon]:rounded-lg",
                                      isQaActive
                                        ? "bg-[#1d1d39] text-white font-semibold"
                                        : "bg-transparent text-[#101828] hover:bg-[#1d1d39] hover:text-white"
                                    )}
                                  >
                                    <Link href={qaPath} className="group/navlink relative flex items-center justify-center gap-2 w-full min-w-0 group-data-[collapsible=icon]:w-8 group-data-[collapsible=icon]:min-w-8 group-data-[collapsible=icon]:h-8 group-data-[collapsible=icon]:min-h-8 group-data-[collapsible=icon]:shrink-0 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:items-center">
                                      <CheckSquare className="size-[15px] shrink-0 min-w-[15px] min-h-[15px] group-data-[collapsible=icon]:size-4 group-data-[collapsible=icon]:min-w-4 group-data-[collapsible=icon]:min-h-4" />
                                      <span className="flex-1 group-data-[collapsible=icon]:hidden">QA Verify</span>
                                      <ChevronRight className={cn(
                                        "size-3 shrink-0 group-data-[collapsible=icon]:hidden transition-opacity duration-150",
                                        isQaActive ? "opacity-100" : "opacity-0 group-hover/navlink:opacity-100"
                                      )} />
                                    </Link>
                                  </SidebarMenuButton>
                                </SidebarMenuItem>
                              )
                            })()}

                            {navItemsBeforeTeams.map((item) => {
                                const canAccess = item.alwaysShow || (item.subject && hasSessionAccess(item.subject))
                                if (!canAccess) return null
                                const isActive = pathname === item.url || (item.url !== "/" && pathname.startsWith(item.url))
                                return (
                                    <SidebarMenuItem key={item.title} className="w-full group-data-[collapsible=icon]:flex group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:min-h-8">
                                        <SidebarMenuButton
                                            asChild
                                            tooltip={item.title}
                                            className={cn(
                                                "flex h-[38px] items-center gap-[10px] rounded-[10px] border-none px-3 py-[9px] font-['Lexend_Deca'] text-[13px] font-normal transition-all duration-150",
                                                "group-data-[collapsible=icon]:h-8! group-data-[collapsible=icon]:min-h-8! group-data-[collapsible=icon]:w-8! group-data-[collapsible=icon]:min-w-8! group-data-[collapsible=icon]:shrink-0! group-data-[collapsible=icon]:p-0! group-data-[collapsible=icon]:justify-center! group-data-[collapsible=icon]:items-center! group-data-[collapsible=icon]:rounded-lg",
                                                isActive
                                                    ? "bg-[#1d1d39] text-white font-semibold"
                                                    : "bg-transparent text-[#101828] hover:bg-[#1d1d39] hover:text-white"
                                            )}
                                        >
                                            <Link href={item.url} className="group/navlink relative flex items-center justify-center gap-2 w-full min-w-0 group-data-[collapsible=icon]:w-8 group-data-[collapsible=icon]:min-w-8 group-data-[collapsible=icon]:h-8 group-data-[collapsible=icon]:min-h-8 group-data-[collapsible=icon]:shrink-0 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:items-center">
                                                <item.icon className="size-[15px] shrink-0 min-w-[15px] min-h-[15px] group-data-[collapsible=icon]:size-4 group-data-[collapsible=icon]:min-w-4 group-data-[collapsible=icon]:min-h-4" />
                                                <span className="flex-1 group-data-[collapsible=icon]:hidden">{item.title}</span>
                                                <ChevronRight className={cn(
                                                    "size-3 shrink-0 group-data-[collapsible=icon]:hidden transition-opacity duration-150",
                                                    isActive ? "opacity-100" : "opacity-0 group-hover/navlink:opacity-100"
                                                )} />
                                            </Link>
                                        </SidebarMenuButton>
                                    </SidebarMenuItem>
                                )
                            })}

                            {showTeamsGroup && (
                                <SidebarMenuItem className="w-full group-data-[collapsible=icon]:flex group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:min-h-8">
                                    <div className="w-full group-data-[collapsible=icon]:hidden">
                                        <Collapsible
                                            className="group/collapsible w-full"
                                            defaultOpen={isTeamsGroupActive}
                                        >
                                            <CollapsibleTrigger asChild>
                                                <SidebarMenuButton
                                                    tooltip="Teams"
                                                    className={cn(
                                                        "flex h-[38px] items-center gap-[10px] rounded-[10px] border-none px-3 py-[9px] font-['Lexend_Deca'] text-[13px] font-normal transition-all duration-150",
                                                        isTeamsGroupActive
                                                            ? "bg-[#1d1d39] text-white font-semibold"
                                                            : "bg-transparent text-[#101828] hover:bg-[#1d1d39] hover:text-white",
                                                    )}
                                                >
                                                    <Users className="size-[15px] shrink-0" />
                                                    <span className="flex-1">Teams</span>
                                                    <ChevronRight className="ml-auto size-3 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
                                                </SidebarMenuButton>
                                            </CollapsibleTrigger>
                                            <CollapsibleContent>
                                                <SidebarMenuSub className="mx-0 border-l border-black/6 ml-[14px] pl-3 mt-0.5 gap-0.5">
                                                    {showTeamsNav && (
                                                        <SidebarMenuSubItem>
                                                            <SidebarLink
                                                                href="/teams"
                                                                icon={Users}
                                                                label="Teams"
                                                                isActive={pathname === "/teams" || pathname.startsWith("/teams/")}
                                                                activeClassName="text-accent bg-accent/10 font-semibold"
                                                                inactiveClassName="text-[#575a62] hover:bg-[#1d1d39] hover:text-white"
                                                                className="w-full"
                                                            />
                                                        </SidebarMenuSubItem>
                                                    )}
                                                    {showDivisionsNav && (
                                                        <SidebarMenuSubItem>
                                                            <SidebarLink
                                                                href="/divisions"
                                                                icon={Layers}
                                                                label="Divisions"
                                                                isActive={pathname === "/divisions" || pathname.startsWith("/divisions/")}
                                                                activeClassName="text-accent bg-accent/10 font-semibold"
                                                                inactiveClassName="text-[#575a62] hover:bg-[#1d1d39] hover:text-white"
                                                                className="w-full"
                                                            />
                                                        </SidebarMenuSubItem>
                                                    )}
                                                    <SidebarMenuSubItem>
                                                        <SidebarLink
                                                            href="/teams/support-members"
                                                            icon={UserCheck}
                                                            label="Support Members"
                                                            isActive={pathname === "/teams/support-members" || pathname.startsWith("/teams/support-members/")}
                                                            activeClassName="text-accent bg-accent/10 font-semibold"
                                                            inactiveClassName="text-[#575a62] hover:bg-[#1d1d39] hover:text-white"
                                                            className="w-full"
                                                        />
                                                    </SidebarMenuSubItem>
                                                </SidebarMenuSub>
                                            </CollapsibleContent>
                                        </Collapsible>
                                    </div>
                                    <div className="hidden w-full group-data-[collapsible=icon]:flex group-data-[collapsible=icon]:justify-center">
                                        <Popover open={teamsPopoverOpen} onOpenChange={setTeamsPopoverOpen}>
                                            <PopoverTrigger asChild>
                                                <SidebarMenuButton
                                                    className={cn(
                                                        "flex h-8 min-h-8 w-8 min-w-8 shrink-0 p-0 justify-center items-center rounded-lg border-none font-['Lexend_Deca'] text-[13px] font-normal transition-all duration-150",
                                                        isTeamsGroupActive
                                                            ? "bg-[#1d1d39] text-white"
                                                            : "bg-transparent text-[#101828] hover:bg-[#1d1d39] hover:text-white",
                                                    )}
                                                >
                                                    <Users className="size-4 shrink-0" />
                                                </SidebarMenuButton>
                                            </PopoverTrigger>
                                            <PopoverContent
                                                side="right"
                                                align="start"
                                                sideOffset={8}
                                                className="w-52 p-1.5 rounded-xl rounded-tr-[20px] rounded-br-[20px] border border-border/80 border-r border-white/60 bg-sidebar shadow-lg backdrop-blur-[15px]"
                                            >
                                                <nav className="flex flex-col gap-0.5">
                                                    {showTeamsNav && (
                                                        <SidebarLink
                                                            href="/teams"
                                                            icon={Users}
                                                            label="Teams"
                                                            isActive={pathname === "/teams" || pathname.startsWith("/teams/")}
                                                            onClick={() => setTeamsPopoverOpen(false)}
                                                        />
                                                    )}
                                                    {showDivisionsNav && (
                                                        <SidebarLink
                                                            href="/divisions"
                                                            icon={Layers}
                                                            label="Divisions"
                                                            isActive={pathname === "/divisions" || pathname.startsWith("/divisions/")}
                                                            onClick={() => setTeamsPopoverOpen(false)}
                                                        />
                                                    )}
                                                    <SidebarLink
                                                        href="/teams/support-members"
                                                        icon={UserCheck}
                                                        label="Support Members"
                                                        isActive={pathname === "/teams/support-members" || pathname.startsWith("/teams/support-members/")}
                                                        onClick={() => setTeamsPopoverOpen(false)}
                                                    />
                                                </nav>
                                            </PopoverContent>
                                        </Popover>
                                    </div>
                                </SidebarMenuItem>
                            )}

                            {navItemsAfterTeams.map((item) => {
                                const canAccess = item.alwaysShow || (item.subject && hasSessionAccess(item.subject))
                                if (!canAccess) return null
                                const isActive = pathname === item.url || (item.url !== "/" && pathname.startsWith(item.url))
                                return (
                                    <SidebarMenuItem key={item.title} className="w-full group-data-[collapsible=icon]:flex group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:min-h-8">
                                        <SidebarMenuButton
                                            asChild
                                            tooltip={item.title}
                                            className={cn(
                                                "flex h-[38px] items-center gap-[10px] rounded-[10px] border-none px-3 py-[9px] font-['Lexend_Deca'] text-[13px] font-normal transition-all duration-150",
                                                "group-data-[collapsible=icon]:h-8! group-data-[collapsible=icon]:min-h-8! group-data-[collapsible=icon]:w-8! group-data-[collapsible=icon]:min-w-8! group-data-[collapsible=icon]:shrink-0! group-data-[collapsible=icon]:p-0! group-data-[collapsible=icon]:justify-center! group-data-[collapsible=icon]:items-center! group-data-[collapsible=icon]:rounded-lg",
                                                isActive
                                                    ? "bg-[#1d1d39] text-white font-semibold"
                                                    : "bg-transparent text-[#101828] hover:bg-[#1d1d39] hover:text-white"
                                            )}
                                        >
                                            <Link href={item.url} className="group/navlink relative flex items-center justify-center gap-2 w-full min-w-0 group-data-[collapsible=icon]:w-8 group-data-[collapsible=icon]:min-w-8 group-data-[collapsible=icon]:h-8 group-data-[collapsible=icon]:min-h-8 group-data-[collapsible=icon]:shrink-0 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:items-center">
                                                <item.icon className="size-[15px] shrink-0 min-w-[15px] min-h-[15px] group-data-[collapsible=icon]:size-4 group-data-[collapsible=icon]:min-w-4 group-data-[collapsible=icon]:min-h-4" />
                                                <span className="flex-1 group-data-[collapsible=icon]:hidden">{item.title}</span>
                                                <ChevronRight className={cn(
                                                    "size-3 shrink-0 group-data-[collapsible=icon]:hidden transition-opacity duration-150",
                                                    isActive ? "opacity-100" : "opacity-0 group-hover/navlink:opacity-100"
                                                )} />
                                            </Link>
                                        </SidebarMenuButton>
                                    </SidebarMenuItem>
                                )
                            })}

                            <SidebarMenuItem className="w-full group-data-[collapsible=icon]:flex group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:min-h-8">
                                <SidebarMenuButton
                                    asChild
                                    tooltip="Notifications"
                                    className={cn(
                                        "flex h-[38px] items-center gap-[10px] rounded-[10px] border-none px-3 py-[9px] font-['Lexend_Deca'] text-[13px] font-normal transition-all duration-150",
                                        "group-data-[collapsible=icon]:h-8! group-data-[collapsible=icon]:min-h-8! group-data-[collapsible=icon]:w-8! group-data-[collapsible=icon]:min-w-8! group-data-[collapsible=icon]:shrink-0! group-data-[collapsible=icon]:p-0! group-data-[collapsible=icon]:justify-center! group-data-[collapsible=icon]:items-center! group-data-[collapsible=icon]:rounded-lg",
                                        isNotificationsActive
                                            ? "bg-[#1d1d39] text-white font-semibold"
                                            : "bg-transparent text-[#101828] hover:bg-[#1d1d39] hover:text-white"
                                    )}
                                >
                                    <Link
                                        href="/notifications"
                                        className="group/navlink relative flex items-center justify-center gap-2 w-full min-w-0 group-data-[collapsible=icon]:w-8 group-data-[collapsible=icon]:min-w-8 group-data-[collapsible=icon]:h-8 group-data-[collapsible=icon]:min-h-8 group-data-[collapsible=icon]:shrink-0 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:items-center"
                                    >
                                        <div className="relative flex items-center justify-center size-[15px] shrink-0 min-w-[15px] min-h-[15px] group-data-[collapsible=icon]:size-4 group-data-[collapsible=icon]:min-w-4 group-data-[collapsible=icon]:min-h-4">
                                            <Bell className="size-[15px] shrink-0 min-w-[15px] min-h-[15px] group-data-[collapsible=icon]:size-4 group-data-[collapsible=icon]:min-w-4 group-data-[collapsible=icon]:min-h-4" />
                                            {unreadCount > 0 && (
                                                <span className="absolute -top-1.5 -right-1.5 flex h-2 w-2 rounded-full bg-accent ring-1 ring-white hidden group-data-[collapsible=icon]:flex" />
                                            )}
                                        </div>
                                        <span className="flex-1 group-data-[collapsible=icon]:hidden">Notifications</span>
                                        {unreadCount > 0 && (
                                            <span className="bg-accent text-white text-[9px] font-bold min-w-[16px] h-4 px-1 rounded-full flex items-center justify-center group-data-[collapsible=icon]:hidden">
                                                {unreadCount > 99 ? "99+" : unreadCount}
                                            </span>
                                        )}
                                        <ChevronRight className={cn(
                                            "size-3 shrink-0 group-data-[collapsible=icon]:hidden transition-opacity duration-150",
                                            isNotificationsActive ? "opacity-100" : "opacity-0 group-hover/navlink:opacity-100",
                                            unreadCount > 0 && "hidden"
                                        )} />
                                    </Link>
                                </SidebarMenuButton>
                            </SidebarMenuItem>
                        </SidebarMenu>
                    </SidebarGroup>

                    {/* ── Administrative (permission-gated) ── */}
                    {showAdmin && (
                        <SidebarGroup className="mt-2 border-t border-black/6 p-0 pt-[10px] group-data-[collapsible=icon]:flex group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:flex-col">

                            <SidebarGroupContent className="px-2.5 pb-1.5 group-data-[collapsible=icon]:w-full group-data-[collapsible=icon]:flex group-data-[collapsible=icon]:justify-center">
                                <SidebarMenu className="gap-0.5 w-full group-data-[collapsible=icon]:flex group-data-[collapsible=icon]:flex-col group-data-[collapsible=icon]:items-center">
                                    <SidebarMenuItem className="w-full group-data-[collapsible=icon]:flex group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:min-h-8">
                                        {/* Expanded: Collapsible inline sub-menu */}
                                        <div className="w-full group-data-[collapsible=icon]:hidden">
                                            <Collapsible className="group/collapsible w-full">
                                                <>
                                                    <CollapsibleTrigger asChild>
                                                        <SidebarMenuButton
                                                            tooltip="User Management"
                                                            className={cn(
                                                                "flex h-[38px] items-center gap-[10px] rounded-[10px] border-none px-3 py-[9px] font-['Lexend_Deca'] text-[13px] font-normal transition-all duration-150 bg-transparent text-[#101828] hover:bg-[#1d1d39] hover:text-white"
                                                            )}
                                                        >
                                                            <UserCog className="size-[15px] shrink-0" />
                                                            <span className="flex-1">User Management</span>
                                                            <ChevronRight className="ml-auto size-3 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
                                                        </SidebarMenuButton>
                                                    </CollapsibleTrigger>
                                                    <CollapsibleContent>
                                                        <SidebarMenuSub className="mx-0 border-l border-black/6 ml-[14px] pl-3 mt-0.5 gap-0.5">
                                                            {hasSessionAccess("user") && (
                                                                <SidebarMenuSubItem>
                                                                    <SidebarLink
                                                                        href="/users"
                                                                        icon={Users}
                                                                        label="Users"
                                                                        isActive={pathname === "/users"}
                                                                        activeClassName="text-accent bg-accent/10 font-semibold"
                                                                        inactiveClassName="text-[#575a62] hover:bg-[#1d1d39] hover:text-white"
                                                                        className="w-full"
                                                                    />
                                                                </SidebarMenuSubItem>
                                                            )}
                                                            {hasSessionAccess("role") && (
                                                                <SidebarMenuSubItem>
                                                                    <SidebarLink
                                                                        href="/roles"
                                                                        icon={ShieldCheck}
                                                                        label="Roles"
                                                                        isActive={pathname === "/roles"}
                                                                        activeClassName="text-accent bg-accent/10 font-semibold"
                                                                        inactiveClassName="text-[#575a62] hover:bg-[#1d1d39] hover:text-white"
                                                                        className="w-full"
                                                                    />
                                                                </SidebarMenuSubItem>
                                                            )}
                                                            {hasSessionAccess("permission") && (
                                                                <SidebarMenuSubItem>
                                                                    <SidebarLink
                                                                        href="/permissions"
                                                                        icon={Key}
                                                                        label="Permissions"
                                                                        isActive={pathname === "/permissions"}
                                                                        activeClassName="text-accent bg-accent/10 font-semibold"
                                                                        inactiveClassName="text-[#575a62] hover:bg-[#1d1d39] hover:text-white"
                                                                        className="w-full"
                                                                    />
                                                                </SidebarMenuSubItem>
                                                            )}
                                                        </SidebarMenuSub>
                                                    </CollapsibleContent>
                                                </>
                                            </Collapsible>
                                        </div>
                                        {/* Collapsed: Popover on right (sidebar navigation style) */}
                                        <div className="hidden w-full group-data-[collapsible=icon]:flex group-data-[collapsible=icon]:justify-center">
                                            <Popover open={userMgmtPopoverOpen} onOpenChange={setUserMgmtPopoverOpen}>
                                                <PopoverTrigger asChild>
                                                    <SidebarMenuButton
                                                        className={cn(
                                                            "flex h-8 min-h-8 w-8 min-w-8 shrink-0 p-0 justify-center items-center rounded-lg border-none font-['Lexend_Deca'] text-[13px] font-normal transition-all duration-150 bg-transparent text-[#101828] hover:bg-[#1d1d39] hover:text-white"
                                                        )}
                                                    >
                                                        <UserCog className="size-4 shrink-0" />
                                                    </SidebarMenuButton>
                                                </PopoverTrigger>
                                                <PopoverContent
                                                    side="right"
                                                    align="start"
                                                    sideOffset={8}
                                                    className="w-52 p-1.5 rounded-xl rounded-tr-[20px] rounded-br-[20px] border border-border/80 border-r border-white/60 bg-sidebar shadow-lg backdrop-blur-[15px]"
                                                >
                                                    <nav className="flex flex-col gap-0.5">
                                                        {hasSessionAccess("user") && (
                                                            <SidebarLink
                                                                href="/users"
                                                                icon={Users}
                                                                label="Users"
                                                                isActive={pathname === "/users"}
                                                                onClick={() => setUserMgmtPopoverOpen(false)}
                                                            />
                                                        )}
                                                        {hasSessionAccess("role") && (
                                                            <SidebarLink
                                                                href="/roles"
                                                                icon={ShieldCheck}
                                                                label="Roles"
                                                                isActive={pathname === "/roles"}
                                                                onClick={() => setUserMgmtPopoverOpen(false)}
                                                            />
                                                        )}
                                                        {hasSessionAccess("permission") && (
                                                            <SidebarLink
                                                                href="/permissions"
                                                                icon={Key}
                                                                label="Permissions"
                                                                isActive={pathname === "/permissions"}
                                                                onClick={() => setUserMgmtPopoverOpen(false)}
                                                            />
                                                        )}
                                                    </nav>
                                                </PopoverContent>
                                            </Popover>
                                        </div>
                                    </SidebarMenuItem>
                                </SidebarMenu>
                            </SidebarGroupContent>
                        </SidebarGroup>
                    )}
                </SidebarContent>

                {/* ── Footer: logged-in user (popover: profile, settings, log out) ── */}
                <SidebarFooter className="border-t border-black/6 p-0">
                    <div className="p-2 group-data-[collapsible=icon]:px-2 group-data-[collapsible=icon]:flex group-data-[collapsible=icon]:justify-center">
                        <Combobox
                            items={accountPopoverItems}
                            value={null}
                            onValueChange={(v) => {
                                if (v === "Profile") {
                                    router.push(PROFILE_SETTINGS_PATH)
                                    return
                                }
                                if (v === "Settings") {
                                    router.push("/settings")
                                    return
                                }
                                if (v === "Login sessions") {
                                    router.push("/users/sessions")
                                    return
                                }
                                if (v === "Suspicious activity") {
                                    router.push("/users/suspicious-activity")
                                    return
                                }
                                if (v === "Reset Requests") {
                                    router.push("/users/password-reset-requests")
                                    return
                                }
                                if (v === "Log out") {
                                    setShowLogoutConfirm(true)
                                }
                            }}
                        >
                            <Tooltip>
                                <TooltipTrigger asChild>
                                    <ComboboxTrigger
                                        className={cn(
                                            "w-full flex items-center gap-[10px] rounded-[10px] border-none p-2 font-['Lexend_Deca'] text-left",
                                            "bg-transparent hover:bg-[#1d1d39]/80 transition-all duration-150",
                                            "group-data-[collapsible=icon]:h-8! group-data-[collapsible=icon]:min-h-8! group-data-[collapsible=icon]:w-8! group-data-[collapsible=icon]:min-w-8! group-data-[collapsible=icon]:shrink-0! group-data-[collapsible=icon]:justify-center! group-data-[collapsible=icon]:p-2!"
                                        )}
                                    >
                                        <div className="relative shrink-0">
                                            <UserAvatar
                                                avatar={profile?.avatar}
                                                name={profile?.name}
                                                className="size-8 shrink-0 rounded-full"
                                                fallbackClassName="bg-[#26284a] text-[11px]"
                                            />
                                        </div>
                                        <div className="flex flex-col overflow-hidden group-data-[collapsible=icon]:hidden flex-1 min-w-0">
                                            <span className="text-xs font-semibold text-[#101828] truncate">
                                                {profile?.name ?? "Loading…"}
                                            </span>
                                            <span className="text-[10px] text-[#575a62] truncate">
                                                {profile?.role?.name ? `${profile.role.name}` : profile?.email ?? ""}
                                            </span>
                                        </div>
                                    </ComboboxTrigger>
                                </TooltipTrigger>
                                <TooltipContent side="right" align="center" hidden={!isCollapsed}>
                                    {profile?.name ?? "Account"}
                                </TooltipContent>
                            </Tooltip>
                            <ComboboxContent
                                side="top"
                                sideOffset={8}
                                align="start"
                                className="bg-white/95 backdrop-blur-md border-white/30 shadow-xl min-w-[200px]"
                            >
                                <div className="px-2 py-2 border-b border-black/6 mb-1">
                                    <p className="text-xs font-semibold text-[#101828] truncate">{profile?.name ?? "—"}</p>
                                    <p className="text-[10px] text-[#575a62] truncate">{profile?.email ?? ""}</p>
                                    {profile?.role?.name && (
                                        <p className="text-[10px] text-[#575a62] mt-0.5">Role: {profile.role.name}</p>
                                    )}
                                </div>
                                <ComboboxList>
                                    <ComboboxItem
                                        value="Profile"
                                        className={cn(
                                            isProfileActive &&
                                            "bg-accent/10 font-semibold text-accent",
                                        )}
                                    >
                                        <CircleUserRound className="size-4 shrink-0" />
                                        Profile
                                    </ComboboxItem>
                                    {canAccessSettings && (
                                        <ComboboxItem
                                            value="Settings"
                                            className={cn(
                                                isSettingsActive &&
                                                "bg-accent/10 font-semibold text-accent"
                                            )}
                                        >
                                            <Settings className="size-4 shrink-0" />
                                            Settings
                                        </ComboboxItem>
                                    )}
                                    {canReadLoginSessions && (
                                        <ComboboxItem
                                            value="Login sessions"
                                            className={cn(
                                                isLoginSessionsActive &&
                                                "bg-accent/10 font-semibold text-accent"
                                            )}
                                        >
                                            <MonitorSmartphone className="size-4 shrink-0" />
                                            Login sessions
                                        </ComboboxItem>
                                    )}
                                    {canReadSuspiciousActivity && (
                                        <ComboboxItem
                                            value="Suspicious activity"
                                            className={cn(
                                                isSuspiciousActivityActive &&
                                                "bg-accent/10 font-semibold text-accent"
                                            )}
                                        >
                                            <TriangleAlert className="size-4 shrink-0" />
                                            Suspicious activity
                                        </ComboboxItem>
                                    )}
                                    {canReadPasswordResetRequests && (
                                        <ComboboxItem
                                            value="Reset Requests"
                                            className={cn(
                                                isPasswordResetRequestsActive &&
                                                "bg-accent/10 font-semibold text-accent"
                                            )}
                                        >
                                            <KeyRound className="size-4 shrink-0" />
                                            Reset Requests
                                        </ComboboxItem>
                                    )}
                                    <ComboboxItem
                                        value="Log out"
                                        className="text-red-600 hover:bg-red-50 data-highlighted:bg-red-50"
                                    >
                                        <LogOut className="size-4 shrink-0" />
                                        Log out
                                    </ComboboxItem>
                                </ComboboxList>
                            </ComboboxContent>
                        </Combobox>
                    </div>
                </SidebarFooter>
            </Sidebar>

            <LogoutConfirmDialog
                open={showLogoutConfirm}
                onOpenChange={setShowLogoutConfirm}
                onConfirm={confirmLogout}
                isLoading={logoutInProgress}
            />
        </>
    )
}