"use client"

/**
 * NavUser — WCAG 2.1 AA profile menu
 *
 * AA checklist:
 *  ✓ aria-label on trigger (1.3.1, 4.1.2)
 *  ✓ Icon-only items have sr-only text (1.1.1)
 *  ✓ App preferences link to Settings (appearance lives there)
 *  ✓ Keyboard: full arrow-key + Enter/Space navigation via Radix (2.1.1)
 *  ✓ Focus ring visible on every item (2.4.11)
 *  ✓ Colour contrast: all labels ≥ 4.5:1 on popover bg (1.4.3)
 *  ✓ Active theme shown via Mode segmented control (aria-checked on segments) (4.1.3)
 */

import { useProductSwitch } from "@exxatdesignux/ui/components/shell/product-route-sync"
import { Link } from "react-router"
import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  useSidebar,
} from "@/components/ui/sidebar"
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 { cn } from "@/lib/utils"

export function NavUser({
  user,
}: {
  user: {
    name: string
    email: string
    avatar: string
  }
}) {
  const { isMobile, state } = useSidebar()
  const iconRailCollapsed = state === "collapsed" && !isMobile
  const switchProduct = useProductSwitch()

  const profileTrigger = (
    <SidebarMenuButton
      size="lg"
      {...(iconRailCollapsed
        ? { "aria-label": `${user.name} — open profile and settings menu` }
        : {})}
      className={cn(
        "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground",
        "h-auto min-h-12 items-center py-2 !overflow-visible",
        "group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!h-8 group-data-[collapsible=icon]:!min-h-8 group-data-[collapsible=icon]:!max-h-8 group-data-[collapsible=icon]:!w-8 group-data-[collapsible=icon]:!min-w-8 group-data-[collapsible=icon]:!max-w-8 group-data-[collapsible=icon]:aspect-square group-data-[collapsible=icon]:!p-0 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:rounded-lg",
        /* Icon rail: clip overflow and hide chrome that sat in the gutter (ellipsis was bleeding past the rail). */
        "group-data-[collapsible=icon]:!overflow-hidden",
        "[&>span:last-child]:!overflow-visible [&>span:last-child]:!whitespace-normal [&>span:last-child]:text-clip",
        "group-data-[collapsible=icon]:[&>span:last-child]:hidden",
      )}
    >
      <Avatar className="size-8 shrink-0">
        <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 min-w-0 flex-1 content-center text-start text-sm leading-tight group-data-[collapsible=icon]:hidden">
        <span className="truncate font-medium">{user.name}</span>
        <span className="truncate text-xs text-muted-foreground">
          {user.email}
        </span>
      </div>
      <span
        className="icon-button-chrome ms-auto flex w-6 shrink-0 self-stretch items-center justify-center group-data-[collapsible=icon]:hidden"
        aria-hidden="true"
      >
        <i className="fa-light fa-ellipsis-vertical block text-xs leading-none" aria-hidden="true" />
      </span>
    </SidebarMenuButton>
  )

  return (
    <SidebarMenu>
      <SidebarMenuItem>
        <DropdownMenu>
          <Tooltip>
            <TooltipTrigger asChild>
              <DropdownMenuTrigger asChild>
                {profileTrigger}
              </DropdownMenuTrigger>
            </TooltipTrigger>
            <TooltipContent side="right" align="center">
              {user.name}
            </TooltipContent>
          </Tooltip>

          <DropdownMenuContent
            className="w-(--radix-dropdown-menu-trigger-width) min-w-60 rounded-lg"
            side={isMobile ? "bottom" : "right"}
            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>
                <i className="fa-light fa-bell" aria-hidden="true" />
                Notifications
              </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 — theme, nav tree, and scope chrome all
                follow. Admin is here rather than in the product switcher: it
                is not licensed like a product, 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>
      </SidebarMenuItem>
    </SidebarMenu>
  )
}