// app/error.tsx
// Top-level error boundary. Renders inside the body (must be a
// Client Component per Next.js App Router). Keeps the design-system
// chrome alive so a failing page still looks finished.

"use client";

import { useEffect } from "react";
import Link from "next/link";

export default function GlobalError({
  error,
  reset
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    console.error("App error boundary:", error);
  }, [error]);

  return (
    <section className="container-x py-16">
      <div className="max-w-xl mx-auto bg-surface border border-border rounded-lg p-10 flex flex-col gap-5">
        <p className="text-xs uppercase tracking-[0.08em] text-muted font-semibold">
          Something went wrong
        </p>
        <h1 className="text-2xl font-bold text-fg leading-tight">
          We couldn&apos;t load that page
        </h1>
        <p className="text-base text-muted">
          {error.message ||
            "An unexpected error occurred. The registry is still reachable from the overview."}
        </p>
        <div className="flex gap-3">
          <button
            type="button"
            onClick={reset}
            className="inline-flex items-center px-5 py-3 rounded-md bg-accent text-accent-on font-semibold text-sm hover:bg-accent-hover transition-colors"
          >
            Try again
          </button>
          <Link
            href="/"
            className="inline-flex items-center px-5 py-3 rounded-md border border-border text-fg font-semibold text-sm no-underline hover:bg-surface-warm transition-colors"
          >
            Back to overview
          </Link>
        </div>
      </div>
    </section>
  );
}