"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { MdOutlinePrivacyTip } from "react-icons/md";
import { IoLocationOutline } from "react-icons/io5";
import { TbNotes, TbWallet } from "react-icons/tb";
import { AiOutlineUser } from "react-icons/ai";
import { GoStar, GoSearch } from "react-icons/go";
import { RiExchangeDollarLine, RiListUnordered } from "react-icons/ri";
import { IoIosNotificationsOutline } from "react-icons/io";
import { PiShoppingCart } from "react-icons/pi";
import { LuLayoutDashboard } from "react-icons/lu";
import { useTranslations } from "next-intl";

interface DashboardSidebarProps {
  className?: string;
}

export default function DashboardSidebar({ className = '' }: DashboardSidebarProps) {
  const pathname = usePathname();
  const t = useTranslations();
  
  const menuItems = [
    {
      icon: <LuLayoutDashboard />,
      title: t("menuItems.dashboard.title"),
      desc: t("menuItems.dashboard.desc"),
      href: "/dashboard",
      mobileOnly: false,
    },
    {
      icon: <AiOutlineUser />,
      title: t("menuItems.account_settings.title"),
      desc: t("menuItems.account_settings.desc"),
      href: "/account-settings",
      mobileOnly: false,
    },
    {
      icon: <IoLocationOutline />,
      title: t("menuItems.my_address.title"),
      desc: t("menuItems.my_address.desc"),
      href: "/my-address",
      mobileOnly: true,
    },    
    {
      icon: <RiListUnordered />,
      title: t("menuItems.my_listings.title"),
      desc: t("menuItems.my_listings.desc"),
      href: "/listing",
      mobileOnly: false,
    },
    {
      icon: <TbNotes />,
      title: t("menuItems.my_orders.title"),
      desc: t("menuItems.my_orders.desc"),
      href: "/my-orders",
      mobileOnly: false,
    },    
    {
      icon: <PiShoppingCart />,
      title: t("menuItems.orderReceived.title"),
      desc: t("menuItems.orderReceived.desc"),
      href: "/order-received",
      mobileOnly: false,
    },    
    {
      icon: <GoStar />,
      title: t("menuItems.rating_reviews.title"),
      desc: t("menuItems.rating_reviews.desc"),
      href: "/rating-reviews",
      mobileOnly: false,
    },
    {
      icon: <GoSearch />,
      title: t("menuItems.saved_search.title"),
      desc: t("menuItems.saved_search.desc"),
      href: "/save-search",
      mobileOnly: false,
    },
    {
      icon: <RiExchangeDollarLine />,
      title: t("menuItems.subscription.title"),
      desc: t("menuItems.subscription.desc"),
      href: "/subscription",
      mobileOnly: false,
    },
    {
      icon: <TbNotes />,
      title: t("menuItems.bank.title"),
      desc: t("menuItems.bank.desc"),
      href: "/my-banks",
      mobileOnly: true,
    },
    {
      icon: <TbWallet />,
      title: t("menuItems.wallet.title"),
      desc: t("menuItems.wallet.desc"),
      href: "/wallet",
      mobileOnly: true,
    },
    {
      icon: <IoIosNotificationsOutline />,
      title: t("menuItems.notifications.title"),
      desc: t("menuItems.notifications.desc"),
      href: "/notifications",
      mobileOnly: false,
    },
    {
      icon: <MdOutlinePrivacyTip />,
      title: t("menuItems.privacy_policy.title"),
      desc: t("menuItems.privacy_policy.desc"),
      href: "/privacy-policy",
      mobileOnly: false,
    },
  ];
  const excludedRoutes = ["/request-a-product", "/checkout"];
  const hideSidebar = excludedRoutes.includes(pathname);
  if (hideSidebar) return null;

  return (
    <aside className={`w-[400px] bg-white border h-fit border-b-0 border-neutrals100 max-[767px]:hidden sticky left-0 top-[106px] max-xl:w-[250px] max-lg:w-[250px] dark:bg-darkbg dark:border-darkborder max-xl:top-20 ${className}`}>
      <ul className="text-sm font-medium text-neutrals800">
        {menuItems.map((item, index) => {
          const isActive = pathname.startsWith(item.href);
          return (
            <li
              key={index}
              className={`border-b border-gray-100 dark:border-darkborder hover:bg-neutrals100 dark:hover:bg-background ${
                item.mobileOnly ? 'max-[767px]:flex hidden' : ''
              } ${isActive
                  ? "bg-neutrals100 border-r-4 border-r-primary500 dark:border-r-primary400 dark:bg-background"
                  : ""
                }`}
            >
              <Link
                href={item.href}
                className={`flex items-start gap-2 p-4 pl-3 ${isActive
                    ? "text-primary500 dark:text-primary400"
                    : "dark:text-white text-gray-800 hover:text-primary500 dark:hover:text-primary400"
                  }`}
              >
                <span className="text-[24px]">{item.icon}</span>
                <div>
                  <p className="font-semibold">{item.title}</p>
                  <p className="text-xs text-gray-500 dark:text-neutrals300">
                    {item.desc}
                  </p>
                </div>
              </Link>
            </li>
          );
        })}
      </ul>
    </aside>
  );
}