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

import { Suspense } from 'react'
import { Await } from 'react-router'
import { PlusIcon, UploadIcon } from 'lucide-react'

import { Skeleton } from '@repo/ui/components/skeleton'
import { Button } from '@repo/ui/components/ui/button'
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle
} from '@repo/ui/components/ui/empty'
import { request as req } from '@repo/util/request'

export function meta({}: Route.MetaArgs) {
  return [{ title: ' Importações de colaboradores' }]
}

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

  return {
    scheduled
  }
}

export default function Route({
  loaderData: { scheduled }
}: Route.ComponentProps) {
  return (
    <Suspense fallback={<Skeleton />}>
      <div className="space-y-0.5 mb-8">
        <h1 className="text-2xl font-bold tracking-tight">
          Importações de colaboradores
        </h1>
        <p className="text-muted-foreground">
          Acompanhe suas importações de colaboradores, faça novas importações
          sempre que precisar e finalize o processo com rapidez.
        </p>
      </div>

      <Await resolve={scheduled}>
        {(resolved) => (
          <>
            <Empty className="border border-dashed">
              <EmptyHeader>
                <EmptyMedia variant="icon">
                  <UploadIcon />
                </EmptyMedia>
                <EmptyTitle>Nenhum importação ainda</EmptyTitle>
                <EmptyDescription>
                  Importe seus colaboradores para gerenciar, segmentar e
                  facilitar sua gestão.
                </EmptyDescription>
              </EmptyHeader>
              <EmptyContent>
                <Button>
                  <PlusIcon /> Importar
                </Button>
              </EmptyContent>
            </Empty>
          </>
        )}
      </Await>
    </Suspense>
  )
}