"use client";

import * as React from "react";
import { useState, useEffect } from "react";
import Cookies from "js-cookie";
import { IconDashboard, IconInnerShadowTop, IconShoppingBag, IconMoneybag, IconSettings, IconShoppingCart, IconSwitchHorizontal } from "@tabler/icons-react";
import { NavMain } from "@/components/nav-main";
import {
  Sidebar,
  SidebarContent,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarTrigger,
} from "@/components/ui/sidebar";
import Link from "next/link";
import { useTranslation } from "react-i18next";

interface SidebarProps {
  dir?: "ltr" | "rtl";
  data?: {
    navMain: Array<{
      labelKey: string;
      url: string;
      icon: typeof IconDashboard;
    }>;
  };
}

export function AppSidebar({ dir = "ltr", data, ...props }: SidebarProps) {
  const { t } = useTranslation("common");
  const [currentRole, setCurrentRole] = useState<"user" | "Seller">(
    (Cookies.get("role") as "user" | "Seller") || "user"
  );

  useEffect(() => {
    Cookies.set("role", currentRole, { expires: 100 });
  }, [currentRole]);

  const defaultData = {
    navMain: [
      {
        labelKey: "academySidebar.dashboard",
        url: "/settings/academy/Dashboard",
        icon: IconDashboard,
      },
      {
        labelKey: "academySidebar.packages",
        url: "/settings/academy/course",
        icon: IconShoppingBag,
      },
      {
        labelKey: "academySidebar.accounting",
        url: "/settings/academy/wallet",
        icon: IconMoneybag,
      },
      {
        labelKey: "academySidebar.storeProfile",
        url: "/settings/academy/storeProfile",
        icon: IconSettings,
      },
      {
        labelKey: "academySidebar.purchasedPackages",
        url: "/settings/academy/my-courses",
        icon: IconShoppingCart,
      },
    ],
  };

  const navItems = (data?.navMain ?? defaultData.navMain).map((item) => ({
    title: t(item.labelKey),
    url: item.url,
    icon: item.icon,
  }));

  return (
    <Sidebar side={"right"} collapsible="icon" {...props} className="z-[50]">
      <SidebarHeader>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton
              asChild
              className="data-[slot=sidebar-menu-button]:!p-1.5"
            >
              <div className="flex justify-between items-center w-full">
                <Link href="/">
                  <p className="flex justify-center items-center flex-row-reverse gap-2 font-bold">
                    {t("academySidebar.brand")} <IconInnerShadowTop className="!size-5" />
                  </p>
                </Link>
                <SidebarTrigger className="-ml-1 md:hidden"></SidebarTrigger>
              </div>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarHeader>

      <SidebarContent>
        <NavMain items={navItems} />
      </SidebarContent>

      <SidebarMenuButton className=" hidden items-center mb-2 w-full text-sm font-medium hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors gap-2">
        <IconSwitchHorizontal className="size-5" />
      </SidebarMenuButton>
    </Sidebar>
  );
}
