"use client";

// Only fires if the root layout itself throws. Because this replaces the
// root layout entirely, it renders its own <html>/<body> with plain
// inline styles rather than Tailwind classes, since it can't safely
// assume globals.css or providers loaded correctly.
export default function GlobalError({
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  return (
    <html lang="en">
      <body
        style={{
          margin: 0,
          minHeight: "100dvh",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          gap: 16,
          padding: 24,
          textAlign: "center",
          fontFamily: "system-ui, -apple-system, sans-serif",
          background: "#0B0E14",
          color: "#EEF1F6",
        }}
      >
        <div>
          <h1 style={{ fontSize: 18, fontWeight: 600, margin: 0 }}>
            SharedNet Admin hit a snag
          </h1>
          <p style={{ marginTop: 8, fontSize: 14, color: "#9AA3B2", maxWidth: 340 }}>
            Please reload the page. If this keeps happening, check the browser console
            or contact whoever manages this deployment.
          </p>
        </div>
        <button
          onClick={reset}
          style={{
            padding: "12px 24px",
            borderRadius: 16,
            border: "none",
            background: "linear-gradient(135deg, #FFD873, #C99527)",
            color: "#0B0E14",
            fontWeight: 600,
            fontSize: 15,
            cursor: "pointer",
          }}
        >
          Reload
        </button>
      </body>
    </html>
  );
}
