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

import { useNavigate } from 'react-router'

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle
} from '@repo/ui/components/ui/dialog'
import { request as req } from '@repo/util/request'

export async function loader({ params, request, context }: Route.LoaderArgs) {
  const { id } = params
  const r = await req({
    url: `/enrollments/${id}`,
    request,
    context
  })

  if (!r.ok) {
    throw new Response(null, { status: r.status })
  }

  const enrollment = await r.json()
  return { data: enrollment }
}

export default function UserModal({ loaderData }: Route.ComponentProps) {
  const navigate = useNavigate()
  const { enrollment } = loaderData

  return (
    <Dialog
      open={true}
      onOpenChange={(open) => {
        if (!open) navigate('/enrollments') // Volta pra listagem ao fechar
      }}
    >
      <DialogContent>
        <DialogHeader>
          <DialogTitle>...</DialogTitle>
          <DialogDescription>Detalhes do usuário</DialogDescription>
        </DialogHeader>

        <div className="space-y-4">
          ...
          {/* Mais informações... */}
        </div>
      </DialogContent>
    </Dialog>
  )
}