"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" link.
 *   3. Logged in — avatar / initials chip that opens a popover with
 *      "Profile" and "Log out". Built on @base-ui/react/popover so we
 *      don't pull in additional shadcn primitives.
 */

import { Popover } from "@base-ui/react/popover";
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();

  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.
    // Same muted→foreground pattern as the search / reading-settings buttons
    // so the icon sits at a consistent quiet shade across all themes.
    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() {
    await logOut();
    router.push("/");
    router.refresh();
  }

  return (
    <Popover.Root>
      <Popover.Trigger
        className="size-9 rounded-full overflow-hidden ring-1 ring-foreground/10 hover:ring-foreground/20 transition-shadow"
        aria-label="Account menu"
      >
        {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>
        )}
      </Popover.Trigger>
      <Popover.Portal>
        <Popover.Positioner sideOffset={6} align="end">
          <Popover.Popup className="min-w-44 rounded-xl bg-card border border-border shadow-md p-1 outline-none">
            <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="/profile"
              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>
          </Popover.Popup>
        </Popover.Positioner>
      </Popover.Portal>
    </Popover.Root>
  );
}