"use client";

import { useEffect, useState } from "react";

import Link from "next/link";

import { usePathname, useRouter } from "next/navigation";

import Cookies from "js-cookie";

import {
  LayoutDashboard,
  Package,
  FolderKanban,
  Users,
  ShoppingCart,
  Gift,
  Shield,
  PencilLine,
  Menu,
  X,
  LogOut,
  Milestone,
  FileText,
  HandCoins,
  Share2,
} from "lucide-react";

import { Button } from "../shadcnui/button";

const menuItems = [
  {
    title: "Dashboard",
    href: "/dashboard",
    icon: LayoutDashboard,
  },
  {
    title: "Salesman",
    href: "/dashboard/salesman",
    icon: Users,
  },
  {
    title: "Category",
    href: "/dashboard/categories/category",
    icon: FolderKanban,
  },
  {
    title: "Products",
    href: "/dashboard/products/products",
    icon: Package,
  },
  {
    title: "Orders",
    href: "/dashboard/oredrs",
    icon: ShoppingCart,
  },
  {
    title: "Tiles Mason",
    href: "/dashboard/tiles-mason",
    icon: Milestone,
  },
  {
    title: "Schema PDF",
    href: "/dashboard/create-schema",
    icon: FileText,
  },
  {
    title: "Clubpoints",
    href: "/dashboard/clubpoints",
    icon: HandCoins,
  },
  {
    title: "Referrals",
    href: "/dashboard/referrals",
    icon: Share2,
  },
  {
    title: "Users",
    href: "/dashboard/users",
    icon: Users,
  },
  {
    title: "KYC",
    href: "/dashboard/kyc",
    icon: Shield,
  },
  {
    title: "Rewards",
    href: "/dashboard/rewards",
    icon: Gift,
  },
];

const DashboardSidebar = () => {
  const pathname = usePathname();

  const router = useRouter();

  const [openSidebar, setOpenSidebar] = useState(false);

  const [userRole, setUserRole] = useState<string | null>(null);

  useEffect(() => {
    const userCookie = Cookies.get("kero_user");

    if (!userCookie) {
      setUserRole(null);
      return;
    }

    try {
      const user = JSON.parse(userCookie);

      console.log("SIDEBAR USER:", user);
      console.log("SIDEBAR ROLE:", user?.role);

      setUserRole(user?.role || null);
    } catch (error) {
      console.error("INVALID KERO USER COOKIE:", error);
      setUserRole(null);
    }
  }, []);

  const handleLogout = () => {
    Cookies.remove("kero_token");

    Cookies.remove("kero_user");

    router.push("/login");
  };

  const visibleMenuItems =
    userRole === "ACCOUNTS"
      ? [
          {
            title: "Dashboard",
            href: "/dashboard",
            icon: LayoutDashboard,
          },
          {
            title: "Create Coupon",
            href: "/dashboard/create-cuppon",
            icon: PencilLine,
          },
        ]
      : menuItems;

  return (
    <>
      <div className="mt-6">
        {/* Mobile Header */}
        <div className="fixed top-20 left-4 z-50 md:hidden">
          <Button
            className="bg-black text-white dark:bg-white dark:text-black"
            size="icon"
            variant="outline"
            onClick={() => setOpenSidebar(true)}
          >
            <Menu size={20} />
          </Button>
        </div>

        {/* Mobile Overlay */}
        {openSidebar && (
          <div
            className="fixed inset-0 z-40 bg-black/50 md:hidden"
            onClick={() => setOpenSidebar(false)}
          />
        )}

        <aside
          className={`fixed top-0 left-0 z-50 flex h-screen w-72 flex-col border-r bg-white p-4 transition-transform duration-300 md:sticky md:top-0 md:translate-x-0 dark:border-gray-800 dark:bg-black ${
            openSidebar ? "translate-x-0" : "-translate-x-full"
          }`}
        >
          {/* Mobile Close */}
          <div className="mb-4 flex items-center justify-between md:hidden">
            <h2 className="text-xl font-bold text-black dark:text-white">
              Kero Admin
            </h2>

            <Button
              size="icon"
              variant="ghost"
              onClick={() => setOpenSidebar(false)}
            >
              <X size={20} />
            </Button>
          </div>

          {/* Desktop Logo */}
          <div className="mb-8 hidden md:block">
            <h2 className="text-2xl font-bold text-black dark:text-white">
              Kero Admin
            </h2>
          </div>

          {/* Menu */}
          <div className="flex h-full flex-1 flex-col">
            <div className="space-y-2">
              {visibleMenuItems.map((item) => {
                const Icon = item.icon;

                return (
                  <Link
                    key={item.href}
                    href={item.href as any}
                    onClick={() => setOpenSidebar(false)}
                    className={`flex items-center gap-3 rounded-lg px-4 py-3 transition-all ${
                      pathname === item.href
                        ? "bg-black text-white dark:bg-white dark:text-black"
                        : "text-black hover:bg-gray-100 dark:text-white dark:hover:bg-gray-900"
                    }`}
                  >
                    <Icon size={18} />

                    <span>{item.title}</span>
                  </Link>
                );
              })}
            </div>

            {/* Logout */}
            <Button
              variant="destructive"
              className="mt-6 flex items-center gap-2"
              onClick={handleLogout}
            >
              <LogOut size={18} />

              Logout
            </Button>
          </div>
        </aside>
      </div>
    </>
  );
};

export default DashboardSidebar;