import React, { useCallback, useEffect, useRef, useState } from "react";
import { createRoot } from "react-dom/client";
import "./react.css";

type Status = "pending" | "approved";
type NavigationLevel = "card" | "task" | "block" | "phase" | "step" | "snapshot";
type NavigationPosition = {
  task_index: number;
  block_index: number;
  phase_index: number;
  step_index: number;
  global_step_index: number;
  snapshot_index: number | null;
  global_snapshot_index: number | null;
};
type ApiNavigation = {
  revision: number;
  actor?: string;
  focus_level: NavigationLevel;
  task: { id: string; label: string; index: number };
  block: { id: string; label: string; index: number };
  phase: { id: string; label: string; index: number };
  step: { id: string; label: string; number: number; index: number; global_index: number };
  snapshot_ref: string | null;
  position: NavigationPosition;
  sync_requested: boolean;
};
type ApiViewerState = {
  revision: number;
  actor?: string | null;
  scale: number;
  scroll: {
    x: number;
    y: number;
    page_index: number;
    sheet_scroll_top?: number;
  };
  viewport: { width: number; height: number };
  allocator?: { visible: boolean };
  nvim: {
    visible: boolean;
    sync: boolean;
    control: boolean;
    expanded: boolean;
    fit: boolean;
    connection: string;
    screen_cursor: { row: number; column: number } | null;
    grid: { columns: number; rows: number } | null;
  };
};
type InteractiveArea = "compile" | "bss" | "stack" | "registers" | "text";
type InteractiveSymbol = {
  id: string;
  area: InteractiveArea;
  declaration: string;
  description: string;
};
type UmlStage = {
  id: string;
  label: string;
  description: string;
  code_ref?: string;
  progress_id?: string;
  svg_label?: string;
};
type UmlSnapshotRegister = { name: string; value: string; note?: string };
type UmlSnapshotFrameField = {
  name: string;
  address: string;
  value: string;
  size_bytes?: number;
  state: "initialised" | "uninitialised" | "saved";
  note?: string;
};
type NvimAnnotation = {
  id: string;
  anchor_ref?: string;
  label?: string;
  tone?: "danger" | "info" | "success" | "warning";
  shape?: "outline" | "underline";
  anchor: {
    kind: "screen-text" | "grid-range";
    text?: string;
    occurrence?: number;
    row?: number;
    column?: number;
    rows?: number;
    columns?: number;
    padding_cells?: number;
  };
};
type NvimStepView = {
  connection_ref?: string;
  layout?: string;
  recorded_grid_ref?: string;
  reveal?: {
    anchor_ref?: string;
    align?: "top" | "center" | "bottom";
  };
  annotations?: NvimAnnotation[];
};
type UmlSnapshot = {
  target?: string;
  captured_at?: string;
  captured_with?: string;
  elf?: string;
  pc: string;
  registers: UmlSnapshotRegister[];
  frame: {
    name: string;
    sp: string;
    fp: string;
    stack_top?: string;
    size_bytes: number;
    fields: UmlSnapshotFrameField[];
  };
  memory: {
    items: { name: string; address: string; value: string; note?: string }[];
    arena?: {
      base: string;
      size_bytes: number;
      cursor: string;
      offset: number | null;
      bytes: string;
    };
  };
  code?: {
    source: string;
    source_ref?: string;
    assembly: string;
    note?: string;
  };
  description: string;
};
type UmlSequenceStep = {
  id: string;
  number: number;
  label: string;
  description: string;
  code_ref?: string;
  progress_id?: string;
  svg_label?: string;
  snapshot_ref?: string;
  view?: NvimStepView;
  snapshot: UmlSnapshot;
};
type UmlSequencePhase = {
  id: string;
  label: string;
  description?: string;
  svg_label?: string;
  steps: UmlSequenceStep[];
};
type InteractiveAsset = {
  kind: "allocator-memory-flow" | "uml-sequence";
  storage_key?: string;
  title?: string;
  task?: { id: string; label: string };
  block?: { id: string; label: string; description?: string };
  snapshot_context?: {
    target: string;
    captured_at: string;
    captured_with?: string;
    elf?: string;
    stack_top?: string;
  };
  terminal_view?: {
    path?: string;
    href?: string;
    title?: string;
    alt: string;
    caption?: string;
  };
  arena_size?: number;
  allocations?: number[];
  symbols?: InteractiveSymbol[];
  stages?: UmlStage[];
  phases?: UmlSequencePhase[];
};
type Asset = {
  label: string;
  caption: string;
  alt: string;
  href: string;
  width: number;
  kind: string;
  source_href?: string;
  interactive?: InteractiveAsset | null;
};
type FlowStep = { id: string; title: string; content_html: string };
type FlowBlock = {
  id: string;
  kind: "block" | "exercise";
  title: string;
  content_html: string;
  steps: FlowStep[];
};
type Task = {
  ref: string;
  title: string;
  uuid?: string;
  criterion: string;
  conclusion_html: string;
  prompt_html?: string;
  flow: FlowBlock[];
};
type Section = {
  id: string;
  index: number;
  title: string;
  show_heading: boolean;
  header_html: string;
  left_margin_html: string;
  right_margin_html: string;
  content_html: string;
  tasks: Task[];
  assets: Asset[];
  steps: { id: string; title: string }[];
};
type Progress = {
  items: Record<string, { status: Status }>;
  summary: { total: number; counts: Record<Status, number> };
};
type SetProgressStatus = (id: string, status: Status) => Promise<void>;
type CardModel = {
  schema: string;
  card: Record<string, string>;
  total_pages: number;
  front: any;
  sections: Section[];
  dictionary: { header_html: string; content_html: string } | null;
  toc: { id: string; label: string }[];
};
type NvimPanelSummary = {
  state:
    | "hidden"
    | "connecting"
    | "connected"
    | "replaying"
    | "verifying"
    | "ready"
    | "failed"
    | "offline"
    | "unselected";
  message?: string;
  instance?: string;
  detail?: string;
  syncMode: boolean;
  syncReady: boolean;
  controlMode: boolean;
  controlEnabled: boolean;
  screenCursor?: { row: number; column: number };
  grid?: { columns: number; rows: number };
};

const nvimStatusLabel: Record<NvimPanelSummary["state"], string> = {
  hidden: "UKRYTY",
  connecting: "ŁĄCZENIE",
  connected: "ONLINE · LIVE",
  replaying: "ONLINE · REPLAY",
  verifying: "ONLINE · WERYFIKACJA",
  ready: "ONLINE · GOTOWY",
  failed: "ONLINE · BŁĄD STANU",
  offline: "OFFLINE · ZAPIS",
  unselected: "OFFLINE · BRAK CELU",
};

const UML_SCROLLOFF_RATIO = 0.25;
const UML_SCROLLOFF_EPSILON_PX = 1;
const UML_SCROLLOFF_MAX_PASSES = 4;

type VerticalViewport = { top: number; bottom: number };

function clipsVertically(element: HTMLElement) {
  const overflow = window.getComputedStyle(element).overflowY;
  return overflow === "auto" || overflow === "scroll" || overflow === "hidden"
    || overflow === "clip";
}

function elementClientViewport(element: HTMLElement): VerticalViewport {
  const bounds = element.getBoundingClientRect();
  const layoutHeight = element.offsetHeight || element.clientHeight;
  const scale = layoutHeight > 0 ? bounds.height / layoutHeight : 1;
  const top = bounds.top + element.clientTop * scale;
  return {
    top,
    bottom: top + element.clientHeight * scale,
  };
}

function chromeAwareWindowViewport(target: Element): VerticalViewport | null {
  const chrome = document.querySelector<HTMLElement>(".viewer-chrome");
  if (chrome?.classList.contains("is-nvim-fit")) return null;

  let top = 0;
  let bottom = window.innerHeight;
  if (chrome) {
    const chromeBounds = chrome.getBoundingClientRect();
    const targetBounds = target.getBoundingClientRect();
    const overlapsHorizontally = chromeBounds.left < targetBounds.right
      && chromeBounds.right > targetBounds.left;
    if (
      overlapsHorizontally
      && chromeBounds.bottom > 0
      && chromeBounds.top < window.innerHeight
    ) {
      top = Math.max(top, chromeBounds.bottom);
    }
  }
  return bottom - top > UML_SCROLLOFF_EPSILON_PX ? { top, bottom } : null;
}

function visibleVerticalViewport(target: Element): VerticalViewport | null {
  const windowViewport = chromeAwareWindowViewport(target);
  if (!windowViewport) return null;

  let { top, bottom } = windowViewport;
  for (
    let ancestor = target.parentElement;
    ancestor && ancestor !== document.body && ancestor !== document.documentElement;
    ancestor = ancestor.parentElement
  ) {
    if (!clipsVertically(ancestor)) continue;
    const client = elementClientViewport(ancestor);
    top = Math.max(top, client.top);
    bottom = Math.min(bottom, client.bottom);
  }
  return bottom - top > UML_SCROLLOFF_EPSILON_PX ? { top, bottom } : null;
}

function documentScroller() {
  return (document.scrollingElement as HTMLElement | null)
    ?? document.documentElement;
}

function verticalScrollChain(target: Element) {
  const chain: HTMLElement[] = [];
  for (
    let ancestor = target.parentElement;
    ancestor && ancestor !== document.body && ancestor !== document.documentElement;
    ancestor = ancestor.parentElement
  ) {
    const overflow = window.getComputedStyle(ancestor).overflowY;
    const acceptsScroll = overflow === "auto" || overflow === "scroll";
    if (acceptsScroll && ancestor.scrollHeight - ancestor.clientHeight > 1) {
      chain.push(ancestor);
    }
  }
  const root = documentScroller();
  if (!chain.includes(root)) chain.push(root);
  return chain;
}

function visualScrollScale(scroller: HTMLElement) {
  if (scroller === documentScroller()) return 1;
  const bounds = scroller.getBoundingClientRect();
  const layoutHeight = scroller.offsetHeight || scroller.clientHeight;
  const scale = layoutHeight > 0 ? bounds.height / layoutHeight : 1;
  return Number.isFinite(scale) && scale > 0 ? scale : 1;
}

function setScrollPositionInstant(
  scroller: HTMLElement,
  position: { top?: number; left?: number },
) {
  const previousBehavior = scroller.style.scrollBehavior;
  scroller.style.scrollBehavior = "auto";
  if (position.left != null) scroller.scrollLeft = position.left;
  if (position.top != null) scroller.scrollTop = position.top;
  scroller.style.scrollBehavior = previousBehavior;
}

function bringTargetSheetIntoWindow(target: Element, viewport: VerticalViewport) {
  const anchor = target.closest<HTMLElement>(".sheet-content");
  if (!anchor) return 0;
  const bounds = elementClientViewport(anchor);
  let delta = 0;
  if (bounds.bottom <= viewport.top) {
    delta = bounds.bottom - viewport.bottom;
  } else if (bounds.top >= viewport.bottom) {
    delta = bounds.top - viewport.top;
  }
  if (Math.abs(delta) <= UML_SCROLLOFF_EPSILON_PX) return 0;

  const root = documentScroller();
  const previous = root.scrollTop;
  const maximum = Math.max(0, root.scrollHeight - root.clientHeight);
  setScrollPositionInstant(root, {
    top: Math.max(0, Math.min(maximum, previous + delta)),
  });
  return root.scrollTop - previous;
}

function applyVerticalScrollDelta(target: Element, delta: number) {
  let remaining = delta;
  for (const scroller of verticalScrollChain(target)) {
    if (Math.abs(remaining) <= UML_SCROLLOFF_EPSILON_PX) break;
    const scale = visualScrollScale(scroller);
    const maximum = Math.max(0, scroller.scrollHeight - scroller.clientHeight);
    const previous = scroller.scrollTop;
    const next = Math.max(0, Math.min(maximum, previous + remaining / scale));
    setScrollPositionInstant(scroller, { top: next });
    remaining -= (scroller.scrollTop - previous) * scale;
  }
  return delta - remaining;
}

function umlScrolloffDelta(target: Element, viewport: VerticalViewport) {
  const bounds = target.getBoundingClientRect();
  const cursor = (bounds.top + bounds.bottom) / 2;
  const height = viewport.bottom - viewport.top;
  const upper = viewport.top + height * UML_SCROLLOFF_RATIO;
  const lower = viewport.bottom - height * UML_SCROLLOFF_RATIO;
  if (cursor < upper) return cursor - upper;
  if (cursor > lower) return cursor - lower;
  return 0;
}

const Html = ({ html, className }: { html: string; className?: string }) => (
  <div className={className} dangerouslySetInnerHTML={{ __html: html }} />
);

function Header({ html }: { html: string }) {
  return <Html html={html} />;
}

function Margin({ side, html }: { side: "left" | "right"; html: string }) {
  return (
    <aside
      className={`pdf-margin ${side}`}
      dangerouslySetInnerHTML={{ __html: html }}
    />
  );
}

function Sheet({
  header,
  left = "",
  right = "",
  children,
  className = "",
}: React.PropsWithChildren<any>) {
  return (
    <article className={`sheet ${className}`}>
      <div className="sheet-content">
        <Header html={header} />
        <Margin side="left" html={left} />
        <section className="pdf-main card-section">{children}</section>
        <Margin side="right" html={right} />
      </div>
    </article>
  );
}

