"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import Link from "next/link";
import { User, LogOut, Key } from "lucide-react";
import { useT } from "@open-mercato/shared/lib/i18n/context";
import { Button } from "../primitives/button.js";
import { IconButton } from "../primitives/icon-button.js";
import { ProfileDropdown } from "./ProfileDropdown.js";
function UserMenu({ email }) {
  const t = useT();
  const [open, setOpen] = React.useState(false);
  const buttonRef = React.useRef(null);
  const menuRef = React.useRef(null);
  const profileButtonRef = React.useRef(null);
  const logoutButtonRef = React.useRef(null);
  const toggle = () => setOpen((v) => !v);
  const onMouseEnter = () => setOpen(true);
  const onMouseLeave = () => setOpen(false);
  React.useEffect(() => {
    if (!open) return;
    function handleClick(event) {
      if (menuRef.current && !menuRef.current.contains(event.target) && buttonRef.current && !buttonRef.current.contains(event.target)) {
        setOpen(false);
      }
    }
    document.addEventListener("mousedown", handleClick);
    return () => document.removeEventListener("mousedown", handleClick);
  }, [open]);
  React.useEffect(() => {
    if (!open) return;
    function handleKeyDown(event) {
      if (event.key === "Escape") {
        setOpen(false);
        buttonRef.current?.focus();
      } else if (event.key === "ArrowDown" || event.key === "Tab") {
        event.preventDefault();
        profileButtonRef.current?.focus() ?? logoutButtonRef.current?.focus();
      } else if (event.key === "ArrowUp") {
        event.preventDefault();
        logoutButtonRef.current?.focus() ?? profileButtonRef.current?.focus();
      }
    }
    document.addEventListener("keydown", handleKeyDown);
    return () => document.removeEventListener("keydown", handleKeyDown);
  }, [open]);
  React.useEffect(() => {
    if (open) {
      setTimeout(() => {
        profileButtonRef.current?.focus() ?? logoutButtonRef.current?.focus();
      }, 0);
    }
  }, [open]);
  return /* @__PURE__ */ jsxs("div", { className: "relative", onMouseEnter, onMouseLeave, children: [
    /* @__PURE__ */ jsx(
      IconButton,
      {
        ref: buttonRef,
        variant: "ghost",
        size: "sm",
        onClick: () => setOpen(true),
        "aria-expanded": open,
        "aria-haspopup": "menu",
        "aria-controls": "user-menu-dropdown",
        id: "user-menu-button",
        title: email || t("ui.userMenu.userFallback", "User"),
        children: /* @__PURE__ */ jsx(User, { className: "size-4" })
      }
    ),
    open && /* @__PURE__ */ jsxs(
      "div",
      {
        ref: menuRef,
        id: "user-menu-dropdown",
        className: "absolute right-0 top-full mt-0 w-56 rounded-md border bg-background p-1 shadow z-dropdown",
        role: "menu",
        "aria-labelledby": "user-menu-button",
        tabIndex: -1,
        children: [
          email && /* @__PURE__ */ jsxs("div", { className: "px-2 py-2 text-xs text-muted-foreground border-b mb-1", children: [
            /* @__PURE__ */ jsx("div", { className: "font-medium", children: t("ui.userMenu.loggedInAs", "Logged in as:") }),
            /* @__PURE__ */ jsx("div", { className: "truncate", children: email })
          ] }),
          /* @__PURE__ */ jsxs(
            Link,
            {
              ref: profileButtonRef,
              href: "/backend/profile/change-password",
              className: "w-full text-left text-sm px-2 py-1 rounded hover:bg-accent inline-flex items-center gap-2 outline-none focus-visible:outline-none focus-visible:outline-none ring-0 focus-visible:ring-0 focus-visible:ring-0",
              role: "menuitem",
              tabIndex: 0,
              onClick: () => setOpen(false),
              onKeyDown: (e) => {
                if (e.key === "Escape") {
                  setOpen(false);
                  buttonRef.current?.focus();
                } else if (e.key === "ArrowDown" || e.key === "Tab") {
                  e.preventDefault();
                  logoutButtonRef.current?.focus();
                } else if (e.key === "ArrowUp") {
                  e.preventDefault();
                  logoutButtonRef.current?.focus();
                }
              },
              children: [
                /* @__PURE__ */ jsx(Key, { className: "size-4" }),
                /* @__PURE__ */ jsx("span", { children: t("ui.userMenu.changePassword", "Change password") })
              ]
            }
          ),
          /* @__PURE__ */ jsx("div", { className: "my-1 border-t", "aria-hidden": "true" }),
          /* @__PURE__ */ jsx("form", { action: "/api/auth/logout", method: "POST", children: /* @__PURE__ */ jsxs(
            Button,
            {
              ref: logoutButtonRef,
              variant: "ghost",
              size: "sm",
              className: "w-full justify-start",
              type: "submit",
              role: "menuitem",
              tabIndex: 0,
              onKeyDown: (e) => {
                if (e.key === "Escape") {
                  setOpen(false);
                  buttonRef.current?.focus();
                } else if (e.key === "ArrowUp") {
                  e.preventDefault();
                  profileButtonRef.current?.focus();
                }
              },
              children: [
                /* @__PURE__ */ jsx(LogOut, { className: "size-4" }),
                /* @__PURE__ */ jsx("span", { children: t("ui.userMenu.logout", "Logout") })
              ]
            }
          ) })
        ]
      }
    )
  ] });
}
export {
  ProfileDropdown,
  UserMenu
};
//# sourceMappingURL=UserMenu.js.map
