"use client";

import Image from "next/image";
import { useRouter } from "next/navigation";
import { useEffect, useRef, useState } from "react";
import { withCDN } from "@/lib/utils";
import { session } from "@/lib/auth/session";

export default function UserMenu() {
  const router = useRouter();
  const [open, setOpen] = useState(false);
  const wrapperRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    if (!open) return;
    const onDocClick = (e: MouseEvent) => {
      if (!wrapperRef.current?.contains(e.target as Node)) setOpen(false);
    };
    const onEsc = (e: KeyboardEvent) => {
      if (e.key === "Escape") setOpen(false);
    };
    document.addEventListener("mousedown", onDocClick);
    document.addEventListener("keydown", onEsc);
    return () => {
      document.removeEventListener("mousedown", onDocClick);
      document.removeEventListener("keydown", onEsc);
    };
  }, [open]);

  const handleLogout = () => {
    session.clear();
    setOpen(false);
    router.replace("/");
    router.refresh();
  };

  return (
    <div ref={wrapperRef} className="relative">
      <button
        type="button"
        onClick={() => setOpen((v) => !v)}
        aria-haspopup="menu"
        aria-expanded={open}
        aria-label="Account menu"
        className="cursor-pointer outline-none"
      >
        <Image
          src={withCDN("/Package/Group.png")}
          alt="account"
          width={40}
          height={35}
          unoptimized
          className="object-contain w-[40px] h-[35px]"
        />
      </button>

      {open && (
        <div
          role="menu"
          className="absolute right-0 top-full mt-2 z-50 min-w-[160px] bg-white rounded-[16px] shadow-[0px_10px_20px_#00000033] overflow-hidden"
        >
          <button
            type="button"
            role="menuitem"
            onClick={handleLogout}
            className="w-full text-left px-5 py-3 text-[16px] text-[#58585A] hover:bg-[#F2F8FC] cursor-pointer"
          >
            Logout
          </button>
        </div>
      )}
    </div>
  );
}