function Topbar({
  toc,
  scale,
  setScale,
  nvimVisible,
  setNvimVisible,
  nvimSyncMode,
  setNvimSyncMode,
  nvimControlMode,
  setNvimControlMode,
  nvimExpanded,
  setNvimExpanded,
  nvimFit,
  setNvimFit,
  allocatorVisible,
  setAllocatorVisible,
  nvimSummary,
}: {
  toc: CardModel["toc"];
  scale: number;
  setScale: (value: number) => void;
  nvimVisible: boolean;
  setNvimVisible: (value: boolean) => void;
  nvimSyncMode: boolean;
  setNvimSyncMode: (value: boolean) => void;
  nvimControlMode: boolean;
  setNvimControlMode: (value: boolean) => void;
  nvimExpanded: boolean;
  setNvimExpanded: (value: boolean) => void;
  nvimFit: boolean;
  setNvimFit: (value: boolean) => void;
  allocatorVisible: boolean;
  setAllocatorVisible: (value: boolean) => void;
  nvimSummary: NvimPanelSummary;
}) {
  return (
    <nav className="topbar">
      <div className="topbar-inner">
        <details>
          <summary>Spis treści</summary>
          <div className="toc-links">
            {toc.map((item) => (
              <a key={item.id} href={`#${item.id}`}>
                {item.label}
              </a>
            ))}
          </div>
        </details>
        <div className="topbar-nvim-section" aria-label="Panel Neovima">
          <span className="nvim-toolbar-boundary" aria-hidden="true">|</span>
          <span className="nvim-toolbar-context">NVIM</span>
          <div className="nvim-toolbar-actions" aria-label="Narzędzia okna Neovima">
            <button
              className="viewer-nvim-toggle nvim-toolbar-button"
              aria-label={nvimVisible ? "Alt+1: ukryj Neovim" : "Alt+1: pokaż Neovim"}
              title={nvimVisible ? "Alt+1 · Ukryj Neovim" : "Alt+1 · Pokaż Neovim"}
              aria-pressed={nvimVisible}
              onClick={() => setNvimVisible(!nvimVisible)}
            >
              <kbd className="nvim-toolbar-key">A1</kbd><span className="nvim-toolbar-label">PANEL</span>
            </button>
            <button
              type="button"
              className={`nvim-control-indicator nvim-toolbar-button${nvimSummary.syncMode ? " is-active" : ""}${nvimSummary.syncReady ? " is-engaged" : ""}`}
              aria-label={`Alt+2: synchronizacja ${nvimSyncMode ? "włączona" : "wyłączona"}`}
              title={`Alt+2 · SYNC ${nvimSyncMode ? "ON" : "OFF"}`}
              aria-pressed={nvimSyncMode}
              onClick={() => setNvimSyncMode(!nvimSyncMode)}
            >
              <kbd className="nvim-toolbar-key">A2</kbd><span className="nvim-toolbar-label">SYNC</span>
            </button>
            <button
              type="button"
              className={`nvim-work-indicator nvim-toolbar-button${nvimControlMode ? " is-active" : ""}${nvimSummary.controlEnabled ? " is-engaged" : ""}`}
              aria-label={`Alt+3: sterowanie ${!nvimSyncMode ? "niedostępne" : nvimControlMode ? "włączone" : "wyłączone"}`}
              title={!nvimSyncMode ? "Alt+3 · Sterowanie wymaga SYNC ON" : `Alt+3 · Sterowanie ${nvimControlMode ? "ON" : "OFF"}`}
              aria-pressed={nvimControlMode}
              disabled={!nvimSyncMode}
              onClick={() => setNvimControlMode(!nvimControlMode)}
            >
              <kbd className="nvim-toolbar-key">A3</kbd><span className="nvim-toolbar-label">CTRL</span>
            </button>
            <button
              type="button"
              className={`nvim-height-toggle nvim-toolbar-button${nvimExpanded ? " is-active" : ""}`}
              aria-label={`Alt+4: ${nvimExpanded ? "przywróć normalną wysokość" : "ustaw wysoki panel"}`}
              title={nvimExpanded ? "Alt+4 · Normalna wysokość" : "Alt+4 · Wysoki panel 90%"}
              aria-pressed={nvimExpanded}
              onClick={() => setNvimExpanded(!nvimExpanded)}
            >
              <kbd className="nvim-toolbar-key">A4</kbd><span className="nvim-toolbar-label">HIGH</span>
            </button>
            <button
              type="button"
              className={`nvim-height-toggle nvim-toolbar-button${nvimFit ? " is-active" : ""}`}
              aria-label={`Alt+5: automatyczne dopasowanie ${nvimFit ? "włączone" : "wyłączone"}`}
              title={nvimFit ? "Alt+5 · Wyłącz auto-fit" : "Alt+5 · Pokaż cały Neovim"}
              aria-pressed={nvimFit}
              onClick={() => setNvimFit(!nvimFit)}
            >
              <kbd className="nvim-toolbar-key">A5</kbd><span className="nvim-toolbar-label">FIT</span>
            </button>
            <button
              type="button"
              className={`nvim-height-toggle nvim-toolbar-button${allocatorVisible ? " is-active" : ""}`}
              aria-label={`Alt+6: model alokatora ${allocatorVisible ? "przypięty" : "ukryty"}`}
              title={allocatorVisible ? "Alt+6 · Ukryj model alokatora" : "Alt+6 · Przypnij model alokatora"}
              aria-pressed={allocatorVisible}
              onClick={() => setAllocatorVisible(!allocatorVisible)}
            >
              <kbd className="nvim-toolbar-key">A6</kbd><span className="nvim-toolbar-label">MODEL</span>
            </button>
          </div>
          <span className="nvim-toolbar-boundary" aria-hidden="true">|</span>
          {nvimVisible && (
            <>
              <span className={`nvim-status nvim-status--${nvimSummary.state}`}>
                {nvimStatusLabel[nvimSummary.state]}
              </span>
              <span className="topbar-nvim-meta" title={nvimSummary.message}>
                <strong>{nvimSummary.instance ?? "Neovim MCP"}</strong>
                {nvimSummary.detail && <small>{nvimSummary.detail}</small>}
              </span>
              <span className="nvim-shortcut-strip" aria-label="Skróty panelu Neovima">
                <kbd>F1</kbd> reset · <kbd>F2</kbd> sync · <kbd>Alt+W</kbd> okna · <kbd>F12</kbd> skróty
              </span>
            </>
          )}
        </div>
        <div className="viewer-zoom-controls">
          <output className="viewer-zoom-status">
            Płótno {Math.round(scale * 100)}% · Treść 100%
          </output>
          <button className="viewer-zoom-reset" onClick={() => setScale(2.18)}>
            Reset zoom
          </button>
        </div>
      </div>
    </nav>
  );
}

type NvimCell = { text: string; highlight: number };
type NvimHighlight = {
  foreground?: number;
  background?: number;
  special?: number;
  reverse?: boolean;
  bold?: boolean;
  italic?: boolean;
  underline?: boolean;
  undercurl?: boolean;
  strikethrough?: boolean;
};
type NvimGridModel = {
  width: number;
  height: number;
  cells: NvimCell[][];
  highlights: Map<number, NvimHighlight>;
  foreground: number;
  background: number;
  cursor: { row: number; column: number };
};
type ActiveNvimStep = {
  task: { id: string; label: string } | null;
  block: { id?: string; label?: string } | null;
  phase: { id: string; label: string };
  step: UmlSequenceStep;
  focusLevel?: NavigationLevel;
  activate?: boolean;
};

function allocatorStepFromModel(
  model: CardModel,
  navigation?: ApiNavigation | null,
): ActiveNvimStep | null {
  for (const section of model.sections) {
    for (const asset of section.assets) {
      const interactive = asset.interactive;
      if (interactive?.kind !== "uml-sequence" || !interactive.phases?.length) continue;
      if (navigation?.task.id && interactive.task?.id !== navigation.task.id) continue;
      if (navigation?.block.id && interactive.block?.id !== navigation.block.id) continue;
      for (const phase of interactive.phases) {
        if (navigation?.phase.id && phase.id !== navigation.phase.id) continue;
        const step = navigation?.step.id
          ? phase.steps.find(item => item.id === navigation.step.id)
          : phase.steps[0];
        if (!step) continue;
        return {
          task: interactive.task ?? null,
          block: interactive.block ?? null,
          phase: { id: phase.id, label: phase.label },
          step,
          focusLevel: navigation?.focus_level ?? "step",
          activate: false,
        };
      }
    }
  }
  return null;
}

function AllocatorPanel({ visible, model }: { visible: boolean; model: CardModel }) {
  const [active, setActive] = useState<ActiveNvimStep | null>(null);

  useEffect(() => {
    const selected = (event: Event) => {
      setActive((event as CustomEvent<ActiveNvimStep>).detail ?? null);
    };
    window.addEventListener("stem:nvim-step", selected);
    setActive(allocatorStepFromModel(model));
    void fetch("/api/navigation/current", { cache: "no-store" })
      .then(response => response.ok ? response.json() : Promise.reject())
      .then(payload => {
        const resolved = allocatorStepFromModel(model, payload.current ?? null);
        if (resolved) setActive(resolved);
      })
      .catch(() => undefined);
    return () => window.removeEventListener("stem:nvim-step", selected);
  }, [model]);

  if (!visible) return null;
  const focusLevel = active?.focusLevel ?? "card";
  const arena = active?.step.snapshot.memory.arena;
  const hasUmlCursor = Boolean(active && focusLevel !== "card" && focusLevel !== "task");
  const size = Math.max(1, Number(arena?.size_bytes ?? 64));
  const offset = arena?.offset == null
    ? null
    : Math.max(0, Math.min(size, Number(arena.offset)));
  const byteValues = arena?.bytes.trim().split(/\s+/).filter(Boolean) ?? [];
  const cellCount = Math.min(size, 64);
  const facts = active
    ? [
        ...active.step.snapshot.memory.items.map(item => ({
          name: item.name,
          value: item.value,
        })),
        ...active.step.snapshot.frame.fields.map(field => ({
          name: field.name,
          value: field.value,
        })),
      ].filter((fact, index, all) =>
        all.findIndex(candidate => candidate.name === fact.name) === index,
      ).slice(0, 8)
    : [];

  return (
    <section className="allocator-panel" aria-label="Przypięty model alokatora">
      <header>
        <span>ALLOCATOR · PINNED</span>
        <strong>
          {active
            ? `${active.phase.label} · ${String(active.step.number).padStart(2, "0")} ${active.step.label}`
            : "Oczekiwanie na diagram UML"}
        </strong>
        <small>
          {hasUmlCursor
            ? active!.step.snapshot.description
            : "Wybierz co najmniej BLOCK. F2 wybierze jego pierwszy krok i wykona synchronizację."}
        </small>
      </header>
      <div className="allocator-panel-body">
        <dl className="allocator-metrics">
          <div><dt>FOCUS</dt><dd>{focusLevel.toUpperCase()}</dd></div>
          <div><dt>BASE</dt><dd>{arena?.base ?? "—"}</dd></div>
          <div><dt>ALLOCP</dt><dd>{arena?.cursor ?? "—"}</dd></div>
          <div><dt>USED / FREE</dt><dd>{offset == null ? "—" : `${offset} / ${size - offset} B`}</dd></div>
        </dl>
        <div className={`allocator-arena-view${hasUmlCursor ? "" : " is-inactive"}`}>
          <div className="allocator-arena-labels">
            <span>allocbuf[0]</span>
            <strong>{offset == null ? "allocp jeszcze nieustawiony" : `offset ${offset}`}</strong>
            <span>allocbuf[{size - 1}]</span>
          </div>
          <div
            className="allocator-pinned-arena"
            style={{ "--allocator-size": cellCount } as React.CSSProperties}
          >
            {Array.from({ length: cellCount }, (_, index) => (
              <i
                key={index}
                className={offset != null && index < offset ? "is-allocated" : ""}
                title={`allocbuf[${index}] = ${byteValues[index] ?? "??"}`}
              />
            ))}
            {offset != null && (
              <b
                className="allocator-cursor"
                style={{ left: `${offset / size * 100}%` }}
                title={`allocp = ${arena?.cursor}`}
              />
            )}
          </div>
        </div>
        <div className="allocator-facts" aria-label="Wartości bieżącego kroku">
          {facts.length ? facts.map(fact => (
            <div key={fact.name}><span>{fact.name}</span><code>{fact.value}</code></div>
          )) : <p>Brak snapshotu.</p>}
        </div>
      </div>
    </section>
  );
}
type NvimConnectionStatus = {
  state: "hidden" | "connecting" | "connected" | "offline" | "unselected";
  message?: string;
  epoch?: string;
  target?: {
    instance?: string;
    profile?: string;
    target?: string;
    container_name?: string;
    container_id?: string;
  };
};
type CheckpointStatus = {
  state: "idle" | "replaying" | "verifying" | "ready" | "failed";
  phase?: string;
  message?: string;
  generation?: number;
  snapshot_ref?: string;
};

type SavedNvimGrid = {
  schema: "stem-nvim-grid.v1";
  snapshot_ref: string;
  saved_at: string;
  width: number;
  height: number;
  cells: Array<Array<[string, number]>>;
  highlights: Array<[number, NvimHighlight]>;
  foreground: number;
  background: number;
  cursor: { row: number; column: number };
};

const blankNvimCell = (): NvimCell => ({ text: " ", highlight: 0 });

function createNvimGrid(width = 1, height = 1): NvimGridModel {
  return {
    width,
    height,
    cells: Array.from({ length: height }, () =>
      Array.from({ length: width }, blankNvimCell),
    ),
    highlights: new Map(),
    foreground: 0xe8e8e8,
    background: 0x101315,
    cursor: { row: 0, column: 0 },
  };
}

function resizeNvimGrid(model: NvimGridModel, width: number, height: number) {
  if (width <= 0 || height <= 0) return;
  const previous = model.cells;
  model.width = width;
  model.height = height;
  model.cells = Array.from({ length: height }, (_, row) =>
    Array.from({ length: width }, (_, column) =>
      previous[row]?.[column] ?? blankNvimCell(),
    ),
  );
}

function nvimSnapshotStorageKey(snapshotRef: string) {
  return `stem-card:nvim-grid:${snapshotRef}`;
}

function saveNvimGrid(snapshotRef: string, model: NvimGridModel) {
  if (model.width <= 1 || model.height <= 1) return;
  const saved: SavedNvimGrid = {
    schema: "stem-nvim-grid.v1",
    snapshot_ref: snapshotRef,
    saved_at: new Date().toISOString(),
    width: model.width,
    height: model.height,
    cells: model.cells.map(row => row.map(cell => [cell.text, cell.highlight])),
    highlights: Array.from(model.highlights.entries()),
    foreground: model.foreground,
    background: model.background,
    cursor: { ...model.cursor },
  };
  try {
    localStorage.setItem(nvimSnapshotStorageKey(snapshotRef), JSON.stringify(saved));
  } catch {
    // The live view remains usable even when browser storage is full/disabled.
  }
}

function parseNvimGrid(saved: SavedNvimGrid | null, snapshotRef: string): NvimGridModel | null {
  try {
    if (
      saved?.schema !== "stem-nvim-grid.v1"
      || saved.snapshot_ref !== snapshotRef
      || !Number.isInteger(saved.width)
      || !Number.isInteger(saved.height)
      || saved.width < 2
      || saved.height < 2
      || saved.width > 400
      || saved.height > 200
      || saved.cells.length !== saved.height
    ) return null;
    return {
      width: saved.width,
      height: saved.height,
      cells: saved.cells.map(row => row.map(([text, highlight]) => ({
        text: typeof text === "string" ? text : " ",
        highlight: Number.isInteger(highlight) ? highlight : 0,
      }))),
      highlights: new Map(saved.highlights),
      foreground: saved.foreground,
      background: saved.background,
      cursor: saved.cursor,
    };
  } catch {
    return null;
  }
}

function loadNvimGrid(snapshotRef: string): NvimGridModel | null {
  try {
    return parseNvimGrid(
      JSON.parse(
        localStorage.getItem(nvimSnapshotStorageKey(snapshotRef)) ?? "null",
      ) as SavedNvimGrid | null,
      snapshotRef,
    );
  } catch {
    return null;
  }
}

async function loadRecordedNvimGrid(step: UmlSequenceStep): Promise<NvimGridModel | null> {
  const snapshotRef = step.snapshot_ref;
  if (!snapshotRef) return null;
  const local = loadNvimGrid(snapshotRef);
  if (local) return local;
  const recordedRef = step.view?.recorded_grid_ref;
  if (!recordedRef || /^(?:[a-z]+:|\/\/)/i.test(recordedRef)) return null;
  try {
    const response = await fetch(recordedRef, { cache: "no-store" });
    if (!response.ok) return null;
    return parseNvimGrid(await response.json() as SavedNvimGrid, snapshotRef);
  } catch {
    return null;
  }
}

// The container runs Neovim in cterm mode, so the UI protocol sends palette
// indexes rather than terminal-specific RGB values.  Mirror the GNOME
// Console palette used by the tmux session; the classic xterm palette makes
// blue/green syntax groups too dark (and ANSI black disappears completely).
const xterm16 = [
  0x1c1c1f, 0xc01c28, 0x2ec27e, 0xf5c211,
  0x1e78e4, 0x9841bb, 0x0ab9dc, 0xc0bfbc,
  0x5e5c64, 0xed333b, 0x57e389, 0xf8e45c,
  0x51a1ff, 0xc061cb, 0x4fd2fd, 0xf6f5f4,
];

function xterm256(index: unknown) {
  const value = Number(index);
  if (!Number.isInteger(value) || value < 0 || value > 255) return undefined;
  if (value < 16) return xterm16[value];
  if (value < 232) {
    const cube = value - 16;
    const levels = [0, 95, 135, 175, 215, 255];
    const red = levels[Math.floor(cube / 36)];
    const green = levels[Math.floor((cube % 36) / 6)];
    const blue = levels[cube % 6];
    return (red << 16) | (green << 8) | blue;
  }
  const gray = 8 + (value - 232) * 10;
  return (gray << 16) | (gray << 8) | gray;
}

function ctermHighlight(attributes: unknown): NvimHighlight | null {
  if (!attributes || typeof attributes !== "object") return null;
  const source = attributes as NvimHighlight;
  if (!Object.keys(source).length) return null;
  return {
    ...source,
    foreground: xterm256(source.foreground),
    background: xterm256(source.background),
    special: xterm256(source.special),
  };
}

function rgbHighlight(attributes: unknown): NvimHighlight | null {
  if (!attributes || typeof attributes !== "object") return null;
  const source = attributes as NvimHighlight;
  return Object.keys(source).length ? { ...source } : null;
}

