import { LogIn, LogOut, UserRound } from "lucide-react"

import type { Agents24ChatIdentity } from "../../identity"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "../ui/dropdown-menu"
import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "../ui/sidebar"

function identityLabel(identity: Agents24ChatIdentity): string {
  if (identity.displayName) return identity.displayName
  if (identity.state === "authenticated") return "Signed in"
  if (identity.state === "loading") return "Loading identity"
  if (identity.state === "error") return "Identity unavailable"
  if (identity.state === "signed_out") return "Sign in"
  return "Guest"
}

function IdentityAvatar({ identity }: { identity: Agents24ChatIdentity }) {
  if (identity.avatarUrl) {
    return <img alt="" className="size-6 rounded-full object-cover" src={identity.avatarUrl} />
  }
  return (
    <span className="flex size-6 items-center justify-center rounded-full bg-sidebar-accent text-[10px] font-semibold" aria-hidden="true">
      {identity.displayName ? identity.displayName.slice(0, 1).toUpperCase() : <UserRound className="size-3.5" />}
    </span>
  )
}

export function IdentityControl({ identity }: { identity: Agents24ChatIdentity }) {
  const label = identityLabel(identity)
  const canSignOut = identity.state === "authenticated" && Boolean(identity.onSignOut)
  const canSignIn = (identity.state === "guest" || identity.state === "signed_out" || identity.state === "error") && Boolean(identity.onSignIn)
  return (
    <SidebarMenu className="w-full min-w-0">
      <SidebarMenuItem className="w-full min-w-0">
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <SidebarMenuButton
              size="lg"
              aria-label={`Account: ${label}`}
              className="w-full min-w-0 justify-start"
            >
              <IdentityAvatar identity={identity} />
              <span className="min-w-0 flex-1 overflow-hidden text-start">
                <span className="block truncate text-sm font-medium">{label}</span>
                {identity.secondaryText ? <span className="block truncate text-xs text-muted-foreground">{identity.secondaryText}</span> : null}
              </span>
            </SidebarMenuButton>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="start" side="top" sideOffset={8}>
            <DropdownMenuLabel>
              <span className="block truncate">{label}</span>
              {identity.secondaryText ? <span className="mt-0.5 block truncate text-xs font-normal text-muted-foreground">{identity.secondaryText}</span> : null}
            </DropdownMenuLabel>
            {(canSignIn || canSignOut) ? <DropdownMenuSeparator /> : null}
            {canSignIn ? <DropdownMenuItem onSelect={() => identity.onSignIn?.()}><LogIn />Sign in</DropdownMenuItem> : null}
            {canSignOut ? <DropdownMenuItem onSelect={() => identity.onSignOut?.()}><LogOut />Sign out</DropdownMenuItem> : null}
          </DropdownMenuContent>
        </DropdownMenu>
      </SidebarMenuItem>
    </SidebarMenu>
  )
}