"use client";

import * as React from "react";
import { Bolt, Send, Shield, Users, Warehouse, Crosshair } from "lucide-react";

import { NavCore } from "@/components/frontend/blocks/NavCore";
import { NavSecondary } from "@/components/frontend/blocks/NavSecondary";
import { NavUser } from "@/components/frontend/blocks/NavUser";
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from "@/components/ui/sidebar";
import Image from "next/image";
import Link from "next/link";
import XPDisplay from "@/components/frontend/blocks/XPDisplay";
import type { ResolvedLevel } from "@/utils/xp/resolveLevel";

const data = {
  navMain: [
    {
      title: "Dashboard",
      url: "/",
      icon: Bolt,
    },
    {
      title: "Roster",
      url: "/roster",
      icon: Users,
    },
  ],
  navIntelligence: [
    {
      title: "Intelligence",
      url: "#",
      icon: Crosshair,
      items: [
        {
          title: "Campaigns",
          url: "/intelligence/campaigns",
        },
        {
          title: "Missions",
          url: "/intelligence/missions",
        },
        {
          title: "Factions",
          url: "/intelligence/factions",
        },
      ],
    },
  ],
  navLogistics: [
    {
      title: "Logistics",
      url: "#",
      icon: Warehouse,
      items: [
        {
          title: "Structures",
          url: "/logistics",
        },
        {
          title: "Resources",
          url: "/logistics/resources",
        },
        {
          title: "Vehicles",
          url: "/logistics/vehicles",
        },
        {
          title: "Shipments",
          url: "/logistics/shipments",
        },
        {
          title: "Deployed Vehicles",
          url: "/logistics/game-vehicles",
        },
      ],
    },
  ],
  navSecondary: [
    {
      title: "Feedback",
      url: "https://onyxsimple.youtrack.cloud",
      icon: Send,
    },
  ],
};

export function AppSidebar({
  user,
  xpLevel,
  adminUrl,
  ...props
}: {
  user: {
    displayName: string;
    username: string;
  };
  xpLevel: ResolvedLevel;
  adminUrl?: string;
} & React.ComponentProps<typeof Sidebar>) {
  return (
    <Sidebar variant="inset" {...props}>
      <SidebarHeader>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton size="lg" asChild>
              <Link href="/">
                {/*<div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
                  <Command className="size-4" />
                </div>
                <div className="grid flex-1 text-left text-sm leading-tight">
                  <span className="truncate font-medium">Polaris Task Force</span>
                  <span className="truncate text-xs">Enterprise</span>
                </div>*/}
                <div>
                  <Image
                    src="/images/logo.webp"
                    alt="Polaris Task Force"
                    width={1372}
                    height={164}
                  />
                </div>
              </Link>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarHeader>
      <SidebarContent>
        <NavCore label="Platform" items={data.navMain} />
        <NavCore label="Intelligence" items={data.navIntelligence} />
        <NavCore label="Infrastructure" items={data.navLogistics} />
        {/*<NavProjects projects={data.projects} />*/}
        <NavSecondary
          items={
            !adminUrl
              ? data.navSecondary
              : [
                  ...data.navSecondary,
                  {
                    title: "Admin",
                    url: adminUrl ?? "#",
                    icon: Shield,
                  },
                ]
          }
          className="mt-auto"
        />
        <XPDisplay xpLevel={xpLevel} />
      </SidebarContent>
      <SidebarFooter>
        <NavUser
          user={{
            displayName: user?.displayName ?? "Not logged in",
            username: user?.username ?? "",
            avatar: "",
          }}
        />
      </SidebarFooter>
    </Sidebar>
  );
}