"use client";

import * as React from "react";
import { useState, useEffect } from "react";
import Cookies from "js-cookie";
import {
  IconDashboard,
  IconInnerShadowTop,
  IconTransfer,
  IconWallet,
  IconShoppingBag,
  IconMenuOrder,
  IconCrown,
  IconHeart,
  IconAddressBook,
  IconSettings,
  IconTicket,
  IconMoneybag,
  IconPoint,
  IconLogout,
  IconSwitchHorizontal,
  IconShoppingCart,
  IconNotification,
} 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";
import { useRouter } from "next/navigation";

interface SidebarProps {
  dir?: "ltr" | "rtl";
  data?: {
    navMain: any[];
  };
}

export function AppSidebar({ dir = "ltr", data, ...props }: SidebarProps) {
 



  // 🆕 نقش اولیه را از کوکی بخوان
  const [currentRole, setCurrentRole] = useState<"user" | "Seller">(
    (Cookies.get("role") as "user" | "Seller") || "user"
  );

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



  const defaultData = {
    navMain: [
      {
        title: "داشبورد",
        url: "/settings/academy/Dashboard",
        icon: IconDashboard,
      },
      {
        title:"پکیج ها",
        url: "/settings/academy/course",
        icon: IconShoppingBag,
      },
      {
        title:"حسابداری",
        url: "/settings/academy/wallet",
        icon: IconMoneybag,
      },
      // {
      //   title: "نظرات",
      //   url: "/settings/academy/comments",
      //   icon: IconHeart,
      // },
      {
        title: "مشخصات آموزشگاه",
        url: "/settings/academy/storeProfile",
        icon: IconSettings,
      },
      {
        title: "پکیج های خریداری شده",
        url: "/settings/academy/my-courses",
        icon: IconShoppingCart,
      },
  
    ],
  };

  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">
                    آموزشگاه <IconInnerShadowTop className="!size-5" />
                  </p>
                </Link>
                <SidebarTrigger className="-ml-1 md:hidden"></SidebarTrigger>
              </div>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarHeader>

      <SidebarContent>
        <NavMain items={defaultData?.navMain} />
      </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>
  );
}
