EpicNext-Cms/src/components/admin/admin-sidebar-nav.tsx

"use client";

import { ChevronDown } from "lucide-react";
import { usePathname } from "next/navigation";
import { useTranslations } from "next-intl";
import { useCallback, useEffect, useMemo, useState } from "react";
import { AdminNavLink } from "@/components/admin/admin-nav-link";
import { ADMIN_NAV_GROUPS, type AdminNavItem } from "@/lib/admin-nav";
import { cn } from "@/lib/utils";

const STORAGE_KEY = "admin-nav-collapsed";

function itemIsActive(
	pathname: string,
	item: AdminNavItem,
): boolean {
	if (item.matchExcludePrefixes?.some(
		(p) => pathname === p || pathname.startsWith(`${p}/`),
	)) {
		return false;
	}
	if (item.href === "/admin") return pathname === "/admin";
	if (item.matchPrefixes?.length) {
		return item.matchPrefixes.some(
			(p) => pathname === p || pathname.startsWith(`${p}/`),
		);
	}
	return pathname === item.href || pathname.startsWith(`${item.href}/`);
}

function groupHasActive(pathname: string, items: AdminNavItem[]): boolean {
	return items.some((item) => itemIsActive(pathname, item));
}

function readCollapsed(): Record<string, boolean> {
	if (typeof window === "undefined") return {};
	try {
		const raw = localStorage.getItem(STORAGE_KEY);
		if (!raw) return {};
		const parsed = JSON.parse(raw) as unknown;
		if (!parsed || typeof parsed !== "object") return {};
		return parsed as Record<string, boolean>;
	} catch {
		return {};
	}
}

export function AdminSidebarNav() {
	const t = useTranslations("pages.admin.nav");
	const pathname = usePathname() ?? "";
	const [collapsed, setCollapsed] = useState<Record<string, boolean>>({});
	const [hydrated, setHydrated] = useState(false);

	useEffect(() => {
		setCollapsed(readCollapsed());
		setHydrated(true);
	}, []);

	// Keep the group that contains the current page open.
	useEffect(() => {
		if (!hydrated) return;
		const activeKeys = ADMIN_NAV_GROUPS.filter((g) =>
			groupHasActive(pathname, g.items),
		).map((g) => g.labelKey);
		if (activeKeys.length === 0) return;
		setCollapsed((prev) => {
			let changed = false;
			const next = { ...prev };
			for (const key of activeKeys) {
				if (next[key]) {
					next[key] = false;
					changed = true;
				}
			}
			if (!changed) return prev;
			try {
				localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
			} catch {
				/* ignore quota */
			}
			return next;
		});
	}, [pathname, hydrated]);

	const toggle = useCallback((labelKey: string) => {
		setCollapsed((prev) => {
			const next = { ...prev, [labelKey]: !prev[labelKey] };
			try {
				localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
			} catch {
				/* ignore quota */
			}
			return next;
		});
	}, []);

	const groups = useMemo(() => ADMIN_NAV_GROUPS, []);

	return (
		<nav className="flex-1 overflow-y-auto px-3 py-4" aria-label={t("overview")}>
			{groups.map((group, gi) => {
				const GroupIcon = group.icon;
				const isCollapsed = Boolean(collapsed[group.labelKey]);
				const panelId = `admin-nav-${group.labelKey}`;

				return (
					<div
						key={group.labelKey}
						className={
							gi > 0 ? "mt-3 pt-3 border-t border-[var(--admin-border)]" : ""
						}
					>
						<button
							type="button"
							onClick={() => toggle(group.labelKey)}
							aria-expanded={!isCollapsed}
							aria-controls={panelId}
							className={cn(
								"flex w-full items-center gap-1.5 rounded-lg px-2 py-1.5 text-left",
								"text-[0.65rem] font-extrabold uppercase tracking-[0.14em]",
								"text-[var(--admin-sidebar-text-readable)] opacity-70",
								"hover:opacity-100 hover:bg-[var(--admin-accent)]/10",
								"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--admin-accent)]",
								"transition-colors",
							)}
						>
							<GroupIcon size={14} className="shrink-0" />
							<span className="min-w-0 flex-1 truncate">{t(group.labelKey)}</span>
							<ChevronDown
								size={14}
								className={cn(
									"shrink-0 opacity-80 transition-transform duration-200",
									isCollapsed && "-rotate-90",
								)}
								aria-hidden
							/>
						</button>
						<div
							id={panelId}
							hidden={isCollapsed}
							className="mt-1 space-y-0.5"
						>
							{group.items.map((item) => {
								const ItemIcon = item.icon;
								return (
									<AdminNavLink
										key={`${group.labelKey}-${item.href}`}
										href={item.href}
										matchPrefixes={item.matchPrefixes}
										matchExcludePrefixes={item.matchExcludePrefixes}
										icon={<ItemIcon size={16} />}
									>
										{t(item.labelKey)}
									</AdminNavLink>
								);
							})}
						</div>
					</div>
				);
			})}
		</nav>
	);
}