"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).
 *
 * School / program scope stays on the utility bar as the school avatar
 * (`UtilityBarSchoolSwitcher`, program name off) — not duplicated 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 { SignInFlowMenuItem } from "@/components/sign-in-flow-menu-item"
import { ThemeModeMenu } from "@/components/theme-mode-menu"
import { useProduct } from "@/contexts/product-context"
import { getSecondaryNavForProduct, NAV_USER } from "@/lib/mock/navigation"
import { useLogOut } from "@/hooks/use-log-out"
import { useWhatsNewSheet } from "@/components/whats-new-sheet-context"
import { Badge } from "@/components/ui/badge"
import { utilityBarActionButtonClass } from "@/components/utility-bar-chrome"
import { cn } from "@/lib/utils"

export function UtilityUserMenu() {
  const switchProduct = useProductSwitch()
  const logOut = useLogOut()
  const { product } = useProduct()
  const [workspaceSettings] = getSecondaryNavForProduct(product)
  const user = NAV_USER
  const { openSheet, unseenCount } = useWhatsNewSheet()

  return (
    <DropdownMenu>
      <Tooltip>
        <TooltipTrigger asChild>
          <DropdownMenuTrigger asChild>
            <button
              type="button"
              aria-label={`Open profile and settings menu for ${user.name}`}
              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>
          <DropdownMenuItem asChild>
            <Link to={workspaceSettings.url} className="cursor-pointer">
              <i className="fa-light fa-gear" aria-hidden="true" />
              Workspace settings
            </Link>
          </DropdownMenuItem>
        </DropdownMenuGroup>

        <DropdownMenuSeparator />

        <DropdownMenuItem
          className="gap-2"
          onSelect={event => {
            event.preventDefault()
            queueMicrotask(() => openSheet())
          }}
        >
          <i className="fa-light fa-megaphone" aria-hidden="true" />
          <span className="flex-1">What&apos;s new</span>
          {unseenCount > 0 ? (
            <Badge variant="count" className="h-4 min-w-4 px-1 text-2xs">
              {unseenCount}
            </Badge>
          ) : null}
        </DropdownMenuItem>

        <DropdownMenuSeparator />

        <ThemeModeMenu />

        <DropdownMenuSeparator />

        <LibrarySearchModeMenu />

        <DropdownMenuSeparator />

        {/* ── Layout preferences ─────────────────────────── */}
        <HomeLayoutMenu />

        <DropdownMenuSeparator />

        {/* ── Workspace consoles ─────────────────────────── */}
        <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>
        <SignInFlowMenuItem />

        <DropdownMenuSeparator />

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