"use client"

/**
 * UtilityUserMenu — compact profile/account trigger for the shell utility
 * bar. Same menu content as the old sidebar `NavUser`, but a small
 * avatar-only trigger suited to a horizontal bar rather than the sidebar
 * rail (no `useSidebar()` icon-collapse branching needed here).
 */

import { Link } from "react-router"
import { useProductSwitch } from "@exxatdesignux/ui/components/shell/product-route-sync"

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
import { HomeLayoutMenu } from "@/components/product-home/home-layout-menu"
import { LibrarySearchModeMenu } from "@/components/library-search-mode-menu"
import { ThemeModeMenu } from "@/components/theme-mode-menu"
import { NAV_USER } from "@/lib/mock/navigation"
import { utilityBarActionButtonClass } from "@/components/utility-bar-chrome"
import { cn } from "@/lib/utils"

export function UtilityUserMenu() {
  const switchProduct = useProductSwitch()
  const user = NAV_USER

  return (
    <DropdownMenu>
      <Tooltip>
        <TooltipTrigger asChild>
          <DropdownMenuTrigger asChild>
            <button
              type="button"
              aria-label={`${user.name} — open profile and settings menu`}
              className={cn(
                "flex size-8 shrink-0 items-center justify-center rounded-full outline-none transition-colors focus-visible:ring-3 focus-visible:ring-ring/50",
                utilityBarActionButtonClass,
              )}
            >
              <Avatar className="size-8">
                <AvatarImage src={user.avatar} alt="" className="object-cover" aria-hidden="true" />
                <AvatarFallback aria-hidden="true">{user.name.slice(0, 2).toUpperCase()}</AvatarFallback>
              </Avatar>
            </button>
          </DropdownMenuTrigger>
        </TooltipTrigger>
        <TooltipContent side="bottom">{user.name}</TooltipContent>
      </Tooltip>

      <DropdownMenuContent className="w-64 rounded-lg" side="bottom" align="end" sideOffset={4}>
        {/* ── User identity ──────────────────────────────── */}
        <DropdownMenuLabel className="p-0 font-normal">
          <div className="flex items-center gap-2 p-1.5 text-start text-sm">
            <Avatar className="size-8">
              <AvatarImage src={user.avatar} alt="" className="object-cover" aria-hidden="true" />
              <AvatarFallback aria-hidden="true">{user.name.slice(0, 2).toUpperCase()}</AvatarFallback>
            </Avatar>
            <div className="grid flex-1 text-start text-sm leading-tight">
              <span className="truncate font-medium">{user.name}</span>
              <span className="truncate text-xs text-muted-foreground">{user.email}</span>
            </div>
          </div>
        </DropdownMenuLabel>

        <DropdownMenuSeparator />

        {/* ── Account actions ────────────────────────────── */}
        <DropdownMenuGroup>
          <DropdownMenuItem>
            <i className="fa-light fa-circle-user" aria-hidden="true" />
            Account
          </DropdownMenuItem>
          <DropdownMenuItem>
            <i className="fa-light fa-credit-card" aria-hidden="true" />
            Billing
          </DropdownMenuItem>
          <DropdownMenuItem asChild>
            <Link to="/settings/profile" className="cursor-pointer">
              <i className="fa-light fa-sliders" aria-hidden="true" />
              Profile settings
            </Link>
          </DropdownMenuItem>
        </DropdownMenuGroup>

        <DropdownMenuSeparator />

        <ThemeModeMenu />

        <DropdownMenuSeparator />

        <LibrarySearchModeMenu />

        <DropdownMenuSeparator />

        {/* ── Home layout ────────────────────────────────── */}
        <HomeLayoutMenu />

        <DropdownMenuSeparator />

        {/* ── Workspace consoles ─────────────────────────── */}
        {/* Both are products, so entering them is a product switch rather than
            a plain link — the theme, nav tree, and scope chrome all have to
            follow. Admin sits here rather than in the product switcher because
            it is not a product anyone is licensed for; it is where the records
            the other products read are kept. */}
        <DropdownMenuItem onSelect={() => switchProduct("exxat-admin")}>
          <i className="fa-light fa-shield-halved" aria-hidden="true" />
          Administrator
        </DropdownMenuItem>
        <DropdownMenuItem onSelect={() => switchProduct("exxat-design-os")}>
          <i className="fa-light fa-swatchbook" aria-hidden="true" />
          Design OS
        </DropdownMenuItem>

        <DropdownMenuSeparator />

        {/* ── Sign out ───────────────────────────────────── */}
        <DropdownMenuItem>
          <i className="fa-light fa-arrow-right-from-bracket" aria-hidden="true" />
          Log out
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}