import type { Route } from './+types'

import {
  EllipsisVerticalIcon,
  PencilIcon,
  UserRoundMinusIcon
} from 'lucide-react'
import { Suspense } from 'react'
import { Await, NavLink } from 'react-router'

import { Abbr } from '@/components/abbr'
import { request as req } from '@/lib/request'
import { Skeleton } from '@repo/ui/components/skeleton'
import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar'
import { Button } from '@repo/ui/components/ui/button'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger
} from '@repo/ui/components/ui/dropdown-menu'
import { Spinner } from '@repo/ui/components/ui/spinner'
import { initials } from '@repo/ui/lib/utils'

export function meta({}: Route.MetaArgs) {
  return [{ title: 'Gestores' }]
}

export async function loader({ context, request, params }: Route.LoaderArgs) {
  const data = req({
    url: `/orgs/${params.orgid}/admins`,
    context,
    request
  }).then((r) => r.json())

  return {
    data
  }
}

export default function Route({ loaderData: { data } }) {
  return (
    <>
      <div className="space-y-0.5 mb-8">
        <h1 className="text-2xl font-bold tracking-tight">Gestores</h1>
        <p className="text-muted-foreground">
          Adicione gestores e organize sua equipe de forma prática.
        </p>
      </div>

      <Suspense fallback={<Skeleton />}>
        <Await resolve={data}>
          {({ items }) => {
            return (
              <div className="grid gap-4 lg:gap-8 md:grid-cols-2 lg:grid-cols-3">
                {items.map(({ sk, name, email }, index) => {
                  const [_, id] = sk.split('#')
                  return (
                    <section
                      key={index}
                      className="bg-card border-border/50 hover:shadow-muted-foreground/10 hover:border-muted group relative overflow-hidden rounded-2xl border p-8 transition-all duration-300  hover:shadow-2xl"
                    >
                      <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                          <Button
                            variant="ghost"
                            className="data-[state=open]:bg-muted text-muted-foreground cursor-pointer absolute z-1 right-4 top-4"
                            size="icon-sm"
                          >
                            <EllipsisVerticalIcon />
                            <span className="sr-only">Abrir menu</span>
                          </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent
                          align="end"
                          className="w-46 *:cursor-pointer"
                        >
                          <DropdownMenuItem
                            asChild
                            onSelect={(e) => e.preventDefault()}
                          >
                            <NavLink to={`../users/${id}`}>
                              {({ isPending }) => (
                                <>
                                  {isPending ? <Spinner /> : <PencilIcon />}
                                  Editar
                                </>
                              )}
                            </NavLink>
                          </DropdownMenuItem>
                          <DropdownMenuItem variant="destructive">
                            <UserRoundMinusIcon /> Revogar privilégios
                          </DropdownMenuItem>
                        </DropdownMenuContent>
                      </DropdownMenu>

                      <div className="from-muted-foreground/5 absolute inset-0 bg-gradient-to-br to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
                      <div className="relative flex flex-col items-center text-center">
                        <div className="relative mb-6">
                          <Avatar className="size-24 lg:size-28">
                            <AvatarFallback className="text-2xl">
                              {initials(name)}
                            </AvatarFallback>
                          </Avatar>
                        </div>

                        <div className="mb-6">
                          <h1 className="mb-2 text-xl font-bold">
                            <Abbr>{name}</Abbr>
                          </h1>
                          <p className="text-muted-foreground bg-muted/50 inline-block rounded-full px-4 py-1.5 text-sm font-medium">
                            <Abbr>{email}</Abbr>
                          </p>
                        </div>
                      </div>
                    </section>
                  )
                })}
              </div>
            )
          }}
        </Await>
      </Suspense>
    </>
  )
}