"use client"

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 { IconSelector, IconLogout, IconSettings } from "@tabler/icons-react"

import { useT } from "@/components/locale-provider"

import { signOut } from "@/app/login/sign-out"

/**
 * Two letters from the name, for the avatar when there is no picture. The block
 * shipped "CN" hardcoded, which showed the same initials for everybody.
 */
function initials(name: string) {
  return name
    .split(/\s+/)
    .filter(Boolean)
    .slice(0, 2)
    .map((part) => part[0]?.toUpperCase() ?? "")
    .join("")
}

export function NavUser({
  user,
}: {
  user: {
    name: string
    email: string
    avatar: string
  }
}) {
  const { isMobile } = useSidebar()
  const t = useT()
  return (
    <SidebarMenu>
      <SidebarMenuItem>
        <DropdownMenu>
          <DropdownMenuTrigger
            render={
              <SidebarMenuButton size="lg" className="aria-expanded:bg-muted" />
            }
          >
            <Avatar>
              <AvatarImage src={user.avatar} alt={user.name} />
              <AvatarFallback>{initials(user.name)}</AvatarFallback>
            </Avatar>
            <div className="grid flex-1 text-left text-sm leading-tight">
              <span className="truncate font-medium">{user.name}</span>
              {/*
                The second line wraps instead of truncating. With the sample
                names it never mattered; a real one reads "Line Leader Accessory
                Stock · Accessory Center" and truncation cut it at "Accessor…",
                which loses the department entirely and leaves a word broken
                mid-syllable. Two lines cost a few pixels once.
              */}
              <span className="text-sm text-foreground/80">{user.email}</span>
            </div>
            <IconSelector className="ml-auto size-4" />
          </DropdownMenuTrigger>
          <DropdownMenuContent
            className="w-fit"
            side={isMobile ? "bottom" : "right"}
            align="end"
            sideOffset={4}
          >
            <DropdownMenuGroup>
              <DropdownMenuLabel className="p-0 font-normal">
                <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
                  <Avatar>
                    <AvatarImage src={user.avatar} alt={user.name} />
                    <AvatarFallback>{initials(user.name)}</AvatarFallback>
                  </Avatar>
                  <div className="grid flex-1 text-left text-sm leading-tight">
                    <span className="truncate font-medium">{user.name}</span>
                    <span className="text-sm text-foreground/80">
                      {user.email}
                    </span>
                  </div>
                </div>
              </DropdownMenuLabel>
            </DropdownMenuGroup>
            {/*
              Upgrade to Pro, Account, Billing and Notifications came with the
              shadcn block. None of them exists in this product, and a menu that
              offers things that are not there teaches people the menu is not
              worth opening.

              Signing out is the item that matters on a shared terminal: several
              people use one screen across a shift, and the next person's work
              must not be recorded under the last one's name.

              Settings sits above it because it is the other thing that is about
              the person and not the work, and this menu already carries their
              name. A sidebar group of its own for one screen would have put a
              fourth heading between somebody and their task list.
            */}
            <DropdownMenuSeparator />
            <DropdownMenuItem render={<a href="/settings" />}>
              <IconSettings />
              {t("settings.title")}
            </DropdownMenuItem>
            <DropdownMenuItem onClick={() => void signOut()}>
              <IconLogout />
              {t("nav.signOut")}
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </SidebarMenuItem>
    </SidebarMenu>
  )
}