"use client";

import { useEffect } from "react";

/**
 * Catches errors thrown in the root layout itself, where app/error.tsx cannot
 * run. It replaces the whole document, so it must render <html> and <body>.
 */
export default function GlobalError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    console.error("[app/global-error]", error);
  }, [error]);

  return (
    <html lang="en">
      <body style={{ margin: 0, background: "#0c090b", color: "#fff" }}>
        <div
          style={{
            minHeight: "100vh",
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "center",
            gap: 16,
            padding: 24,
            textAlign: "center",
            fontFamily: "system-ui, sans-serif",
          }}
        >
          <h2 style={{ fontSize: 20, fontWeight: 600 }}>
            Something went wrong
          </h2>
          <p style={{ maxWidth: 640, fontSize: 14, opacity: 0.7 }}>
            {error?.message || "An unexpected error occurred."}
          </p>
          {error?.digest && (
            <p style={{ fontSize: 12, opacity: 0.4 }}>Digest: {error.digest}</p>
          )}
          <button
            onClick={reset}
            style={{
              marginTop: 8,
              borderRadius: 999,
              border: "none",
              background: "#ED3A57",
              color: "#fff",
              padding: "8px 20px",
              fontSize: 14,
              fontWeight: 600,
              cursor: "pointer",
            }}
          >
            Try again
          </button>
        </div>
      </body>
    </html>
  );
}
