"use client";
import { usePathname, useRouter } from "next/navigation";
import { Button } from "../ui/button";
import Link from "next/link";
import {
  Blocks,
  BookUser,
  Boxes,
  Factory,
  FileLock2,
  Files,
  HandHelping,
  House,
  Info,
  KeySquare,
  Layers,
  Layers3,
  MessageSquareMore,
  MessagesSquare,
  Package,
  PackagePlus,
  ReceiptText,
  Settings,
  User,
} from "lucide-react";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "../ui/accordion";
import React from "react";
import { ScrollArea } from "../ui/scroll-area";
import Image from "next/image";
import logo from "../../../public/logo.webp";
type Props = {};

const Sidenav = (props: Props) => {
  const pathname = usePathname();

  const sidebarElements = [
    // {
    //   name: "home",
    //   url: "/dashboard",
    //   icon: <House />,
    // },
    // {
    //   name: "profile",
    //   url: "/profile",
    //   icon: <User />,
    // },
    // {
    //   name: "Branch",
    //   url: "/branch-management",
    //   icon: <Factory />,
    // },
    {
      name: "Category",
      url: "/category-management",
      icon: <Boxes />,
    },
    {
      name: "Product",
      url: "/product-management",
      icon: <Package />,
    },
    {
      name: "Inventory-In",
      url: "/inventory-management/JP",
      icon: <Blocks />,
    },
    {
      name: "Inventory-Out",
      url: "/inventory-out/JP",
      icon: <PackagePlus />,
    },
    {
      name: "Inventory Reports",
      url: "/inventory-reports",
      icon: <Files />,
    },
    {
      name: "History",
      url: "/order-management",
      icon: <Files />,
    },
    {
      name: "Settings",
      url: "settings",
      icon: <Settings />,
      options: [
        {
          name: "Change Password",
          url: "change-password",
          icon: <KeySquare />,
        },
      ],
    },
  ];
  const router = useRouter();
  console.log(pathname);
  return (
    <main className="bg-[#8f0029] h-screen rounded-r-md">
      <div className="flex justify-center border border-[#be063f] shadow-xl p-4 m-4 rounded-md">
        <Image src={logo} height={80} width={200} alt="logo" />
      </div>
      <div className="">
        <ScrollArea className="h-[76vh] 2xl:h-[80vh] pb-1">
          {/* <ScrollArea className="h-[76vh]"> */}
          <ul className="space-y-2  rounded-md">
            {sidebarElements.map((element, index) => {
              return element.options ? (
                <Accordion
                  key={index}
                  type="single"
                  className="ml-4 m-2 w-3/4"
                  collapsible
                  defaultValue={
                    element.options.some((option) =>
                      pathname.includes(option.url)
                    )
                      ? `item-${index}`
                      : ""
                  }
                >
                  <AccordionItem
                    className="border-none bg-[#be063f] rounded-md"
                    value={`item-${index}`}
                  >
                    <AccordionTrigger>
                      <Button className="text-white gap-x-2 bg-[#be063f] hover:bg-[#be063f]">
                        {element.icon}
                        {element.name.toUpperCase()}
                      </Button>
                    </AccordionTrigger>
                    <AccordionContent className="rounded-b-xl">
                      <ul className="border-t">
                        {element.options.map((val, idx) => {
                          // More specific URL checks to avoid overlap
                          const isInventoryActive =
                            pathname.startsWith("/inventory-management") &&
                            val.url.startsWith("inventory-management");

                          const isOrdersActive =
                            pathname.startsWith("/create-order") &&
                            val.url === "create-order";

                          const isOrderManagementActive =
                            pathname.startsWith("/order-management") &&
                            val.url === "order-management";
                          const isDispatchReportsActive =
                            pathname.startsWith("/dispatch-reports") &&
                            val.url === "dispatch-reports";
                          const isPopularityReportsActive =
                            pathname.startsWith("/popularity-reports") &&
                            val.url === "popularity-reports";

                          // Determine if the current item should be highlighted
                          const isActive =
                            (val.name === "Urgent Requests" &&
                              pathname === `/${val.url}`) ||
                            isInventoryActive ||
                            isOrdersActive ||
                            isOrderManagementActive ||
                            isDispatchReportsActive ||
                            isPopularityReportsActive;

                          return (
                            <li
                              key={idx}
                              className={`m-2 items-center rounded-md duration-1000 ${
                                isActive ? "bg-[#ff2e5b]" : "bg-[#8f0029]"
                              }`}
                            >
                              <Link href={`/${val.url}`}>
                                <Button
                                  className="text-white gap-x-2"
                                  variant="link"
                                >
                                  {val.icon}
                                  {val.name}
                                </Button>
                              </Link>
                            </li>
                          );
                        })}
                      </ul>
                    </AccordionContent>
                  </AccordionItem>
                </Accordion>
              ) : (
                <li
                  key={index}
                  className={`ml-4 w-3/4 bg-[#be063f] rounded-md duration-1000 ${
                    pathname === `${element.url}` ? "bg-[#ff2e5b]" : ""
                  }`}
                >
                  {pathname === element.url ? (
                    <Button className="text-white gap-x-2" variant="link">
                      {element.icon}
                      {element.name.toUpperCase()}
                    </Button>
                  ) : (
                    <Link href={element.url}>
                      <Button
                        className="text-white gap-x-2"
                        variant="link"
                        // onClick={() => router.replace(element.url)}
                      >
                        {element.icon}
                        {element.name.toUpperCase()}
                      </Button>
                    </Link>
                  )}
                </li>
              );
              // );
            })}
          </ul>
        </ScrollArea>
      </div>
    </main>
  );
};

export default Sidenav;