import {SceneDisplayControls} from "../../../packages/spatial-ui/src/SceneDisplayControls";
import {SceneLayerControls} from "../../../packages/spatial-ui/src/SceneLayerControls";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import {
  AdminNavigationPanel,
  AppHeader,
  ApplicationPanel,
  ApplicationShell,
  Button,
  ControlRow,
  HeaderNavigation,
  HeaderProfile,
  Icon,
  Inspector,
  StatusBadge,
  TextField,
  UserProfileMenu,
  Window,
  WindowFooterActions,
  useApplicationWorkspace,
} from "@nodedc/ui-react";

import { LandingStage } from "./components/LandingStage";
import { EnvironmentSettingsWindow } from "./components/EnvironmentSettingsWindow";
import { ObservationSessionSelect } from "./components/ObservationSessionSelect";
import { SystemNavigationPanel } from "./components/system/SystemNavigationPanel";
import { SystemWorkspaceSelector } from "./components/system/SystemWorkspaceSelector";
import { useComputeContourSettings } from "./components/system/useComputeContourSettings";
import { useApplicationPanelActions } from "./components/useApplicationPanelActions";
import { useSessionOverviewMode } from "./core/observation/useSessionOverview";
import { SessionOverviewWorkspace } from "./workspaces/recordings/SessionOverviewWorkspace";
import { useEnvironmentSettings } from "./core/environment/useEnvironmentSettings";
import { useDevicePluginHost } from "./core/device-plugins/DevicePluginHost";
import { useMissionRuntime } from "./core/runtime/MissionRuntimeContext";
import type { ViewerSettings } from "./core/runtime/contracts";
import {
  SPATIAL_SOURCE_SWITCH_BLOCKED_REASON,
  isSpatialSourceSwitchBlocked,
} from "./core/runtime/acquisitionGuard";
import {
  createLatestAsyncCommitter,
  type LatestAsyncCommitter,
} from "./core/runtime/latestAsyncCommitter";
import { useObservationLayout } from "./core/observation/useObservationLayout";
import { recordedObservationSources } from "./core/observation/recordedObservationSources";
import type {
  ObservationSessionReplayLaunch,
  ObservationSessionSummary,
} from "./core/observation/sessionArchive";
import { useRecordedSessionAdmission } from "./core/observation/useRecordedSessionAdmission";
import { useWorkspaceLayoutProfile } from "./core/observation/useWorkspaceLayoutProfile";
import { viewerSettingsTargetIdentity } from "./core/observation/viewerSettingsTarget";
import { resolvePolygonRunRoute } from "./core/polygon/runArchive";
import {
  OBSERVATION_WORKSPACE_ID,
  OBSERVATION_WORKSPACE_LAYOUT_VERSION,
  type ObservationWorkspaceLayoutProfile,
} from "./core/observation/workspaceLayout";
import {
  rootById,
  roots,
  workspaceById,
  workspacesForRoot,
  type RootId,
} from "./productModel";
import { backendLabel, localConnectionPhaseLabel, phaseTone } from "./presentation";
import {
  defaultSceneSettings,
  type SceneSettings,
} from "./sceneSettings";
import { DeviceWorkspace } from "./workspaces/DeviceWorkspace";
import { PlanningConnectionWindow } from "./components/missions/PlanningConnectionWindow";
import { PlanningCaptureGuard } from "./components/missions/PlanningCaptureGuard";
import { workspaceLaunchProfile, type WorkspaceLaunchProfile } from "./core/observation/workspaceLaunch";
import { WorkspaceRenderer } from "./workspaces/Workspaces";
import { useLaboratoryAnnotationHeader } from "./components/laboratory/useLaboratoryAnnotationHeader";
import "./styles/scene-windows.css";
type SceneToolWindowId = "sources" | "display" | "layers";
const viewerSettingsQuietPeriodMs = 750;

interface LivePerceptionLayers {
  detections2d: boolean;
  segmentation: boolean;
  cuboids3d: boolean;
}

const defaultLivePerceptionLayers: LivePerceptionLayers = {
  detections2d: false,
  segmentation: false,
  cuboids3d: false,
};

function toViewerSettings(
  settings: SceneSettings,
  perception: LivePerceptionLayers = defaultLivePerceptionLayers,
): ViewerSettings {
  return {
    point_size: settings.pointSize,
    color_mode: settings.colorMode,
    palette: settings.palette,
    custom_color: settings.customColor,
    accumulation_seconds: settings.accumulationSeconds,
    show_points: settings.showPoints,
    show_trajectory: settings.showTrajectory,
    show_grid: settings.showGrid,
    show_detections_2d: perception.detections2d,
    show_segmentation: perception.segmentation,
    show_cuboids_3d: perception.cuboids3d,
  };
}

function mergeViewerSettings(
  current: SceneSettings,
  remote: ViewerSettings,
): SceneSettings {
  const next = {
    ...current,
    pointSize: remote.point_size,
    colorMode: remote.color_mode,
    palette: remote.palette,
    customColor: remote.custom_color,
    accumulationSeconds: remote.accumulation_seconds,
    showPoints: remote.show_points,
    showTrajectory: remote.show_trajectory,
    showGrid: remote.show_grid,
  };
  const unchanged =
    current.pointSize === next.pointSize &&
    current.colorMode === next.colorMode &&
    current.palette === next.palette &&
    current.customColor === next.customColor &&
    current.accumulationSeconds === next.accumulationSeconds &&
    current.showPoints === next.showPoints &&
    current.showTrajectory === next.showTrajectory &&
    current.showGrid === next.showGrid;
  return unchanged ? current : next;
}

