import * as React from "react";

import { WebGLSupportBoundary } from "../components/fallbacks/WebGLSupportBoundary";
import { KeyboardShortcutsHelp } from "../components/keyboard/KeyboardShortcutsHelp";
import { ProceduralMachineScene } from "../components/viewer/ProceduralMachineScene";
import {
  PartDetailDrawer,
  ViewerControlPanel,
  ViewerSidebar,
  ViewerStatusBar,
  ViewerToolbar,
} from "../components/viewer/ViewerPanels";
import { useKeyboardShortcuts, type KeyboardShortcut } from "../hooks/useKeyboardShortcuts";
import {
  defaultMachineId,
  getMachineById,
  type MachineDefinition,
} from "../modules/machines/catalogue";
import {
  IntegratedErrorBoundary,
  IntegratedLoadingFallback,
  useIntegratedPageMeta,
  useIntegratedReducedMotion,
} from "../production/integrationAdapters";
import {
  buildViewerShareState,
  cameraPresetOrder,
  useViewerStore,
} from "../store/productionViewerStore";
import {
  buildMachineShareUrl,
  decodeProductionShareState,
  replaceUrlWithShareState,
} from "../utils/productionShareState";

export interface MachineViewerPageProps {
  machineId?: string;
  search?: string;
  onBackToCatalogue?: () => void;
}

function getResolvedMachine(machineId: string | undefined): MachineDefinition {
  return getMachineById(machineId) ?? getMachineById(defaultMachineId)!;
}

async function copyText(text: string): Promise<void> {
  if (navigator.clipboard?.writeText) {
    await navigator.clipboard.writeText(text);
    return;
  }

  const textarea = document.createElement("textarea");
  textarea.value = text;
  textarea.setAttribute("readonly", "true");
  textarea.style.position = "fixed";
  textarea.style.left = "-9999px";
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand("copy");
  document.body.removeChild(textarea);
}

function ViewerHeader({
  machine,
  onBackToCatalogue,
}: {
  machine: MachineDefinition;
  onBackToCatalogue?: () => void;
}): JSX.Element {
  return (
    <header className="glass-panel rounded-3xl p-4 lg:hidden">
      <div className="flex items-start justify-between gap-3">
        <div>
          <p className="text-xs font-semibold uppercase tracking-[0.28em] text-[var(--color-accent)]">
            {machine.category}
          </p>
          <h1 className="mt-2 text-2xl font-semibold text-white">{machine.title}</h1>
          <p className="mt-2 text-sm leading-6 text-[var(--color-text-muted)]">
            {machine.description}
          </p>
        </div>
        {onBackToCatalogue ? (
          <button className="control-button shrink-0 px-3 py-2 text-sm" type="button" onClick={onBackToCatalogue}>
            Catalogue
          </button>
        ) : null}
      </div>
    </header>
  );
}

function DesktopMachineSummary({ machine }: { machine: MachineDefinition }): JSX.Element {
  return (
    <div className="pointer-events-none absolute bottom-4 left-4 z-10 hidden max-w-xl lg:block">
      <section className="glass-panel rounded-3xl p-5">
        <p className="text-xs font-semibold uppercase tracking-[0.28em] text-[var(--color-accent)]">
          {machine.category} · {machine.difficulty}
        </p>
        <h1 className="mt-2 text-2xl font-semibold text-white">{machine.title}</h1>
        <p className="mt-2 text-sm leading-6 text-[var(--color-text-muted)]">
          {machine.description}
        </p>
        <dl className="mt-4 grid grid-cols-2 gap-2">
          {machine.facts.slice(0, 4).map((fact) => (
            <div key={fact.label} className="rounded-2xl border border-[var(--color-border)] bg-black/15 p-3">
              <dt className="text-[0.65rem] uppercase tracking-[0.2em] text-[var(--color-text-subtle)]">
                {fact.label}
              </dt>
              <dd className="mt-1 text-xs font-semibold text-white">{fact.value}</dd>
            </div>
          ))}
        </dl>
      </section>
    </div>
  );
}

function useViewerUrlSync(machine: MachineDefinition, search: string | undefined): void {
  const partKey = React.useMemo(() => machine.parts.map((part) => part.id).join("|"), [machine.parts]);

  React.useEffect(() => {
    const sharedState = decodeProductionShareState(search);
    useViewerStore
      .getState()
      .initializeMachine(machine.id, machine.parts.map((part) => part.id), {
        ...sharedState,
        machineId: machine.id,
      });
  }, [machine.id, machine.parts, partKey, search]);

  React.useEffect(() => {
    if (typeof window === "undefined") {
      return undefined;
    }

    let timeoutId: number | undefined;

    const unsubscribe = useViewerStore.subscribe((state) => {
      if (!state.initialized || state.machineId !== machine.id) {
        return;
      }

      if (timeoutId) {
        window.clearTimeout(timeoutId);
      }

      timeoutId = window.setTimeout(() => {
        replaceUrlWithShareState(buildViewerShareState(useViewerStore.getState()));
      }, 220);
    });

    return () => {
      if (timeoutId) {
        window.clearTimeout(timeoutId);
      }
      unsubscribe();
    };
  }, [machine.id]);
}

