import {
  Component,
  useState,
  type ComponentType,
  type ErrorInfo,
  type ReactNode,
} from 'react';

export type ErrorBoundaryLayer = 'app' | 'route' | 'viewer' | 'panel' | 'control';

export interface ErrorBoundaryFallbackProps {
  error: Error;
  errorInfo?: ErrorInfo;
  eventId: string;
  layer: ErrorBoundaryLayer;
  resetErrorBoundary: () => void;
}

export interface ErrorBoundaryProps {
  children: ReactNode;
  layer?: ErrorBoundaryLayer;
  fallback?: ComponentType<ErrorBoundaryFallbackProps> | ReactNode;
  onError?: (error: Error, errorInfo: ErrorInfo, eventId: string) => void;
  onReset?: (eventId: string | undefined) => void;
}

interface ErrorBoundaryState {
  error: Error | null;
  errorInfo?: ErrorInfo;
  eventId?: string;
}

const initialState: ErrorBoundaryState = {
  error: null,
};

export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
  state: ErrorBoundaryState = initialState;

  static getDerivedStateFromError(error: unknown): Partial<ErrorBoundaryState> {
    return {
      error: normaliseError(error),
    };
  }

  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
    const eventId = createEventId(this.props.layer ?? 'app');
    const normalisedError = normaliseError(error);

    this.setState({
      error: normalisedError,
      errorInfo,
      eventId,
    });

    this.props.onError?.(normalisedError, errorInfo, eventId);
  }

  resetErrorBoundary = (): void => {
    this.props.onReset?.(this.state.eventId);
    this.setState(initialState);
  };

  render(): ReactNode {
    const { children, fallback, layer = 'app' } = this.props;
    const { error, errorInfo, eventId } = this.state;

    if (!error) {
      return children;
    }

    const fallbackProps: ErrorBoundaryFallbackProps = {
      error,
      errorInfo,
      eventId: eventId ?? createEventId(layer),
      layer,
      resetErrorBoundary: this.resetErrorBoundary,
    };

    if (typeof fallback === 'function') {
      const FallbackComponent = fallback as ComponentType<ErrorBoundaryFallbackProps>;
      return <FallbackComponent {...fallbackProps} />;
    }

    if (fallback !== undefined) {
      return fallback;
    }

    return <DefaultErrorFallback {...fallbackProps} />;
  }
}

export function AppErrorBoundary(props: Omit<ErrorBoundaryProps, 'layer'>): JSX.Element {
  return <ErrorBoundary {...props} layer="app" />;
}

export function RouteErrorBoundary(props: Omit<ErrorBoundaryProps, 'layer'>): JSX.Element {
  return <ErrorBoundary {...props} layer="route" />;
}

export function ViewerErrorBoundary(props: Omit<ErrorBoundaryProps, 'layer'>): JSX.Element {
  return <ErrorBoundary {...props} layer="viewer" />;
}

export function PanelErrorBoundary(props: Omit<ErrorBoundaryProps, 'layer'>): JSX.Element {
  return <ErrorBoundary {...props} layer="panel" />;
}

export function ControlErrorBoundary(props: Omit<ErrorBoundaryProps, 'layer'>): JSX.Element {
  return <ErrorBoundary {...props} layer="control" />;
}

export function useErrorBoundaryRethrow(): (error: unknown) => void {
  const [, setError] = useState<Error | null>(null);

  return (error: unknown) => {
    setError(() => {
      throw normaliseError(error);
    });
  };
}

