spsays-training/components/auth/user-menu.tsx

"use client";

/**
 * UserMenu — the right-most item in SiteHeader. Three states:
 *
 *   1. Loading (auth context hasn't hydrated) — render a quiet placeholder
 *      so the row width doesn't jump when the user data arrives.
 *   2. Logged out — single "Log in" icon/button.
 *   3. Logged in — avatar / initials chip that opens a popover with
 *      "Profile" and "Log out".
 *
 * Why hand-rolled instead of `@base-ui/react/popover`: outside-click
 * dismissal was unreliable for the avatar trigger here. The pattern below
 * mirrors `ReadingSettings`: mousedown listener for outside clicks, keyup
 * for Escape. That's already proven across the site and stays simple.
 */

import { useEffect, useRef, useState } from "react";
import Link from "next/link";
import Image from "next/image";
import { useRouter } from "next/navigation";
import { UserRound } from "lucide-react";
import { useAuth } from "./auth-provider";
import { cn } from "@/lib/utils";

function initials(name: string): string {
  return (
    name
      .split(/\s+/)
      .map((p) => p[0])
      .slice(0, 2)
      .join("")
      .toUpperCase() || "?"
  );
}

export function UserMenu() {
  const { user, loading, logOut } = useAuth();
  const router = useRouter();
  const [open, setOpen] = useState(false);
  const panelRef = useRef<HTMLDivElement>(null);
  const triggerRef = useRef<HTMLButtonElement>(null);

  // Close on outside click + Escape, mirroring ReadingSettings.
  useEffect(() => {
    if (!open) return;
    function onMouseDown(e: MouseEvent) {
      if (
        panelRef.current &&
        !panelRef.current.contains(e.target as Node) &&
        triggerRef.current &&
        !triggerRef.current.contains(e.target as Node)
      ) {
        setOpen(false);
      }
    }
    function onKey(e: KeyboardEvent) {
      if (e.key === "Escape") setOpen(false);
    }
    document.addEventListener("mousedown", onMouseDown);
    document.addEventListener("keydown", onKey);
    return () => {
      document.removeEventListener("mousedown", onMouseDown);
      document.removeEventListener("keydown", onKey);
    };
  }, [open]);

  if (loading) {
    // Placeholder keeps the action row width stable until auth hydrates.
    return <span aria-hidden className="size-9 inline-block" />;
  }

  if (!user) {
    // Mobile: compact icon button so the header row fits on 375px viewports.
    // Desktop: full "Log in" text — there's plenty of space.
    return (
      <Link
        href="/login"
        aria-label="Log in"
        className="inline-flex items-center rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted transition-colors size-9 justify-center md:size-auto md:h-9 md:px-3 md:gap-1.5"
      >
        <UserRound className="size-5 md:size-4" />
        <span className="hidden md:inline text-sm font-medium">Log in</span>
      </Link>
    );
  }

  async function onLogOut() {
    setOpen(false);
    await logOut();
    router.push("/");
    router.refresh();
  }

  return (
    <div className="relative">
      <button
        ref={triggerRef}
        type="button"
        onClick={() => setOpen((v) => !v)}
        aria-haspopup="menu"
        aria-expanded={open}
        aria-label="Account menu"
        className="size-9 rounded-full overflow-hidden ring-1 ring-foreground/10 hover:ring-foreground/20 transition-shadow"
      >
        {user.avatar_url ? (
          <Image
            src={user.avatar_url}
            alt={user.name}
            width={36}
            height={36}
            className="size-full object-cover"
            unoptimized
          />
        ) : (
          <span
            className={cn(
              "flex items-center justify-center size-full text-xs font-semibold",
              "bg-primary/15 text-primary",
            )}
          >
            {initials(user.name)}
          </span>
        )}
      </button>

      {open ? (
        <div
          ref={panelRef}
          role="menu"
          className={cn(
            "absolute right-0 top-full mt-2 min-w-48 rounded-xl bg-card",
            "border border-border shadow-lg p-1 z-50",
          )}
        >
          <div className="px-3 py-2">
            <p className="text-sm font-medium text-foreground truncate">
              {user.name}
            </p>
            <p className="text-xs text-muted-foreground truncate">
              {user.email}
            </p>
          </div>
          <div className="h-px bg-border my-1" />
          <Link
            href="/u/me"
            onClick={() => setOpen(false)}
            className="block rounded-lg px-3 py-2 text-sm text-foreground hover:bg-muted transition-colors"
          >
            Profile
          </Link>
          <button
            type="button"
            onClick={onLogOut}
            className="block w-full text-left rounded-lg px-3 py-2 text-sm text-foreground hover:bg-muted transition-colors"
          >
            Log out
          </button>
        </div>
      ) : null}
    </div>
  );
}