export default function MachineViewerPage({
  machineId,
  search,
  onBackToCatalogue,
}: MachineViewerPageProps): JSX.Element {
  const machine = React.useMemo(() => getResolvedMachine(machineId), [machineId]);
  const [shortcutsOpen, setShortcutsOpen] = React.useState(false);
  const [copyNotice, setCopyNotice] = React.useState<string | null>(null);
  const reducedMotion = useIntegratedReducedMotion();

  useIntegratedPageMeta({
    title: `${machine.title} | Mechanica 3D Viewer`,
    description: machine.description,
    image: "/social/mechanica-og.svg",
    type: "article",
  });

  useViewerUrlSync(machine, search);

  React.useEffect(() => {
    if (reducedMotion) {
      useViewerStore.getState().setPlaying(false);
    }
  }, [machine.id, reducedMotion]);

  const copyCurrentLink = React.useCallback(async () => {
    const url = buildMachineShareUrl(buildViewerShareState(useViewerStore.getState()));
    await copyText(url);
    setCopyNotice("Share link copied");
    window.setTimeout(() => setCopyNotice(null), 1600);
  }, []);

  const shortcuts = React.useMemo<KeyboardShortcut[]>(() => {
    const presetShortcuts = cameraPresetOrder.map((preset, index): KeyboardShortcut => ({
      key: String(index + 1),
      label: String(index + 1),
      group: "Camera",
      description: `Switch to ${preset} camera`,
      handler: () => useViewerStore.getState().setCameraPreset(preset),
    }));

    return [
      {
        key: " ",
        label: "Space",
        group: "Playback",
        description: "Play / pause animation",
        handler: () => useViewerStore.getState().togglePlayback(),
      },
      {
        key: "r",
        label: "R",
        group: "Viewer",
        description: "Reset camera, display, and playback",
        handler: () => useViewerStore.getState().resetView(machine.parts.map((part) => part.id)),
      },
      {
        key: "e",
        label: "E",
        group: "Display",
        description: "Toggle exploded view",
        handler: () => useViewerStore.getState().toggleExploded(),
      },
      {
        key: "w",
        label: "W",
        group: "Display",
        description: "Toggle wireframe",
        handler: () => useViewerStore.getState().toggleWireframe(),
      },
      {
        key: "l",
        label: "L",
        group: "Display",
        description: "Toggle annotation labels",
        handler: () => useViewerStore.getState().toggleAnnotations(),
      },
      {
        key: "c",
        label: "C",
        group: "Sharing",
        description: "Copy current view link",
        handler: () => {
          void copyCurrentLink();
        },
      },
      {
        key: "?",
        label: "?",
        group: "Help",
        description: "Open keyboard shortcut reference",
        handler: () => setShortcutsOpen(true),
      },
      {
        key: "Escape",
        label: "Esc",
        group: "Selection",
        description: "Clear selected component",
        handler: () => useViewerStore.getState().selectPart(null),
      },
      ...presetShortcuts,
    ];
  }, [copyCurrentLink, machine.parts]);

  useKeyboardShortcuts(shortcuts);

  return (
    <div className="mx-auto flex min-h-[calc(100vh-4.5rem)] max-w-[1800px] flex-col gap-3 p-3 lg:grid lg:grid-cols-[minmax(17rem,20rem)_minmax(0,1fr)_minmax(18rem,22rem)] lg:grid-rows-[minmax(0,1fr)_auto] lg:p-4">
      <ViewerHeader machine={machine} onBackToCatalogue={onBackToCatalogue} />

      <div className="order-2 min-h-[32rem] lg:order-1 lg:row-span-2">
        <ViewerSidebar machine={machine} />
      </div>

      <section className="order-1 relative min-h-[62vh] overflow-hidden rounded-3xl border border-[var(--color-border)] bg-black/20 lg:order-2 lg:min-h-0">
        {/* Absolute fill so the R3F canvas gets a definite-height containing block
            in BOTH layouts. On desktop the section is a grid cell (definite height);
            on mobile it is a flex item with only min-height (indefinite), where the
            canvas height:100% would otherwise collapse and the model would render
            top-aligned instead of centred. */}
        <div className="absolute inset-0">
        <WebGLSupportBoundary>
          <IntegratedErrorBoundary
            name={`viewer:${machine.id}`}
            resetKeys={[machine.id]}
            fallback={
              <div className="grid min-h-[62vh] place-items-center p-5">
                <section className="glass-panel max-w-lg rounded-3xl p-6 text-center" role="alert">
                  <p className="text-xs font-semibold uppercase tracking-[0.28em] text-[var(--color-danger)]">
                    Scene error
                  </p>
                  <h2 className="mt-3 text-2xl font-semibold text-white">The 3D scene failed.</h2>
                  <p className="mt-3 text-sm leading-6 text-[var(--color-text-muted)]">
                    Try resetting the view or opening another machine from the catalogue.
                  </p>
                </section>
              </div>
            }
          >
            <React.Suspense
              fallback={
                <IntegratedLoadingFallback
                  label="Loading 3D viewer"
                  detail="Preparing WebGL scene, materials, controls, and machine animation state…"
                  className="min-h-[62vh]"
                />
              }
            >
              <ProceduralMachineScene machine={machine} />
            </React.Suspense>
          </IntegratedErrorBoundary>
        </WebGLSupportBoundary>
        </div>

        <ViewerToolbar machine={machine} onOpenShortcuts={() => setShortcutsOpen(true)} />
        <DesktopMachineSummary machine={machine} />

        {copyNotice ? (
          <div className="pointer-events-none absolute left-1/2 top-20 z-20 -translate-x-1/2 rounded-full border border-[rgba(76,141,255,0.46)] bg-[rgba(76,141,255,0.18)] px-4 py-2 text-sm font-semibold text-white backdrop-blur">
            {copyNotice}
          </div>
        ) : null}
      </section>

      <div className="order-3 min-h-[32rem] lg:row-span-2">
        <ViewerControlPanel machine={machine} />
      </div>

      <div className="order-4 lg:col-start-2">
        <ViewerStatusBar machine={machine} />
      </div>

      <PartDetailDrawer machine={machine} />
      <KeyboardShortcutsHelp
        open={shortcutsOpen}
        shortcuts={shortcuts}
        onOpenChange={setShortcutsOpen}
      />
    </div>
  );
}