"use client";
import { Fragment } from "react";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { userPanelNav } from "@/config/userPanelNav";
import { Button } from "../ui/button";
import { FiLogOut } from "react-icons/fi";
import { User as UserIcon } from "lucide-react";
import { useAuth } from "@/context/AuthContext";
import { translate } from "@/lib/api";

const UserPanelSidebar = () => {
  const pathname = usePathname();
  const router = useRouter();
  const { user, logout } = useAuth();

  const isUserPanelRoot = pathname === "/user-panel";

  return (
    <div
      id="user-panel-sidebar"
      className={`p-4 w-full md:w-auto flex-none md:flex-1 bg-[#F1F5F9] rounded-xl overflow-auto md:h-full box-border ${
        isUserPanelRoot ? "block" : "hidden"
      } md:block`}
    >
      <div className="bg-[#F8FAFC] rounded-lg p-4 flex flex-col items-center gap-3">
        <div className="size-[50px] rounded-full overflow-hidden flex items-center justify-center bg-slate-200">
          <img
            src={user?.avatar || "/placeholder-avatar.png"}
            className="size-full object-cover"
            alt="user"
            width={50}
            height={50}
          />
        </div>
        <div className="text-center">
          <h4 className="text-lg font-medium text-[#1D293D]">{user?.name || "مستخدم"}</h4>
          <p className="text-[#45556C] text-sm">{translate(user?.client_type)}</p>
        </div>
        <Link
          href="/user-panel/profile"
          className="w-full text-center bg-[#EFF6FF] rounded-lg p-2 text-[#2B7FFF] underline text-sm font-medium"
        >
          تعديل &nbsp;الملف الشخصي
        </Link>
      </div>

      <div className="mt-4">
        {userPanelNav.map((group, gIdx) => (
          <Fragment key={gIdx}>
            {gIdx > 0 && <hr className="my-2 border-[#CAD5E2]" />}
            <ul className="flex flex-col gap-2">
              {group.map(({ name, href, icon: Icon }) => {
                const isActive = pathname.startsWith(href);
                return (
                  <li key={href}>
                    <Link
                      className={`p-2 flex items-center rounded-md gap-2 transition-all ${isActive ? "bg-[#052531] text-white" : ""}`}
                      href={href}
                    >
                      <Icon size={22} strokeWidth={1.8} />
                      <span className="text-base">{name}</span>
                    </Link>
                  </li>
                );
              })}
            </ul>
          </Fragment>
        ))}

        <Button
          className="w-full mt-2 justify-start gap-2 rounded-lg font-normal text-base h-9 bg-[#FB2C36] hover:bg-[#E0242E] transition-all border-none text-white [&_svg:not([class*='size-'])]:size-auto cursor-pointer"
          variant="destructive"
          onClick={async () => {
            await logout();
            router.push('/');
          }}
        >
          <FiLogOut size={18} strokeWidth={1.8} />
          <span>تسجيل الخروج</span>
        </Button>
      </div>
    </div>
  );
};

export default UserPanelSidebar;