export function DefaultErrorFallback({
  error,
  errorInfo,
  eventId,
  layer,
  resetErrorBoundary,
}: ErrorBoundaryFallbackProps): JSX.Element {
  const [copyState, setCopyState] = useState<'idle' | 'copied' | 'failed'>('idle');
  const copy = ERROR_COPY[layer] ?? ERROR_COPY.app;
  const diagnostics = formatErrorDiagnostics(error, errorInfo, eventId, layer);

  const copyDiagnostics = async () => {
    if (typeof navigator === 'undefined' || !navigator.clipboard?.writeText) {
      setCopyState('failed');
      return;
    }

    try {
      await navigator.clipboard.writeText(diagnostics);
      setCopyState('copied');
    } catch {
      setCopyState('failed');
    }
  };

  const reload = () => {
    if (typeof window !== 'undefined') {
      window.location.reload();
    }
  };

  return (
    <section
      role="alert"
      aria-live="assertive"
      className="mx-auto flex min-h-[320px] w-full max-w-3xl flex-col justify-center rounded-2xl border border-red-400/30 bg-[#121721]/95 p-6 text-slate-100 shadow-2xl shadow-black/30"
    >
      <p className="text-xs font-semibold uppercase tracking-[0.3em] text-red-300">
        {copy.eyebrow}
      </p>
      <h2 className="mt-3 text-2xl font-semibold tracking-tight">{copy.title}</h2>
      <p className="mt-3 max-w-2xl text-sm leading-6 text-slate-300">{copy.message}</p>

      <div className="mt-5 rounded-xl border border-white/10 bg-black/20 p-4">
        <p className="font-mono text-xs text-slate-400">Event ID: {eventId}</p>
        <p className="mt-2 font-mono text-sm text-red-200">{error.message}</p>
      </div>

      <details className="mt-4 rounded-xl border border-white/10 bg-black/20 p-4">
        <summary className="cursor-pointer text-sm font-medium text-slate-200">
          Diagnostic details
        </summary>
        <pre className="mt-3 max-h-56 overflow-auto whitespace-pre-wrap text-xs leading-5 text-slate-400">
          {diagnostics}
        </pre>
      </details>

      <div className="mt-6 flex flex-wrap gap-3">
        <button
          type="button"
          onClick={resetErrorBoundary}
          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]"
        >
          Try again
        </button>
        <button
          type="button"
          onClick={reload}
          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]"
        >
          Reload app
        </button>
        <button
          type="button"
          onClick={() => void copyDiagnostics()}
          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]"
        >
          {copyState === 'copied'
            ? 'Diagnostics copied'
            : copyState === 'failed'
              ? 'Copy unavailable'
              : 'Copy diagnostics'}
        </button>
      </div>
    </section>
  );
}

export function formatErrorDiagnostics(
  error: Error,
  errorInfo: ErrorInfo | undefined,
  eventId: string,
  layer: ErrorBoundaryLayer,
): string {
  return [
    `Mechanica runtime error`,
    `Event ID: ${eventId}`,
    `Layer: ${layer}`,
    `Message: ${error.message}`,
    '',
    'Stack:',
    error.stack ?? '(no stack available)',
    '',
    'React component stack:',
    errorInfo?.componentStack ?? '(no component stack available)',
  ].join('\n');
}

function normaliseError(error: unknown): Error {
  if (error instanceof Error) {
    return error;
  }

  return new Error(typeof error === 'string' ? error : 'Unknown runtime error');
}

function createEventId(layer: ErrorBoundaryLayer): string {
  return `${layer}-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
}

const ERROR_COPY: Record<
  ErrorBoundaryLayer,
  { eyebrow: string; title: string; message: string }
> = {
  app: {
    eyebrow: 'Application fault',
    title: 'Mechanica hit an unexpected problem.',
    message:
      'The application shell failed safely instead of leaving a blank screen. Try again, reload, or copy diagnostics for maintainers.',
  },
  route: {
    eyebrow: 'Route fault',
    title: 'This page could not be rendered.',
    message:
      'Navigation and saved links are still available. Retry the route or reload if the issue persists.',
  },
  viewer: {
    eyebrow: 'Viewer fault',
    title: 'The 3D viewer stopped rendering safely.',
    message:
      'The catalogue and learning panels remain protected. Retry the viewer after reducing display quality or disabling extensions.',
  },
  panel: {
    eyebrow: 'Panel fault',
    title: 'This engineering panel could not be displayed.',
    message:
      'The rest of the machine explorer is still available. Retry the panel or reload the application.',
  },
  control: {
    eyebrow: 'Control fault',
    title: 'A control surface failed safely.',
    message:
      'Playback and view controls are isolated so one broken widget cannot take down the entire scene.',
  },
};