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-4 text-center">
      <h1 className="text-lg font-semibold text-fg">Something went wrong</h1>
      <p className="text-sm text-muted">{errorMessage(error, 'An unexpected error occurred.')}</p>
      <Button onClick={() => router.invalidate()}>Try again</Button>
    </div>
  )
}