dashboards/components/AccountMenu.tsx

"use client";

import { useEffect, useRef, useState } from "react";
import { useRouter } from "next/navigation";
import { useAuth } from "@/components/AuthProvider";
import { en } from "@/lib/i18n/en";
import {
  getAdminDashboardOrigin,
  getCustomerDashboardOrigin,
  hostAppFor,
} from "@/lib/host";
import { openBusinessDashboardAsUser } from "@/lib/session-handoff";
import { getFirstName } from "@/lib/userName";
import styles from "./AccountMenu.module.css";

export default function AccountMenu() {
  const router = useRouter();
  const { user, logout, isBusinessOwner, isSuperAdmin } = useAuth();
  const [open, setOpen] = useState(false);
  const rootRef = useRef<HTMLDivElement>(null);
  const firstName = getFirstName(user);
  const app =
    typeof window !== "undefined" ? hostAppFor(window.location.host) : "admin";

  const customerUrl = getCustomerDashboardOrigin();
  const adminUrl = getAdminDashboardOrigin();

  useEffect(() => {
    if (!open) return;
    const onPointerDown = (event: PointerEvent) => {
      if (!rootRef.current?.contains(event.target as Node)) {
        setOpen(false);
      }
    };
    const onKey = (event: KeyboardEvent) => {
      if (event.key === "Escape") setOpen(false);
    };
    window.addEventListener("pointerdown", onPointerDown);
    window.addEventListener("keydown", onKey);
    return () => {
      window.removeEventListener("pointerdown", onPointerDown);
      window.removeEventListener("keydown", onKey);
    };
  }, [open]);

  return (
    <div className={styles.account} ref={rootRef}>
      <button
        type="button"
        className={styles.trigger}
        aria-haspopup="menu"
        aria-expanded={open}
        onClick={() => setOpen((value) => !value)}
      >
        {firstName}
        <img
          className={`${styles.chevron} ${open ? styles.chevronOpen : ""}`}
          src="/images/icons/chevron.svg"
          alt=""
          width={7}
          height={12}
        />
      </button>

      {open ? (
        <div className={styles.menu} role="menu">
          <a
            role="menuitem"
            href={`${customerUrl}/profile`}
            className={styles.item}
            onClick={() => setOpen(false)}
          >
            My profile
          </a>
          <a
            role="menuitem"
            href={`${customerUrl}/forgot-password`}
            className={styles.item}
            onClick={() => setOpen(false)}
          >
            Change password
          </a>
          {isBusinessOwner ? (
            <button
              type="button"
              role="menuitem"
              className={styles.item}
              onClick={() => {
                setOpen(false);
                openBusinessDashboardAsUser("/profile");
              }}
            >
              {en.openBusinessDashboard}
            </button>
          ) : null}
          {isSuperAdmin ? (
            <a
              role="menuitem"
              href={adminUrl}
              className={styles.item}
              onClick={() => setOpen(false)}
            >
              Super admin
            </a>
          ) : null}
          {app !== "customer" ? (
            <a
              role="menuitem"
              href={customerUrl}
              className={styles.item}
              onClick={() => setOpen(false)}
            >
              {en.openCustomerDashboard}
            </a>
          ) : null}
          <button
            type="button"
            role="menuitem"
            className={`${styles.item} ${styles.itemMuted}`}
            onClick={() => {
              setOpen(false);
              logout();
              router.replace("/login");
            }}
          >
            {en.logOut}
          </button>
        </div>
      ) : null}
    </div>
  );
}