function applyNvimRedraw(model: NvimGridModel, events: unknown[]) {
  for (const rawEvent of events) {
    if (!Array.isArray(rawEvent) || typeof rawEvent[0] !== "string") continue;
    const name = rawEvent[0];
    const updates = rawEvent.slice(1);
    for (const update of updates) {
      if (!Array.isArray(update)) continue;
      if (name === "grid_resize") {
        const [grid, width, height] = update.map(Number);
        if (grid === 1) resizeNvimGrid(model, width, height);
      } else if (name === "default_colors_set") {
        const rgbForeground = Number(update[0]);
        const rgbBackground = Number(update[1]);
        const foreground = rgbForeground >= 0
          ? rgbForeground
          : xterm256(update[3]);
        const background = rgbBackground >= 0
          ? rgbBackground
          : xterm256(update[4]);
        if (typeof foreground === "number" && Number.isFinite(foreground) && foreground >= 0) {
          model.foreground = foreground;
        }
        if (typeof background === "number" && Number.isFinite(background) && background >= 0) {
          model.background = background;
        }
      } else if (name === "hl_attr_define") {
        const id = Number(update[0]);
        // The selected terminal runs with 'notermguicolors', so its visible
        // palette comes from cterm attributes. RGB remains a fallback for a
        // future true-colour session.
        const attributes = ctermHighlight(update[2]) ?? rgbHighlight(update[1]);
        if (Number.isInteger(id) && attributes && typeof attributes === "object") {
          model.highlights.set(id, attributes as NvimHighlight);
        }
      } else if (name === "grid_clear" && Number(update[0]) === 1) {
        model.cells = Array.from({ length: model.height }, () =>
          Array.from({ length: model.width }, blankNvimCell),
        );
      } else if (name === "grid_cursor_goto" && Number(update[0]) === 1) {
        model.cursor = { row: Number(update[1]), column: Number(update[2]) };
      } else if (name === "grid_line" && Number(update[0]) === 1) {
        const row = Number(update[1]);
        let column = Number(update[2]);
        const cells = update[3];
        if (!model.cells[row] || !Array.isArray(cells)) continue;
        let highlight = 0;
        for (const encodedCell of cells) {
          if (!Array.isArray(encodedCell)) continue;
          const text = typeof encodedCell[0] === "string" ? encodedCell[0] : " ";
          if (Number.isInteger(encodedCell[1])) highlight = Number(encodedCell[1]);
          const repeat = Number.isInteger(encodedCell[2]) ? Number(encodedCell[2]) : 1;
          for (let index = 0; index < repeat && column < model.width; index += 1) {
            if (column >= 0) model.cells[row][column] = { text, highlight };
            column += 1;
          }
        }
      } else if (name === "grid_scroll" && Number(update[0]) === 1) {
        const top = Number(update[1]);
        const bottom = Number(update[2]);
        const left = Number(update[3]);
        const right = Number(update[4]);
        const rows = Number(update[5]);
        const columns = Number(update[6]);
        const copy = model.cells.map(row => row.map(cell => ({ ...cell })));
        for (let row = top; row < bottom; row += 1) {
          for (let column = left; column < right; column += 1) {
            const sourceRow = row + rows;
            const sourceColumn = column + columns;
            model.cells[row][column] =
              sourceRow >= top && sourceRow < bottom &&
              sourceColumn >= left && sourceColumn < right
                ? copy[sourceRow][sourceColumn]
                : blankNvimCell();
          }
        }
      }
    }
  }
}

function nvimColor(value: number | undefined, fallback: string) {
  if (!Number.isFinite(value) || Number(value) < 0) return fallback;
  return `#${Number(value).toString(16).padStart(6, "0").slice(-6)}`;
}

function matchingTextColumns(line: NvimCell[], text: string) {
  const content = line.map(cell => cell.text || " ").join("");
  const matches: number[] = [];
  let from = 0;
  while (from < content.length) {
    const found = content.indexOf(text, from);
    if (found < 0) break;
    matches.push(found);
    from = found + Math.max(1, text.length);
  }
  return matches;
}

function paintNvimRows(
  canvas: HTMLCanvasElement,
  model: NvimGridModel,
  startRow: number,
  rowCount: number,
) {
  const visibleRows = Math.max(1, Math.min(rowCount, model.height - startRow));
  // The terminal grid is first composed on an unscaled A4 canvas. The same
  // zoom as the paper is applied later by CSS to the completed frame. This
  // keeps all 190 columns stable instead of recalculating glyph metrics from
  // the already-zoomed browser viewport.
  const baseWidth = canvas.parentElement?.clientWidth ?? (210 * 96) / 25.4;
  const cellWidth = baseWidth / model.width;
  const cellHeight = cellWidth * 1.9;
  const fontSize = cellWidth * 1.62;
  const viewerScale = Number.parseFloat(
    getComputedStyle(document.documentElement)
      .getPropertyValue("--viewer-canvas-scale"),
  ) || 1;
  const ratio = Math.max(1, window.devicePixelRatio || 1) * viewerScale;
  const width = model.width * cellWidth;
  const height = visibleRows * cellHeight;
  if (canvas.width !== Math.round(width * ratio) || canvas.height !== Math.round(height * ratio)) {
    canvas.width = Math.round(width * ratio);
    canvas.height = Math.round(height * ratio);
    canvas.style.width = `${width}px`;
    canvas.style.height = `${height}px`;
  }
  canvas.dataset.columns = String(model.width);
  canvas.dataset.rows = String(visibleRows);
  const context = canvas.getContext("2d");
  if (!context) return null;
  context.setTransform(ratio, 0, 0, ratio, 0, 0);
  context.imageSmoothingEnabled = false;
  const defaultForeground = nvimColor(model.foreground, "#e8e8e8");
  const defaultBackground = nvimColor(model.background, "#101315");
  context.fillStyle = defaultBackground;
  context.fillRect(0, 0, width, height);
  context.textBaseline = "alphabetic";

  for (let visibleRow = 0; visibleRow < visibleRows; visibleRow += 1) {
    const row = startRow + visibleRow;
    for (let column = 0; column < model.width; column += 1) {
      const cell = model.cells[row][column];
      const highlight = model.highlights.get(cell.highlight) ?? {};
      let foreground = nvimColor(highlight.foreground, defaultForeground);
      let background = nvimColor(highlight.background, defaultBackground);
      if (highlight.reverse) [foreground, background] = [background, foreground];
      if (background !== defaultBackground) {
        context.fillStyle = background;
        context.fillRect(column * cellWidth, visibleRow * cellHeight, cellWidth, cellHeight);
      }
      if (cell.text && cell.text !== " ") {
        context.fillStyle = foreground;
        context.font = `${highlight.italic ? "italic " : ""}${highlight.bold ? "700" : "500"} ${fontSize}px/1 ui-monospace, SFMono-Regular, Consolas, monospace`;
        context.fillText(cell.text, column * cellWidth, visibleRow * cellHeight + cellHeight * 0.76);
      }
      if (highlight.underline || highlight.undercurl || highlight.strikethrough) {
        context.strokeStyle = nvimColor(highlight.special, foreground);
        context.lineWidth = 1;
        const y = visibleRow * cellHeight + (highlight.strikethrough ? cellHeight * 0.5 : cellHeight - 2);
        context.beginPath();
        context.moveTo(column * cellWidth, y);
        context.lineTo((column + 1) * cellWidth, y);
        context.stroke();
      }
    }
  }

  if (model.cursor.row >= startRow && model.cursor.row < startRow + visibleRows) {
    context.strokeStyle = "rgba(255,255,255,.72)";
    context.lineWidth = 1;
    context.strokeRect(
      model.cursor.column * cellWidth + 0.5,
      (model.cursor.row - startRow) * cellHeight + 0.5,
      cellWidth - 1,
      cellHeight - 1,
    );
  }
  return { context, cellWidth, cellHeight };
}

function drawNvimGrid(
  canvas: HTMLCanvasElement,
  model: NvimGridModel,
  annotations: NvimAnnotation[],
) {
  const painted = paintNvimRows(canvas, model, 0, model.height);
  if (!painted) return;
  const { context, cellWidth, cellHeight } = painted;

  const toneColors = {
    danger: "#ff3b30",
    info: "#35b9ef",
    success: "#2ac56f",
    warning: "#ffbd2e",
  };
  for (const annotation of annotations) {
    const anchor = annotation.anchor;
    let row = Number(anchor.row ?? -1);
    let column = Number(anchor.column ?? -1);
    let rows = Math.max(1, Number(anchor.rows ?? 1));
    let columns = Math.max(1, Number(anchor.columns ?? 1));
    if (anchor.kind === "screen-text" && anchor.text) {
      const matches: Array<{ row: number; column: number }> = [];
      for (let candidate = 0; candidate < model.height; candidate += 1) {
        for (const match of matchingTextColumns(model.cells[candidate], anchor.text)) {
          matches.push({ row: candidate, column: match });
        }
      }
      const semanticArea = annotation.anchor_ref?.split(".")[0];
      if (semanticArea === "src") {
        matches.sort((left, right) => right.column - left.column || left.row - right.row);
      } else if (["asm", "reg", "memory"].includes(semanticArea ?? "")) {
        matches.sort((left, right) => left.column - right.column || left.row - right.row);
      }
      const selected = matches[Math.max(0, Number(anchor.occurrence ?? 1) - 1)];
      row = selected?.row ?? -1;
      column = selected?.column ?? -1;
      columns = anchor.text.length;
    }
    if (row < 0 || column < 0 || row >= model.height || column >= model.width) continue;
    const padding = Math.max(0, Number(anchor.padding_cells ?? 1));
    const x = Math.max(0, column - padding) * cellWidth;
    const y = Math.max(0, row - padding) * cellHeight;
    const boxWidth = Math.min(model.width - column + padding, columns + padding * 2) * cellWidth;
    const boxHeight = Math.min(model.height - row + padding, rows + padding * 2) * cellHeight;
    const color = toneColors[annotation.tone ?? "danger"];
    context.strokeStyle = color;
    context.lineWidth = 2;
    if (annotation.shape === "underline") {
      context.beginPath();
      context.moveTo(x, y + boxHeight - 2);
      context.lineTo(x + boxWidth, y + boxHeight - 2);
      context.stroke();
    } else {
      context.strokeRect(x + 1, y + 1, Math.max(1, boxWidth - 2), Math.max(1, boxHeight - 2));
    }
    if (annotation.label) {
      context.font = "700 10px system-ui, sans-serif";
      const labelWidth = context.measureText(annotation.label).width + 8;
      context.fillStyle = color;
      context.fillRect(x + 1, Math.max(0, y - 15), labelWidth, 14);
      context.fillStyle = "#fff";
      context.fillText(annotation.label, x + 5, Math.max(10, y - 4));
    }
  }
}

function keyForNvim(event: React.KeyboardEvent<HTMLElement>) {
  if (event.nativeEvent.isComposing || event.metaKey) return null;
  const special: Record<string, string> = {
    Enter: "CR",
    Escape: "Esc",
    Backspace: "BS",
    Delete: "Del",
    Tab: "Tab",
    ArrowLeft: "Left",
    ArrowRight: "Right",
    ArrowUp: "Up",
    ArrowDown: "Down",
    Home: "Home",
    End: "End",
    PageUp: "PageUp",
    PageDown: "PageDown",
    Insert: "Insert",
  };
  const base = special[event.key] ?? (/^F\d{1,2}$/.test(event.key) ? event.key : null);
  const modifiers = [
    event.ctrlKey ? "C" : "",
    event.altKey ? "M" : "",
    event.shiftKey && base ? "S" : "",
  ].filter(Boolean).join("-");
  if (base) return `<${modifiers ? `${modifiers}-` : ""}${base}>`;
  if (event.key.length !== 1) return null;
  if (event.ctrlKey || event.altKey) {
    return `<${modifiers}-${event.key === "<" ? "lt" : event.key}>`;
  }
  return event.key === "<" ? "<lt>" : event.key;
}

