import type { PropsWithChildren } from "react";
import { ErrorBoundary } from "react-error-boundary";
import { useLocation } from "react-router-dom";
import { useQueryErrorResetBoundary } from "@tanstack/react-query";
import { reportError } from "@/lib/errors";
import {
  RouteErrorFallback,
  TopLevelErrorFallback,
} from "@/components/error-fallback";

/** Catches render crashes OUTSIDE the router so bootstrap failures still recover. */
export function TopLevelErrorBoundary({ children }: PropsWithChildren) {
  return (
    <ErrorBoundary
      FallbackComponent={TopLevelErrorFallback}
      onError={(error, info) =>
        reportError(error, {
          boundary: "top",
          componentStack: info.componentStack,
        })
      }
    >
      {children}
    </ErrorBoundary>
  );
}

/**
 * Route-scoped boundary. Resets on pathname change and clears the React
 * Query error cache on retry so stale failures don't stick.
 */
export function RouteErrorBoundary({ children }: PropsWithChildren) {
  const location = useLocation();
  const { reset: resetQueries } = useQueryErrorResetBoundary();
  return (
    <ErrorBoundary
      FallbackComponent={RouteErrorFallback}
      onError={(error, info) =>
        reportError(error, {
          boundary: "route",
          pathname: location.pathname,
          componentStack: info.componentStack,
        })
      }
      onReset={() => resetQueries()}
      resetKeys={[location.pathname]}
    >
      {children}
    </ErrorBoundary>
  );
}