export default function App() {
  const runtime = useMissionRuntime();
  const environment = useEnvironmentSettings();
  const computeContourSettings = useComputeContourSettings();
  const { selection } = useDevicePluginHost();
  const polygonDatasetRoute = useMemo(
    () => resolvePolygonRunRoute(typeof window === "undefined" ? "" : window.location.search),
    [],
  );
  const workspace = useApplicationWorkspace<string>({
    navigationOpen: false,
    contentExpanded: true,
  });

  const [activeRoot, setActiveRoot] = useState<RootId | null>(
    polygonDatasetRoute.active ? "data" : null,
  );
  const [environmentSettingsOpen, setEnvironmentSettingsOpen] = useState(false);
  const [launchProfile, setLaunchProfile] = useState<WorkspaceLaunchProfile>('direct');
  const [sourceUrl, setSourceUrl] = useState("");
  const [workspaceHeaderToolsHost, setWorkspaceHeaderToolsHost] = useState<HTMLDivElement | null>(null);
  const [recordedReplay, setRecordedReplay] = useState<ObservationSessionReplayLaunch | null>(null);
  const [recordedReplayLabel, setRecordedReplayLabel] = useState<string | null>(null);
  const [replayTransitioning, setReplayTransitioning] = useState(false);
  const [sourceDraft, setSourceDraft] = useState("");
  const [sourceWindowOpen, setSourceWindowOpen] = useState(false);
  const [displayWindowOpen, setDisplayWindowOpen] = useState(false);
  const [layerInspectorOpen, setLayerInspectorOpen] = useState(false);
  const [sceneWindowOrder, setSceneWindowOrder] = useState<SceneToolWindowId[]>([]);
  const [layoutSaveNotice, setLayoutSaveNotice] = useState<string | null>(null);
  const laboratoryAnnotation = useLaboratoryAnnotationHeader();
  const [sceneSettings, setSceneSettings] = useState<SceneSettings>(defaultSceneSettings);
  const [displayDraft, setDisplayDraft] = useState<SceneSettings>(defaultSceneSettings);
  const [livePerceptionLayers, setLivePerceptionLayers] = useState<LivePerceptionLayers>(
    defaultLivePerceptionLayers,
  );
  const sourceSwitchBlocked = isSpatialSourceSwitchBlocked(runtime.state);
  const sourceSwitchBlockedReason = sourceSwitchBlocked
    ? SPATIAL_SOURCE_SWITCH_BLOCKED_REASON
    : null;
  const sourceSwitchBlockedRef = useRef(sourceSwitchBlocked);
  sourceSwitchBlockedRef.current = sourceSwitchBlocked;
  const appliedProfileKeyRef = useRef<string | null>(null);
  const sceneSettingsRef = useRef<SceneSettings>(defaultSceneSettings);
  const displayDraftRef = useRef<SceneSettings>(defaultSceneSettings);
  const confirmedSceneSettingsRef = useRef<SceneSettings>(defaultSceneSettings);
  const viewerSettingsCommitTimerRef = useRef<number | null>(null);
  const runtimeUpdateViewerSettingsRef = useRef(runtime.updateViewerSettings);
  const livePerceptionLayersRef = useRef<LivePerceptionLayers>(defaultLivePerceptionLayers);
  const livePerceptionRevisionRef = useRef(0);
  const replayActiveRef = useRef(false);
  const selectedRecordedSessionIdRef = useRef<string | null>(null);
  const sceneSettingsCommitterActiveRef = useRef(true);
  const sceneSettingsCommitterRef = useRef<LatestAsyncCommitter<SceneSettings> | null>(null);
  const polygonDatasetRouteOpenedRef = useRef(false);

  const currentRoot = rootById(activeRoot);
  const visibleRoots = roots;
  const activeEnvironmentSurface = activeRoot ?? "home";
  const landingPage = environment.settings.pages[activeEnvironmentSurface];
  const landingQuickActions = [
    landingPage.primaryWorkspaceId,
    landingPage.secondaryWorkspaceId,
  ].flatMap((workspaceId) => {
    const definition = workspaceById(workspaceId);
    if (!definition) return [];
    if (activeRoot !== null && definition.root !== activeRoot) return [];
    return [definition];
  });
  const activeDefinition = workspaceById(workspace.activeView);
  const sceneWorkspaceActive = Boolean(
    workspace.contentOpen
    && activeDefinition
    && ["spatial", "recordings"].includes(activeDefinition.kind),
  );
  const archiveWorkspaceActive = Boolean(
    activeDefinition
    && ["recordings", "lab-archive"].includes(activeDefinition.kind),
  );
  const rootWorkspaces = workspacesForRoot(activeRoot);
  const activeSceneWindow = sceneWindowOrder[sceneWindowOrder.length - 1] ?? null;
  const automaticSourceUrl = runtime.state?.spatialSource?.url.trim() ?? "";
  const effectiveSourceUrl = archiveWorkspaceActive
    ? replayTransitioning ? "" : sourceUrl
    : automaticSourceUrl;
  const replayActive = Boolean(recordedReplay && sourceUrl === recordedReplay.sourceUrl);
  const replayPresented = archiveWorkspaceActive && replayActive;
  const recordedSessionAdmission = useRecordedSessionAdmission(
    replayPresented ? recordedReplay : null,
  );
  runtimeUpdateViewerSettingsRef.current = runtime.updateViewerSettings;
  replayActiveRef.current = replayPresented;

  useEffect(() => {
    if (!polygonDatasetRoute.active || polygonDatasetRouteOpenedRef.current) return;
    polygonDatasetRouteOpenedRef.current = true;
    workspace.openView("datasets");
  }, [polygonDatasetRoute.active, workspace]);

  if (!sceneSettingsCommitterRef.current) {
    sceneSettingsCommitterRef.current = createLatestAsyncCommitter<SceneSettings>({
      commit: (settings) => replayActiveRef.current
        ? Promise.resolve(true)
        : runtimeUpdateViewerSettingsRef.current(
            toViewerSettings(settings, livePerceptionLayersRef.current),
          ),
      onSettled: ({ value, applied, superseded }) => {
        if (!sceneSettingsCommitterActiveRef.current) return;
        if (applied) confirmedSceneSettingsRef.current = value;
        if (superseded) return;

        const next = applied ? value : confirmedSceneSettingsRef.current;
        sceneSettingsRef.current = next;
        setSceneSettings(next);
        if (!applied && displayDraftRef.current === value) {
          displayDraftRef.current = next;
          setDisplayDraft(next);
        }
      },
    });
  }
  const replaySources = useMemo(
    () => recordedObservationSources(recordedReplay),
    [recordedReplay],
  );
  const activeObservationSources = replayPresented
    ? replaySources
    : runtime.state?.observationSources ?? [];
  const activeRuntimeState = useMemo(() => {
    if (!replayPresented || !recordedReplay) return runtime.state;
    return {
      ...(runtime.state ?? { phase: "replaying" as const }),
      phase: "replaying" as const,
      sourceMode: "replay" as const,
      spatialSource: {
        id: "recorded.spatial.primary",
        url: recordedReplay.sourceUrl,
        label: "Сохранённая пространственная сцена",
        kind: "rrd" as const,
      },
      observationSources: replaySources,
      observationTimeline: {
        mode: "recorded" as const,
        seekable: true,
        sessionRecording: true,
        synchronization: "host-arrival-best-effort" as const,
        range: {
          startSeconds: recordedReplay.timelineStartSeconds,
          endSeconds: recordedReplay.timelineEndSeconds,
        },
      },
    };
  }, [recordedReplay, replayPresented, replaySources, runtime.state]);
  const viewerSettingsTarget = viewerSettingsTargetIdentity(runtime.state);
  const observationLayout = useObservationLayout(
    activeObservationSources,
    replayPresented ? undefined : runtime.setObservationSourceActive,
  );
  const workspaceLayoutProfile = useWorkspaceLayoutProfile();
  const focusedObservationSource = activeObservationSources.find(
    (source) => source.id === observationLayout.focusedSourceId,
  );
  const observationFullscreenActive = Boolean(
    activeDefinition?.kind === "spatial"
      ? observationLayout.maximizedFloatingSourceId || focusedObservationSource?.modality === "point-cloud"
      : activeDefinition?.kind === "lab-archive"
        ? observationLayout.maximizedFloatingSourceId || focusedObservationSource?.modality === "point-cloud"
      : activeDefinition?.kind === "cameras" && focusedObservationSource,
  );

  useEffect(() => {
    const remote = runtime.state?.viewerSettings;
    if (
      !remote ||
      workspaceLayoutProfile.profile ||
      sceneSettingsCommitterRef.current?.isBusy()
    ) return;
    const merged = mergeViewerSettings(sceneSettingsRef.current, remote);
    const remoteLayers = {
      detections2d: remote.show_detections_2d ?? false,
      segmentation: remote.show_segmentation ?? false,
      cuboids3d: remote.show_cuboids_3d ?? false,
    };
    livePerceptionLayersRef.current = remoteLayers;
    setLivePerceptionLayers(remoteLayers);
    sceneSettingsRef.current = merged;
    confirmedSceneSettingsRef.current = merged;
    setSceneSettings(merged);
    if (viewerSettingsCommitTimerRef.current === null) {
      displayDraftRef.current = merged;
      setDisplayDraft(merged);
    }
  }, [runtime.state?.viewerSettings, workspaceLayoutProfile.profile]);

  useEffect(() => {
    const profile = workspaceLayoutProfile.profile;
    if (!profile) return;
    if (viewerSettingsCommitTimerRef.current !== null) {
      window.clearTimeout(viewerSettingsCommitTimerRef.current);
      viewerSettingsCommitTimerRef.current = null;
    }
    sceneSettingsRef.current = profile.sceneSettings;
    displayDraftRef.current = profile.sceneSettings;
    confirmedSceneSettingsRef.current = profile.sceneSettings;
    setSceneSettings(profile.sceneSettings);
    setDisplayDraft(profile.sceneSettings);
    observationLayout.restore(profile);
  }, [observationLayout.restore, workspaceLayoutProfile.profile]);

  useEffect(() => {
    if (sceneWorkspaceActive) return;
    // Scene tools are transient children of the spatial workspace. They must
    // never survive a route/root/content close or appear over the landing page.
    setSourceWindowOpen(false);
    setDisplayWindowOpen(false);
    setLayerInspectorOpen(false);
    setSceneWindowOrder([]);
  }, [sceneWorkspaceActive]);

  useEffect(() => {
    sceneSettingsCommitterActiveRef.current = true;
    return () => {
      sceneSettingsCommitterActiveRef.current = false;
      if (viewerSettingsCommitTimerRef.current !== null) {
        window.clearTimeout(viewerSettingsCommitTimerRef.current);
        viewerSettingsCommitTimerRef.current = null;
      }
    };
  }, []);

  useEffect(() => {
    const profile = workspaceLayoutProfile.profile;
    const applicationKey = profile
      ? `${profile.revision}:${viewerSettingsTarget}`
      : null;
    if (
      !profile ||
      runtime.backendStatus !== "online" ||
      !applicationKey ||
      appliedProfileKeyRef.current === applicationKey
    ) {
      return;
    }
    appliedProfileKeyRef.current = applicationKey;
    void runtime.updateViewerSettings(
      toViewerSettings(profile.sceneSettings, livePerceptionLayersRef.current),
    ).then((applied) => {
      if (!applied && appliedProfileKeyRef.current === applicationKey) {
        appliedProfileKeyRef.current = null;
      }
    });
  }, [
    runtime.backendStatus,
    runtime.updateViewerSettings,
    viewerSettingsTarget,
    workspaceLayoutProfile.profile,
  ]);

  const activateSceneWindow = useCallback((windowId: SceneToolWindowId) => {
    setSceneWindowOrder((current) => [
      ...current.filter((candidate) => candidate !== windowId),
      windowId,
    ]);
  }, []);

  const closeSceneWindow = useCallback((windowId: SceneToolWindowId) => {
    if (windowId === "sources") setSourceWindowOpen(false);
    if (windowId === "display") setDisplayWindowOpen(false);
    if (windowId === "layers") setLayerInspectorOpen(false);
    setSceneWindowOrder((current) => current.filter((candidate) => candidate !== windowId));
  }, []);

  useEffect(() => {
    if (!sceneWorkspaceActive || !activeSceneWindow) return;

    const closeActiveWindow = (event: KeyboardEvent) => {
      if (event.key !== "Escape" || event.defaultPrevented) return;
      if (document.querySelector(".nodedc-dropdown-surface")) return;
      if (document.querySelector('.nodedc-overlay[data-placement="center"]')) return;
      event.preventDefault();
      closeSceneWindow(activeSceneWindow);
    };

    document.addEventListener("keydown", closeActiveWindow);
    return () => document.removeEventListener("keydown", closeActiveWindow);
  }, [activeSceneWindow, closeSceneWindow, sceneWorkspaceActive]);

  const selectRoot = (rootId: RootId) => {
    setActiveRoot(rootId);
    workspace.openNavigation();
    if (rootId === "system") {
      workspace.openView(
        activeDefinition?.root === "system" ? activeDefinition.id : "modules",
      );
    } else {
      workspace.closeView();
    }
  };

  const openView = (viewId: string, profile?: WorkspaceLaunchProfile) => {
    const definition = workspaceById(viewId);
    if (!definition) return;
    setLaunchProfile(current => workspaceLaunchProfile(current, definition.kind, profile));
    setActiveRoot(definition.root);
    workspace.openView(viewId);
  };

  const openSource = () => {
    if (!sceneWorkspaceActive) return;
    setSourceDraft(sourceUrl);
    setSourceWindowOpen(true);
    activateSceneWindow("sources");
  };

  const commitDisplaySettings = useCallback((next: SceneSettings) => {
    if (viewerSettingsCommitTimerRef.current !== null) {
      window.clearTimeout(viewerSettingsCommitTimerRef.current);
      viewerSettingsCommitTimerRef.current = null;
    }
    displayDraftRef.current = next;
    setDisplayDraft(next);
    sceneSettingsCommitterRef.current?.enqueue(next);
  }, []);

  const stageDisplayPatch = useCallback((patch: Partial<SceneSettings>) => {
    const next = { ...displayDraftRef.current, ...patch };
    displayDraftRef.current = next;
    setDisplayDraft(next);
    if (viewerSettingsCommitTimerRef.current !== null) {
      window.clearTimeout(viewerSettingsCommitTimerRef.current);
    }
    viewerSettingsCommitTimerRef.current = window.setTimeout(() => {
      viewerSettingsCommitTimerRef.current = null;
      sceneSettingsCommitterRef.current?.enqueue(displayDraftRef.current);
    }, viewerSettingsQuietPeriodMs);
  }, []);

  const flushDisplaySettings = useCallback(() => {
    if (viewerSettingsCommitTimerRef.current === null) return;
    window.clearTimeout(viewerSettingsCommitTimerRef.current);
    viewerSettingsCommitTimerRef.current = null;
    sceneSettingsCommitterRef.current?.enqueue(displayDraftRef.current);
  }, []);

  const commitDisplayPatch = useCallback((patch: Partial<SceneSettings>) => {
    commitDisplaySettings({ ...displayDraftRef.current, ...patch });
  }, [commitDisplaySettings]);

  const openDisplay = () => {
    if (!sceneWorkspaceActive) return;
    setDisplayWindowOpen(true);
    activateSceneWindow("display");
  };

  const openLayers = () => {
    if (!sceneWorkspaceActive) return;
    setLayerInspectorOpen(true);
    activateSceneWindow("layers");
  };

  const changeLivePerceptionLayers = useCallback((next: LivePerceptionLayers) => {
    const previous = livePerceptionLayersRef.current;
    const revision = ++livePerceptionRevisionRef.current;
    livePerceptionLayersRef.current = next;
    setLivePerceptionLayers(next);
    if (replayActiveRef.current) return;
    void runtimeUpdateViewerSettingsRef.current(
      toViewerSettings(sceneSettingsRef.current, next),
    ).then((applied) => {
      if (applied || livePerceptionRevisionRef.current !== revision) return;
      livePerceptionLayersRef.current = previous;
      setLivePerceptionLayers(previous);
    });
  }, []);

  const beginRecordedReplaySwitch = useCallback(async () => {
    if (sourceSwitchBlockedRef.current) {
      throw new Error(SPATIAL_SOURCE_SWITCH_BLOCKED_REASON);
    }
    // useObservationSessions calls this only after backend preparation has
    // produced a validated launch descriptor. Keep the old scene mounted
    // before this point; now perform one controlled receiver teardown before
    // accepting the already-ready archive.
    selectedRecordedSessionIdRef.current = null;
    setReplayTransitioning(true);
    setRecordedReplay(null);
    setRecordedReplayLabel(null);
    setSourceUrl("");
    setSourceDraft("");
    await new Promise<void>((resolve) => {
      window.requestAnimationFrame(() => window.setTimeout(resolve, 0));
    });
  }, []);

  const acceptRecordedReplay = useCallback((
    session: ObservationSessionSummary,
    launch: ObservationSessionReplayLaunch,
  ) => {
    if (sourceSwitchBlockedRef.current) {
      throw new Error(SPATIAL_SOURCE_SWITCH_BLOCKED_REASON);
    }
    selectedRecordedSessionIdRef.current = session.id;
    setRecordedReplay(launch);
    setRecordedReplayLabel(session.label);
    setSourceUrl(launch.sourceUrl);
    setSourceDraft(launch.sourceUrl);
    setReplayTransitioning(false);
  }, []);

  const settleRecordedReplaySwitch = useCallback((outcome: "accepted" | "error" | "cancelled") => {
    if (outcome !== "accepted") setReplayTransitioning(false);
  }, []);

  const releaseRecordedReplayForDelete = useCallback(async (sessionId: string) => {
    if (selectedRecordedSessionIdRef.current !== sessionId) return;
    // Deleting the selected archive is a source transition. Unmount Rerun and
    // recorded media first so no admission request can outlive the evidence.
    selectedRecordedSessionIdRef.current = null;
    setReplayTransitioning(true);
    setRecordedReplay(null);
    setRecordedReplayLabel(null);
    setSourceUrl("");
    setSourceDraft("");
    await new Promise<void>((resolve) => {
      window.requestAnimationFrame(() => window.setTimeout(resolve, 0));
    });
    if (selectedRecordedSessionIdRef.current === null) setReplayTransitioning(false);
  }, []);

  const activateAutomaticSpatialSource = useCallback(() => {
    // A plugin-owned live/file-replay start must release any host-selected
    // archive or manual URL before the new acquisition becomes non-terminal.
    // This transition is an internal start boundary, not an operator source
    // switch, so it intentionally does not consult the acquisition guard.
    selectedRecordedSessionIdRef.current = null;
    setReplayTransitioning(false);
    setRecordedReplay(null);
    setRecordedReplayLabel(null);
    setSourceUrl("");
    setSourceDraft("");
    observationLayout.activateAutomaticDefaults();
  }, [observationLayout.activateAutomaticDefaults]);
  useEffect(() => {
    if (!["recordings", "lab-archive"].includes(activeDefinition?.kind ?? "")) {
      setReplayTransitioning(false);
    }
  }, [activeDefinition?.kind]);

  const applyScenePatch = (patch: Partial<SceneSettings>) => commitDisplayPatch(patch);

  const saveWorkspaceLayout = useCallback(async () => {
    flushDisplaySettings();
    await sceneSettingsCommitterRef.current?.waitForIdle();

    const layout = observationLayout.snapshot();
    if (!layout) {
      setLayoutSaveNotice("Сцена ещё не измерила рабочую область.");
      return;
    }
    const draft: ObservationWorkspaceLayoutProfile = {
      version: OBSERVATION_WORKSPACE_LAYOUT_VERSION,
      revision: workspaceLayoutProfile.profile?.revision ?? 0,
      workspaceId: OBSERVATION_WORKSPACE_ID,
      sceneSettings: sceneSettingsRef.current,
      ...layout,
    };
    const saved = await workspaceLayoutProfile.save(draft);
    setLayoutSaveNotice(saved ? "Компоновка сохранена" : workspaceLayoutProfile.error);
  }, [
    flushDisplaySettings,
    observationLayout.snapshot,
    workspaceLayoutProfile,
  ]);

  useEffect(() => {
    if (!layoutSaveNotice || layoutSaveNotice !== "Компоновка сохранена") return;
    const timer = window.setTimeout(() => setLayoutSaveNotice(null), 2600);
    return () => window.clearTimeout(timer);
  }, [layoutSaveNotice]);

  const [fleetCreateRequest, setFleetCreateRequest] = useState(0);
  const sessionOverview = useSessionOverviewMode(activeDefinition?.kind === "recordings");
  const onAddVehicle = useCallback(() => setFleetCreateRequest(value => value + 1), []);
  const contentActions = useApplicationPanelActions({
    onAddVehicle,
    definition: activeDefinition,
    refreshRuntime: runtime.refresh,
    resetConnectionScenario: runtime.resetConnectionScenario,
    connectionScenarioResetting: runtime.pendingAction === "mode",
    saveWorkspaceLayout,
    workspaceLayoutSaving: workspaceLayoutProfile.state === "saving",
    systemUtilityActions: computeContourSettings.utilityActions,
    sessionOverview: { ...sessionOverview, available: Boolean(recordedReplay && replayPresented && !sourceSwitchBlocked) },
  });

  const header = (
    <AppHeader
      brand={<img src="/nodedc-logo.svg" alt="NODE.DC" />}
      brandHref="/"
      brandLabel="NODEDC MISSION CORE"
      center={
          <HeaderNavigation
            label="Архитектурные блоки пункта управления"
            value={activeRoot ?? undefined}
            items={visibleRoots.map((root) => ({
              value: root.id,
              label: environment.settings.pages[root.id].headerLabel,
            }))}
            onChange={selectRoot}
          />
      }
      right={
        <HeaderProfile>
          <UserProfileMenu
            displayName="DC"
            subtitle="Mission Core"
            triggerLabel={null}
            actions={[
              {
                id: "refresh",
                label: "Обновить контур",
                icon: "refresh",
                onSelect: () => void runtime.refresh(),
              },
              {
                id: "settings",
                label: "Настройки",
                icon: "settings",
                onSelect: () => setEnvironmentSettingsOpen(true),
              },
            ]}
          />
        </HeaderProfile>
      }
    />
  );

  return (
    <>
      <ApplicationShell
        data-nodedc-ui
        className="control-station"
        data-observation-fullscreen={observationFullscreenActive ? "true" : undefined}
        navigationOpen={
          workspace.navigationOpen && activeRoot !== null
        }
        contentOpen={workspace.contentOpen && activeDefinition !== null}
        contentExpanded={workspace.contentExpanded}
        header={header}
        stage={
          <LandingStage
            root={currentRoot}
            backendStatus={runtime.backendStatus}
            phase={runtime.state?.phase}
            message={runtime.state?.message}
            page={landingPage}
            quickActions={landingQuickActions}
            onOpenWorkspace={openView}
          />
        }
        navigation={currentRoot && activeRoot === "system" ? (
          <SystemNavigationPanel
            title={currentRoot.title}
            onAdd={computeContourSettings.openCreate}
            onClose={workspace.closeNavigation}
          />
        ) : currentRoot ? (
          <AdminNavigationPanel
            eyebrow="MISSION CORE"
            title={currentRoot.title}
            closeLabel={`Закрыть раздел «${currentRoot.label}»`}
            navigationLabel={`Рабочие поверхности раздела «${currentRoot.label}»`}
            onClose={workspace.closeNavigation}
            contexts={[
              {
                id: "local-contour",
                label: "Локальный контур",
                description: selection ? "Подключение" : "Модель не выбрана",
                icon: <Icon name="network" />,
                active:
                  runtime.backendStatus !== "offline"
                  && runtime.backendStatus !== "unconfigured",
              },
            ]}
            items={rootWorkspaces.map((item) => ({
              id: item.id,
              label: item.label,
              icon: <Icon name={item.icon} />,
            }))}
            activeId={workspace.activeView ?? undefined}
            onItemChange={openView}
            footer={
              <>
                <span className="nodedc-admin-panel__nav-icon" aria-hidden="true">
                  <Icon name="activity" />
                </span>
                <span>
                  {rootWorkspaces.length}{" "}
                  {rootWorkspaces.length === 1
                    ? "рабочая поверхность"
                    : "рабочих поверхностей"}
                </span>
              </>
            }
          />
        ) : null}
        content={activeDefinition ? (
          <ApplicationPanel
            key={activeDefinition.id}
            eyebrow={activeDefinition.eyebrow}
            title={
              activeDefinition.kind === "recordings"
              && replayPresented
              && recordedReplayLabel
                ? `${activeDefinition.title}: ${recordedReplayLabel}`
                : activeDefinition.title
            }
            description={activeDefinition.description}
            expanded={workspace.contentExpanded}
            onExpandedChange={workspace.setContentExpanded}
            headerTools={
              activeDefinition.kind === "device" ? (
                <StatusBadge tone={phaseTone(runtime.state?.phase)}>
                  {localConnectionPhaseLabel(runtime.state?.phase)}
                </StatusBadge>
              ) : activeDefinition.kind === "spatial" ? (
                <div className="observation-header-tools">
                  <StatusBadge tone={["live", "replay"].includes(runtime.state?.sourceMode ?? "") ? "success" : "neutral"}>
                    {runtime.state?.sourceMode === "live" ? "Эфир" : runtime.state?.sourceMode === "replay" ? "Повтор записи" : "Ожидание эфира"}
                  </StatusBadge>
                  {layoutSaveNotice || workspaceLayoutProfile.error ? (
                    <span
                      className="workspace-layout-feedback"
                      data-error={workspaceLayoutProfile.error ? "true" : undefined}
                      role={workspaceLayoutProfile.error ? "alert" : "status"}
                    >
                      <i
                        className="api-dot"
                        data-status={workspaceLayoutProfile.error ? "error" : "online"}
                        aria-hidden="true"
                      />
                      {layoutSaveNotice || workspaceLayoutProfile.error}
                    </span>
                  ) : null}
                </div>
              ) : activeDefinition.kind === "recordings" ? (
                <ObservationSessionSelect
                  disabled={runtime.pendingAction !== null || sourceSwitchBlocked}
                  blockedReason={sourceSwitchBlockedReason}
                  onReplayBegin={beginRecordedReplaySwitch}
                  onReplayAccepted={acceptRecordedReplay}
                  onReplaySettled={(_session, outcome) =>
                    settleRecordedReplaySwitch(outcome)}
                  onDeleteBegin={releaseRecordedReplayForDelete}
                />
              ) : activeDefinition.kind === "missions" ? (
                <div ref={setWorkspaceHeaderToolsHost} />
              ) : activeDefinition.kind === "vehicles" ? null : activeDefinition.kind === "datasets" ? (
                <StatusBadge tone="neutral">Offline evaluation</StatusBadge>
              ) : activeDefinition.kind === "lab-archive" ? (
                laboratoryAnnotation.control
              ) : activeDefinition.kind === "observatory" ? (
                <StatusBadge tone="neutral">Только наблюдение</StatusBadge>
              ) : activeDefinition.root === "system" ? (
                <SystemWorkspaceSelector
                  value={activeDefinition.id}
                  onChange={openView}
                />
              ) : (
                <StatusBadge tone="warning">Интерфейс готов</StatusBadge>
              )
            }
            utilityActions={contentActions}
            onClose={workspace.closeView}
          >
            <PlanningCaptureGuard
              enabled={launchProfile === 'direct' && (activeDefinition.kind === 'device' || activeDefinition.kind === 'spatial')}
              onResume={() => openView('local-device', 'planning')}
            >
            {activeDefinition.kind === "device" ? (
              launchProfile === 'planning' ? <PlanningConnectionWindow>
                <DeviceWorkspace
                  onOpenSpatialScene={() => openView("spatial-scene", 'planning')}
                  onActivateAutomaticSpatialSource={activateAutomaticSpatialSource}
                />
              </PlanningConnectionWindow> : <DeviceWorkspace
                onOpenSpatialScene={() => openView("spatial-scene", 'direct')}
                onActivateAutomaticSpatialSource={activateAutomaticSpatialSource}
              />
            ) : activeDefinition.kind === "recordings" && sessionOverview.open && recordedReplay && replayPresented ? (
              <SessionOverviewWorkspace key={recordedReplay.sessionId} sessionId={recordedReplay.sessionId} />
            ) : (
              <WorkspaceRenderer
                launchProfile={launchProfile}
                definition={activeDefinition}
                fleetCreateRequest={fleetCreateRequest}
                headerToolsHost={workspaceHeaderToolsHost}
                state={activeRuntimeState}
                backendStatus={runtime.backendStatus}
                sourceUrl={effectiveSourceUrl}
                recordedReplay={replayPresented ? recordedReplay : null}
                recordedSessionAdmission={recordedSessionAdmission}
                sceneSettings={sceneSettings}
                accumulationSeconds={displayDraft.accumulationSeconds}
                onAccumulationChange={(accumulationSeconds) =>
                  stageDisplayPatch({ accumulationSeconds })}
                onAccumulationCommit={flushDisplaySettings}
                livePerceptionLayers={livePerceptionLayers}
                onLivePerceptionLayersChange={changeLivePerceptionLayers}
                observationLayout={observationLayout}
                deviceLabel={selection?.model.displayName ?? null}
                spatialControls={selection?.SpatialControlsView
                  ? {
                      View: selection.SpatialControlsView,
                      model: selection.model,
                    }
                  : null}
                sessionArchive={{
                  disabled: runtime.pendingAction !== null || sourceSwitchBlocked,
                  blockedReason: sourceSwitchBlockedReason,
                  onReplayBegin: beginRecordedReplaySwitch,
                  onReplayAccepted: acceptRecordedReplay,
                  onReplaySettled: (_session, outcome) =>
                    settleRecordedReplaySwitch(outcome),
                  onDeleteBegin: releaseRecordedReplayForDelete,
                }}
                onLaboratoryAnnotationActionChange={laboratoryAnnotation.setAction}
                onLaboratoryViewActionChange={laboratoryAnnotation.setViewAction}
                navigation={{
                  openView,
                  openSource,
                  openDisplay,
                  openLayers,
                  activateAutomaticSpatialSource,
                }}
              />
            )}
            </PlanningCaptureGuard>
          </ApplicationPanel>
        ) : null}
      />

      <EnvironmentSettingsWindow
        open={environmentSettingsOpen}
        settings={environment.settings}
        state={environment.state}
        error={environment.error}
        onClose={() => setEnvironmentSettingsOpen(false)}
        onSave={environment.save}
        onUpload={environment.upload}
      />
      {computeContourSettings.window}

      <Window
        open={sceneWorkspaceActive && sourceWindowOpen}
        title="Визуальный движок"
        subtitle="Rerun gRPC и записи пространственной сцены"
        placement="end"
        draggable
        closeOnBackdrop={false}
        closeOnEscape={false}
        lockBodyScroll={false}
        trapFocus={false}
        className="scene-tool-window scene-tool-window--sources"
        data-scene-window="sources"
        data-scene-active={activeSceneWindow === "sources" ? "true" : undefined}
        onPointerDown={() => activateSceneWindow("sources")}
        onClose={() => closeSceneWindow("sources")}
        footer={
          <WindowFooterActions>
            <Button
              variant="ghost"
              disabled={sourceSwitchBlocked}
              title={sourceSwitchBlockedReason ?? undefined}
              onClick={() => {
                if (sourceSwitchBlockedRef.current) return;
                selectedRecordedSessionIdRef.current = null;
                setSourceDraft("");
                setSourceUrl("");
                setRecordedReplay(null);
                setRecordedReplayLabel(null);
              }}
            >
              Сбросить адрес
            </Button>
            <Button
              variant="primary"
              shape="pill"
              disabled={sourceSwitchBlocked || !sourceDraft.trim()}
              title={sourceSwitchBlockedReason ?? undefined}
              onClick={() => {
                if (sourceSwitchBlockedRef.current) return;
                selectedRecordedSessionIdRef.current = null;
                setSourceUrl(sourceDraft.trim());
                setRecordedReplay(null);
                setRecordedReplayLabel(null);
              }}
            >
              Применить адрес
            </Button>
          </WindowFooterActions>
        }
      >
        <Inspector
          defaultOpen={["connection"]}
          singleOpen
          sections={[
            {
              id: "connection",
              label: "Подключение",
              description: "Адрес потока или записи",
              content: (
                <div className="inspector-control-stack">
                  <ControlRow label="Состояние">
                    <span className="scene-window-state">
                      <i className="api-dot" data-status={effectiveSourceUrl ? "online" : "checking"} aria-hidden="true" />
                      {effectiveSourceUrl ? "Источник назначен" : "Источник не назначен"}
                    </span>
                  </ControlRow>
                  {effectiveSourceUrl ? (
                    <ControlRow label="Активный адрес" layout="stack">
                      <code className="scene-window-code">{effectiveSourceUrl}</code>
                    </ControlRow>
                  ) : null}
                  <ControlRow label="Автоматический" layout="stack">
                    <code className="scene-window-code">
                      {automaticSourceUrl || "Локальный источник ещё не опубликован"}
                    </code>
                  </ControlRow>
                  <TextField
                    label="Ручной адрес"
                    hint="необязательно"
                    value={sourceDraft}
                    onChange={(event) => setSourceDraft(event.target.value)}
                    disabled={sourceSwitchBlocked}
                    spellCheck={false}
                    placeholder="rerun+http://127.0.0.1:9876/proxy"
                    description={sourceSwitchBlockedReason ?? "Пустое значение использует автоматический локальный источник. Ручной адрес нужен для другого gRPC-потока или записи RRD."}
                  />
                </div>
              ),
            },
            {
              id: "formats",
              label: "Поддерживаемые адреса",
              description: "Rerun gRPC и RRD",
              content: (
                <div className="inspector-control-stack">
                  <ControlRow label="Живой поток" layout="stack">
                    <code className="scene-window-code">rerun+http://…/proxy</code>
                  </ControlRow>
                  <ControlRow label="Локальная запись" layout="stack">
                    <code className="scene-window-code">http://…/recording.rrd</code>
                  </ControlRow>
                  <ControlRow label="Удалённая запись" layout="stack">
                    <code className="scene-window-code">https://…/recording.rrd</code>
                  </ControlRow>
                </div>
              ),
            },
            {
              id: "adapter",
              label: "Локальный адаптер",
              description: "Транспорт устройства",
              content: (
                <div className="inspector-control-stack">
                  <ControlRow label="Контур">
                    <span className="scene-window-state">
                      <i className="api-dot" data-status={runtime.backendStatus} aria-hidden="true" />
                      {backendLabel(runtime.backendStatus)}
                    </span>
                  </ControlRow>
                  <p className="scene-window-note">
                    Встроенный адаптер публикует локальный Rerun gRPC автоматически после запуска
                    живого приёма или повтора записи. Ручной адрес для этого не требуется.
                  </p>
                </div>
              ),
            },
          ]}
        />
      </Window>

      <Window
        open={sceneWorkspaceActive && displayWindowOpen}
        title="Отображение"
        subtitle="Параметры пространственной сцены"
        placement="end"
        draggable
        closeOnBackdrop={false}
        closeOnEscape={false}
        lockBodyScroll={false}
        trapFocus={false}
        className="scene-tool-window scene-tool-window--display"
        data-scene-window="display"
        data-scene-active={activeSceneWindow === "display" ? "true" : undefined}
        onPointerDown={() => activateSceneWindow("display")}
        onClose={() => closeSceneWindow("display")}
      >
        <SceneDisplayControls displayDraft={displayDraft} stageDisplayPatch={stageDisplayPatch}
          commitDisplayPatch={commitDisplayPatch} flushDisplaySettings={flushDisplaySettings} replayPresented={replayPresented}/>
      </Window>

      <Window
        open={sceneWorkspaceActive && layerInspectorOpen}
        title="Слои сцены"
        subtitle="Сущности пространственной сцены"
        placement="end"
        draggable
        closeOnBackdrop={false}
        closeOnEscape={false}
        lockBodyScroll={false}
        trapFocus={false}
        className="scene-tool-window scene-tool-window--layers"
        data-scene-window="layers"
        data-scene-active={activeSceneWindow === "layers" ? "true" : undefined}
        onPointerDown={() => activateSceneWindow("layers")}
        onClose={() => closeSceneWindow("layers")}
      >
        <div className="layer-inspector-intro">
          <span className="scene-window-state">
            <i className="api-dot" data-status={effectiveSourceUrl ? "online" : "checking"} aria-hidden="true" />
            {effectiveSourceUrl ? "Источник назначен" : "Источник не назначен"}
          </span>
          <p>Структура повторяет продуктовые сущности, а не внутренние панели визуального движка.</p>
        </div>
        <SceneLayerControls sceneSettings={sceneSettings} pending={runtime.pendingAction === "viewer"} applyScenePatch={applyScenePatch}/>
      </Window>
    </>
  );
}