'use client';

import { IconCirclePlusFilled, IconMail, type Icon } from '@tabler/icons-react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';

import { Button } from '@nice/ui/components/button';
import { Badge } from '@nice/ui/components/badge';
import {
	SidebarGroup,
	SidebarGroupContent,
	SidebarGroupLabel,
	SidebarMenu,
	SidebarMenuButton,
	SidebarMenuItem,
} from '@nice/ui/components/sidebar';

interface NavItem {
	title: string;
	url: string;
	icon?: Icon;
	badge?: string;
}

export function NavMain({
	items,
	title,
	showQuickActions = false,
}: {
	items: NavItem[];
	title?: string;
	showQuickActions?: boolean;
}) {
	const pathname = usePathname();

	// 检查路径是否激活的函数
	const isPathActive = (itemUrl: string) => {
		// 移除语言前缀进行比较
		const cleanPathname = pathname.replace(/^\/[a-z]{2}(-[A-Z]{2})?/, '') || '/';


		// 精确匹配
		if (cleanPathname === itemUrl) {
			return true;
		}

		// 对于非根路径，检查是否以该路径开头
		if (itemUrl !== '/' && cleanPathname.startsWith(itemUrl + '/')) {
			return true;
		}

		return false;
	};

	return (
		<SidebarGroup>
			{title && <SidebarGroupLabel>{title}</SidebarGroupLabel>}
			<SidebarGroupContent className="flex flex-col gap-2">
				{showQuickActions && (
					<SidebarMenu>
						<SidebarMenuItem className="flex items-center gap-2">
							<SidebarMenuButton
								tooltip="快速创建"
								className="bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground min-w-8 duration-200 ease-linear"
								asChild
							>
								<Link href="/create">
									<IconCirclePlusFilled />
									<span>快速创建</span>
								</Link>
							</SidebarMenuButton>
							<Button size="icon" className="size-8 group-data-[collapsible=icon]:opacity-0" variant="outline" asChild>
								<Link href="/notifications">
									<IconMail />
									<span className="sr-only">消息</span>
								</Link>
							</Button>
						</SidebarMenuItem>
					</SidebarMenu>
				)}
				<SidebarMenu>
					{items.map((item) => {
						const isActive = isPathActive(item.url);
						return (
							<SidebarMenuItem key={item.title}>
								<SidebarMenuButton tooltip={item.title} isActive={isActive} asChild>
									<Link href={item.url} className="flex items-center justify-between">
										<div className="flex items-center gap-3">
											{item.icon && <item.icon />}
											<span>{item.title}</span>
										</div>
										{item.badge && (
											<Badge variant="secondary" className="ml-auto text-xs">
												{item.badge}
											</Badge>
										)}
									</Link>
								</SidebarMenuButton>
							</SidebarMenuItem>
						);
					})}
				</SidebarMenu>
			</SidebarGroupContent>
		</SidebarGroup>
	);
}