import * as React from "react";

import * as ErrorBoundaryModule from "../components/error-boundary/ErrorBoundary";
import * as LoadingFallbackModule from "../components/loading/LoadingFallback";
import * as PageMetaHookModule from "../hooks/usePageMeta";
import * as ReducedMotionModule from "../hooks/useReducedMotion";
import * as ShellModule from "../layouts/ProductionAppShell";
import {
  applyReducedMotionToDocument,
  readMotionPreference,
  resolveReducedMotion,
  subscribeMotionPreference,
} from "../utils/motionPreference";

export interface IntegratedPageMeta {
  title: string;
  description?: string;
  image?: string;
  url?: string;
  type?: "website" | "article";
  canonical?: string;
  noIndex?: boolean;
}

export interface IntegratedShellProps {
  children: React.ReactNode;
  activePath?: string;
  toolbarSlot?: React.ReactNode;
  onNavigate?: (href: string) => void;
  onGlobalSearchSubmit?: (query: string) => void;
}

export interface IntegratedLoadingFallbackProps {
  label?: string;
  detail?: string;
  className?: string;
}

export interface IntegratedErrorBoundaryProps {
  children: React.ReactNode;
  fallback?: React.ReactNode | ((error: Error, reset: () => void) => React.ReactNode);
  name?: string;
  resetKeys?: readonly unknown[];
}

function pickExport<TValue>(moduleValue: unknown, exportNames: readonly string[]): TValue | null {
  const record = moduleValue as Record<string, unknown>;

  for (const exportName of exportNames) {
    const candidate = record[exportName];

    if (candidate) {
      return candidate as TValue;
    }
  }

  return null;
}

function arraysShallowEqual(left: readonly unknown[] = [], right: readonly unknown[] = []): boolean {
  return left.length === right.length && left.every((value, index) => Object.is(value, right[index]));
}

class LocalErrorBoundary extends React.Component<
  IntegratedErrorBoundaryProps,
  { error: Error | null }
> {
  public state = { error: null };

  public static getDerivedStateFromError(error: Error): { error: Error } {
    return { error };
  }

  public componentDidCatch(error: Error, info: React.ErrorInfo): void {
    if (import.meta.env.DEV) {
      console.error(`[Mechanica] ${this.props.name ?? "view"} crashed`, error, info);
    }
  }

  public componentDidUpdate(previousProps: IntegratedErrorBoundaryProps): void {
    if (
      this.state.error &&
      !arraysShallowEqual(previousProps.resetKeys, this.props.resetKeys)
    ) {
      this.reset();
    }
  }

  private reset = (): void => {
    this.setState({ error: null });
  };

  public render(): React.ReactNode {
    if (!this.state.error) {
      return this.props.children;
    }

    if (typeof this.props.fallback === "function") {
      return this.props.fallback(this.state.error, this.reset);
    }

    if (this.props.fallback) {
      return this.props.fallback;
    }

    return (
      <section
        className="glass-panel mx-auto my-8 max-w-2xl rounded-3xl p-6 text-center"
        role="alert"
        aria-live="assertive"
      >
        <p className="text-xs font-semibold uppercase tracking-[0.28em] text-[var(--color-danger)]">
          Rendering interrupted
        </p>
        <h2 className="mt-3 text-2xl font-semibold text-white">This Mechanica view crashed.</h2>
        <p className="mt-3 text-sm leading-6 text-[var(--color-text-muted)]">
          The scene boundary contained the failure so you can keep browsing. Try resetting this
          view, opening another machine, or reloading the page.
        </p>
        <button className="control-button mt-5 px-4 py-2" type="button" onClick={this.reset}>
          Reset failed view
        </button>
      </section>
    );
  }
}

const ExternalErrorBoundary = pickExport<React.ComponentType<Record<string, unknown>>>(
  ErrorBoundaryModule,
  ["ErrorBoundary", "default"],
);

export function IntegratedErrorBoundary(props: IntegratedErrorBoundaryProps): JSX.Element {
  if (ExternalErrorBoundary) {
    return <ExternalErrorBoundary {...(props as unknown as Record<string, unknown>)} />;
  }

  return <LocalErrorBoundary {...props} />;
}

const ExternalLoadingFallback = pickExport<React.ComponentType<Record<string, unknown>>>(
  LoadingFallbackModule,
  ["LoadingFallback", "default"],
);

