import * as React from "react";

export interface WebGLSupportResult {
  supported: boolean;
  context: "webgl2" | "webgl" | "none";
  reason?: string;
}

export interface WebGLSupportBoundaryProps {
  children: React.ReactNode;
  fallback?: React.ReactNode;
}

export function detectWebGLSupport(): WebGLSupportResult {
  if (typeof window === "undefined" || typeof document === "undefined") {
    return {
      supported: false,
      context: "none",
      reason: "WebGL can only be detected in a browser environment.",
    };
  }

  if (!("WebGLRenderingContext" in window)) {
    return {
      supported: false,
      context: "none",
      reason: "This browser does not expose WebGLRenderingContext.",
    };
  }

  const canvas = document.createElement("canvas");

  try {
    const webgl2 = canvas.getContext("webgl2", {
      antialias: false,
      powerPreference: "high-performance",
    });

    if (webgl2) {
      return { supported: true, context: "webgl2" };
    }

    const webgl =
      canvas.getContext("webgl", { antialias: false }) ??
      canvas.getContext("experimental-webgl", { antialias: false });

    if (webgl) {
      return { supported: true, context: "webgl" };
    }

    return {
      supported: false,
      context: "none",
      reason: "A WebGL context could not be created. Hardware acceleration may be disabled.",
    };
  } catch (error) {
    return {
      supported: false,
      context: "none",
      reason: error instanceof Error ? error.message : "WebGL context creation failed.",
    };
  }
}

function DefaultWebGLFallback({ reason }: { reason?: string }): JSX.Element {
  return (
    <section
      className="glass-panel flex min-h-[28rem] items-center justify-center rounded-3xl p-6 text-center"
      role="alert"
      aria-live="assertive"
    >
      <div className="max-w-xl">
        <p className="text-xs font-semibold uppercase tracking-[0.28em] text-[var(--color-highlight)]">
          WebGL unavailable
        </p>
        <h2 className="mt-3 text-2xl font-semibold text-white">The 3D viewer cannot start.</h2>
        <p className="mt-3 text-sm leading-6 text-[var(--color-text-muted)]">
          Mechanica needs a WebGL-capable browser with hardware acceleration enabled. You can still
          browse the catalogue and engineering notes, then return to the 3D scene from a supported
          device.
        </p>
        {reason ? (
          <p className="mt-3 rounded-2xl border border-[var(--color-border)] bg-black/20 p-3 text-xs leading-5 text-[var(--color-text-subtle)]">
            Diagnostic: {reason}
          </p>
        ) : null}
        <a className="control-button mt-5 inline-flex items-center px-4 py-2 text-sm" href="/catalogue">
          Back to catalogue
        </a>
      </div>
    </section>
  );
}

export function WebGLSupportBoundary({
  children,
  fallback,
}: WebGLSupportBoundaryProps): JSX.Element {
  const [support, setSupport] = React.useState<WebGLSupportResult>(() => ({
    supported: true,
    context: "webgl2",
  }));

  React.useEffect(() => {
    setSupport(detectWebGLSupport());
  }, []);

  if (!support.supported) {
    return <>{fallback ?? <DefaultWebGLFallback reason={support.reason} />}</>;
  }

  return <>{children}</>;
}