import { Link } from '@inertiajs/react'
import { BadgeCheck, Check, LogOut, Monitor, Moon, Sun } from 'lucide-react'
import { useTheme } from '../context/theme-provider'
import useDialogState from '../hooks/use-dialog-state'
import { cn } from '../lib/utils'
import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar'
import { Button } from './ui/button'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from './ui/dropdown-menu'
import { SignOutDialog } from './sign-out-dialog'

type ProfileDropdownUser = {
  name: string
  email: string
  avatar?: string
}

type ProfileDropdownProps = {
  user?: ProfileDropdownUser
  onSignOut?: () => void
  /** URL for the profile / settings page. */
  profileUrl?: string
}

function getInitials(name: string): string {
  return name
    .split(' ')
    .map((n) => n[0])
    .filter(Boolean)
    .slice(0, 2)
    .join('')
    .toUpperCase()
}

export function ProfileDropdown({ user, onSignOut, profileUrl = '/settings/profile' }: ProfileDropdownProps = {}) {
  const [open, setOpen] = useDialogState()
  const { theme, setTheme } = useTheme()

  return (
    <>
      <DropdownMenu modal={false}>
        <DropdownMenuTrigger asChild>
          <Button variant='ghost' className='relative h-8 w-8 rounded-full'>
            <Avatar className='h-8 w-8'>
              <AvatarImage src={user?.avatar ?? ''} alt={user?.name ?? 'User'} />
              <AvatarFallback>{user ? getInitials(user.name) : 'U'}</AvatarFallback>
            </Avatar>
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent className='w-56' align='end' forceMount>
          <DropdownMenuLabel className='font-normal'>
            <div className='flex flex-col gap-1.5'>
              <p className='text-sm leading-none font-medium'>{user?.name ?? 'User'}</p>
              <p className='text-xs leading-none text-muted-foreground'>
                {user?.email ?? ''}
              </p>
            </div>
          </DropdownMenuLabel>

          <DropdownMenuSeparator />

          <DropdownMenuGroup>
            <DropdownMenuItem asChild>
              <Link href={profileUrl}>
                <BadgeCheck className='mr-2 h-4 w-4' />
                Profil
              </Link>
            </DropdownMenuItem>

            <DropdownMenuSub>
              <DropdownMenuSubTrigger>
                {theme === 'dark' ? (
                  <Moon className='mr-2 h-4 w-4' />
                ) : theme === 'light' ? (
                  <Sun className='mr-2 h-4 w-4' />
                ) : (
                  <Monitor className='mr-2 h-4 w-4' />
                )}
                Mode Tampilan
              </DropdownMenuSubTrigger>
              <DropdownMenuSubContent>
                <DropdownMenuItem onClick={() => setTheme('light')}>
                  <Sun className='mr-2 h-4 w-4' />
                  Terang
                  <Check size={14} className={cn('ms-auto', theme !== 'light' && 'hidden')} />
                </DropdownMenuItem>
                <DropdownMenuItem onClick={() => setTheme('dark')}>
                  <Moon className='mr-2 h-4 w-4' />
                  Gelap
                  <Check size={14} className={cn('ms-auto', theme !== 'dark' && 'hidden')} />
                </DropdownMenuItem>
                <DropdownMenuItem onClick={() => setTheme('system')}>
                  <Monitor className='mr-2 h-4 w-4' />
                  Sistem
                  <Check size={14} className={cn('ms-auto', theme !== 'system' && 'hidden')} />
                </DropdownMenuItem>
              </DropdownMenuSubContent>
            </DropdownMenuSub>
          </DropdownMenuGroup>

          <DropdownMenuSeparator />

          <DropdownMenuItem variant='destructive' onClick={() => setOpen(true)}>
            <LogOut className='mr-2 h-4 w-4' />
            Keluar
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>

      <SignOutDialog open={!!open} onOpenChange={setOpen} onConfirm={onSignOut} />
    </>
  )
}