"use client";

import { useEffect } from "react";

export default function GlobalError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    // Log error to console (Sentry temporarily disabled)
    console.error("Global error boundary caught:", error);
  }, [error]);

  return (
    <html>
      <body>
        <div
          style={{
            minHeight: "100vh",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            backgroundColor: "#f9fafb",
            padding: "1rem",
          }}
        >
          <div
            style={{
              maxWidth: "28rem",
              width: "100%",
              textAlign: "center",
            }}
          >
            <div style={{ fontSize: "4rem", marginBottom: "1rem" }}>⚠️</div>
            <h1
              style={{
                fontSize: "2rem",
                fontWeight: "bold",
                color: "#111827",
                marginBottom: "0.5rem",
              }}
            >
              Critical Error
            </h1>
            <p
              style={{
                color: "#6b7280",
                marginBottom: "2rem",
              }}
            >
              A critical error occurred. Our team has been notified.
            </p>

            <button
              type="button"
              onClick={() => reset()}
              style={{
                width: "100%",
                backgroundColor: "#10b981",
                color: "white",
                fontWeight: "600",
                padding: "0.75rem 1.5rem",
                borderRadius: "0.5rem",
                border: "none",
                cursor: "pointer",
                marginBottom: "1rem",
              }}
            >
              Try Again
            </button>

            <a
              href="/"
              style={{
                display: "block",
                width: "100%",
                backgroundColor: "#e5e7eb",
                color: "#111827",
                fontWeight: "600",
                padding: "0.75rem 1.5rem",
                borderRadius: "0.5rem",
                textDecoration: "none",
              }}
            >
              Go to Homepage
            </a>

            {error.digest && (
              <p
                style={{
                  marginTop: "1.5rem",
                  fontSize: "0.75rem",
                  color: "#9ca3af",
                }}
              >
                Error ID: {error.digest}
              </p>
            )}
          </div>
        </div>
      </body>
    </html>
  );
}
