// src/components/navbar/AccountMenu.jsx
import React, { useState } from "react";
import { LuUser } from "react-icons/lu";
import { TbUserCircle, TbFingerprint, TbLogout } from "react-icons/tb";
import ActionMenuPortal from "./ActionMenuPortal";
import MenuBtn from "./MenuBtn";
import { cn } from "../../utils/navbar";

export default function AccountMenu({
  activePath,
  onOpen, // () => void (برای بستن منوی دیگر)
  onCloseOther, // optional
  navigate,
  logout,
}) {
  const [menu, setMenu] = useState({ open: false, rect: null });

  const close = () => setMenu({ open: false, rect: null });

  const toggle = (e) => {
    e.preventDefault();
    e.stopPropagation();
    onOpen?.(); // مثلا منوی notif بسته شود
    const rect = e.currentTarget.getBoundingClientRect();
    setMenu((p) => {
      const nextOpen = !(p.open && p.rect);
      return { open: nextOpen, rect };
    });
    onCloseOther?.();
  };

  return (
    <>
      <button type="button" className="text-[#43BEFF] dark:text-white" onPointerDown={(e) => e.stopPropagation()} onClick={toggle} aria-haspopup="menu" aria-expanded={menu.open} aria-label="اکانت">
        <LuUser className="h-6 w-6" />
      </button>

      <ActionMenuPortal open={menu.open} rect={menu.rect} onClose={close} width={260} offset={10}>
        <div className="p-2">
          <MenuBtn
            onAction={() => {
              navigate("/myaccount");
              close();
            }}
          >
            <TbUserCircle className={cn("w-5 h-5", activePath === "/myaccount" ? "dark:text-white text-black" : "text-[#43BEFF] dark:text-white")} />
            پروفایل من
          </MenuBtn>

          <MenuBtn
            onAction={() => {
              navigate("/twostep");
              close();
            }}
          >
            <TbFingerprint className={cn("w-5 h-5", activePath === "/twostep" ? "dark:text-white text-black" : "text-[#43BEFF] dark:text-white")} />
            تنظیمات امنیتی
          </MenuBtn>

          <MenuBtn
            danger
            onAction={() => {
              close();
              logout();
            }}
          >
            <TbLogout className="w-5 h-5" />
            خروج از حساب
          </MenuBtn>
        </div>
      </ActionMenuPortal>
    </>
  );
}
