import { useEffect, useRef, useState, type ReactNode } from 'react';

import {
  detectWebGLSupport,
  getWebGLFailureMessage,
  type DetectWebGLOptions,
  type WebGLSupportResult,
} from '../../utils/webgl';

export interface WebGLFailureFallbackProps {
  result?: WebGLSupportResult;
  title?: string;
  onRetry?: () => void;
  compact?: boolean;
}

export interface WebGLSupportBoundaryProps {
  children: ReactNode;
  detectOptions?: DetectWebGLOptions;
  fallback?: (props: WebGLFailureFallbackProps) => ReactNode;
  checkingFallback?: ReactNode;
  className?: string;
  onUnsupported?: (result: WebGLSupportResult) => void;
}

type WebGLContextCreationEvent = Event & {
  statusMessage?: string;
};

export function WebGLFailureFallback({
  result,
  title = '3D graphics are unavailable',
  onRetry,
  compact = false,
}: WebGLFailureFallbackProps): JSX.Element {
  const message = result
    ? getWebGLFailureMessage(result)
    : 'Mechanica could not verify WebGL support in this environment.';

  return (
    <section
      role="alert"
      className="flex h-full min-h-[320px] w-full items-center justify-center bg-[#0B0E14] p-6 text-slate-100"
    >
      <div
        className={
          compact
            ? 'w-full rounded-2xl border border-amber-300/25 bg-[#121721]/95 p-4'
            : 'w-full max-w-xl rounded-2xl border border-amber-300/25 bg-[#121721]/95 p-6 shadow-2xl shadow-black/30'
        }
      >
        <p className="text-xs font-semibold uppercase tracking-[0.3em] text-[#FFB04C]">
          WebGL fallback
        </p>
        <h2 className="mt-3 text-xl font-semibold tracking-tight">{title}</h2>
        <p className="mt-3 text-sm leading-6 text-slate-300">{message}</p>

        {result?.details ? (
          <dl className="mt-5 grid gap-3 rounded-xl border border-white/10 bg-black/20 p-4 text-xs text-slate-400 sm:grid-cols-2">
            <div>
              <dt className="font-semibold text-slate-300">Renderer</dt>
              <dd>{result.renderer}</dd>
            </div>
            <div>
              <dt className="font-semibold text-slate-300">Reason</dt>
              <dd>{result.reason ?? 'unknown'}</dd>
            </div>
            {result.details.userAgent ? (
              <div className="sm:col-span-2">
                <dt className="font-semibold text-slate-300">User agent</dt>
                <dd className="break-words">{result.details.userAgent}</dd>
              </div>
            ) : null}
          </dl>
        ) : null}

        <div className="mt-5 flex flex-wrap gap-3">
          {onRetry ? (
            <button
              type="button"
              onClick={onRetry}
              className="rounded-full bg-[#4C8DFF] px-4 py-2 text-sm font-semibold text-white shadow-lg shadow-[#4C8DFF]/20 transition hover:bg-[#6EA3FF] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4C8DFF]"
            >
              Retry graphics check
            </button>
          ) : null}
          <a
            href="/"
            className="rounded-full border border-white/15 px-4 py-2 text-sm font-semibold text-slate-100 transition hover:border-white/30 hover:bg-white/10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4C8DFF]"
          >
            Return to catalogue
          </a>
        </div>
      </div>
    </section>
  );
}

export function WebGLSupportBoundary({
  children,
  detectOptions,
  fallback,
  checkingFallback,
  className,
  onUnsupported,
}: WebGLSupportBoundaryProps): JSX.Element {
  const containerRef = useRef<HTMLDivElement | null>(null);
  const [support, setSupport] = useState<WebGLSupportResult | null>(() =>
    typeof window === 'undefined' ? null : detectWebGLSupport(detectOptions),
  );
  const [runtimeFailure, setRuntimeFailure] = useState<WebGLSupportResult | null>(null);

  const runDetection = () => {
    const result = detectWebGLSupport(detectOptions);
    setSupport(result);
    setRuntimeFailure(null);

    if (!result.supported) {
      onUnsupported?.(result);
    }
  };

  useEffect(() => {
    if (!support) {
      runDetection();
    }
    // Initial check only. detectOptions should be stable at integration sites.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => {
    const container = containerRef.current;
    if (!container) {
      return undefined;
    }

    const handleContextLost = (event: Event) => {
      event.preventDefault();
      setRuntimeFailure({
        supported: false,
        renderer: 'none',
        reason: 'context-lost',
        details: {
          errorMessage: 'The WebGL context was lost.',
          userAgent: typeof navigator !== 'undefined' ? navigator.userAgent : undefined,
          devicePixelRatio: typeof window !== 'undefined' ? window.devicePixelRatio : undefined,
        },
      });
    };

    const handleContextCreationError = (event: Event) => {
      const webglEvent = event as WebGLContextCreationEvent;
      setRuntimeFailure({
        supported: false,
        renderer: 'none',
        reason: 'context-creation-error',
        details: {
          errorMessage: webglEvent.statusMessage || 'WebGL context creation failed.',
          userAgent: typeof navigator !== 'undefined' ? navigator.userAgent : undefined,
          devicePixelRatio: typeof window !== 'undefined' ? window.devicePixelRatio : undefined,
        },
      });
    };

    container.addEventListener('webglcontextlost', handleContextLost, true);
    container.addEventListener('webglcontextcreationerror', handleContextCreationError, true);

    return () => {
      container.removeEventListener('webglcontextlost', handleContextLost, true);
      container.removeEventListener('webglcontextcreationerror', handleContextCreationError, true);
    };
  }, []);

  const failure = runtimeFailure ?? (support && !support.supported ? support : null);

  useEffect(() => {
    if (failure) {
      onUnsupported?.(failure);
    }
  }, [failure, onUnsupported]);

  if (!support) {
    return (
      <>
        {checkingFallback ?? (
          <div
            role="status"
            aria-live="polite"
            className="flex min-h-[320px] items-center justify-center bg-[#0B0E14] text-sm text-slate-400"
          >
            Checking graphics capabilities…
          </div>
        )}
      </>
    );
  }

  if (failure) {
    return (
      <>
        {fallback ? (
          fallback({
            result: failure,
            onRetry: runDetection,
          })
        ) : (
          <WebGLFailureFallback result={failure} onRetry={runDetection} />
        )}
      </>
    );
  }

  return (
    <div ref={containerRef} className={className} data-webgl-state="supported">
      {children}
    </div>
  );
}