export function IntegratedLoadingFallback({
  label = "Loading Mechanica",
  detail = "Preparing production assets, controls, and scene state…",
  className = "",
}: IntegratedLoadingFallbackProps): JSX.Element {
  if (ExternalLoadingFallback) {
    return (
      <ExternalLoadingFallback
        {...({
          label,
          detail,
          className,
        } satisfies Record<string, unknown>)}
      />
    );
  }

  return (
    <div
      className={`glass-panel flex min-h-[18rem] items-center justify-center rounded-3xl p-6 ${className}`}
      role="status"
      aria-live="polite"
    >
      <div className="w-full max-w-sm">
        <div className="mx-auto h-12 w-12 rounded-full border border-[var(--color-border)] border-t-[var(--color-accent)]" />
        <p className="mt-5 text-center text-sm font-semibold text-white">{label}</p>
        <p className="mt-2 text-center text-xs leading-5 text-[var(--color-text-muted)]">
          {detail}
        </p>
        <div className="mt-5 h-2 overflow-hidden rounded-full bg-white/5">
          <div className="skeleton-shimmer h-full w-full rounded-full" />
        </div>
      </div>
    </div>
  );
}

function setNamedMeta(name: string, content: string): void {
  let element = document.querySelector<HTMLMetaElement>(`meta[name="${name}"]`);

  if (!element) {
    element = document.createElement("meta");
    element.name = name;
    document.head.appendChild(element);
  }

  element.content = content;
}

function setPropertyMeta(property: string, content: string): void {
  let element = document.querySelector<HTMLMetaElement>(`meta[property="${property}"]`);

  if (!element) {
    element = document.createElement("meta");
    element.setAttribute("property", property);
    document.head.appendChild(element);
  }

  element.content = content;
}

function setCanonical(url: string | undefined): void {
  let link = document.querySelector<HTMLLinkElement>('link[rel="canonical"]');

  if (!url) {
    link?.remove();
    return;
  }

  if (!link) {
    link = document.createElement("link");
    link.rel = "canonical";
    document.head.appendChild(link);
  }

  link.href = url;
}

function applyFallbackPageMeta(meta: IntegratedPageMeta): void {
  if (typeof document === "undefined") {
    return;
  }

  const description =
    meta.description ??
    "Explore mechanical systems through interactive 3D visualizations, procedural animations, and engineering annotations.";
  const image = meta.image ?? "/social/mechanica-og.svg";
  const pageUrl =
    meta.url ?? (typeof window !== "undefined" ? window.location.href : "https://mechanica.local");

  document.title = meta.title;
  setNamedMeta("description", description);
  setPropertyMeta("og:title", meta.title);
  setPropertyMeta("og:description", description);
  setPropertyMeta("og:type", meta.type ?? "website");
  setPropertyMeta("og:image", image);
  setPropertyMeta("og:url", pageUrl);
  setNamedMeta("twitter:card", "summary_large_image");
  setNamedMeta("twitter:title", meta.title);
  setNamedMeta("twitter:description", description);
  setNamedMeta("twitter:image", image);
  setNamedMeta("robots", meta.noIndex ? "noindex,nofollow" : "index,follow");
  setCanonical(meta.canonical ?? pageUrl);
}

const externalUsePageMeta = pickExport<(meta: IntegratedPageMeta) => void>(PageMetaHookModule, [
  "usePageMeta",
  "default",
]);

export function useIntegratedPageMeta(meta: IntegratedPageMeta): void {
  if (externalUsePageMeta) {
    externalUsePageMeta(meta);
    return;
  }

  React.useEffect(() => {
    applyFallbackPageMeta(meta);
  }, [
    meta.title,
    meta.description,
    meta.image,
    meta.url,
    meta.type,
    meta.canonical,
    meta.noIndex,
  ]);
}

const ExternalShell = pickExport<React.ComponentType<Record<string, unknown>>>(ShellModule, [
  "ProductionAppShell",
  "default",
]);

