'use client';
import * as React from 'react';
import { LayoutDashboard, Plus, Layers, Package, Milestone, ShieldCheck, Users } from 'lucide-react';
import { NavUser } from '@/components/nav-user';
import { ROUTES } from '@/utils/routes';
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarHeader,
  SidebarRail,
  SidebarMenu,
  SidebarMenuItem,
  SidebarMenuButton,
  SidebarGroup,
  SidebarGroupLabel,
} from '@/components/ui/sidebar';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useAppStore } from '@/store/app.store';

// This is the navigation data
const data = {
  navMain: [
    {
      title: 'Dashboard',
      url: ROUTES.DASHBOARD,
      icon: LayoutDashboard,
    },
    {
      title: 'New Analysis',
      url: ROUTES.UPLOAD,
      icon: Plus,
    },
    {
      title: 'Project',
      url: ROUTES.PROJECT,
      icon: Layers,
    },
    {
      title: 'Package',
      url: ROUTES.PACKAGE,
      icon: Package,
    },
    {
      title: 'Segment',
      url: ROUTES.CHAINAGE,
      icon: Milestone,
    },
    {
      title: 'Roles',
      url: ROUTES.ROLES,
      icon: ShieldCheck,
    },
    {
      title: 'Users',
      url: ROUTES.USERS,
      icon: Users,
    },
  ],
};

export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
  const pathname = usePathname();
  const authUser = useAppStore((state) => state.user);
  const user = {
    name: [authUser?.first_name, authUser?.last_name].filter(Boolean).join(' ') || 'Admin',
    email: authUser?.email || '',
    avatar: authUser?.profile_photo_url || '/avatars/profile.jpg',
  };

  return (
    <Sidebar collapsible="icon" {...props}>
      <SidebarHeader>
        <div className="flex items-center gap-2 py-2">
          <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
            <Package className="size-4" />
          </div>
          <div className="grid flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden">
            <span className="truncate font-semibold">Vision Road</span>
            <span className="truncate text-xs">Analytics Platform</span>
          </div>
        </div>
      </SidebarHeader>
      <SidebarContent>
        <SidebarGroup>
          <SidebarMenu>
            {data.navMain.map((item) => (
              <SidebarMenuItem key={item.title}>
                <SidebarMenuButton asChild tooltip={item.title} isActive={pathname === item.url}>
                  <Link href={item.url}>
                    {item.icon && <item.icon />}
                    <span>{item.title}</span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>
            ))}
          </SidebarMenu>
        </SidebarGroup>
      </SidebarContent>
      <SidebarFooter>
        <NavUser user={user} />
      </SidebarFooter>
      <SidebarRail />
    </Sidebar>
  );
}