'use client'

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

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

type NavItem = {
  title: string
  url: string
  icon: LucideIcon
  scope?: string[]
}

const apps: NavItem[] = [
  {
    title: 'Sala de aula',
    url: '//scorm.eduseg.workers.dev',
    icon: GraduationCapIcon
  },
  {
    title: 'Administrador',
    url: '//admin.saladeaula.digital',
    icon: LayoutDashboardIcon,
    scope: ['apps:admin']
  },
  {
    title: 'EDUSEG® Estúdio',
    url: '//studio.saladeaula.digital',
    icon: CirclePlayIcon,
    scope: ['apps:studio']
  },
  {
    title: 'EDUSEG® Insights',
    url: '//insights.saladeaula.digital',
    icon: LightbulbIcon,
    scope: ['apps:insights']
  }
]

export function NavUser({
  user
}: {
  user: {
    name: string
    email: string
    scope: string
  }
}) {
  const userScope = 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/orders"
              className="cursor-pointer"
            >
              <DollarSignIcon />
              Histórico de compras
            </Link>
          </DropdownMenuItem>
        </DropdownMenuGroup>

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

          {apps.map(({ title, url, scope = [], icon: Icon }, idx) => {
            if (grantIfHas(scope, userScope)) {
              return (
                <DropdownMenuItem key={idx} asChild>
                  <Link to={url} className="cursor-pointer">
                    <Icon /> {title}
                  </Link>
                </DropdownMenuItem>
              )
            }

            return <></>
          })}
        </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))
}