"use client";

/**
 * Route-level error boundary (QA issue #5/#6: "many unreeled errors" and
 * "navigating … became fail / leads to error page").
 *
 * Before this existed, ANY uncaught error while a route segment was
 * rendering (a position-string math throw, an unguarded `.map` on a
 * `null` blocks list, …) crashed the segment with no recoverable UI —
 * Next.js's error overlay in dev, a blank shell in prod. This boundary
 * catches it at the route level, shows a recoverable card, and keeps the
 * rest of the app usable. `reset()` re-renders the segment; combined with
 * the fixes that removed the throwing call sites, a transient failure is
 * now a visible, retryable state instead of a dead page.
 *
 * MUST be a client component and must NOT import app-wide stores or
 * providers (it renders outside them by design).
 */
export default function RouteError({
  error,
  reset
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  return (
    <div className="flex min-h-[50vh] items-center justify-center p-6">
      <div className="w-full max-w-md rounded-lg border border-border bg-card p-6 text-center shadow-sm">
        <div className="mx-auto mb-3 flex size-10 items-center justify-center rounded-full bg-destructive/10">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="text-destructive" aria-hidden>
            <path d="M12 9v4M12 17h.01" />
            <path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" />
          </svg>
        </div>
        <h2 className="text-base font-semibold">Something went wrong on this page</h2>
        <p className="mt-1 text-sm text-muted-foreground">
          The page failed to load or render. Your content is safe — try again, or go back to
          the workspace.
        </p>
        {error?.digest ? (
          <p className="mt-2 truncate text-xs text-muted-foreground/70" title={error.digest}>
            Ref: {error.digest}
          </p>
        ) : null}
        <div className="mt-4 flex items-center justify-center gap-2">
          <button
            type="button"
            onClick={reset}
            className="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:opacity-90"
          >
            Try again
          </button>
          <a
            href="/"
            className="rounded-md border border-border px-3 py-1.5 text-sm hover:bg-accent"
          >
            Go home
          </a>
        </div>
      </div>
    </div>
  );
}