"use client";

/**
 * 全局 Error Boundary
 *
 * global-error 必须是 Client Component，并自行提供 `<html>` 和 `<body>`，
 * 因为它会在根 layout 渲染失败时替换整个文档。
 */

import { ExceptionHandler } from "@/core/errors";

interface GlobalErrorProps {
  error: Error & { digest?: string };
  unstable_retry?: () => void;
}

export default function GlobalError({ error }: GlobalErrorProps) {
  const errorMessage = ExceptionHandler.message(
    error,
    "An unexpected error occurred.",
  );

  return (
    <html lang="en">
      <body
        style={{
          fontFamily: "system-ui, sans-serif",
          padding: "2rem",
          background: "#111",
          color: "#fff",
          minHeight: "100vh",
        }}
      >
        <h1 style={{ fontSize: "1.5rem", marginBottom: "1rem" }}>
          Something went wrong
        </h1>
        <p style={{ marginBottom: "1rem", opacity: 0.8 }}>
          {errorMessage}
        </p>
        <button
          type="button"
          onClick={() => {
            window.location.href = "/";
          }}
          style={{
            display: "inline-block",
            padding: "0.5rem 1rem",
            background: "#4f46e5",
            color: "#fff",
            borderRadius: "0.5rem",
            border: 0,
            cursor: "pointer",
            fontSize: "1rem",
          }}
        >
          Back to start
        </button>
      </body>
    </html>
  );
}
