"use client";

import * as React from "react";
import { Bolt, Send, Shield, Users, UserCog, Warehouse, Crosshair, Backpack, LifeBuoy } 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,
    },
    {
      title: "Helpdesk",
      url: "/helpdesk",
      icon: LifeBuoy,
    },
  ],
  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",
        },
        {
          title: "Banking",
          url: "/logistics/banking",
        },
        {
          title: "Market",
          url: "/logistics/market",
        },
      ],
    },
  ],
  navSecondary: [
    {
      title: "Feedback",
      url: "https://onyxsimple.youtrack.cloud",
      icon: Send,
    },
  ],
  navPersonal: [
    {
      title: "Locker",
      url: "/locker",
      icon: Backpack,
    },
    {
      title: "Account",
      url: "/account",
      icon: UserCog,
    },
  ],
};

export function AppSidebar({
  user,
  xpLevel,
  adminUrl,
  hasIntelligence = true,
  hasLogistics = true,
  showCallsign = false,
  ...props
}: {
  user: {
    displayName: string;
    username: string;
  };
  xpLevel: ResolvedLevel;
  adminUrl?: string;
  hasIntelligence?: boolean;
  hasLogistics?: boolean;
  showCallsign?: boolean;
} & 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 className="overflow-hidden">
        <div className="flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto group-data-[collapsible=icon]:overflow-hidden">
          <NavCore label="Platform" items={data.navMain} />
          {hasIntelligence && (
            <NavCore
              label="Intelligence"
              items={data.navIntelligence.map((i) =>
                typeof i.items === "object" ? { ...i, items: [...i.items] } : { ...i },
              )}
            />
          )}
          {hasLogistics && (
            <NavCore
              label="Infrastructure"
              items={data.navLogistics.map((i) =>
                typeof i.items === "object" ? { ...i, items: [...i.items] } : { ...i },
              )}
            />
          )}
          <NavCore label="Personal" items={data.navPersonal} />
          {/*<NavProjects projects={data.projects} />*/}
        </div>
        <hr />
        <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: "",
          }}
          showCallsign={showCallsign}
        />
      </SidebarFooter>
    </Sidebar>
  );
}