import { useRouter } from '@tanstack/react-router'
import { Button } from '@/components/ui/Button'
import { errorMessage } from '@/lib/api'

// Root error boundary: if a route's beforeLoad/loader throws something other
// than a redirect (e.g. /auth/me fails with a network error or a 500), show a
// recoverable message instead of a blank screen. Retrying re-runs the guards.
export function RouteError({ error }: { error: Error }) {
  const router = useRouter()
  return (
    <div className="mx-auto flex min-h-[60vh] w-full max-w-sm flex-col items-center justify-center gap-3 p-6 text-center">
      <h3>Something went wrong</h3>
      <p className="text-[13px] text-ink-soft">{errorMessage(error, 'An unexpected error occurred.')}</p>
      <Button variant="primary" className="mt-2" onClick={() => router.invalidate()}>
        Try again
      </Button>
    </div>
  )
}
