"use client";

import * as React from "react";


import { NavMain } from "@/components/nav-main";
import { NavProjects } from "@/components/nav-projects";
import { NavUser } from "@/components/nav-user";
import { TeamSwitcher } from "@/components/team-switcher";

import {
  IconHome,
  IconAlertTriangle,
  IconSettings,
  IconMap,
  IconDatabase,
  IconUsers,
  IconMessageCircle,
  IconMenu2,
  IconAlbum,
  IconMusicBolt,
  IconCommand,
  IconFrame,
  IconChartPie,
} from "@tabler/icons-react";
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarHeader,
  SidebarRail,
} from "@/components/ui/sidebar";

// This is sample data.
const data = {
  user: {
    name: "shadcn",
    email: "m@example.com",
    avatar: "/avatars/shadcn.jpg",
  },
  teams: [
    {
      name: "Acme Inc",
      logo: IconAlbum,
      plan: "Enterprise",
    },
    {
      name: "Acme Corp.",
      logo: IconMusicBolt,
      plan: "Startup",
    },
    {
      name: "Evil Corp.",
      logo: IconCommand,
      plan: "Free",
    },
  ],
  navMain: [
    {
      title: "Dashboard",
      url: "/dashboard",
      slug: "dashboard",
      orderSeq: 1,
      icon: IconHome,
      isActive: true,
      subItems: [],
    },
    {
      title: "Crime Management",
      url: "/crime-management",
      slug: "crime-management",
      orderSeq: 2,
      icon: IconAlertTriangle,
      isActive: true,
      subItems: [
        {
          title: "Crime Overview",
          url: "/crime-management/crime-overview",
          slug: "crime-overview",
          icon: IconAlertTriangle,
          orderSeq: 1,
          isActive: true,
        },
        {
          title: "Crime Categories",
          url: "/crime-management/crime-categories",
          slug: "crime-categories",
          icon: IconSettings,
          orderSeq: 2,
          isActive: true,
        },
        {
          title: "Cases",
          url: "/crime-management/crime-cases",
          slug: "crime-cases",
          icon: IconAlertTriangle,
          orderSeq: 3,
          isActive: true,
          subSubItems: [
            {
              title: "New Case",
              url: "/crime-management/crime-cases/case-new",
              slug: "new-case",
              icon: IconAlertTriangle,
              orderSeq: 1,
              isActive: true,
            },
            {
              title: "Active Cases",
              url: "/crime-management/crime-cases/case-active",
              slug: "active-cases",
              icon: IconAlertTriangle,
              orderSeq: 2,
              isActive: true,
            },
            {
              title: "Resolved Cases",
              url: "/crime-management/crime-cases/case-closed",
              slug: "resolved-cases",
              icon: IconAlertTriangle,
              orderSeq: 3,
              isActive: true,
            },
          ],
        },
      ],
    },
    {
      title: "Geographic Data",
      url: "/geographic-data",
      slug: "geographic-data",
      orderSeq: 3,
      icon: IconMap,
      isActive: true,
      subItems: [
        {
          title: "Locations",
          url: "/geographic-data/locations",
          slug: "locations",
          icon: IconMap,
          orderSeq: 1,
          isActive: true,
          subSubItems: [
            {
              title: "Cities",
              url: "/geographic-data/cities",
              slug: "cities",
              icon: IconMap,
              orderSeq: 1,
              isActive: true,
            },
            {
              title: "Districts",
              url: "/geographic-data/districts",
              slug: "districts",
              icon: IconMap,
              orderSeq: 2,
              isActive: true,
            },
          ],
        },
        {
          title: "Geographic Info",
          url: "/geographic-data/geographic-info",
          slug: "geographic-info",
          icon: IconMap,
          orderSeq: 3,
          isActive: true,
        },
      ],
    },
    {
      title: "Demographics",
      url: "/demographics",
      slug: "demographics",
      orderSeq: 4,
      icon: IconDatabase,
      isActive: true,
      subItems: [
        {
          title: "Demographics Data",
          url: "/demographics/demographics-data",
          slug: "demographics-data",
          icon: IconDatabase,
          orderSeq: 1,
          isActive: true,
        },
      ],
    },
    {
      title: "User Management",
      url: "/user-management",
      slug: "user-management",
      orderSeq: 5,
      icon: IconUsers,
      isActive: true,
      subItems: [
        {
          title: "Users",
          url: "/user-management/users",
          slug: "users",
          icon: IconUsers,
          orderSeq: 1,
          isActive: true,
        },
      ],
    },
    {
      title: "Communication",
      url: "/communication",
      slug: "communication",
      orderSeq: 6,
      icon: IconMessageCircle,
      isActive: true,
      subItems: [
        {
          title: "Contact Messages",
          url: "/communication/contact-messages",
          slug: "contact-messages",
          icon: IconMessageCircle,
          orderSeq: 1,
          isActive: true,
        },
      ],
    },
    {
      title: "Settings",
      url: "/settings",
      slug: "settings",
      orderSeq: 7,
      icon: IconSettings,
      isActive: true,
      subItems: [
        {
          title: "Navigation",
          url: "/settings/navigation",
          slug: "navigation",
          icon: IconMenu2,
          orderSeq: 1,
          isActive: true,
          subSubItems: [
            {
              title: "Nav Items",
              url: "/settings/navigation/nav-items",
              slug: "nav-items",
              icon: IconMenu2,
              orderSeq: 1,
              isActive: true,
              subSubItems: [
                {
                  title: "Nav Sub Items",
                  url: "/settings/navigation/nav-sub-items",
                  slug: "nav-sub-items",
                  icon: IconMenu2,
                  orderSeq: 1,
                  isActive: true,
                },
              ],
            },
          ],
        },
      ],
    },
  ],
  projects: [
    {
      name: "Design Engineering",
      url: "#",
      icon: IconFrame,
    },
    {
      name: "Sales & Marketing",
      url: "#",
      icon: IconChartPie,
    },
    {
      name: "Travel",
      url: "#",
      icon: IconMap,
    },
  ],
};

export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
  return (
    <Sidebar collapsible="icon" {...props}>
      <SidebarHeader>
        <TeamSwitcher teams={data.teams} />
      </SidebarHeader>
      <SidebarContent>
        <NavMain items={data.navMain} />
        <NavProjects projects={data.projects} />
      </SidebarContent>
      <SidebarFooter>
        <NavUser user={data.user} />
      </SidebarFooter>
      <SidebarRail />
    </Sidebar>
  );
}