import { getSession } from '@admin/auth/middleware'
import { Avatar, AvatarFallback, AvatarImage } from '@admin/components/ui/avatar'
import { Button, buttonVariants } from '@admin/components/ui/button'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuTrigger
} from '@admin/components/ui/dropdown-menu'
import { SidebarMenu, SidebarMenuItem } from '@admin/components/ui/sidebar'
import { cn } from '@admin/utils/shared/cn'
import { BookOpen, Ellipsis, Settings } from 'lucide-react'
import Link from 'next/link'
import { AdminSignOut } from './admin-sign-out'

export async function SidebarUserMenu() {
  const session = await getSession()
  const user = session?.user ?? null

  if (!user) return null

  return (
    <SidebarMenu className="h-full">
      <SidebarMenuItem className="h-full">
        <DropdownMenu>
          <DropdownMenuTrigger
            render={
              <Button
                variant="ghost"
                className="h-full w-full justify-start border-none bg-transparent! px-3 text-left ring-0!"
              >
                <Avatar className="size-8 shrink-0">
                  <AvatarImage src={user.image ?? undefined} />
                  <AvatarFallback className="text-xs font-semibold group-hover:bg-white">
                    {user.name?.charAt(0) ?? user.email?.charAt(0) ?? '?'}
                  </AvatarFallback>
                </Avatar>
                <div className="flex-1 truncate group-data-[collapsible=icon]:hidden">
                  <p className="truncate font-medium">{user.name}</p>
                </div>

                <div className="group-data-[collapsible=icon]:hidden">
                  <span
                    className={cn(
                      buttonVariants({ variant: 'outline', size: 'icon' }),
                      'size-7 rounded-sm group-hover:bg-white'
                    )}
                  >
                    <Ellipsis strokeWidth={2} className="size-4" />
                  </span>
                </div>
              </Button>
            }
          />
          <DropdownMenuContent align="start" alignOffset={12} className="w-68 p-1">
            <DropdownMenuGroup>
              <DropdownMenuItem
                className="justify-between"
                render={
                  <Link
                    href="/admin/profile"
                    className="flex w-full items-center justify-between gap-2 py-2 pr-1"
                  />
                }
              >
                <div className="flex items-center gap-2">
                  <div className="flex flex-col">
                    <p className="truncate font-medium">{user.name}</p>
                    <p className="truncate text-sm font-normal text-muted-foreground [text-box-trim:trim-start]">
                      {user.email}
                    </p>
                  </div>
                </div>
                <Button variant="ghost" className="pointer-events-none size-8! shrink-0">
                  <Settings strokeWidth={2} className="size-4" />
                </Button>
              </DropdownMenuItem>
            </DropdownMenuGroup>
            <DropdownMenuGroup>
              <DropdownMenuItem
                className="justify-between"
                render={<Link href="https://betterstart.io/docs" target="_blank" />}
              >
                <span>Docs</span>
                <BookOpen strokeWidth={1.2} className="size-4" />
              </DropdownMenuItem>
              <AdminSignOut className="justify-between" />
            </DropdownMenuGroup>
          </DropdownMenuContent>
        </DropdownMenu>
      </SidebarMenuItem>
    </SidebarMenu>
  )
}