import { Head, Link } from '@inertiajs/react'
import { Bug, House } from 'lucide-react'

import { Button } from '@/components/ui/button'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog'
import { t } from '@/lib/i18n'
import { route } from '@/lib/routes'

interface NotFoundProps {
  debug_document: string | null
}

/**
 * La ausencia de una dirección es una salida del producto, no otra pantalla de
 * navegación: no lleva sidebar ni tarjeta. En desarrollo, el informe de Django
 * sigue disponible sin convertir el error en la interfaz principal.
 */
export default function NotFound({ debug_document: debugDocument }: NotFoundProps) {
  return (
    <main className="bg-background text-foreground relative flex min-h-dvh items-center justify-center px-6 py-16">
      <Head title={t('notFound.title')} />

      <div className="flex max-w-md flex-col items-center text-center">
        <p className="text-muted-foreground font-mono text-sm font-medium">404</p>
        <h1 className="mt-4 text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
          {t('notFound.heading')}
        </h1>
        <p className="text-muted-foreground mt-3 max-w-sm text-base leading-7 text-pretty">
          {t('notFound.description')}
        </p>
        <Button asChild className="mt-8">
          <Link href={route('home')}>
            <House aria-hidden />
            {t('notFound.home')}
          </Link>
        </Button>
      </div>

      {debugDocument ? (
        <Dialog>
          <DialogTrigger asChild>
            <Button
              variant="ghost"
              size="icon"
              className="fixed right-4 bottom-4 size-11"
              aria-label={t('notFound.debug.open')}
              title={t('notFound.debug.open')}
            >
              <Bug aria-hidden />
            </Button>
          </DialogTrigger>
          {/* `sm:w-full` a propósito: el panel ahora se ajusta al contenido, y
              este lleva adentro un marco que se estira al ancho disponible. Sin
              esto no habría ancho del que estirarse y el informe entraría por
              una ranura. */}
          <DialogContent className="h-[min(52rem,calc(100dvh-2rem))] max-w-[calc(100%-2rem)] grid-rows-[auto_minmax(0,1fr)] p-4 sm:w-full sm:max-w-5xl">
            <DialogHeader className="pr-10">
              <DialogTitle>{t('notFound.debug.title')}</DialogTitle>
              <DialogDescription>{t('notFound.debug.description')}</DialogDescription>
            </DialogHeader>
            <iframe
              title={t('notFound.debug.frameTitle')}
              srcDoc={debugDocument}
              sandbox=""
              className="bg-white h-full min-h-0 w-full rounded-md border"
            />
          </DialogContent>
        </Dialog>
      ) : null}
    </main>
  )
}
