'use client';

import { Button } from '@/components/ui/button';
import { AlertTriangle } from 'lucide-react';

/*
 * Error boundary raíz de Next.js: reemplaza toda la app si algo se rompe antes
 * de que cualquier otro layout pueda renderizar. Por eso no puede depender de
 * ningún estado de la aplicación (providers, fuentes, etc.) — solo HTML, CSS
 * de Tailwind y los tokens de `globals.css`, que sí siguen disponibles porque
 * se cargan a nivel de `<html>`.
 */
export default function GlobalError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  return (
    <html lang="es">
      <body className="min-h-dvh bg-background">
        <main className="flex min-h-dvh flex-col items-center justify-center px-4 py-10">
          <div className="w-full max-w-sm text-center">
            <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-destructive-soft text-destructive">
              <AlertTriangle className="h-6 w-6" />
            </div>
            <h1 className="mt-4 text-xl font-semibold tracking-tight text-foreground">
              Algo salió mal
            </h1>
            <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
              No pudimos abrir la aplicación correctamente. Intenta de nuevo; si
              el problema sigue, recarga la página o revisa la conexión del
              dispositivo.
            </p>
            {error?.digest ? (
              <p className="mt-3 text-xs uppercase tracking-wider text-subtle-foreground">
                Código: {error.digest}
              </p>
            ) : null}
            <div className="mt-6 flex flex-col gap-3 sm:flex-row sm:justify-center">
              <Button onClick={() => reset()}>Reintentar</Button>
              <Button
                variant="outline"
                onClick={() => window.location.assign('/dashboard')}
              >
                Ir al tablero
              </Button>
            </div>
          </div>
        </main>
      </body>
    </html>
  );
}