function NeovimPanel({
  visible,
  syncMode,
  controlMode,
  expanded,
  fit,
  scale,
  onSummaryChange,
}: {
  visible: boolean;
  syncMode: boolean;
  controlMode: boolean;
  expanded: boolean;
  fit: boolean;
  scale: number;
  onSummaryChange: (summary: NvimPanelSummary) => void;
}) {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const screenRef = useRef<HTMLDivElement>(null);
  const websocketRef = useRef<WebSocket | null>(null);
  const redrawFrameRef = useRef(0);
  const gridFlushRef = useRef(0);
  const gridReportTimerRef = useRef(0);
  const gridRef = useRef<NvimGridModel>(createNvimGrid());
  const targetEpochRef = useRef<string | null>(null);
  const activeStepRef = useRef<ActiveNvimStep | null>(null);
  const presentedSnapshotRef = useRef<string | null>(null);
  const checkpointGenerationRef = useRef(0);
  const checkpointRequestRef = useRef<AbortController | null>(null);
  const resizeStartRef = useRef<{ y: number; heightVh: number } | null>(null);
  const [activeStep, setActiveStep] = useState<ActiveNvimStep | null>(null);
  const [hasGrid, setHasGrid] = useState(false);
  const [gridRevision, setGridRevision] = useState(0);
  const [pointerInside, setPointerInside] = useState(false);
  const [panelHeightVh, setPanelHeightVh] = useState(() => {
    const saved = Number(localStorage.getItem("stem-card-nvim-height-vh"));
    return Number.isFinite(saved) && saved >= 25 && saved <= 90 ? saved : 75;
  });
  const [status, setStatus] = useState<NvimConnectionStatus>({ state: "hidden" });
  const [checkpoint, setCheckpoint] = useState<CheckpointStatus>({ state: "idle" });
  const checkpointBusy = checkpoint.state === "replaying" || checkpoint.state === "verifying";
  const syncReady = syncMode && status.state === "connected" && !checkpointBusy;
  const controlEnabled = controlMode && pointerInside && status.state === "connected" && !checkpointBusy;

  const redraw = () => {
    if (canvasRef.current) {
      drawNvimGrid(
        canvasRef.current,
        gridRef.current,
        presentedSnapshotRef.current === activeStepRef.current?.step.snapshot_ref
          ? activeStepRef.current?.step.view?.annotations ?? []
          : [],
      );
    }
  };
  const scheduleRedraw = () => {
    if (redrawFrameRef.current) return;
    redrawFrameRef.current = window.requestAnimationFrame(() => {
      redrawFrameRef.current = 0;
      redraw();
    });
  };

  useEffect(() => {
    const selected = (event: Event) => {
      const detail = (event as CustomEvent<ActiveNvimStep>).detail;
      activeStepRef.current = detail;
      setActiveStep(detail);
      presentedSnapshotRef.current = null;
      const snapshotRef = detail.step.snapshot_ref;
      if (status.state !== "connected" && snapshotRef) {
        void loadRecordedNvimGrid(detail.step).then(saved => {
          if (!saved || activeStepRef.current?.step.snapshot_ref !== snapshotRef) return;
          gridRef.current = saved;
          setHasGrid(true);
          presentedSnapshotRef.current = snapshotRef;
          setCheckpoint({
            state: "idle",
            snapshot_ref: snapshotRef,
            message: "Pokazano ostatni zapisany, zweryfikowany ekran.",
          });
          redraw();
        });
      }
      redraw();

      if (!detail.activate || !snapshotRef) return;
      if (!visible || status.state !== "connected") {
        setCheckpoint({
          state: "failed",
          snapshot_ref: snapshotRef,
          message: "Cel jest offline; pozostaje zapisany wynik tego kroku.",
        });
        return;
      }

      const generation = Math.max(checkpointGenerationRef.current + 1, Date.now());
      checkpointGenerationRef.current = generation;
      checkpointRequestRef.current?.abort();
      const controller = new AbortController();
      checkpointRequestRef.current = controller;
      setCheckpoint({
        state: "replaying",
        phase: "dispatch",
        generation,
        snapshot_ref: snapshotRef,
        message: "Resetuję cel i odtwarzam wykonanie do wybranego kroku.",
      });

      let pollTimer = 0;
      const poll = async () => {
        try {
          const response = await fetch("/api/checkpoint/status", {
            cache: "no-store",
            signal: controller.signal,
          });
          if (!response.ok) return;
          const payload = await response.json();
          const current = payload.active?.generation === generation
            ? payload.active
            : null;
          if (!current || checkpointGenerationRef.current !== generation) return;
          setCheckpoint({
            state: current.phase === "verify" ? "verifying" : "replaying",
            phase: current.phase,
            generation,
            snapshot_ref: snapshotRef,
            message: current.message,
          });
        } catch {
          // POST below owns the final error; polling is only progress feedback.
        }
      };
      pollTimer = window.setInterval(poll, 120);
      void poll();

      void fetch("/api/checkpoint/activate", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ snapshot_ref: snapshotRef, generation }),
        signal: controller.signal,
      })
        .then(async response => {
          const result = await response.json();
          if (checkpointGenerationRef.current !== generation) return;
          if (!response.ok || result.status !== "ready") {
            throw new Error(result.message ?? `Replay zakończył się kodem HTTP ${response.status}.`);
          }
          const socket = websocketRef.current;
          if (socket?.readyState !== WebSocket.OPEN) {
            throw new Error("Replay zakończony, ale most Neovima jest offline.");
          }
          const flushBeforeRefresh = gridFlushRef.current;
          socket.send(JSON.stringify({ type: "refresh" }));
          const redrawDeadline = Date.now() + 1800;
          while (
            gridFlushRef.current <= flushBeforeRefresh
            && Date.now() < redrawDeadline
            && checkpointGenerationRef.current === generation
          ) {
            await new Promise(resolve => window.setTimeout(resolve, 20));
          }
          if (gridFlushRef.current <= flushBeforeRefresh) {
            throw new Error("Neovim nie potwierdził pełnego redraw po replay.");
          }
          if (checkpointGenerationRef.current !== generation) return;
          presentedSnapshotRef.current = snapshotRef;
          setCheckpoint({
            state: "ready",
            phase: result.phase,
            generation,
            snapshot_ref: snapshotRef,
            message: result.message ?? "Stan maszyny został odtworzony i zweryfikowany.",
          });
          saveNvimGrid(snapshotRef, gridRef.current);
          redraw();
          await new Promise<void>(resolve => window.requestAnimationFrame(() => resolve()));
          const canvas = canvasRef.current;
          if (canvas && activeStepRef.current?.step.snapshot_ref === snapshotRef) {
            try {
              const dataUrl = canvas.toDataURL("image/png");
              void fetch("/api/evidence", {
                method: "POST",
                headers: { "content-type": "application/json" },
                body: JSON.stringify({
                  actor: document.documentElement.dataset.cardClientId ?? "browser",
                  snapshot_ref: snapshotRef,
                  caption: `${String(detail.step.number).padStart(2, "0")} ${detail.step.label}`,
                  data_url: dataUrl,
                }),
              }).catch(() => undefined);
            } catch {
              // Evidence is auxiliary; a failed screenshot must not invalidate replay.
            }
          }
        })
        .catch(error => {
          if (controller.signal.aborted || checkpointGenerationRef.current !== generation) return;
          void loadRecordedNvimGrid(detail.step).then(saved => {
            if (!saved || activeStepRef.current?.step.snapshot_ref !== snapshotRef) return;
            gridRef.current = saved;
            setHasGrid(true);
            presentedSnapshotRef.current = snapshotRef;
            redraw();
          });
          setCheckpoint({
            state: "failed",
            generation,
            snapshot_ref: snapshotRef,
            message: error instanceof Error ? error.message : String(error),
          });
        })
        .finally(() => {
          window.clearInterval(pollTimer);
          if (checkpointRequestRef.current === controller) checkpointRequestRef.current = null;
        });
    };
    window.addEventListener("stem:nvim-step", selected);
    return () => {
      window.removeEventListener("stem:nvim-step", selected);
      checkpointRequestRef.current?.abort();
    };
  }, [status.state, visible]);

  useEffect(() => {
    localStorage.setItem("stem-card-nvim-height-vh", panelHeightVh.toFixed(2));
  }, [panelHeightVh]);

  useEffect(() => {
    const frame = window.requestAnimationFrame(redraw);
    return () => window.cancelAnimationFrame(frame);
  }, [expanded, fit, scale]);

  useEffect(() => {
    const refresh = () => {
      const socket = websocketRef.current;
      if (socket?.readyState === WebSocket.OPEN) {
        socket.send(JSON.stringify({ type: "refresh" }));
      }
      redraw();
    };
    window.addEventListener("stem:nvim-refresh", refresh);
    return () => window.removeEventListener("stem:nvim-refresh", refresh);
  }, []);

  useEffect(() => {
    let summaryState: NvimPanelSummary["state"] = status.state;
    if (status.state === "connected") {
      summaryState = checkpoint.state === "idle" ? "connected" : checkpoint.state;
    }
    onSummaryChange({
      state: summaryState,
      message: checkpoint.message ?? status.message,
      instance: status.target?.instance ?? status.target?.container_name,
      detail: [
        status.target?.profile ?? activeStep?.step.view?.connection_ref,
        activeStep
          ? `${String(activeStep.step.number).padStart(2, "0")} ${activeStep.step.label}`
          : undefined,
        checkpoint.phase,
      ].filter(Boolean).join(" · "),
      syncMode,
      syncReady,
      controlMode,
      controlEnabled,
      screenCursor: { ...gridRef.current.cursor },
      grid: {
        columns: gridRef.current.width,
        rows: gridRef.current.height,
      },
    });
  }, [activeStep, checkpoint, controlEnabled, controlMode, gridRevision, onSummaryChange, status, syncMode, syncReady]);

  useEffect(() => () => window.clearTimeout(gridReportTimerRef.current), []);

  useEffect(() => {
    if (!controlEnabled) return;
    const protectBrowserShortcuts = (event: KeyboardEvent) => {
      const socket = websocketRef.current;
      if (socket?.readyState !== WebSocket.OPEN) return;
      if (event.altKey && !event.ctrlKey && !event.metaKey && event.key.toLowerCase() === "w") {
        event.preventDefault();
        event.stopImmediatePropagation();
        if (!event.repeat) socket.send(JSON.stringify({ type: "input", keys: "<M-w>" }));
        return;
      }
      const directions: Record<string, string> = {
        ArrowLeft: "h",
        ArrowDown: "j",
        ArrowUp: "k",
        ArrowRight: "l",
      };
      if (event.altKey && !event.ctrlKey && !event.metaKey && directions[event.key]) {
        event.preventDefault();
        event.stopImmediatePropagation();
        if (!event.repeat) {
          socket.send(JSON.stringify({ type: "input", keys: `<M-w>${directions[event.key]}` }));
        }
      }
    };
    window.addEventListener("keydown", protectBrowserShortcuts, true);
    return () => window.removeEventListener("keydown", protectBrowserShortcuts, true);
  }, [controlEnabled]);

  useEffect(() => {
    if (!visible || !syncMode) {
      websocketRef.current?.close();
      websocketRef.current = null;
      setPointerInside(false);
      setStatus(visible
        ? { state: "offline", message: "SYNC OFF: pokazuję zapisany ekran bez połączenia z kontenerem." }
        : { state: "hidden" });
      return;
    }
    let cancelled = false;
    let reconnectTimer = 0;
    const connect = () => {
      if (cancelled) return;
      const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
      const socket = new WebSocket(`${protocol}//${window.location.host}/api/nvim-ui`);
      websocketRef.current = socket;
      setStatus({ state: "connecting" });
      socket.addEventListener("message", event => {
        try {
          const message = JSON.parse(String(event.data));
          if (message.type === "status") {
            if (
              typeof message.epoch === "string"
              && targetEpochRef.current
              && targetEpochRef.current !== message.epoch
            ) {
              gridRef.current = createNvimGrid();
              setHasGrid(false);
              presentedSnapshotRef.current = null;
            }
            if (typeof message.epoch === "string") targetEpochRef.current = message.epoch;
            setStatus(message as NvimConnectionStatus);
            return;
          }
          if (message.type === "redraw" && Array.isArray(message.events)) {
            applyNvimRedraw(gridRef.current, message.events);
            if (gridRef.current.width > 1 && gridRef.current.height > 1) setHasGrid(true);
            if (message.events.some(
              (event: unknown) => Array.isArray(event) && event[0] === "flush",
            )) {
              gridFlushRef.current += 1;
              scheduleRedraw();
              if (!gridReportTimerRef.current) {
                gridReportTimerRef.current = window.setTimeout(() => {
                  gridReportTimerRef.current = 0;
                  setGridRevision(current => current + 1);
                }, 120);
              }
            }
          }
        } catch {
          // Ignore malformed local bridge frames and keep the last good grid.
        }
      });
      socket.addEventListener("close", () => {
        if (websocketRef.current === socket) websocketRef.current = null;
        if (!cancelled) reconnectTimer = window.setTimeout(connect, 1200);
      });
      socket.addEventListener("error", () => {
        setStatus(current => ({
          ...current,
          state: "offline",
          message: "Most Neovima jest chwilowo niedostępny.",
        }));
      });
    };
    connect();
    return () => {
      cancelled = true;
      window.clearTimeout(reconnectTimer);
      window.cancelAnimationFrame(redrawFrameRef.current);
      redrawFrameRef.current = 0;
      websocketRef.current?.close();
      websocketRef.current = null;
    };
  }, [syncMode, visible]);

  if (!visible) return null;
  const send = (message: object) => {
    const socket = websocketRef.current;
    if (socket?.readyState === WebSocket.OPEN) socket.send(JSON.stringify(message));
  };
  const locateMouse = (event: React.MouseEvent<HTMLCanvasElement>) => {
    const bounds = event.currentTarget.getBoundingClientRect();
    return {
      row: Math.max(0, Math.min(
        gridRef.current.height - 1,
        Math.floor(((event.clientY - bounds.top) / bounds.height) * gridRef.current.height),
      )),
      column: Math.max(0, Math.min(
        gridRef.current.width - 1,
        Math.floor(((event.clientX - bounds.left) / bounds.width) * gridRef.current.width),
      )),
    };
  };
  const mouseModifier = (event: React.MouseEvent<HTMLCanvasElement>) => [
    event.shiftKey ? "S" : "",
    event.ctrlKey ? "C" : "",
    event.altKey ? "A" : "",
  ].filter(Boolean).join("-");
  return (
    <section
      className="nvim-panel"
      aria-label="Neovim połączony z kontenerem"
      onWheel={event => {
        event.stopPropagation();
        const target = event.target;
        if (!(target instanceof Element) || !target.closest(".nvim-screen-scroll")) {
          event.preventDefault();
        }
      }}
    >
      <div
        ref={screenRef}
        className="nvim-screen-scroll"
        style={fit ? undefined : { height: `${expanded ? 90 : panelHeightVh}vh` }}
        data-sync={syncMode ? "on" : "off"}
        data-control={controlEnabled ? "true" : "false"}
        tabIndex={0}
        onPointerEnter={event => {
          setPointerInside(true);
          event.currentTarget.focus({ preventScroll: true });
        }}
        onPointerLeave={event => {
          setPointerInside(false);
          event.currentTarget.blur();
        }}
        onMouseDown={event => event.currentTarget.focus({ preventScroll: true })}
        onKeyDown={event => {
          if (!controlEnabled) return;
          const keys = keyForNvim(event);
          if (!keys) return;
          event.preventDefault();
          event.stopPropagation();
          send({ type: "input", keys });
        }}
      >
        <div
          className="nvim-screen-stage"
          style={fit ? undefined : { height: `${(expanded ? 90 : panelHeightVh) / Math.max(scale, 0.25)}vh` }}
        >
          <div className="nvim-screen-surface">
            <div className="nvim-screen-frame">
              <div className="nvim-screen-content">
                <div className="nvim-screen-grid">
                  <canvas
                    ref={canvasRef}
                    className="nvim-screen"
                    tabIndex={-1}
                    aria-label={controlEnabled ? "Interaktywny ekran Neovima" : "Ekran Neovima"}
                    onMouseDown={event => {
                      if (!controlEnabled || status.state !== "connected") return;
                      event.preventDefault();
                      const point = locateMouse(event);
                      const button = event.button === 1 ? "middle" : event.button === 2 ? "right" : "left";
                      send({
                        type: "mouse",
                        button,
                        action: "press",
                        modifier: mouseModifier(event),
                        ...point,
                      });
                    }}
                    onMouseUp={event => {
                      if (!controlEnabled || status.state !== "connected") return;
                      event.preventDefault();
                      const point = locateMouse(event);
                      const button = event.button === 1 ? "middle" : event.button === 2 ? "right" : "left";
                      send({
                        type: "mouse",
                        button,
                        action: "release",
                        modifier: mouseModifier(event),
                        ...point,
                      });
                    }}
                    onWheel={event => {
                      if (!controlEnabled || status.state !== "connected") return;
                      event.preventDefault();
                      const point = locateMouse(event);
                      send({
                        type: "mouse",
                        button: "wheel",
                        action: event.deltaY < 0 ? "up" : "down",
                        modifier: mouseModifier(event),
                        ...point,
                      });
                    }}
                    onContextMenu={event => controlEnabled && event.preventDefault()}
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        {!hasGrid && (
          <div className="nvim-screen-empty">
            <strong>{nvimStatusLabel[status.state]}</strong>
            <span>{status.message ?? "Oczekiwanie na ekran Neovima lub zapisany stan kroku."}</span>
          </div>
        )}
      </div>
      <div
        className="nvim-resize-handle"
        role="separator"
        aria-label="Zmień wysokość panelu Neovima"
        aria-orientation="horizontal"
        aria-valuemin={25}
        aria-valuemax={90}
        aria-valuenow={Math.round(panelHeightVh)}
        tabIndex={0}
        title="Przeciągnij, aby zmienić wysokość. Dwuklik: 75%."
        onPointerDown={event => {
          event.preventDefault();
          resizeStartRef.current = { y: event.clientY, heightVh: panelHeightVh };
          event.currentTarget.setPointerCapture(event.pointerId);
        }}
        onPointerMove={event => {
          const start = resizeStartRef.current;
          if (!start) return;
          const deltaVh = ((event.clientY - start.y) / window.innerHeight) * 100;
          setPanelHeightVh(Math.max(25, Math.min(90, start.heightVh + deltaVh)));
        }}
        onPointerUp={event => {
          resizeStartRef.current = null;
          if (event.currentTarget.hasPointerCapture(event.pointerId)) {
            event.currentTarget.releasePointerCapture(event.pointerId);
          }
        }}
        onPointerCancel={() => { resizeStartRef.current = null; }}
        onDoubleClick={() => setPanelHeightVh(75)}
        onKeyDown={event => {
          if (event.key === "ArrowUp" || event.key === "ArrowDown") {
            event.preventDefault();
            const direction = event.key === "ArrowUp" ? -2 : 2;
            setPanelHeightVh(value => Math.max(25, Math.min(90, value + direction)));
          } else if (event.key === "Home") {
            event.preventDefault();
            setPanelHeightVh(75);
          }
        }}
      />
    </section>
  );
}

function ScopeTableCell({ column, row }: { column: string; row: any }) {
  if (column === "chapter" || column === "task" || column === "version") {
    return <td><code>{row[column]}</code></td>;
  }
  if (column === "idea") {
    return <td dangerouslySetInnerHTML={{ __html: row.idea_html }} />;
  }
  if (column === "status") {
    return (
      <td>
        <span className="scope-status" data-status={row.status} title={row.status}>
          {row.status_label}
        </span>
      </td>
    );
  }
  return <td>{row[column]}</td>;
}

