"use client";
import { userLogout } from "@/lib/userLogout";
import Link from "next/link";
import { useAppDispatch, useAppSelector } from "@/app/store/hooks";
import { useRouter } from "next/navigation";
import { useTranslations } from "next-intl";
import { useEffect, useState } from "react";
import { RiArrowRightSLine } from "react-icons/ri";
import Button from "../common/Button";

export default function ProfileDropdown() {
  const dispatch = useAppDispatch();
  const router = useRouter();
  const t = useTranslations();
  const { user } = useAppSelector((state) => state?.auth);
  const [showSubmenu, setShowSubmenu] = useState(false);
  const [logoutModal, setLogoutModal] = useState<boolean>(false);

  const dashboardSubmenu = [
    { label: t("profile_menu.dashboard"), href: "/dashboard" },
    { label: t("account_settings.title"), href: "/account-settings" },
    { label: t("profile_menu.listing"), href: "/listing" },
    { label: t("profile_menu.save_search"), href: "/save-search" },
    { label: t("menuItems.rating_reviews.title"), href: "/rating-reviews" },
    { label: t("menuItems.subscription.title"), href: "/subscription" },
    { label: t("profile_menu.notifications"), href: "/notifications" },
    { label: t("profile_menu.help"), href: "/contact" },
    { label: t("profile_menu.logout"), href: "/logout" },
  ];

  const menuItems2 = [
    { label: t("profile_menu.orders"), href: "/my-orders" },
    { label: t("profile_menu.orders_seller"), href: "/order-received" },
  ];

  const closeModal = () => {
    setLogoutModal(false);
  };

  const UserLogout = () => {
    userLogout(dispatch, router);
  };

  return (
    <>
      {user ? (
        <>
          {/* Profile Header */}
          <div className="flex items-center gap-3 bg-white border border-neutrals200 rounded-lg p-2.5 dark:bg-background dark:border-darkborder">
            <img
              src={`${process.env.NEXT_PUBLIC_API}/${user?.profile}`}
              alt="Profile"
              width={32}
              height={32}
              className="w-8 h-8 rounded-full object-cover border border-primary100 dark:border-darkborder"
              onError={(e) => {
                e.currentTarget.onerror = null;
                e.currentTarget.src = "/profile-avatar.png";
              }}
            />
            <div className="flex-1">
              <p className="font-normal text-sm text-neutrals800 dark:text-white">
                {user?.username}
              </p>
              <p className="text-xs text-neutrals500 dark:text-neutrals400">
                {user?.email}
              </p>
            </div>
            {/* <svg
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              className="rtl:rotate-180"
            >
              <path
                d="M9.29446 17.2946C8.90519 16.9053 8.90484 16.2743 9.29369 15.8846L12.465 12.7063C12.8545 12.316 12.8545 11.684 12.465 11.2937L9.29369 8.11538C8.90484 7.72569 8.90519 7.09466 9.29446 6.70538C9.68403 6.31581 10.3157 6.31581 10.7052 6.70538L15.2927 11.2929C15.6833 11.6834 15.6833 12.3166 15.2927 12.7071L10.7052 17.2946C10.3157 17.6842 9.68403 17.6842 9.29446 17.2946Z"
                fill="#64748B"
                className="dark:fill-white"
              />
            </svg> */}
          </div>
          <ul className="text-sm mt-2.5 text-neutrals800 dark:text-neutrals400 relative">
            <li
              className="relative"
              onMouseEnter={() => setShowSubmenu(true)}
              onMouseLeave={() => {
                setShowSubmenu(false);
                setLogoutModal(false);
              }}
            >
              <div
                onClick={() => {
                  window.dispatchEvent(new CustomEvent("closeProfileDropdown"));
                }}
                className="w-full flex items-center justify-between text-left p-2.5 text-sm capitalize text-neutrals800 hover:text-primary500 hover:bg-neutrals50 dark:text-neutrals400 dark:hover:bg-darkborder"
              >
                {t("profile_menu.dashboard")}
                <RiArrowRightSLine />
              </div>
              {showSubmenu && (
                <ul className="absolute left-full top-0 -ml-0.5 w-48 bg-white dark:bg-background border border-neutrals200 dark:border-darkborder rounded-lg shadow-lg z-10 max-md:left-2.5 max-md:top-9">
                  {dashboardSubmenu.map((sub, i) => {
                    if (sub.href === "/logout") {
                      return (
                        <li key={i}>
                          <button
                            onClick={() => setLogoutModal(true)}
                            className="w-full text-left p-2.5 text-sm capitalize text-neutrals800 hover:text-primary500 hover:bg-neutrals50 dark:text-neutrals400 dark:hover:bg-darkborder"
                          >
                            {t("profile_menu.logout")}
                          </button>

                          {logoutModal && (
                            <div className="my-2 mx-2 rounded-md border border-neutrals200 dark:border-darkborder bg-neutrals50 dark:bg-darkborder p-3">
                              <p className="text-xs text-neutrals600 dark:text-neutrals400 mb-2">
                                {t("logout_confirm_msg")}
                              </p>

                              <div className="flex gap-2">
                                <Button
                                  onClick={UserLogout}
                                  className="flex-1 py-1.5 text-xs rounded bg-red-500 text-white hover:bg-red-600"
                                >
                                  Yes
                                </Button>

                                <Button
                                  variant="primary"
                                  onClick={closeModal}
                                  className="flex-1 py-1.5 text-xs"
                                >
                                  No
                                </Button>
                              </div>
                            </div>
                          )}
                        </li>
                      );
                    } else {
                      return (
                        <li key={i}>
                          <Link
                            href={sub.href}
                            onClick={() =>
                              window.dispatchEvent(
                                new CustomEvent("closeProfileDropdown"),
                              )
                            }
                            className="block p-2.5 text-sm text-neutrals800 hover:text-primary500 hover:bg-neutrals50 dark:text-neutrals400 dark:hover:bg-darkborder"
                          >
                            {sub.label}
                          </Link>
                        </li>
                      );
                    }
                  })}
                </ul>
              )}
            </li>
            {menuItems2.map((item, idx) => (
              <li key={idx}>
                <Link
                  href={item.href}
                  onClick={() =>
                    window.dispatchEvent(
                      new CustomEvent("closeProfileDropdown"),
                    )
                  }
                  className="block p-2.5 text-sm capitalize text-neutrals800 hover:text-primary500 hover:bg-neutrals50 dark:text-neutrals400 dark:hover:bg-darkborder"
                >
                  {item.label}
                </Link>
              </li>
            ))}
          </ul>
        </>
      ) : (
        <>
          <Link
            href="/login"
            className="block p-2.5 text-sm capitalize text-neutrals800 hover:text-primary500 hover:bg-neutrals50 dark:text-neutrals400 dark:hover:bg-darkborder"
          >
            {t("login")}
          </Link>
          <Link
            href="/register"
            className="block p-2.5 text-sm capitalize text-neutrals800 hover:text-primary500 hover:bg-neutrals50 dark:text-neutrals400 dark:hover:bg-darkborder"
          >
            {t("register")}
          </Link>
          <Link
            href="/contact"
            className="block p-2.5 text-sm capitalize text-neutrals800 hover:text-primary500 hover:bg-neutrals50 dark:text-neutrals400 dark:hover:bg-darkborder"
          >
            {t("help")}
          </Link>
        </>
      )}
    </>
  );
}