'use client';

import { signOut, useSession } from 'next-auth/react';
import { useRouter } from 'next/navigation';
import { Icons } from '@/components/icons';
import { UserAvatarProfile } from '@/components/user-avatar-profile';
import { Button } from '@/components/ui/button';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger
} from '@/components/ui/dropdown-menu';
import { cn } from '@/lib/utils';
import {
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  useSidebar
} from '@/components/ui/sidebar';

type UserNavProps = {
  variant?: 'header' | 'sidebar';
};

export function UserNav({ variant = 'header' }: UserNavProps) {
  const { data: session } = useSession();
  const user = session?.user;
  const router = useRouter();
  const { isMobile } = useSidebar();

  if (!user) {
    return null;
  }

  const trigger =
    variant === 'sidebar' ? (
      <SidebarMenu>
        <SidebarMenuItem>
          <SidebarMenuButton
            size='lg'
            className='data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground'
          >
            <UserAvatarProfile className='h-8 w-8 rounded-lg' user={user} />
            <div className='grid min-w-0 flex-1 text-left text-sm leading-tight'>
              <span className='truncate font-semibold'>{user.name}</span>
              <span className='text-muted-foreground truncate text-xs'>
                รหัสพนักงาน: {user.employeeCode ?? '-'}
              </span>
            </div>
            <Icons.chevronsUpDown className='ml-auto size-4' />
          </SidebarMenuButton>
        </SidebarMenuItem>
      </SidebarMenu>
    ) : (
      <Button variant='ghost' className={cn('relative h-8 w-8 rounded-full')}>
        <UserAvatarProfile className='size-8' user={user} />
      </Button>
    );

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>
      <DropdownMenuContent
        className={cn(
          variant === 'sidebar'
            ? 'w-(--radix-dropdown-menu-trigger-width) min-w-56 max-w-[calc(100vw-1rem)] rounded-lg'
            : 'w-[min(16rem,calc(100vw-1rem))] sm:w-64'
        )}
        align={variant === 'sidebar' ? 'end' : 'end'}
        side={variant === 'sidebar' ? (isMobile ? 'bottom' : 'right') : undefined}
        sideOffset={variant === 'sidebar' ? 4 : 10}
        forceMount
      >
        <DropdownMenuLabel className={cn(variant === 'sidebar' ? 'p-0 font-normal' : 'font-normal')}>
          <div
            className={cn(
              variant === 'sidebar'
                ? 'flex items-center gap-2 px-1 py-1.5 text-left text-sm'
                : 'flex flex-col space-y-1'
            )}
          >
            <UserAvatarProfile
              className={cn(variant === 'sidebar' ? 'h-8 w-8 rounded-lg' : 'hidden')}
              user={user}
            />
            <div className='grid flex-1 text-left text-sm leading-tight'>
              <span className='truncate font-semibold'>{user.name}</span>
              <span className='text-muted-foreground truncate text-xs'>
                รหัสพนักงาน: {user.employeeCode ?? '-'}
              </span>
              <span className='text-muted-foreground break-all text-xs'>{user.email}</span>
            </div>
          </div>
        </DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
          <DropdownMenuItem onClick={() => router.push('/dashboard/overview')}>
            <Icons.dashboard className='mr-2 h-4 w-4' />
            แดชบอร์ด
          </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuItem onClick={() => void signOut({ redirectTo: '/auth/sign-in' })}>
          <Icons.logout className='mr-2 h-4 w-4' />
          ออกจากระบบ
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}
