"use client";

/**
 * Next.js global error boundary. Renders only when a render error
 * escapes every other error.tsx boundary in the tree (including the
 * root layout). Required for Sentry to capture root-layout crashes
 * — the more granular `error.tsx` files don't run when the layout
 * itself blows up.
 */

import * as Sentry from "@sentry/nextjs";
import { useEffect } from "react";

export default function GlobalError({
  error,
}: {
  error: Error & { digest?: string };
}) {
  useEffect(() => {
    Sentry.captureException(error);
  }, [error]);

  return (
    <html>
      <body>
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "center",
            minHeight: "100vh",
            padding: "2rem",
            fontFamily: "system-ui, -apple-system, sans-serif",
            color: "#1a1a1a",
          }}
        >
          <h1 style={{ fontSize: "1.5rem", marginBottom: "0.5rem" }}>
            Something went wrong
          </h1>
          <p style={{ color: "#666", marginBottom: "1.5rem" }}>
            We&apos;ve been notified and will look into it. Try refreshing.
          </p>
          {error.digest ? (
            <code style={{ fontSize: "0.75rem", color: "#999" }}>
              ref: {error.digest}
            </code>
          ) : null}
        </div>
      </body>
    </html>
  );
}