function FrontPage({ front }: { front: any }) {
  const scopeColumns: string[] = front.scope_columns ?? ["chapter", "task", "idea", "priority"];
  return (
    <Sheet
      header={front.header_html}
      left={front.left_margin_html}
      right={front.right_margin_html}
      className="front-sheet"
    >
      <section className="front-scope front-goal">
        <h2>{front.goal_title}</h2>
        <Html html={front.goal_html} />
      </section>
      <section className="front-scope front-card-scope">
        <h2>{front.scope_title}</h2>
        {front.scope_html && <Html html={front.scope_html} />}
        <div className="scope-table-wrap">
          <table className="scope-table scope-table--task">
            <thead>
              <tr>
                {front.scope_headers.map((header: string) => (
                  <th key={header}>{header}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {front.scope_rows.map((row: any) => (
                <tr
                  key={`${row.chapter}-${row.task}`}
                  className={row.key ? "scope-row--key" : ""}
                >
                  {scopeColumns.map(column => (
                    <ScopeTableCell key={column} column={column} row={row} />
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </section>
    </Sheet>
  );
}

function TaskStep({ taskRef, step }: { taskRef: string; step: FlowStep }) {
  return (
    <li id={`${taskRef}-${step.id}`}>
      <strong>{step.title}</strong>
      <Html html={step.content_html} />
    </li>
  );
}

function TaskBlock({ taskRef, block }: { taskRef: string; block: FlowBlock }) {
  const label = block.kind === "exercise" ? "Ćwiczenie" : "Block";
  return (
    <section
      className={`task-block task-block--${block.kind}`}
      id={`${taskRef}-${block.id}`}
      data-stem-nav="block"
    >
      <header>
        <span>{label}</span>
        <h4>{block.title}</h4>
      </header>
      <Html html={block.content_html} />
      {block.steps.length > 0 && (
        <ol className="block-steps">
          {block.steps.map((step) => (
            <TaskStep key={step.id} taskRef={taskRef} step={step} />
          ))}
        </ol>
      )}
    </section>
  );
}

function TaskFlow({ task }: { task: Task }) {
  if (!task.flow.length)
    return (
      <article className="task-legacy" id={task.ref} data-stem-nav="task">
        <strong>{task.ref.toUpperCase()}</strong>
        <Html html={task.prompt_html ?? ""} />
        <footer>
          <strong>Task acceptance:</strong> {task.criterion}
        </footer>
      </article>
    );
  return (
    <article className="task-flow" id={task.ref} data-stem-nav="task">
      <header className="task-flow-header">
        <span>{task.ref.toUpperCase()}</span>
        <h3>{task.title}</h3>
        {task.uuid && <code>{task.uuid}</code>}
      </header>
      {task.flow.map((block) => (
        <TaskBlock key={block.id} taskRef={task.ref} block={block} />
      ))}
      <footer>
        <strong>Task acceptance:</strong> {task.criterion}
      </footer>
    </article>
  );
}

const areaLabels: Record<InteractiveArea, string> = {
  compile: "KOMPILACJA",
  bss: ".BSS",
  stack: "STOS",
  registers: "REJESTRY",
  text: ".TEXT",
};
const allocationColors = ["#9bcfe2", "#c4dfc0", "#f4c889", "#d2b6dc"];

function InteractiveMemoryFlow({
  config,
  title,
}: {
  config: InteractiveAsset;
  title: string;
}) {
  const arenaSize = config.arena_size ?? 64;
  const allocations = config.allocations ?? [5, 7];
  const symbols = config.symbols ?? [];
  const storageKey = `${config.storage_key ?? "allocator-memory-flow"}-stage`;
  const [stage, setStage] = useState(() =>
    Math.min(allocations.length, Number(localStorage.getItem(storageKey) ?? 0)),
  );
  const [focus, setFocus] = useState(symbols[0]?.id ?? "");
  useEffect(
    () => localStorage.setItem(storageKey, String(stage)),
    [stage, storageKey],
  );
  const used = allocations.slice(0, stage).reduce((sum, size) => sum + size, 0);
  const focused = symbols.find((symbol) => symbol.id === focus) ?? symbols[0];
  const cells = Array.from({ length: arenaSize }, (_, index) => index);
  const allocationIndex = (cell: number) => {
    let end = 0;
    for (let index = 0; index < stage; index += 1) {
      end += allocations[index];
      if (cell < end) return index;
    }
    return -1;
  };
  const stageText =
    stage === 0
      ? "allocator_reset(): allocp = allocbuf"
      : `alloc_local(${allocations[stage - 1]}): allocp = allocbuf + ${used}`;
  const areas = (Object.keys(areaLabels) as InteractiveArea[]).filter((area) =>
    symbols.some((symbol) => symbol.area === area),
  );
  return (
    <div className="memory-react" aria-label={`Interaktywny diagram: ${title}`}>
      <header>
        <div>
          <small>INTERAKTYWNY MODEL PAMIĘCI</small>
          <h3>{title}</h3>
        </div>
        <div className="memory-actions">
          <button aria-pressed={stage === 0} onClick={() => setStage(0)}>
            definicje / reset
          </button>
          {allocations.map((size, index) => (
            <button
              key={`${size}-${index}`}
              aria-pressed={stage === index + 1}
              onClick={() => setStage(index + 1)}
            >
              alloc({size})
            </button>
          ))}
        </div>
      </header>
      <div className="memory-lanes">
        {areas.map((area) => (
          <section className={`memory-lane ${area}`} key={area}>
            <b>{areaLabels[area]}</b>
            {symbols
              .filter((symbol) => symbol.area === area)
              .map((symbol) => (
                <button
                  key={symbol.id}
                  className={focus === symbol.id ? "active" : ""}
                  onClick={() => setFocus(symbol.id)}
                >
                  <code>{symbol.declaration}</code>
                </button>
              ))}
          </section>
        ))}
      </div>
      <div className="arena-wrap">
        <div className="arena-label">
          <code>allocbuf[{arenaSize}]</code>
          <span>
            użyte {used} B / wolne {arenaSize - used} B
          </span>
        </div>
        <div
          className="arena"
          style={
            {
              "--allocp": used,
              "--arena-size": arenaSize,
            } as React.CSSProperties
          }
        >
          {cells.map((cell) => {
            const segment = allocationIndex(cell);
            return (
              <i
                key={cell}
                style={
                  segment >= 0
                    ? {
                        background:
                          allocationColors[segment % allocationColors.length],
                      }
                    : undefined
                }
              />
            );
          })}
          <span className="allocp">allocp ↑ {used}</span>
        </div>
      </div>
      <p className="memory-stage">
        <strong>
          {stage + 1}/{allocations.length + 1}
        </strong>{" "}
        <code>{stageText}</code>
      </p>
      {focused && (
        <aside className="memory-inspector">
          <strong>{focused.id}</strong>
          <code>{focused.declaration}</code>
          <span>{focused.description}</span>
        </aside>
      )}
    </div>
  );
}

function LegacyInteractiveUmlStages({
  config,
  asset,
  progress,
  onSetStatus,
}: {
  config: InteractiveAsset;
  asset: Asset;
  progress: Progress | null;
  onSetStatus: SetProgressStatus;
}) {
  const stages = config.stages ?? [];
  const storageKey = `${config.storage_key ?? asset.label}-uml-stage`;
  const canvasRef = useRef<HTMLDivElement>(null);
  const [svgMarkup, setSvgMarkup] = useState("");
  const [svgFailed, setSvgFailed] = useState(false);
  const [approvalBusy, setApprovalBusy] = useState(false);
  const [stageIndex, setStageIndex] = useState(() =>
    Math.max(
      0,
      Math.min(
        stages.length - 1,
        Number(localStorage.getItem(storageKey) ?? 0),
      ),
    ),
  );
  useEffect(
    () => localStorage.setItem(storageKey, String(stageIndex)),
    [stageIndex, storageKey],
  );
  useEffect(() => {
    let current = true;
    setSvgFailed(false);
    fetch(asset.href, { cache: "no-store" })
      .then((response) => {
        if (!response.ok) throw new Error(`HTTP ${response.status}`);
        return response.text();
      })
      .then((markup) => {
        const document = new DOMParser().parseFromString(
          markup,
          "image/svg+xml",
        );
        const svg = document.documentElement;
        if (svg.nodeName.toLowerCase() !== "svg" || document.querySelector("parsererror")) {
          throw new Error("Niepoprawny SVG");
        }
        document.querySelectorAll("script, foreignObject").forEach((node) => node.remove());
        svg.removeAttribute("width");
        svg.removeAttribute("height");
        svg.setAttribute("preserveAspectRatio", "xMidYMid meet");
        if (current) setSvgMarkup(svg.outerHTML);
      })
      .catch(() => {
        if (current) setSvgFailed(true);
      });
    return () => {
      current = false;
    };
  }, [asset.href]);
  useEffect(() => {
    const svg = canvasRef.current?.querySelector("svg");
    if (!svg) return;

    svg.setAttribute("role", "img");
    svg.setAttribute("aria-label", asset.alt);
    svg
      .querySelectorAll<SVGRectElement>("[data-uml-stage]")
      .forEach((rect) => {
        rect.classList.remove(
          "uml-stage-region",
          "uml-stage-region-bg",
          "uml-stage-region-outline",
          "uml-stage-region-active",
          "uml-stage-region-completed",
        );
        rect.removeAttribute("data-uml-stage");
        rect.removeAttribute("data-uml-stage-label");
        rect.removeAttribute("role");
        rect.removeAttribute("tabindex");
        rect.removeAttribute("aria-label");
      });

    const texts = Array.from(svg.querySelectorAll<SVGTextElement>("text"));
    const rects = Array.from(svg.querySelectorAll<SVGRectElement>("rect"));
    stages.forEach((item, index) => {
      if (!item.svg_label) return;
      const label = texts.find((text) =>
        (text.textContent ?? "").trim().startsWith(item.svg_label!),
      );
      const labelY = Number(label?.getAttribute("y"));
      if (!label || !Number.isFinite(labelY)) return;

      const candidates = rects
        .map((rect) => {
          const y = Number(rect.getAttribute("y"));
          const height = Number(rect.getAttribute("height"));
          const width = Number(rect.getAttribute("width"));
          const style = rect.getAttribute("style") ?? "";
          const strokeWidth = Number(
            style.match(/stroke-width:\s*([\d.]+)/)?.[1] ??
              rect.getAttribute("stroke-width") ??
              0,
          );
          return { rect, y, height, width, strokeWidth, area: width * height };
        })
        .filter(
          ({ y, height, width, strokeWidth }) =>
            Number.isFinite(y) &&
            Number.isFinite(height) &&
            Number.isFinite(width) &&
            strokeWidth >= 2 &&
            y <= labelY &&
            y + height >= labelY,
        )
        .sort((left, right) => left.area - right.area);
      const region = candidates[0];
      if (!region) return;

      const sameRegion = candidates.filter(
        ({ y, height, width }) =>
          Math.abs(y - region.y) < 0.1 &&
          Math.abs(height - region.height) < 0.1 &&
          Math.abs(width - region.width) < 0.1,
      );
      const isCompleted = Boolean(
        item.progress_id &&
          progress?.items?.[item.progress_id]?.status === "approved",
      );
      sameRegion.forEach(({ rect }, duplicateIndex) => {
        const isBackground = rect.getAttribute("fill") !== "none";
        rect.dataset.umlStage = String(index);
        rect.dataset.umlStageLabel = item.label;
        rect.classList.add(
          "uml-stage-region",
          isBackground ? "uml-stage-region-bg" : "uml-stage-region-outline",
        );
        rect.classList.toggle("uml-stage-region-active", index === stageIndex);
        rect.classList.toggle("uml-stage-region-completed", isCompleted);
        if (duplicateIndex === 0) {
          rect.setAttribute("role", "button");
          rect.setAttribute("tabindex", "0");
          rect.setAttribute("aria-label", `Pokaż etap ${item.label}`);
        }
      });
    });
  }, [asset.alt, progress, stageIndex, stages, svgMarkup]);

  const selectStageAtPoint = (clientX: number, clientY: number) => {
    const svg = canvasRef.current?.querySelector("svg");
    if (!svg) return;
    const hit = Array.from(
      svg.querySelectorAll<SVGRectElement>(".uml-stage-region-bg[data-uml-stage]"),
    )
      .filter((rect) => {
        const bounds = rect.getBoundingClientRect();
        return (
          clientX >= bounds.left &&
          clientX <= bounds.right &&
          clientY >= bounds.top &&
          clientY <= bounds.bottom
        );
      })
      .sort((left, right) => {
        const a = left.getBoundingClientRect();
        const b = right.getBoundingClientRect();
        return a.width * a.height - b.width * b.height;
      })[0];
    const next = Number(hit?.dataset.umlStage);
    if (Number.isInteger(next)) setStageIndex(next);
  };

  const handleSvgKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
    if (event.key !== "Enter" && event.key !== " ") return;
    const target = event.target as SVGRectElement;
    const next = Number(target.dataset?.umlStage);
    if (!Number.isInteger(next)) return;
    event.preventDefault();
    setStageIndex(next);
  };
  const stage = stages[stageIndex];
  return (
    <div className="uml-react">
      <header>
        <div>
          <small>KANONICZNY DIAGRAM UML · PLANTUML</small>
          <h3>Reset i dwa przydziały liniowe</h3>
        </div>
        <div className="uml-actions">
          {stages.map((item, index) => (
            <button
              key={item.id}
              aria-pressed={stageIndex === index}
              data-completed={
                item.progress_id &&
                progress?.items?.[item.progress_id]?.status === "approved"
                  ? "true"
                  : "false"
              }
              onClick={() => setStageIndex(index)}
            >
              {item.progress_id &&
                progress?.items?.[item.progress_id]?.status === "approved" && (
                  <span aria-hidden="true">✓ </span>
                )}
              {item.label}
            </button>
          ))}
        </div>
      </header>
      <div
        ref={canvasRef}
        className="uml-canvas"
        onClick={(event) => selectStageAtPoint(event.clientX, event.clientY)}
        onKeyDown={handleSvgKeyDown}
      >
        {svgMarkup ? (
          <div
            className="uml-svg-host"
            // The SVG is a generated, same-origin PlantUML asset; scripts and
            // foreignObject nodes are removed before it reaches the DOM.
            dangerouslySetInnerHTML={{ __html: svgMarkup }}
          />
        ) : (
          <img src={asset.href} alt={asset.alt} />
        )}
        {svgFailed && (
          <span className="uml-inline-warning">
            Widok statyczny — nie udało się wczytać interaktywnego SVG.
          </span>
        )}
      </div>
      {stage && (
        <aside className="uml-stage">
          <strong>{stage.label}</strong>
          <span>{stage.description}</span>
          {stage.code_ref && <code>{stage.code_ref}</code>}
        </aside>
      )}
      {stage?.progress_id && (
        <footer className="uml-approval">
          <span>
            {progress?.items?.[stage.progress_id]?.status === "approved"
              ? "Ten stan jest zatwierdzony i zapisany w JSON-ie zajęć."
              : "Kursor wybiera stan; zatwierdzenie zapisuje go w JSON-ie zajęć."}
          </span>
          <button
            disabled={!progress || approvalBusy}
            onClick={async () => {
              if (!stage.progress_id || !progress) return;
              const completed =
                progress.items?.[stage.progress_id]?.status === "approved";
              setApprovalBusy(true);
              try {
                await onSetStatus(
                  stage.progress_id,
                  completed ? "pending" : "approved",
                );
              } finally {
                setApprovalBusy(false);
              }
            }}
          >
            {approvalBusy
              ? "Zapisywanie…"
              : progress?.items?.[stage.progress_id]?.status === "approved"
                ? "Cofnij zatwierdzenie"
                : "Zatwierdź stan"}
          </button>
        </footer>
      )}
    </div>
  );
}

function SnapshotInteractiveUmlSequence({
  config,
  asset,
  progress,
  onSetStatus,
}: {
  config: InteractiveAsset;
  asset: Asset;
  progress: Progress | null;
  onSetStatus: SetProgressStatus;
}) {
  const phases = config.phases ?? [];
  const entries = phases.flatMap((phase) =>
    phase.steps.map((step) => ({ phase, step })),
  );
  const storageKey = `${config.storage_key ?? asset.label}-uml-step`;
  const focusStorageKey = `${config.storage_key ?? asset.label}-navigation-level`;
  const rootRef = useRef<HTMLDivElement>(null);
  const canvasRef = useRef<HTMLDivElement>(null);
  const handledRevealRevisionRef = useRef(0);
  const activateOnChangeRef = useRef(false);
  const focusOnChangeRef = useRef<NavigationLevel | null>(null);
  const persistOnChangeRef = useRef(true);
  const [svgMarkup, setSvgMarkup] = useState("");
  const [svgFailed, setSvgFailed] = useState(false);
  const [revealRevision, setRevealRevision] = useState(0);
  const [stepIndex, setStepIndex] = useState(() =>
    Math.max(
      0,
      Math.min(
        entries.length - 1,
        Number(localStorage.getItem(storageKey) ?? 0),
      ),
    ),
  );
  const [focusLevel, setFocusLevel] = useState<NavigationLevel>(() => {
    const saved = localStorage.getItem(focusStorageKey);
    return saved === "card" || saved === "task" || saved === "block" || saved === "phase"
      || saved === "step" || saved === "snapshot"
      ? saved
      : "step";
  });

  useEffect(
    () => localStorage.setItem(storageKey, String(stepIndex)),
    [stepIndex, storageKey],
  );
  useEffect(
    () => localStorage.setItem(focusStorageKey, focusLevel),
    [focusLevel, focusStorageKey],
  );
  useEffect(() => {
    let current = true;
    setSvgFailed(false);
    fetch(asset.href, { cache: "no-store" })
      .then((response) => {
        if (!response.ok) throw new Error(`HTTP ${response.status}`);
        return response.text();
      })
      .then((markup) => {
        const document = new DOMParser().parseFromString(
          markup,
          "image/svg+xml",
        );
        const svg = document.documentElement;
        if (
          svg.nodeName.toLowerCase() !== "svg" ||
          document.querySelector("parsererror")
        ) {
          throw new Error("Niepoprawny SVG");
        }
        document
          .querySelectorAll("script, foreignObject")
          .forEach((node) => node.remove());
        svg.removeAttribute("width");
        svg.removeAttribute("height");
        svg.setAttribute("preserveAspectRatio", "xMidYMid meet");
        if (current) setSvgMarkup(svg.outerHTML);
      })
      .catch(() => {
        if (current) setSvgFailed(true);
      });
    return () => {
      current = false;
    };
  }, [asset.href]);

  useEffect(() => {
    const svg = canvasRef.current?.querySelector("svg");
    if (!svg) return;
    svg.setAttribute("role", "img");
    svg.setAttribute("aria-label", asset.alt);
    svg.querySelectorAll(".uml-step-hit").forEach((node) => node.remove());
    svg
      .querySelectorAll<SVGElement>("[data-uml-step-element]")
      .forEach((element) => {
        element.classList.remove(
          "uml-step-element",
          "uml-step-element-active",
          "uml-step-element-completed",
        );
        element.removeAttribute("data-uml-step-element");
      });

    const texts = Array.from(svg.querySelectorAll<SVGTextElement>("text"));
    const lines = Array.from(svg.querySelectorAll<SVGLineElement>("line"));
    const polygons = Array.from(svg.querySelectorAll<SVGPolygonElement>("polygon"));
    const viewBox = svg.viewBox.baseVal;
    const hitX = viewBox?.width ? viewBox.x : 0;
    const hitWidth = viewBox?.width || 1200;

    entries.forEach(({ step }, index) => {
      const svgLabel = step.svg_label ?? String(step.number).padStart(2, "0");
      const numberText = texts.find(
        (text) => (text.textContent ?? "").trim() === svgLabel,
      );
      const labelY = Number(numberText?.getAttribute("y"));
      if (!numberText || !Number.isFinite(labelY)) return;
      const arrowY = labelY + 5;
      const completed = Boolean(
        step.progress_id &&
          progress?.items?.[step.progress_id]?.status === "approved",
      );
      const related: SVGElement[] = texts.filter(
        (text) => Math.abs(Number(text.getAttribute("y")) - labelY) < 0.8,
      );
      related.push(
        ...lines.filter((line) => {
          const y1 = Number(line.getAttribute("y1"));
          const y2 = Number(line.getAttribute("y2"));
          return (
            Number.isFinite(y1) &&
            Number.isFinite(y2) &&
            Math.abs(y1 - y2) < 0.8 &&
            Math.abs((y1 + y2) / 2 - arrowY) <= 14
          );
        }),
      );
      related.push(
        ...polygons.filter((polygon) => {
          const points = (polygon.getAttribute("points") ?? "")
            .trim()
            .split(/\s+/)
            .map((point) => Number(point.split(",")[1]))
            .filter(Number.isFinite);
          if (!points.length) return false;
          const minY = Math.min(...points);
          const maxY = Math.max(...points);
          return maxY - minY <= 16 && Math.abs((minY + maxY) / 2 - arrowY) <= 14;
        }),
      );
      related.forEach((element) => {
        element.dataset.umlStepElement = String(index);
        element.classList.add("uml-step-element");
        element.classList.toggle("uml-step-element-active", index === stepIndex);
        element.classList.toggle("uml-step-element-completed", completed);
      });

      const hit = document.createElementNS("http://www.w3.org/2000/svg", "rect");
      hit.setAttribute("x", String(hitX));
      hit.setAttribute("y", String(labelY - 12));
      hit.setAttribute("width", String(hitWidth));
      hit.setAttribute("height", "31");
      hit.setAttribute("fill", "transparent");
      hit.setAttribute("pointer-events", "all");
      hit.setAttribute("role", "button");
      hit.setAttribute("tabindex", "0");
      hit.setAttribute(
        "aria-label",
        `Pokaż krok ${String(step.number).padStart(2, "0")}: ${step.label}`,
      );
      hit.dataset.umlStep = String(index);
      hit.classList.add("uml-step-hit");
      hit.classList.toggle("uml-step-hit-active", focusLevel !== "card" && index === stepIndex);
      hit.classList.toggle("uml-step-hit-completed", completed);
      svg.appendChild(hit);
    });
  }, [asset.alt, entries, progress, stepIndex, svgMarkup]);

  useEffect(() => {
    if (
      revealRevision === 0
      || handledRevealRevisionRef.current === revealRevision
    ) return;

    let cancelled = false;
    let correctionFrame = 0;
    const reveal = (pass: number) => {
      if (cancelled) return;
      const target = canvasRef.current?.querySelector<SVGRectElement>(
        `.uml-step-hit[data-uml-step="${stepIndex}"]`,
      );
      if (!target) return;
      const chrome = document.querySelector<HTMLElement>(".viewer-chrome");
      if (chrome?.classList.contains("is-nvim-fit")) {
        handledRevealRevisionRef.current = revealRevision;
        return;
      }
      const windowViewport = chromeAwareWindowViewport(target);
      if (!windowViewport) {
        handledRevealRevisionRef.current = revealRevision;
        return;
      }
      const viewport = visibleVerticalViewport(target);
      if (!viewport) {
        const pageMovement = bringTargetSheetIntoWindow(target, windowViewport);
        const fallbackDelta = pageMovement === 0
          ? umlScrolloffDelta(target, windowViewport)
          : 0;
        const fallbackMovement = pageMovement === 0
          ? applyVerticalScrollDelta(target, fallbackDelta)
          : pageMovement;
        if (
          pass < UML_SCROLLOFF_MAX_PASSES - 1
          && Math.abs(fallbackMovement) > UML_SCROLLOFF_EPSILON_PX
        ) {
          correctionFrame = window.requestAnimationFrame(() => reveal(pass + 1));
          return;
        }
        handledRevealRevisionRef.current = revealRevision;
        return;
      }
      const delta = umlScrolloffDelta(target, viewport);
      if (Math.abs(delta) <= UML_SCROLLOFF_EPSILON_PX) {
        handledRevealRevisionRef.current = revealRevision;
        return;
      }
      const applied = applyVerticalScrollDelta(target, delta);
      if (
        pass < UML_SCROLLOFF_MAX_PASSES - 1
        && Math.abs(applied) > UML_SCROLLOFF_EPSILON_PX
      ) {
        correctionFrame = window.requestAnimationFrame(() => reveal(pass + 1));
        return;
      }
      handledRevealRevisionRef.current = revealRevision;
    };
    const frame = window.requestAnimationFrame(() => reveal(0));
    return () => {
      cancelled = true;
      window.cancelAnimationFrame(frame);
      window.cancelAnimationFrame(correctionFrame);
    };
  }, [revealRevision, stepIndex, svgMarkup]);

  const publishEntry = (
    entry: { phase: UmlSequencePhase; step: UmlSequenceStep },
    activate: boolean,
    level: NavigationLevel = focusLevel,
    persist = true,
  ) => {
    const detail: ActiveNvimStep = {
      task: config.task ?? null,
      block: config.block ?? null,
      phase: { id: entry.phase.id, label: entry.phase.label },
      step: entry.step,
      focusLevel: level,
      activate: activate && document.documentElement.dataset.nvimSyncMode === "on",
    };
    const dispatch = () => {
      window.dispatchEvent(new CustomEvent<ActiveNvimStep>("stem:nvim-step", { detail }));
    };
    if (!persist) {
      dispatch();
      return;
    }
    const save = fetch("/api/navigation/current", {
      method: "PUT",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({
        task: detail.task,
        block: detail.block,
        phase: detail.phase,
        step: {
          id: detail.step.id,
          number: detail.step.number,
          label: detail.step.label,
        },
        snapshot_ref: detail.step.snapshot_ref ?? null,
        focus_level: detail.focusLevel,
        sync_requested: Boolean(detail.activate),
        actor: document.documentElement.dataset.cardClientId ?? "browser",
      }),
    });
    if (detail.activate) {
      // Activation must be audited against the newly selected step. In a static
      // export the request fails, but the local interactive model still works.
      void save.then(dispatch, dispatch);
    } else {
      dispatch();
      void save.catch(() => undefined);
    }
  };
  const selectIndex = (
    next: number,
    activate = false,
    level: NavigationLevel = focusLevel,
    persist = true,
  ) => {
    const bounded = Math.max(0, Math.min(entries.length - 1, next));
    const entry = entries[bounded];
    if (!entry) return;
    setFocusLevel(level);
    if (bounded === stepIndex) {
      publishEntry(entry, activate, level, persist);
      return;
    }
    setRevealRevision(current => current + 1);
    activateOnChangeRef.current = activate;
    focusOnChangeRef.current = level;
    persistOnChangeRef.current = persist;
    setStepIndex(bounded);
  };
  const selectStepAtPoint = (clientX: number, clientY: number) => {
    const hits = Array.from(
      canvasRef.current?.querySelectorAll<SVGRectElement>(
        ".uml-step-hit[data-uml-step]",
      ) ?? [],
    )
      .filter((hit) => {
        const bounds = hit.getBoundingClientRect();
        return (
          clientX >= bounds.left &&
          clientX <= bounds.right &&
          clientY >= bounds.top &&
          clientY <= bounds.bottom
        );
      })
      .sort((left, right) => {
        const a = left.getBoundingClientRect();
        const b = right.getBoundingClientRect();
        return (
          Math.abs(clientY - (a.top + a.bottom) / 2) -
          Math.abs(clientY - (b.top + b.bottom) / 2)
        );
      });
    const next = Number(hits[0]?.dataset.umlStep);
    if (Number.isInteger(next)) selectIndex(next, false, "step");
  };
  const handleSvgKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
    if (event.key !== "Enter" && event.key !== " ") return;
    const target = event.target as SVGRectElement;
    const next = Number(target.dataset?.umlStep);
    if (!Number.isInteger(next)) return;
    event.preventDefault();
    selectIndex(next, event.key === "Enter", "step");
  };
  const selectPhase = (phase: UmlSequencePhase) => {
    const next = entries.findIndex((entry) => entry.phase.id === phase.id);
    if (next >= 0) selectIndex(next, false, "phase");
  };

  const active = entries[stepIndex];
  useEffect(() => {
    if (!active) return;
    publishEntry(
      active,
      activateOnChangeRef.current,
      focusOnChangeRef.current ?? focusLevel,
      persistOnChangeRef.current,
    );
    activateOnChangeRef.current = false;
    focusOnChangeRef.current = null;
    persistOnChangeRef.current = true;
  }, [active?.phase.id, active?.step.id, config.block]);

  useEffect(() => {
    const applyCommand = (event: Event) => {
      const command = (event as CustomEvent<ApiNavigation>).detail;
      if (!command) return;
      if (config.task?.id && command.task.id !== config.task.id) return;
      if (config.block?.id && command.block.id !== config.block.id) return;
      const next = entries.findIndex(entry =>
        entry.phase.id === command.phase.id && entry.step.id === command.step.id,
      );
      if (next < 0) return;
      // Remote navigation only moves the teaching cursor. The producer that
      // requested a replay owns it; reflecting state must never replay twice.
      selectIndex(next, false, command.focus_level, false);
    };
    window.addEventListener("stem:navigation-command", applyCommand);
    return () => window.removeEventListener("stem:navigation-command", applyCommand);
  }, [config.block?.id, config.task?.id, entries, focusLevel, stepIndex]);

  useEffect(() => {
    const navigate = (event: KeyboardEvent) => {
      if (event.metaKey) return;
      const target = event.target as HTMLElement | null;
      if (target?.closest("input, textarea, select, [contenteditable='true']")) return;
      const root = rootRef.current;
      if (!root) return;
      const diagrams = Array.from(
        document.querySelectorAll<HTMLElement>("[data-stem-nav='uml-block']"),
      );
      const viewportCenter = window.innerHeight / 2;
      const nearest = diagrams.sort((left, right) => {
        const a = left.getBoundingClientRect();
        const b = right.getBoundingClientRect();
        return Math.abs((a.top + a.bottom) / 2 - viewportCenter)
          - Math.abs((b.top + b.bottom) / 2 - viewportCenter);
      })[0];
      if (nearest !== root) return;

      if (event.key === "Enter" && event.ctrlKey && !event.altKey && !event.shiftKey) {
        if (!active?.step.progress_id || !progress) return;
        event.preventDefault();
        event.stopPropagation();
        const approved = progress.items?.[active.step.progress_id]?.status === "approved";
        void onSetStatus(active.step.progress_id, approved ? "pending" : "approved");
        return;
      }

      if (event.key === "Enter" && !event.altKey && !event.shiftKey) {
        if (!active) return;
        event.preventDefault();
        event.stopPropagation();
        publishEntry(active, true, focusLevel);
        return;
      }

      const hierarchy: NavigationLevel[] = ["card", "task", "block", "phase", "step", "snapshot"];
      if ((event.key === "ArrowLeft" || event.key === "ArrowRight" || event.key === "Escape")
        && !event.altKey && !event.ctrlKey && !event.shiftKey) {
        const direction = event.key === "ArrowRight" ? 1 : -1;
        const nextLevel = hierarchy[Math.max(
          0,
          Math.min(hierarchy.length - 1, hierarchy.indexOf(focusLevel) + direction),
        )];
        event.preventDefault();
        event.stopPropagation();
        setFocusLevel(nextLevel);
        if (active) publishEntry(active, false, nextLevel);
        return;
      }

      if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
      if (focusLevel === "card" && !event.altKey && !event.ctrlKey && !event.shiftKey) return;
      const direction = event.key === "ArrowUp" ? -1 : 1;
      let level: NavigationLevel = focusLevel;
      if (event.altKey && event.shiftKey && !event.ctrlKey) level = "snapshot";
      else if (event.ctrlKey && event.shiftKey && !event.altKey) level = "step";
      else if (event.altKey && !event.ctrlKey && !event.shiftKey) level = "task";
      else if (event.ctrlKey && !event.altKey && !event.shiftKey) level = "block";
      else if (event.shiftKey && !event.altKey && !event.ctrlKey) level = "phase";
      else if (event.altKey || event.ctrlKey || event.shiftKey) return;
      event.preventDefault();
      event.stopPropagation();
      void fetch("/api/navigation/move", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({
          level,
          delta: direction,
          sync_requested: false,
          actor: document.documentElement.dataset.cardClientId ?? "browser",
        }),
      })
        .then(response => response.ok ? response.json() : Promise.reject(new Error(`HTTP ${response.status}`)))
        .then(payload => {
          if (payload.current) {
            window.dispatchEvent(new CustomEvent<ApiNavigation>("stem:navigation-command", {
              detail: payload.current,
            }));
          }
        })
        .catch(() => undefined);
    };
    window.addEventListener("keydown", navigate);
    return () => window.removeEventListener("keydown", navigate);
  }, [active, entries, focusLevel, onSetStatus, progress]);
  if (!active) return null;
  const { phase, step } = active;
  const phaseEntries = entries.filter((entry) => entry.phase.id === phase.id);

  return (
    <div
      ref={rootRef}
      className="uml-react uml-snapshot-react"
      data-stem-nav="uml-block"
      data-task-id={config.task?.id}
      data-block-id={config.block?.id}
      data-navigation-level={focusLevel}
    >
      <header className="uml-snapshot-header">
        <div>
          <small>BLOCK · {config.block?.label ?? "PRZEPŁYW UML"}</small>
          <h3>{config.title ?? config.block?.label ?? asset.caption}</h3>
          {config.block?.description && <p>{config.block.description}</p>}
        </div>
        <div className="uml-phase-actions" aria-label="Fazy diagramu">
          {phases.map((item) => (
            <button
              key={item.id}
              aria-pressed={phase.id === item.id}
              onClick={() => selectPhase(item)}
            >
              {item.label}
            </button>
          ))}
        </div>
      </header>
      <div className="uml-step-actions" aria-label={`Kroki fazy ${phase.label}`}>
        <span>{phase.label}</span>
        {phaseEntries.map((entry) => {
          const index = entries.indexOf(entry);
          const isDone = Boolean(
            entry.step.progress_id &&
              progress?.items?.[entry.step.progress_id]?.status === "approved",
          );
          return (
            <button
              key={entry.step.id}
              aria-label={`Krok ${entry.step.number}: ${entry.step.label}`}
              aria-pressed={focusLevel !== "card" && index === stepIndex}
              data-completed={isDone ? "true" : "false"}
              onClick={() => selectIndex(index)}
            >
              {String(entry.step.number).padStart(2, "0")}
            </button>
          );
        })}
      </div>
      <div className="uml-snapshot-layout">
        <div
          ref={canvasRef}
          className="uml-canvas uml-step-canvas"
          onClick={(event) => selectStepAtPoint(event.clientX, event.clientY)}
          onKeyDown={handleSvgKeyDown}
        >
          {svgMarkup ? (
            <div
              className="uml-svg-host"
              dangerouslySetInnerHTML={{ __html: svgMarkup }}
            />
          ) : (
            <img src={asset.href} alt={asset.alt} />
          )}
          {svgFailed && (
            <span className="uml-inline-warning">
              Widok statyczny — wybierz krok przyciskiem nad diagramem.
            </span>
          )}
        </div>
      </div>
    </div>
  );
}

function InteractiveUmlSequence(props: {
  config: InteractiveAsset;
  asset: Asset;
  progress: Progress | null;
  onSetStatus: SetProgressStatus;
}) {
  return props.config.phases?.length ? (
    <SnapshotInteractiveUmlSequence {...props} />
  ) : (
    <LegacyInteractiveUmlStages {...props} />
  );
}

function AssetFigure({
  asset,
  number,
  progress,
  onSetStatus,
}: {
  asset: Asset;
  number: number;
  progress: Progress | null;
  onSetStatus: SetProgressStatus;
}) {
  const interactiveKind = asset.interactive?.kind;
  const isInteractive = Boolean(interactiveKind);
  return (
    <figure
      className={`card-asset asset-${asset.kind} ${isInteractive ? "asset-interactive" : ""}`}
      id={asset.label.replace(":", "-")}
    >
      {interactiveKind === "uml-sequence" ? (
        <InteractiveUmlSequence
          config={asset.interactive!}
          asset={asset}
          progress={progress}
          onSetStatus={onSetStatus}
        />
      ) : interactiveKind === "allocator-memory-flow" ? (
        <>
          <InteractiveMemoryFlow
            config={asset.interactive!}
            title={asset.caption}
          />
          <img
            className="asset-static-fallback"
            src={asset.href}
            alt={asset.alt}
          />
        </>
      ) : (
        <a href={asset.href} target="_blank" rel="noopener">
          <img
            src={asset.href}
            alt={asset.alt}
            loading="lazy"
            style={{ width: `${asset.width * 100}%` }}
          />
        </a>
      )}
      {asset.source_href && (
        <a
          className="asset-source-link"
          href={asset.source_href}
          target="_blank"
          rel="noopener"
        >
          Źródło PlantUML
        </a>
      )}
      <figcaption>
        Rys. {number}. {asset.caption}
      </figcaption>
    </figure>
  );
}

function StepMap({
  steps,
  progress,
  onCycle,
}: {
  steps: Section["steps"];
  progress: Progress | null;
  onCycle: (id: string, status: Status) => void;
}) {
  if (!steps.length) return null;
  const labels: Record<Status, string> = {
    pending: "○ niezatwierdzony",
    approved: "● zatwierdzony",
  };
  return (
    <div className="step-map">
      {steps.map((step) => {
        const status: Status =
          progress?.items?.[step.id]?.status ?? "pending";
        return (
          <div
            className={`step-row ${status === "approved" ? "lesson-progress-completed" : ""}`}
            key={step.id}
          >
            <button
              className="lesson-progress-control"
              data-status={status}
              onClick={() => onCycle(step.id, status)}
              disabled={!progress}
            >
              {labels[status]}
            </button>
            <span className="step-title">{step.title}</span>
          </div>
        );
      })}
    </div>
  );
}

function SectionPage({
  section,
  progress,
  onCycle,
  onSetStatus,
  figureOffset,
}: {
  section: Section;
  progress: Progress | null;
  onCycle: (id: string, status: Status) => void;
  onSetStatus: SetProgressStatus;
  figureOffset: number;
}) {
  return (
    <Sheet
      header={section.header_html}
      left={section.left_margin_html}
      right={section.right_margin_html}
      className="section-sheet"
    >
      <div id={section.id} className="section-anchor" />
      {section.show_heading && (
        <h2 className="section-heading">
          <span className="section-index">{section.index}</span>
          <span className="section-title">{section.title}</span>
        </h2>
      )}
      <StepMap steps={section.steps} progress={progress} onCycle={onCycle} />
      {section.content_html && <Html html={section.content_html} />}
      <div className="tasks">
        {section.tasks.map((task) => (
          <TaskFlow key={task.ref} task={task} />
        ))}
      </div>
      {section.assets.map((asset, index) => (
        <AssetFigure
          key={asset.label}
          asset={asset}
          number={figureOffset + index + 1}
          progress={progress}
          onSetStatus={onSetStatus}
        />
      ))}
      {section.tasks.map(
        (task) =>
          task.conclusion_html && (
            <aside className="task-conclusion" key={`${task.ref}-conclusion`}>
              <strong>WNIOSEK</strong>
              <Html html={task.conclusion_html} />
            </aside>
          ),
      )}
    </Sheet>
  );
}

function ProgressDock({
  progress,
  error,
}: {
  progress: Progress | null;
  error: string;
}) {
  if (!progress?.summary && !error) return null;
  const counts = progress?.summary.counts;
  return (
    <aside className="lesson-progress-dock">
      <strong>Przebieg zajęć</strong>
      {counts && (
        <p>
          Zatwierdzone: {counts.approved}/{progress!.summary.total}
        </p>
      )}
      {error && <p className="lesson-progress-error">{error}</p>}
      <a href="/api/report/teams.md" target="_blank" rel="noopener">
        Otwórz raport do Teams
      </a>
      <br />
      <a href="/api/report/lesson.html" target="_blank" rel="noopener">
        Otwórz ślad lekcji ze zrzutami
      </a>
    </aside>
  );
}

function ShortcutHelp({ open, onClose }: { open: boolean; onClose: () => void }) {
  if (!open) return null;
  const rows = [
    ["Alt + ↑ / ↓", "poprzedni / następny TASK"],
    ["Ctrl + ↑ / ↓", "poprzedni / następny BLOCK"],
    ["Shift + ↑ / ↓", "poprzednia / następna PHASE"],
    ["Ctrl + Shift + ↑ / ↓", "poprzedni / następny STEP"],
    ["Alt + Shift + ↑ / ↓", "poprzedni / następny unikalny SNAPSHOT"],
    ["↑ / ↓", "poprzedni / następny element aktywnego poziomu"],
    ["→", "zejdź poziom niżej"],
    ["← / Esc", "wróć poziom wyżej"],
    ["Enter", "wybierz element; przy SYNC ON odtwórz stan"],
    ["F1", "reset aktualnego celu Neovima/kontenera"],
    ["F2", "synchronizuj cel z kursorem drzewa UML"],
    ["Ctrl + `", "maksymalizuj pane, dopasuj siatkę i odśwież Neovima"],
    ["Ctrl + Enter", "zatwierdź lub cofnij zatwierdzenie kroku"],
    ["Alt + 1", "pokaż lub ukryj panel Neovima"],
    ["Alt + 2", "przełącz SYNC OFF / SYNC ON"],
    ["Alt + 3", "uzbrój lub rozbrój sterowanie Neovimem"],
    ["Alt + 4", "wysoki panel 90% / zapisana wysokość normalna"],
    ["Alt + 5", "dopasuj cały ekran Neovima; wyłącz ręczny suwak"],
    ["Alt + 6", "przypnij lub ukryj model alokatora"],
    ["Alt + 3, potem najedź", "przekaż klawiaturę i mysz do aktywnej sesji"],
    ["Alt + W", "prefiks poleceń okien Neovima (<C-W>)"],
    ["Alt + strzałka", "przejdź do sąsiedniego okna Neovima"],
    ["F12", "pokaż lub ukryj ten skorowidz"],
  ];
  return (
    <div className="shortcut-help-backdrop" role="presentation" onMouseDown={onClose}>
      <section
        className="shortcut-help"
        role="dialog"
        aria-modal="true"
        aria-labelledby="shortcut-help-title"
        onMouseDown={event => event.stopPropagation()}
      >
        <header>
          <div>
            <small>F12 · NAWIGACJA DYDAKTYCZNA</small>
            <h2 id="shortcut-help-title">CARD → TASK → BLOCK → PHASE → STEP → SNAPSHOT</h2>
          </div>
          <button onClick={onClose} aria-label="Zamknij skorowidz">×</button>
        </header>
        <dl>
          {rows.map(([keys, description]) => (
            <div key={keys}>
              <dt><kbd>{keys}</kbd></dt>
              <dd>{description}</dd>
            </div>
          ))}
        </dl>
        <p>
          Przy SYNC ON wybór stepu odtwarza i weryfikuje przypięty stan maszyny.
          SYNC OFF nie resetuje debuggera. Po najechaniu panel przekazuje do
          Neovima wyłącznie kontrolowane zdarzenia klawiatury i myszy, więc można
          normalnie kontynuować debugowanie.
        </p>
      </section>
    </div>
  );
}

function App({ model }: { model: CardModel }) {
  const viewerChromeRef = useRef<HTMLDivElement>(null);
  const clientIdRef = useRef(
    `browser-${globalThis.crypto?.randomUUID?.() ?? Math.random().toString(36).slice(2)}`,
  );
  const viewerRevisionRef = useRef(0);
  const navigationRevisionRef = useRef(0);
  const applyingRemoteScrollRef = useRef(false);
  const pendingRemoteNavigationReportRef = useRef(false);
  const remoteScrollFrameRef = useRef(0);
  const remoteScrollTokenRef = useRef(0);
  const shortcutStatusTimerRef = useRef(0);
  const [scale, setScaleState] = useState(2.18);
  const [nvimVisible, setNvimVisibleState] = useState(
    () => localStorage.getItem("stem-card-nvim-visible") !== "false",
  );
  const [nvimSyncMode, setNvimSyncModeState] = useState(
    () => localStorage.getItem("stem-card-nvim-sync-mode") === "true",
  );
  const [nvimControlMode, setNvimControlModeState] = useState(
    () => localStorage.getItem("stem-card-nvim-sync-mode") === "true"
      && localStorage.getItem("stem-card-nvim-control-mode") === "true",
  );
  const [nvimExpanded, setNvimExpandedState] = useState(false);
  const [nvimFit, setNvimFitState] = useState(false);
  const [allocatorVisible, setAllocatorVisibleState] = useState(
    () => localStorage.getItem("stem-card-allocator-visible") !== "false",
  );
  const [nvimSummary, setNvimSummary] = useState<NvimPanelSummary>({
    state: "hidden",
    syncMode: false,
    syncReady: false,
    controlMode: false,
    controlEnabled: false,
  });
  const [progress, setProgress] = useState<Progress | null>(null);
  const [progressError, setProgressError] = useState("");
  const [shortcutsOpen, setShortcutsOpen] = useState(false);
  const [shortcutStatus, setShortcutStatus] = useState("");
  const showShortcutStatus = useCallback((message: string) => {
    window.clearTimeout(shortcutStatusTimerRef.current);
    setShortcutStatus(message);
    shortcutStatusTimerRef.current = window.setTimeout(() => setShortcutStatus(""), 4200);
  }, []);
  const runWebFunctionKey = useCallback(async (key: "F1" | "F2") => {
    showShortcutStatus(`${key} · wykonywanie…`);
    try {
      const endpoint = key === "F1" ? "/api/nvim/reset" : "/api/navigation/sync";
      const response = await fetch(endpoint, {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ actor: clientIdRef.current }),
      });
      const payload = await response.json().catch(() => ({}));
      if (!response.ok) throw new Error(payload.message ?? payload.error ?? `HTTP ${response.status}`);
      if (key === "F2" && payload.current) {
        navigationRevisionRef.current = Math.max(
          navigationRevisionRef.current,
          Number(payload.current.revision ?? 0),
        );
        window.dispatchEvent(new CustomEvent<ApiNavigation>("stem:navigation-command", {
          detail: payload.current,
        }));
        showShortcutStatus(
          `F2 · ${String(payload.current.step.number).padStart(2, "0")} ${payload.current.step.label} · READY`,
        );
      } else {
        showShortcutStatus("F1 · reset przyjęty");
      }
      window.setTimeout(() => window.dispatchEvent(new Event("stem:nvim-refresh")), 120);
    } catch (error) {
      showShortcutStatus(`${key} · ${error instanceof Error ? error.message : String(error)}`);
    }
  }, [showShortcutStatus]);
  const runWebRedraw = useCallback(async () => {
    showShortcutStatus("Ctrl+` · przeliczanie widoku…");
    try {
      const response = await fetch("/api/nvim/redraw", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ actor: clientIdRef.current }),
      });
      const payload = await response.json().catch(() => ({}));
      if (!response.ok) throw new Error(payload.message ?? payload.error ?? `HTTP ${response.status}`);
      const grid = payload.external_ui?.grid;
      const dimensions = grid ? ` · ${grid.width}×${grid.height}` : "";
      showShortcutStatus(`Ctrl+\` · widok odświeżony${dimensions}`);
      window.dispatchEvent(new Event("stem:nvim-refresh"));
    } catch (error) {
      showShortcutStatus(`Ctrl+\` · ${error instanceof Error ? error.message : String(error)}`);
    }
  }, [showShortcutStatus]);
  const publishViewer = useCallback(async (viewer: Record<string, unknown>) => {
    try {
      const response = await fetch("/api/viewer/state", {
        method: "PUT",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ actor: clientIdRef.current, viewer }),
      });
      if (!response.ok) return;
      const payload = await response.json();
      viewerRevisionRef.current = Math.max(
        viewerRevisionRef.current,
        Number(payload.viewer?.revision ?? 0),
      );
    } catch {
      // Statyczny HTML pozostaje użyteczny bez lokalnego API sterowania.
    }
  }, []);
  const setScale = (value: number) => {
    const next = Math.max(0.25, Math.min(3, value));
    setScaleState(next);
    void publishViewer({ scale: next });
  };
  useEffect(() => {
    document.documentElement.style.setProperty(
      "--viewer-canvas-scale",
      scale.toFixed(3),
    );
  }, [scale]);
  useEffect(() => {
    document.documentElement.dataset.nvimSyncMode = nvimSyncMode ? "on" : "off";
  }, [nvimSyncMode]);
  useEffect(() => {
    document.documentElement.dataset.cardClientId = clientIdRef.current;
  }, []);
  const setNvimVisible = (value: boolean) => {
    setNvimVisibleState(value);
    if (!value) {
      setNvimExpandedState(false);
      setNvimFitState(false);
    }
    localStorage.setItem("stem-card-nvim-visible", String(value));
    void publishViewer({
      nvim: {
        visible: value,
        ...(value ? {} : { expanded: false, fit: false }),
      },
    });
  };
  const setNvimControlMode = (value: boolean) => {
    const next = value && nvimSyncMode;
    setNvimControlModeState(next);
    localStorage.setItem("stem-card-nvim-control-mode", String(next));
    void publishViewer({ nvim: { control: next } });
  };
  const setNvimSyncMode = (value: boolean) => {
    setNvimSyncModeState(value);
    localStorage.setItem("stem-card-nvim-sync-mode", String(value));
    if (!value) {
      setNvimControlModeState(false);
      localStorage.setItem("stem-card-nvim-control-mode", "false");
    }
    void publishViewer({ nvim: { sync: value, control: value ? nvimControlMode : false } });
  };
  const setNvimExpanded = (value: boolean) => {
    if (value) setNvimVisible(true);
    if (value) setNvimFitState(false);
    setNvimExpandedState(value);
    void publishViewer({ nvim: { visible: value || nvimVisible, expanded: value, fit: false } });
  };
  const setNvimFit = (value: boolean) => {
    if (value) {
      setNvimVisible(true);
      setNvimExpandedState(false);
    }
    setNvimFitState(value);
    void publishViewer({ nvim: { visible: value || nvimVisible, fit: value, expanded: false } });
  };
  const setAllocatorVisible = (value: boolean) => {
    setAllocatorVisibleState(value);
    localStorage.setItem("stem-card-allocator-visible", String(value));
    void publishViewer({ allocator: { visible: value } });
  };
  useEffect(() => {
    let second = 0;
    const first = window.requestAnimationFrame(() => {
      second = window.requestAnimationFrame(() => {
        window.dispatchEvent(new Event("stem:nvim-refresh"));
      });
    });
    return () => {
      window.cancelAnimationFrame(first);
      window.cancelAnimationFrame(second);
    };
  }, [nvimExpanded, nvimFit]);
  useEffect(() => {
    fetch("/api/progress")
      .then((response) =>
        response.ok
          ? response.json()
          : Promise.reject(new Error(`HTTP ${response.status}`)),
      )
      .then((data) => setProgress(data.progress))
      .catch((error) =>
        setProgressError(
          `Postęp działa tylko przez serwer karty (${error.message}).`,
        ),
      );
  }, []);
  useEffect(() => {
    let cancelled = false;
    let initialised = false;
    const initialViewer = {
      scale,
      viewport: { width: window.innerWidth, height: window.innerHeight },
      nvim: {
        visible: nvimVisible,
        sync: nvimSyncMode,
        control: nvimControlMode,
        expanded: nvimExpanded,
        fit: nvimFit,
      },
      allocator: { visible: allocatorVisible },
    };
    const applyViewer = (viewer: ApiViewerState) => {
      const fit = viewer.nvim.visible && viewer.nvim.fit;
      const expanded = viewer.nvim.visible && !fit && viewer.nvim.expanded;
      setScaleState(Math.max(0.25, Math.min(3, viewer.scale)));
      setNvimVisibleState(viewer.nvim.visible);
      setNvimSyncModeState(viewer.nvim.sync);
      setNvimControlModeState(viewer.nvim.sync && viewer.nvim.control);
      setNvimExpandedState(expanded);
      setNvimFitState(fit);
      const allocator = viewer.allocator?.visible ?? true;
      setAllocatorVisibleState(allocator);
      localStorage.setItem("stem-card-nvim-visible", String(viewer.nvim.visible));
      localStorage.setItem("stem-card-nvim-sync-mode", String(viewer.nvim.sync));
      localStorage.setItem(
        "stem-card-nvim-control-mode",
        String(viewer.nvim.sync && viewer.nvim.control),
      );
      localStorage.setItem("stem-card-allocator-visible", String(allocator));
      const token = ++remoteScrollTokenRef.current;
      applyingRemoteScrollRef.current = true;
      window.cancelAnimationFrame(remoteScrollFrameRef.current);
      remoteScrollFrameRef.current = window.requestAnimationFrame(() => {
        if (token !== remoteScrollTokenRef.current) return;
        const root = documentScroller();
        setScrollPositionInstant(root, {
          left: viewer.scroll.x,
          top: viewer.scroll.y,
        });

        const sheets = Array.from(
          document.querySelectorAll<HTMLElement>(".paper > .sheet"),
        );
        const sheet = sheets[Math.max(
          0,
          Math.min(sheets.length - 1, viewer.scroll.page_index),
        )];
        const sheetContent = sheet?.querySelector<HTMLElement>(".sheet-content");
        if (
          sheetContent
          && Number.isFinite(viewer.scroll.sheet_scroll_top)
        ) {
          setScrollPositionInstant(sheetContent, {
            top: viewer.scroll.sheet_scroll_top ?? 0,
          });
        }
        remoteScrollFrameRef.current = window.requestAnimationFrame(() => {
          if (token === remoteScrollTokenRef.current) {
            applyingRemoteScrollRef.current = false;
            if (pendingRemoteNavigationReportRef.current) {
              pendingRemoteNavigationReportRef.current = false;
              window.dispatchEvent(new Event("stem:viewer-scroll-settled"));
            }
          }
        });
      });
    };
    const poll = async () => {
      try {
        const response = await fetch("/api/control/state", { cache: "no-store" });
        if (!response.ok || cancelled) return;
        const payload = await response.json();
        const viewer = payload.viewer as ApiViewerState;
        if (!initialised) {
          initialised = true;
          if (Number(viewer?.revision ?? 0) === 0) void publishViewer(initialViewer);
        }
        if (viewer && viewer.revision > viewerRevisionRef.current) {
          viewerRevisionRef.current = viewer.revision;
          if (viewer.actor !== clientIdRef.current) applyViewer(viewer);
        }
        const navigation = payload.navigation as ApiNavigation | null;
        if (navigation && navigation.revision > navigationRevisionRef.current) {
          navigationRevisionRef.current = navigation.revision;
          if (navigation.actor !== clientIdRef.current) {
            if (applyingRemoteScrollRef.current) {
              pendingRemoteNavigationReportRef.current = true;
            }
            window.dispatchEvent(new CustomEvent<ApiNavigation>("stem:navigation-command", {
              detail: navigation,
            }));
          }
        }
      } catch {
        // Tryb statyczny nie ma API; lokalne skróty nadal pozostają dostępne.
      }
    };
    void poll();
    const timer = window.setInterval(poll, 300);
    return () => {
      cancelled = true;
      window.clearInterval(timer);
      remoteScrollTokenRef.current += 1;
      window.cancelAnimationFrame(remoteScrollFrameRef.current);
      applyingRemoteScrollRef.current = false;
      pendingRemoteNavigationReportRef.current = false;
    };
  }, []);
  useEffect(() => {
    void publishViewer({
      nvim: {
        connection: nvimSummary.state,
        screen_cursor: nvimSummary.screenCursor,
        grid: nvimSummary.grid,
      },
    });
  }, [nvimSummary.grid?.columns, nvimSummary.grid?.rows, nvimSummary.screenCursor?.column, nvimSummary.screenCursor?.row, nvimSummary.state, publishViewer]);
  useEffect(() => {
    let timer = 0;
    let pendingSheetContent: HTMLElement | null = null;
    const sheets = Array.from(
      document.querySelectorAll<HTMLElement>(".paper > .sheet"),
    );
    const sheetContents = sheets
      .map(sheet => sheet.querySelector<HTMLElement>(".sheet-content"))
      .filter((sheet): sheet is HTMLElement => Boolean(sheet));
    const report = (event?: Event) => {
      if (applyingRemoteScrollRef.current) return;
      const source = event?.currentTarget;
      if (source instanceof HTMLElement && source.classList.contains("sheet-content")) {
        pendingSheetContent = source;
      }
      window.clearTimeout(timer);
      timer = window.setTimeout(() => {
        const sourceSheet = pendingSheetContent?.closest<HTMLElement>(".sheet");
        const sourceIndex = sourceSheet ? sheets.indexOf(sourceSheet) : -1;
        const pageIndex = sourceIndex >= 0
          ? sourceIndex
          : sheets.reduce((best, sheet, index) => {
              const bounds = sheet.getBoundingClientRect();
              const distance = Math.abs(
                (bounds.top + bounds.bottom) / 2 - window.innerHeight / 2,
              );
              return distance < best.distance ? { index, distance } : best;
            }, { index: 0, distance: Number.POSITIVE_INFINITY }).index;
        const sheetContent = sourceIndex >= 0
          ? pendingSheetContent
          : sheets[pageIndex]?.querySelector<HTMLElement>(".sheet-content") ?? null;
        void publishViewer({
          scroll: {
            x: window.scrollX,
            y: window.scrollY,
            page_index: pageIndex,
            sheet_scroll_top: sheetContent?.scrollTop ?? 0,
          },
          viewport: { width: window.innerWidth, height: window.innerHeight },
        });
        pendingSheetContent = null;
      }, 120);
    };
    window.addEventListener("scroll", report, { passive: true });
    window.addEventListener("resize", report);
    window.addEventListener("stem:viewer-scroll-settled", report);
    sheetContents.forEach(sheet => sheet.addEventListener("scroll", report, { passive: true }));
    report();
    return () => {
      window.clearTimeout(timer);
      window.removeEventListener("scroll", report);
      window.removeEventListener("resize", report);
      window.removeEventListener("stem:viewer-scroll-settled", report);
      sheetContents.forEach(sheet => sheet.removeEventListener("scroll", report));
    };
  }, [publishViewer]);
  useEffect(() => {
    const navigate = (event: KeyboardEvent) => {
      if (event.repeat) return;
      const browserCommand = event.altKey && !event.ctrlKey && !event.metaKey
        ? event.code
        : "";
      if (browserCommand === "Digit1") {
        event.preventDefault();
        event.stopImmediatePropagation();
        setNvimVisible(!nvimVisible);
        return;
      }
      if (browserCommand === "Digit2") {
        event.preventDefault();
        event.stopImmediatePropagation();
        setNvimSyncMode(!nvimSyncMode);
        return;
      }
      if (browserCommand === "Digit3") {
        event.preventDefault();
        event.stopImmediatePropagation();
        if (!nvimSyncMode) return;
        setNvimVisible(true);
        setNvimControlMode(!nvimControlMode);
        return;
      }
      if (browserCommand === "Digit4") {
        event.preventDefault();
        event.stopImmediatePropagation();
        setNvimExpanded(!nvimExpanded);
        return;
      }
      if (browserCommand === "Digit5") {
        event.preventDefault();
        event.stopImmediatePropagation();
        setNvimFit(!nvimFit);
        return;
      }
      if (browserCommand === "Digit6") {
        event.preventDefault();
        event.stopImmediatePropagation();
        setAllocatorVisible(!allocatorVisible);
        return;
      }
      if ((event.key === "F1" || event.key === "F2")
        && !event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey) {
        event.preventDefault();
        event.stopImmediatePropagation();
        void runWebFunctionKey(event.key);
        return;
      }
      if (event.ctrlKey && !event.altKey && !event.metaKey && !event.shiftKey
        && (event.code === "Backquote" || event.key === "`")) {
        event.preventDefault();
        event.stopImmediatePropagation();
        void runWebRedraw();
        return;
      }
      if (event.key === "F12") {
        event.preventDefault();
        event.stopImmediatePropagation();
        setShortcutsOpen(current => !current);
        return;
      }
      if (event.key === "Escape" && shortcutsOpen) {
        event.preventDefault();
        setShortcutsOpen(false);
        return;
      }
    };
    window.addEventListener("keydown", navigate, true);
    return () => window.removeEventListener("keydown", navigate, true);
  }, [allocatorVisible, nvimControlMode, nvimExpanded, nvimFit, nvimSyncMode, nvimVisible, runWebFunctionKey, runWebRedraw, shortcutsOpen]);
  useEffect(() => () => window.clearTimeout(shortcutStatusTimerRef.current), []);
  useEffect(() => {
    const wheel = (event: WheelEvent) => {
      if (!event.altKey || event.ctrlKey) return;
      event.preventDefault();
      setScaleState((current) => {
        const next = Math.max(
          0.25,
          Math.min(
            3,
            current *
              Math.exp(-Math.max(-120, Math.min(120, event.deltaY)) * 0.001),
          ),
        );
        void publishViewer({ scale: next });
        return next;
      });
    };
    window.addEventListener("wheel", wheel, { passive: false });
    return () => window.removeEventListener("wheel", wheel);
  }, [publishViewer]);
  const setStatus: SetProgressStatus = async (id, status) => {
    try {
      const response = await fetch(`/api/progress/${encodeURIComponent(id)}`, {
        method: "PUT",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ status }),
      });
      if (!response.ok) throw new Error(await response.text());
      setProgress((await response.json()).progress);
      setProgressError("");
    } catch (error) {
      setProgressError(
        `Nie zapisano postępu: ${error instanceof Error ? error.message : String(error)}`,
      );
    }
  };
  const cycle = (id: string, current: Status) => {
    const next: Record<Status, Status> = {
      pending: "approved",
      approved: "pending",
    };
    void setStatus(id, next[current]);
  };
  let figureCount = 0;
  return (
    <>
      <div
        ref={viewerChromeRef}
        className={`viewer-chrome${nvimExpanded ? " is-nvim-expanded" : ""}${nvimFit ? " is-nvim-fit" : ""}`}
      >
        <Topbar
          toc={model.toc}
          scale={scale}
          setScale={setScale}
          nvimVisible={nvimVisible}
          setNvimVisible={setNvimVisible}
          nvimSyncMode={nvimSyncMode}
          setNvimSyncMode={setNvimSyncMode}
          nvimControlMode={nvimControlMode}
          setNvimControlMode={setNvimControlMode}
          nvimExpanded={nvimExpanded}
          setNvimExpanded={setNvimExpanded}
          nvimFit={nvimFit}
          setNvimFit={setNvimFit}
          allocatorVisible={allocatorVisible}
          setAllocatorVisible={setAllocatorVisible}
          nvimSummary={nvimSummary}
        />
        <AllocatorPanel visible={allocatorVisible} model={model} />
        <NeovimPanel
          visible={nvimVisible}
          syncMode={nvimSyncMode}
          controlMode={nvimControlMode}
          expanded={nvimExpanded}
          fit={nvimFit}
          scale={scale}
          onSummaryChange={setNvimSummary}
        />
        {shortcutStatus && <output className="viewer-action-toast">{shortcutStatus}</output>}
      </div>
      <main className="paper">
        <FrontPage front={model.front} />
        {model.sections.map((section) => {
          const offset = figureCount;
          figureCount += section.assets.length;
          return (
            <SectionPage
              key={section.id}
              section={section}
              progress={progress}
              onCycle={cycle}
              onSetStatus={setStatus}
              figureOffset={offset}
            />
          );
        })}
        {model.dictionary && (
          <Sheet
            header={model.dictionary.header_html}
            className="dictionary-sheet"
          >
            <h2>Słownik WE/EN/EK/KW</h2>
            <Html html={model.dictionary.content_html} />
          </Sheet>
        )}
      </main>
      <ProgressDock progress={progress} error={progressError} />
      <ShortcutHelp open={shortcutsOpen} onClose={() => setShortcutsOpen(false)} />
    </>
  );
}

async function start() {
  const root = createRoot(document.getElementById("root")!);
  try {
    const response = await fetch("./card-data.json", { cache: "no-store" });
    if (!response.ok)
      throw new Error(`Nie można wczytać card-data.json: ${response.status}`);
    const model = (await response.json()) as CardModel;
    root.render(<App model={model} />);
  } catch (error) {
    root.render(
      <main className="app-load-error">
        <h1>Nie udało się uruchomić karty</h1>
        <pre>{error instanceof Error ? error.message : String(error)}</pre>
      </main>,
    );
  }
}

void start();