function LocalShell({
  children,
  activePath,
  toolbarSlot,
  onNavigate,
  onGlobalSearchSubmit,
}: IntegratedShellProps): JSX.Element {
  const [query, setQuery] = React.useState("");

  const submitSearch = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    onGlobalSearchSubmit?.(query);
  };

  const go = (href: string) => (event: React.MouseEvent<HTMLAnchorElement>) => {
    if (!onNavigate) {
      return;
    }

    event.preventDefault();
    onNavigate(href);
  };

  return (
    <div className="min-h-screen bg-[var(--color-bg)] text-[var(--color-text)]">
      <a
        className="sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-50 focus:rounded-xl focus:bg-[var(--color-accent)] focus:px-4 focus:py-2 focus:text-sm focus:font-semibold focus:text-white"
        href="#main-content"
      >
        Skip to content
      </a>
      <header className="sticky top-0 z-40 border-b border-[var(--color-border)] bg-[rgba(11,14,20,0.78)] backdrop-blur-xl">
        <div className="mx-auto flex max-w-[1800px] flex-col gap-3 px-4 py-3 lg:flex-row lg:items-center">
          <a
            className="flex items-center gap-3"
            href="/"
            aria-label="Mechanica catalogue"
            onClick={go("/")}
          >
            <span className="grid h-10 w-10 place-items-center rounded-2xl border border-[rgba(76,141,255,0.44)] bg-[rgba(76,141,255,0.14)] text-lg font-black text-[var(--color-accent)] shadow-[var(--shadow-glow)]">
              M
            </span>
            <span>
              <span className="block text-sm font-semibold uppercase tracking-[0.24em] text-white">
                Mechanica
              </span>
              <span className="block text-xs text-[var(--color-text-muted)]">
                Mechanical Systems Explorer
              </span>
            </span>
          </a>

          <nav className="flex flex-wrap items-center gap-2 text-sm lg:ml-6" aria-label="Primary">
            <a
              className="control-button px-3 py-2"
              data-active={activePath === "catalogue" ? "true" : undefined}
              href="/catalogue"
              onClick={go("/catalogue")}
            >
              Catalogue
            </a>
            <a
              className="control-button px-3 py-2"
              data-active={activePath === "machine" ? "true" : undefined}
              href="/machine/four-stroke-petrol-engine"
              onClick={go("/machine/four-stroke-petrol-engine")}
            >
              Viewer
            </a>
          </nav>

          <form className="min-w-0 flex-1 lg:ml-auto lg:max-w-md" role="search" onSubmit={submitSearch}>
            <label className="sr-only" htmlFor="global-machine-search">
              Search machines
            </label>
            <input
              id="global-machine-search"
              className="input-field w-full px-4 py-2 text-sm"
              value={query}
              placeholder="Search systems, parts, applications…"
              type="search"
              onChange={(event) => setQuery(event.currentTarget.value)}
            />
          </form>

          <div className="flex items-center gap-2">{toolbarSlot}</div>
        </div>
      </header>
      <main id="main-content">{children}</main>
    </div>
  );
}

export function IntegratedProductionAppShell(props: IntegratedShellProps): JSX.Element {
  if (ExternalShell) {
    return <ExternalShell {...(props as unknown as Record<string, unknown>)} />;
  }

  return <LocalShell {...props} />;
}

const ExternalReducedMotionProvider = pickExport<React.ComponentType<Record<string, unknown>>>(
  ReducedMotionModule,
  ["ReducedMotionProvider", "MotionPreferenceProvider", "default"],
);

const externalUseReducedMotion = pickExport<() => unknown>(ReducedMotionModule, [
  "useReducedMotion",
  "usePrefersReducedMotion",
]);

function normalizeReducedMotionHookValue(value: unknown): boolean {
  if (typeof value === "boolean") {
    return value;
  }

  if (value && typeof value === "object" && "reducedMotion" in value) {
    return Boolean((value as { reducedMotion: unknown }).reducedMotion);
  }

  if (value && typeof value === "object" && "prefersReducedMotion" in value) {
    return Boolean((value as { prefersReducedMotion: unknown }).prefersReducedMotion);
  }

  return false;
}

function useLocalReducedMotion(): boolean {
  const subscribe = React.useCallback((listener: () => void) => subscribeMotionPreference(listener), []);
  const getSnapshot = React.useCallback(() => resolveReducedMotion(readMotionPreference()), []);

  const reducedMotion = React.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);

  React.useEffect(() => {
    applyReducedMotionToDocument(reducedMotion);
  }, [reducedMotion]);

  return reducedMotion;
}

export function useIntegratedReducedMotion(): boolean {
  const localReducedMotion = useLocalReducedMotion();
  const externalReducedMotion = externalUseReducedMotion
    ? normalizeReducedMotionHookValue(externalUseReducedMotion())
    : false;

  return localReducedMotion || externalReducedMotion;
}

export function IntegratedReducedMotionProvider({
  children,
}: {
  children: React.ReactNode;
}): JSX.Element {
  if (ExternalReducedMotionProvider) {
    return (
      <ExternalReducedMotionProvider {...({ children } satisfies Record<string, unknown>)} />
    );
  }

  return <>{children}</>;
}