'use client'

import {
  CirclePlayIcon,
  DollarSignIcon,
  GraduationCapIcon,
  LogOutIcon,
  UserIcon
} from 'lucide-react'
import { Link } from 'react-router'

import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger
} from '@/components/ui/dropdown-menu'
import { initials } from '@/lib/utils'

export function NavUser({
  user
}: {
  user: {
    name: string
    email: string
    scope: string
  }
}) {
  const scopes = user.scope.split(' ')

  return (
    <DropdownMenu>
      <DropdownMenuTrigger className="cursor-pointer" asChild>
        <Avatar className="size-10">
          <AvatarFallback>{initials(user.name)}</AvatarFallback>
        </Avatar>
      </DropdownMenuTrigger>
      <DropdownMenuContent
        className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
        side="bottom"
        align="end"
        sideOffset={4}
      >
        <DropdownMenuLabel className="p-0 font-normal">
          <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
            <Avatar className="size-10">
              <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="truncate text-xs text-muted-foreground">
                {user.email}
              </span>
            </div>
          </div>
        </DropdownMenuLabel>

        <DropdownMenuGroup>
          <DropdownMenuSeparator />
          <DropdownMenuItem asChild>
            <Link
              to="//scorm.eduseg.workers.dev/settings"
              className="cursor-pointer"
            >
              <UserIcon />
              Minha conta
            </Link>
          </DropdownMenuItem>
          <DropdownMenuItem asChild>
            <Link
              to="//scorm.eduseg.workers.dev/payments"
              className="cursor-pointer"
            >
              <DollarSignIcon />
              Histórico de compras
            </Link>
          </DropdownMenuItem>
        </DropdownMenuGroup>

        <DropdownMenuGroup>
          {grantIfHas(['apps:admin', 'apps:studio'], scopes, 'any') && (
            <>
              <DropdownMenuSeparator />
              <DropdownMenuLabel className="text-muted-foreground text-sm">
                Aplicações
              </DropdownMenuLabel>
            </>
          )}

          <DropdownMenuItem asChild>
            <Link to="//scorm.eduseg.workers.dev" className="cursor-pointer">
              <GraduationCapIcon />
              Sala de aula
            </Link>
          </DropdownMenuItem>

          {grantIfHas(['apps:studio'], scopes) && (
            <>
              <DropdownMenuItem asChild>
                <Link
                  to="//studio.saladeaula.digital"
                  className="cursor-pointer"
                >
                  <CirclePlayIcon />
                  EDUSEG® Estúdio
                </Link>
              </DropdownMenuItem>
            </>
          )}
        </DropdownMenuGroup>

        <DropdownMenuSeparator />
        <DropdownMenuItem asChild>
          <Link to="/logout" className="cursor-pointer" reloadDocument>
            <LogOutIcon />
            Sair
          </Link>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

function grantIfHas(
  required: string[],
  granted: string[],
  mode: 'all' | 'any' = 'all'
): boolean {
  const grantedSet: Set<string> = new Set(granted)

  if (mode === 'all') {
    return required.every((scope) => grantedSet.has(scope))
  }

  return required.some((scope) => grantedSet.has(scope))
}