"use client";

import { UserCircle, HomeIcon, Settings, User, LogOut } from "lucide-react";
import { combineClasses, getMenuItemClasses, getPrimaryTextClass, getPrimaryBorderClass, getPrimaryBgClass } from "@/utils/layout-utils";
import { deleteCookie } from "cookies-next";
import { LOGIN_STATUS_COOKIE } from "@/lib/common";
import { useRouter } from "next/navigation";

interface UserMenuButtonProps {
  className?: string;
  isOpen: boolean;
  onToggle: () => void;
}

const USER_MENU_ITEMS = [
  { href: "/dashboard", label: "Dashboard", icon: HomeIcon },
  { href: "/settings/account", label: "Account Settings", icon: Settings },
  { href: "/settings/profile", label: "My Profile", icon: User },
] as const;

export function UserMenuButton({
  className,
  isOpen,
  onToggle,
}: UserMenuButtonProps) {
  const router = useRouter();

  const handleLogout = async () => {
    try {
      await fetch("/api/logout", { method: "POST" });
      deleteCookie(LOGIN_STATUS_COOKIE, { path: "/" });
      localStorage.clear();
      sessionStorage.clear();
      router.replace("/login");
    } catch (err) {
      console.error("Logout error:", err);
    }
  };

  return (
    <div data-header-user className={combineClasses("relative", className)}>
      <button
        onClick={(e) => {
          e.stopPropagation();
          onToggle();
        }}
        className={combineClasses(
          "inline-flex h-10 w-10 items-center justify-center rounded-xl border bg-white shadow-sm transition hover:-translate-y-0.5",
          getPrimaryBorderClass(30),
          getPrimaryTextClass(),
          getPrimaryBgClass(10)
        )}
        aria-label="User menu"
      >
        <UserCircle size={22} />
      </button>

      {isOpen && (
        <div className="absolute right-0 mt-2 w-56 rounded-lg border border-slate-200 bg-white/95 p-2 shadow-lg backdrop-blur">
          {USER_MENU_ITEMS.map(({ href, label, icon: Icon }) => (
            <a
              key={label}
              href={href}
              className={combineClasses(getMenuItemClasses(), "text-xs")}
            >
              <Icon size={16} className={getPrimaryTextClass()} />
              {label}
            </a>
          ))}
          <button
            onClick={handleLogout}
            className={combineClasses(getMenuItemClasses(), "w-full text-left text-xs")}
          >
            <LogOut size={16} className={getPrimaryTextClass()} />
            Logout
          </button>
        </div>
      )}
    </div>
  );
}