import { useEffect, useState } from "react";
import {
  Button,
  GlassSurface,
  StatusBadge,
} from "@nodedc/ui-react";

import {
  fetchLidarFieldReviews,
  fetchLidarFieldReviewWindow,
  fetchLidarGroundFrame,
  fetchLidarGroundBenchmarks,
  fetchLidarReplayCatalog,
  fetchLidarReplayDetail,
  type LidarFieldReview,
  type LidarFieldReviewWindow,
  type LidarGroundBenchmark,
  type LidarGroundFrame,
  type LidarReplayCatalog,
  type LidarReplayDetail,
  type LidarStageReadiness,
} from "../core/lidar/replayQuality";
import { MetricCard } from "../components/MetricCard";
import {
  LidarGroundPointCloud,
  type LidarGroundViewMode,
} from "./LidarGroundPointCloud";

function formatNumber(value: number | null, digits = 1): string {
  if (value === null) return "—";
  return value.toLocaleString("ru-RU", { maximumFractionDigits: digits });
}

function formatFraction(value: number | null): string {
  return value === null ? "—" : `${(value * 100).toLocaleString("ru-RU", {
    maximumFractionDigits: 1,
  })}%`;
}

function readinessTone(
  readiness: LidarStageReadiness["readiness"],
): "success" | "warning" | "danger" {
  if (readiness === "ready") return "success";
  if (readiness === "degraded") return "warning";
  return "danger";
}

function readinessLabel(readiness: LidarStageReadiness["readiness"]): string {
  if (readiness === "ready") return "Готов";
  if (readiness === "degraded") return "С ограничениями";
  return "Заблокирован";
}

function errorMessage(error: unknown): string {
  return error instanceof Error && error.message.trim()
    ? error.message
    : "Не удалось прочитать LiDAR evidence.";
}

export function LidarQualityWorkspace({
  deviceLabel,
  onOpenObservation,
}: {
  deviceLabel: string | null;
  onOpenObservation: () => void;
}) {
  const [catalog, setCatalog] = useState<LidarReplayCatalog | null>(null);
  const [detail, setDetail] = useState<LidarReplayDetail | null>(null);
  const [groundBenchmark, setGroundBenchmark] =
    useState<LidarGroundBenchmark | null>(null);
  const [groundFrame, setGroundFrame] = useState<LidarGroundFrame | null>(null);
  const [groundFrameIndex, setGroundFrameIndex] = useState(0);
  const [groundFrameLoading, setGroundFrameLoading] = useState(false);
  const [groundFrameError, setGroundFrameError] = useState<string | null>(null);
  const [groundViewMode, setGroundViewMode] =
    useState<LidarGroundViewMode>("intensity");
  const [fieldReview, setFieldReview] = useState<LidarFieldReview | null>(null);
  const [fieldWindow, setFieldWindow] =
    useState<LidarFieldReviewWindow | null>(null);
  const [fieldWindowIndex, setFieldWindowIndex] = useState(0);
  const [fieldLoading, setFieldLoading] = useState(true);
  const [fieldError, setFieldError] = useState<string | null>(null);
  const [fieldViewMode, setFieldViewMode] =
    useState<LidarGroundViewMode>("intensity");
  const [selectedPackId, setSelectedPackId] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [reloadGeneration, setReloadGeneration] = useState(0);

  useEffect(() => {
    const controller = new AbortController();
    setLoading(true);
    setError(null);
    void (async () => {
      try {
        const nextCatalog = await fetchLidarReplayCatalog({
          signal: controller.signal,
        });
        if (controller.signal.aborted) return;
        setCatalog(nextCatalog);
        const target = selectedPackId ?? nextCatalog.items[0]?.packId ?? null;
        if (!target) {
          setDetail(null);
          setGroundBenchmark(null);
          setGroundFrame(null);
          return;
        }
        const [nextDetail, groundCatalog] = await Promise.all([
          fetchLidarReplayDetail(target, {
            signal: controller.signal,
          }),
          fetchLidarGroundBenchmarks(target, {
            signal: controller.signal,
          }),
        ]);
        if (controller.signal.aborted) return;
        setSelectedPackId(target);
        setDetail(nextDetail);
        const nextGroundBenchmark = groundCatalog.items[0] ?? null;
        setGroundBenchmark(nextGroundBenchmark);
        setGroundFrameIndex(
          nextGroundBenchmark ? Math.floor(nextGroundBenchmark.frames / 2) : 0,
        );
      } catch (loadError) {
        if (controller.signal.aborted) return;
        setDetail(null);
        setGroundBenchmark(null);
        setGroundFrame(null);
        setError(errorMessage(loadError));
      } finally {
        if (!controller.signal.aborted) setLoading(false);
      }
    })();
    return () => controller.abort();
  }, [reloadGeneration, selectedPackId]);

  useEffect(() => {
    if (!groundBenchmark) {
      setGroundFrame(null);
      setGroundFrameError(null);
      return;
    }
    const controller = new AbortController();
    setGroundFrameLoading(true);
    setGroundFrameError(null);
    void fetchLidarGroundFrame(
      groundBenchmark.benchmarkId,
      groundFrameIndex,
      { signal: controller.signal },
    )
      .then((frame) => {
        if (!controller.signal.aborted) setGroundFrame(frame);
      })
      .catch((loadError) => {
        if (controller.signal.aborted) return;
        setGroundFrame(null);
        setGroundFrameError(errorMessage(loadError));
      })
      .finally(() => {
        if (!controller.signal.aborted) setGroundFrameLoading(false);
      });
    return () => controller.abort();
  }, [groundBenchmark, groundFrameIndex]);

  useEffect(() => {
    const controller = new AbortController();
    setFieldLoading(true);
    setFieldError(null);
    void fetchLidarFieldReviews({ signal: controller.signal })
      .then((nextCatalog) => {
        if (controller.signal.aborted) return;
        const nextReview = nextCatalog.items[0] ?? null;
        setFieldReview(nextReview);
        setFieldWindow(null);
        setFieldWindowIndex(nextReview?.selection.defaultWindowIndex ?? 0);
      })
      .catch((loadError) => {
        if (controller.signal.aborted) return;
        setFieldReview(null);
        setFieldWindow(null);
        setFieldError(errorMessage(loadError));
      })
      .finally(() => {
        if (!controller.signal.aborted) setFieldLoading(false);
      });
    return () => controller.abort();
  }, [reloadGeneration]);

  useEffect(() => {
    if (!fieldReview) return;
    const controller = new AbortController();
    setFieldLoading(true);
    setFieldError(null);
    void fetchLidarFieldReviewWindow(
      fieldReview.reviewId,
      fieldWindowIndex,
      { signal: controller.signal },
    )
      .then((window) => {
        if (!controller.signal.aborted) setFieldWindow(window);
      })
      .catch((loadError) => {
        if (controller.signal.aborted) return;
        setFieldWindow(null);
        setFieldError(errorMessage(loadError));
      })
      .finally(() => {
        if (!controller.signal.aborted) setFieldLoading(false);
      });
    return () => controller.abort();
  }, [fieldReview, fieldWindowIndex]);

  const groundNormalization = groundBenchmark?.inputDomain.normalization ?? null;
  const selectedFieldWindow = fieldReview?.windows[fieldWindowIndex] ?? null;

  return (
    <div className="standard-workspace lidar-quality-workspace">
      {loading && !detail ? (
        <GlassSurface className="lidar-quality-message" padding="lg">
          <StatusBadge tone="accent">Проверка evidence</StatusBadge>
          <h2>Читаем LiDAR replay и quality report</h2>
          <p>Интерфейс покажет pack только после проверки manifest, hashes и equivalence gate.</p>
        </GlassSurface>
      ) : error ? (
        <GlassSurface className="lidar-quality-message" padding="lg">
          <StatusBadge tone="danger">Данные недоступны</StatusBadge>
          <h2>LiDAR quality report не открыт</h2>
          <p>{error}</p>
          <Button
            size="compact"
            variant="secondary"
            onClick={() => setReloadGeneration((value) => value + 1)}
          >
            Повторить
          </Button>
        </GlassSurface>
      ) : !detail ? (
        <GlassSurface className="lidar-quality-message" padding="lg">
          <StatusBadge tone={catalog?.configured ? "neutral" : "warning"}>
            {catalog?.configured ? "Каталог пуст" : "Storage не настроен"}
          </StatusBadge>
          <h2>Lossless LiDAR replay пока не опубликован</h2>
          <p>
            После подготовки первого v2 pack здесь появятся field retention, cadence,
            intensity, pose coverage и readiness следующих стадий.
          </p>
        </GlassSurface>
      ) : (
        <>
          <section className="lidar-device-context" aria-label="Выбранный LiDAR и запись">
            <div className="lidar-device-context__identity">
              <span className="section-eyebrow">ВЫБРАННЫЙ СЕНСОР</span>
              <strong>{deviceLabel ?? "Архивный источник"} · LiDAR</strong>
              <small>
                Запись {fieldReview?.sessionId ?? detail.pack.sessionId}
              </small>
            </div>
            <div className="lidar-device-context__verdict">
              <StatusBadge tone="warning">Диагностическая запись</StatusBadge>
              <p>
                Данные воспроизводятся и доступны для визуального разбора.
                Физическая точность сенсора этой записью не аттестована.
              </p>
            </div>
            <Button
              size="compact"
              variant="secondary"
              onClick={onOpenObservation}
            >
              Открыть наблюдение
            </Button>
          </section>

          <GlassSurface className="lidar-field-review" padding="lg">
            <header className="panel-heading lidar-field-review__heading">
              <div>
                <span className="section-eyebrow">
                  {fieldReview ? "ОБЛАКО LIDAR · RAVNOVES00" : "ОБЛАКО LIDAR · ЗАПИСЬ"}
                </span>
                <h2>
                  {fieldReview
                    ? `Городская сцена: ${selectedFieldWindow?.label ?? fieldReview.displayName}`
                    : `Кадр ${groundFrameIndex + 1} из ${groundBenchmark?.frames ?? 0}`}
                </h2>
                <p>
                  {fieldReview
                    ? "Выберите один из пяти интервалов, вращайте облако мышью и при необходимости включите экспериментальные маски обработки."
                    : "Полевая запись на этом хосте не подключена. Показываем доступную запись выбранного LiDAR без подмешивания публичных датасетов."}
                </p>
              </div>
              <StatusBadge tone={fieldError ? "danger" : "warning"}>
                {fieldError ? "Облако недоступно" : "Только собственные данные"}
              </StatusBadge>
            </header>

            {fieldReview ? (
              <>
                <div
                  className="lidar-field-review__source"
                  aria-label="Источник полевого LiDAR review"
                >
                  <div>
                    <span>Запись</span>
                    <strong>{fieldReview.sessionId}</strong>
                  </div>
                  <div>
                    <span>Интервал записи</span>
                    <strong>
                      {formatNumber(fieldReview.source.timelineStartSeconds, 2)}
                      {"–"}
                      {formatNumber(fieldReview.source.timelineEndSeconds, 2)} с
                    </strong>
                  </div>
                  <div>
                    <span>LiDAR-сэмплов</span>
                    <strong>
                      {fieldReview.source.availableLidarFrames.toLocaleString("ru-RU")}
                    </strong>
                  </div>
                  <div>
                    <span>Исходных точек</span>
                    <strong>
                      {fieldReview.source.pointCount.toLocaleString("ru-RU")}
                    </strong>
                  </div>
                </div>

                <div
                  className="lidar-field-window-list"
                  role="group"
                  aria-label="Полевые сцены RAVNOVES00"
                >
                  {fieldReview.windows.map((window) => (
                    <button
                      type="button"
                      key={window.key}
                      data-selected={
                        window.index === fieldWindowIndex ? "true" : undefined
                      }
                      onClick={() => {
                        setFieldWindow(null);
                        setFieldWindowIndex(window.index);
                      }}
                    >
                      <span>{window.index + 1}</span>
                      <div>
                        <strong>{window.label}</strong>
                        <small>
                          {formatNumber(window.startSeconds, 0)}
                          {"–"}
                          {formatNumber(window.endSeconds, 0)} с ·{" "}
                          {window.sourceLidarSamples} сканов
                        </small>
                      </div>
                    </button>
                  ))}
                </div>

                <section className="lidar-field-stage">
                  <div className="lidar-field-camera">
                    <div className="lidar-field-stage__label">
                      <span>КОНТЕКСТ КАМЕРЫ</span>
                      <strong>
                        {selectedFieldWindow?.label ?? "Выбранная сцена"}
                      </strong>
                    </div>
                    {fieldWindow ? (
                      <img
                        src={fieldWindow.previewUrl}
                        alt={`Кадр камеры: ${fieldWindow.window.label}`}
                      />
                    ) : (
                      <div className="lidar-field-stage__pending">
                        {fieldError ?? "Загружаем кадр выбранной сцены…"}
                      </div>
                    )}
                    <footer>
                      <span>
                        Кадр {selectedFieldWindow?.previewSourceFrameIndex ?? "—"}
                      </span>
                      <span>
                        t = {formatNumber(
                          selectedFieldWindow?.previewSessionSeconds ?? null,
                          2,
                        )}{" "}
                        с
                      </span>
                    </footer>
                  </div>

                  <div className="lidar-field-cloud">
                    <header>
                      <div className="lidar-field-stage__label">
                        <span>НАКОПЛЕННОЕ MAP-ОБЛАКО</span>
                        <strong>
                          {selectedFieldWindow
                            ? `${selectedFieldWindow.sourcePointCount.toLocaleString(
                                "ru-RU",
                              )} исходных · ${selectedFieldWindow.displayPointCount.toLocaleString(
                                "ru-RU",
                              )} показано`
                            : "Ожидание данных"}
                        </strong>
                      </div>
                      <div
                        className="lidar-ground-modes"
                        role="group"
                        aria-label="Режим окраски полевого LiDAR"
                      >
                        {([
                          ["intensity", "Облако"],
                          ["current", "Current"],
                          ["candidate", "Patchwork++"],
                          ["disagreement", "Расхождения"],
                        ] as const).map(([mode, label]) => (
                          <button
                            type="button"
                            key={mode}
                            data-active={
                              fieldViewMode === mode ? "true" : undefined
                            }
                            onClick={() => setFieldViewMode(mode)}
                          >
                            {label}
                          </button>
                        ))}
                      </div>
                    </header>
                    {fieldWindow ? (
                      <LidarGroundPointCloud
                        frame={fieldWindow}
                        mode={fieldViewMode}
                      />
                    ) : (
                      <div className="lidar-ground-scene-placeholder">
                        <StatusBadge tone={fieldError ? "danger" : "accent"}>
                          {fieldError ? "Ошибка" : "Загрузка"}
                        </StatusBadge>
                        <span>
                          {fieldError ?? "Готовим накопленное облако…"}
                        </span>
                      </div>
                    )}
                  </div>
                </section>

                <div className="lidar-field-review__explanation">
                  <StatusBadge tone="warning">Не accuracy</StatusBadge>
                  <p>
                    Маски вычислены отдельно на каждом исходном скане и только
                    затем сведены в map frame. Это legacy E10 vendor-map
                    derivative без intensity и независимой ground-разметки,
                    поэтому результат предназначен для визуального разбора, а
                    не для production-gate.
                  </p>
                  <div className="lidar-ground-legend">
                    <span><i data-color="shared" />Ground у обоих</span>
                    <span><i data-color="current" />Только current</span>
                    <span><i data-color="candidate" />Только Patchwork++</span>
                    <span><i data-color="non-ground" />Оба non-ground</span>
                  </div>
                </div>
              </>
            ) : groundBenchmark ? (
              <section
                className="lidar-fallback-review"
                aria-label="Доступная запись LiDAR"
              >
                <header>
                  <div
                    className="lidar-ground-modes"
                    role="group"
                    aria-label="Режим окраски LiDAR"
                  >
                    {([
                      ["intensity", "Облако"],
                      ["current", "Current"],
                      ["candidate", "Patchwork++"],
                      ["disagreement", "Расхождения"],
                    ] as const).map(([mode, label]) => (
                      <button
                        type="button"
                        key={mode}
                        data-active={groundViewMode === mode ? "true" : undefined}
                        onClick={() => setGroundViewMode(mode)}
                      >
                        {label}
                      </button>
                    ))}
                  </div>
                  <div className="lidar-ground-frame-control">
                    <button
                      type="button"
                      aria-label="Предыдущий LiDAR кадр"
                      disabled={groundFrameIndex === 0}
                      onClick={() =>
                        setGroundFrameIndex((value) => Math.max(0, value - 1))
                      }
                    >
                      −
                    </button>
                    <input
                      type="range"
                      aria-label="Номер LiDAR кадра"
                      min={0}
                      max={Math.max(groundBenchmark.frames - 1, 0)}
                      step={1}
                      value={groundFrameIndex}
                      onChange={(event) =>
                        setGroundFrameIndex(Number(event.currentTarget.value))
                      }
                    />
                    <button
                      type="button"
                      aria-label="Следующий LiDAR кадр"
                      disabled={groundFrameIndex >= groundBenchmark.frames - 1}
                      onClick={() =>
                        setGroundFrameIndex((value) =>
                          Math.min(groundBenchmark.frames - 1, value + 1)
                        )
                      }
                    >
                      +
                    </button>
                  </div>
                </header>
                {groundFrame ? (
                  <LidarGroundPointCloud
                    frame={groundFrame}
                    mode={groundViewMode}
                  />
                ) : (
                  <div className="lidar-ground-scene-placeholder">
                    <StatusBadge tone={groundFrameError ? "danger" : "accent"}>
                      {groundFrameError ? "Кадр недоступен" : "Загрузка"}
                    </StatusBadge>
                    <p>{groundFrameError ?? "Читаем облако LiDAR…"}</p>
                  </div>
                )}
                <footer>
                  Это техническая запись из 66 кадров. Она позволяет проверить
                  геометрию и управление viewer, но не заменяет полевую сцену.
                </footer>
              </section>
            ) : (
              <div className="lidar-field-review__empty">
                <StatusBadge tone={fieldError ? "danger" : "accent"}>
                  {fieldError ? "Ошибка загрузки" : "Проверка evidence"}
                </StatusBadge>
                <p>
                  {fieldError
                    ?? (fieldLoading
                      ? "Читаем RAVNOVES00 field-review артефакт…"
                      : "Field-review артефакт ещё не опубликован.")}
                </p>
              </div>
            )}
          </GlassSurface>

          <section className="metrics-grid" aria-label="Качество LiDAR replay">
            <MetricCard
              featured
              eyebrow="ТЕХНИЧЕСКИХ КАДРОВ"
              value={detail.pack.pointFrames.toLocaleString("ru-RU")}
              detail={`${detail.pack.points.toLocaleString("ru-RU")} точек · indoor contract slice`}
            />
            <MetricCard
              eyebrow="СРЕДНЕЕ ТОЧЕК"
              value={formatNumber(detail.pack.meanPointsPerFrame, 0)}
              detail="На один lio_pcl кадр"
            />
            <MetricCard
              eyebrow="P95 ИНТЕРВАЛА"
              value={formatNumber(detail.pack.p95FrameIntervalMs)}
              unit="мс"
              detail="По exact host monotonic time"
            />
            <MetricCard
              eyebrow="POSE COVERAGE"
              value={formatFraction(detail.pack.poseCoverageFraction)}
              detail={`Порог ${formatNumber(detail.quality.poseBinding.thresholdMs)} мс`}
            />
          </section>

          <details className="lidar-technical-details">
            <summary>
              <span>Технические детали и эксперименты</span>
              <small>
                Целостность записи, допуски стадий, Patchwork++ и contract slice
              </small>
            </summary>
            <div className="lidar-technical-details__content">
          <div className="lidar-quality-grid">
            <GlassSurface className="lidar-quality-panel" padding="lg">
              <header className="panel-heading">
                <div>
                  <span className="section-eyebrow">ЦЕЛОСТНОСТЬ</span>
                  <h2>Lossless replay v2</h2>
                </div>
                <StatusBadge tone="success">Equivalence passed</StatusBadge>
              </header>
              <div className="lidar-quality-facts">
                <div>
                  <span>Сессия</span>
                  <strong>{detail.pack.sessionId}</strong>
                </div>
                <div>
                  <span>Сверено массивов</span>
                  <strong>{detail.equivalence.arraysCompared}</strong>
                </div>
                <div>
                  <span>Несовпадений</span>
                  <strong>{detail.equivalence.arrayMismatches}</strong>
                </div>
                <div>
                  <span>Intensity p50 / p95</span>
                  <strong>
                    {formatNumber(detail.quality.intensity.p50)} /{" "}
                    {formatNumber(detail.quality.intensity.p95)}
                  </strong>
                </div>
              </div>
              <div className="lidar-retention-list">
                {Object.entries(detail.quality.fieldRetention).map(([field, retained]) => (
                  <span key={field} data-retained={retained ? "true" : "false"}>
                    <i aria-hidden="true" />
                    {field.replaceAll("_", " ")}
                  </span>
                ))}
              </div>
            </GlassSurface>

            <GlassSurface className="lidar-quality-panel" padding="lg">
              <header className="panel-heading">
                <div>
                  <span className="section-eyebrow">ДОПУСК СТАДИЙ</span>
                  <h2>Что можно запускать</h2>
                </div>
              </header>
              <div className="lidar-readiness-list">
                {detail.stages.map((stage) => (
                  <div key={stage.stage}>
                    <div>
                      <strong>{stage.stage}</strong>
                      <small>
                        {stage.reasons.length
                          ? stage.reasons.join(" · ")
                          : "Входной контракт выполнен"}
                      </small>
                    </div>
                    <StatusBadge tone={readinessTone(stage.readiness)}>
                      {readinessLabel(stage.readiness)}
                    </StatusBadge>
                  </div>
                ))}
              </div>
            </GlassSurface>
          </div>

          <GlassSurface className="lidar-ground-benchmark" padding="lg">
            <header className="panel-heading">
              <div>
                <span className="section-eyebrow">GROUND A/B · L2</span>
                <h2>Текущий heuristic против Patchwork++</h2>
              </div>
              <StatusBadge tone={groundBenchmark ? "warning" : "neutral"}>
                {groundBenchmark ? "Diagnostic only" : "Нет результата"}
              </StatusBadge>
            </header>
            {groundBenchmark ? (
              <>
                <section
                  className="lidar-ground-metrics"
                  aria-label="Ground segmentation A/B"
                >
                  <div>
                    <span>Текущий ground p50</span>
                    <strong>
                      {formatFraction(
                        groundBenchmark.current.groundFraction.p50,
                      )}
                    </strong>
                    <small>
                      {formatNumber(
                        groundBenchmark.current.latencyMs.p95,
                        2,
                      )}{" "}
                      мс p95
                    </small>
                  </div>
                  <div>
                    <span>Patchwork++ ground p50</span>
                    <strong>
                      {formatFraction(
                        groundBenchmark.candidate.groundFraction.p50,
                      )}
                    </strong>
                    <small>
                      {formatNumber(
                        groundBenchmark.candidate.latencyMs.p95,
                        2,
                      )}{" "}
                      мс p95
                    </small>
                  </div>
                  <div>
                    <span>Algorithm IoU p50</span>
                    <strong>
                      {formatFraction(
                        groundBenchmark.comparison.algorithmGroundIou.p50,
                      )}
                    </strong>
                    <small>Не является accuracy</small>
                  </div>
                  <div>
                    <span>Disagreement p50</span>
                    <strong>
                      {formatFraction(
                        groundBenchmark.comparison
                          .groundDisagreementFraction.p50,
                      )}
                    </strong>
                    <small>
                      {groundBenchmark.frames.toLocaleString("ru-RU")} кадров
                    </small>
                  </div>
                </section>
                <section
                  className="lidar-ground-review"
                  aria-label="Визуальное сравнение ground segmentation"
                >
                  <header>
                    <div>
                      <span className="section-eyebrow">
                        ТЕХНИЧЕСКИЙ CONTRACT SLICE · VIEWER_LIVE
                      </span>
                      <h3>Indoor-проверка point-aligned контракта</h3>
                      <p>
                        Этот короткий indoor-срез подтверждает выравнивание XYZ
                        и масок, но не является полевой оценкой качества. Для
                        улицы используйте RAVNOVES00 выше.
                      </p>
                    </div>
                    <div className="lidar-ground-frame-status">
                      <strong>
                        Кадр {groundFrameIndex + 1} / {groundBenchmark.frames}
                      </strong>
                      <span>
                        {groundFrame
                          ? `${groundFrame.pointCount.toLocaleString("ru-RU")} точек`
                          : groundFrameLoading
                            ? "Загрузка…"
                            : "Нет данных"}
                      </span>
                    </div>
                  </header>
                  <div className="lidar-ground-review__controls">
                    <div
                      className="lidar-ground-modes"
                      role="group"
                      aria-label="Режим окраски LiDAR"
                    >
                      {([
                        ["intensity", "Интенсивность"],
                        ["current", "Current"],
                        ["candidate", "Patchwork++"],
                        ["disagreement", "Расхождения"],
                      ] as const).map(([mode, label]) => (
                        <button
                          type="button"
                          key={mode}
                          data-active={groundViewMode === mode ? "true" : undefined}
                          onClick={() => setGroundViewMode(mode)}
                        >
                          {label}
                        </button>
                      ))}
                    </div>
                    <div className="lidar-ground-frame-control">
                      <button
                        type="button"
                        aria-label="Предыдущий LiDAR кадр"
                        disabled={groundFrameIndex === 0}
                        onClick={() =>
                          setGroundFrameIndex((value) => Math.max(0, value - 1))
                        }
                      >
                        −
                      </button>
                      <input
                        type="range"
                        aria-label="Номер LiDAR кадра"
                        min={0}
                        max={Math.max(groundBenchmark.frames - 1, 0)}
                        step={1}
                        value={groundFrameIndex}
                        onChange={(event) =>
                          setGroundFrameIndex(Number(event.currentTarget.value))
                        }
                      />
                      <button
                        type="button"
                        aria-label="Следующий LiDAR кадр"
                        disabled={
                          groundFrameIndex >= groundBenchmark.frames - 1
                        }
                        onClick={() =>
                          setGroundFrameIndex((value) =>
                            Math.min(groundBenchmark.frames - 1, value + 1)
                          )
                        }
                      >
                        +
                      </button>
                    </div>
                  </div>
                  {groundFrame ? (
                    <LidarGroundPointCloud
                      frame={groundFrame}
                      mode={groundViewMode}
                    />
                  ) : (
                    <div className="lidar-ground-scene-placeholder">
                      <StatusBadge tone={groundFrameError ? "danger" : "accent"}>
                        {groundFrameError ? "Frame недоступен" : "Читаем frame"}
                      </StatusBadge>
                      <p>{groundFrameError ?? "Проверяем point alignment и masks."}</p>
                    </div>
                  )}
                  <div className="lidar-ground-legend">
                    <span><i data-color="shared" />Оба считают ground</span>
                    <span><i data-color="current" />Только current</span>
                    <span><i data-color="candidate" />Только Patchwork++</span>
                    <span><i data-color="non-ground" />Оба non-ground</span>
                  </div>
                </section>
                <div className="lidar-ground-gates">
                  <div>
                    <StatusBadge tone="danger">
                      Входной контракт не принят
                    </StatusBadge>
                    <p>
                      Firmware 3.0.2 подтверждает внутренний MID-360 raw feed,
                      но текущий MQTT остаётся прореженным LIO/map-продуктом.
                    </p>
                  </div>
                  <div>
                    <StatusBadge tone="warning">
                      {groundNormalization?.heightEvidence === "operator-estimated"
                        ? "Высота применена диагностически"
                        : "Высота не принята"}
                    </StatusBadge>
                    <p>
                      {groundNormalization?.heightEvidence === "operator-estimated"
                        ? `Ручной замер ${formatNumber(
                            groundNormalization.sensorHeightM,
                            2,
                          )} м сдвигает optical origin, но не заменяет runtime calibration.`
                        : "Нужна привязка optical origin к map и штатной установке."}
                    </p>
                  </div>
                  <div>
                    <StatusBadge tone="warning">Разметка не принята</StatusBadge>
                    <p>
                      Ground IoU и recall появятся только после human review;
                      визуальное расхождение само по себе не является accuracy.
                    </p>
                  </div>
                </div>
                <footer className="lidar-ground-footer">
                  <span>
                    {groundBenchmark.current.provider.providerId}
                  </span>
                  <span>
                    {groundBenchmark.candidate.provider.providerId}
                    {groundBenchmark.candidate.provider.sourceCommit
                      ? ` · ${groundBenchmark.candidate.provider.sourceCommit.slice(0, 12)}`
                      : ""}
                  </span>
                </footer>
              </>
            ) : (
              <p className="lidar-ground-empty">
                Для выбранного replay pack ещё нет проверенного ground benchmark.
              </p>
            )}
          </GlassSurface>

          <GlassSurface className="lidar-pack-catalog" padding="lg">
            <header className="panel-heading">
              <div>
                <span className="section-eyebrow">REPLAY PACKS</span>
                <h2>Проверенные записи</h2>
              </div>
              <small>
                {catalog?.validTotal ?? 0} valid · {catalog?.duplicateTotal ?? 0} superseded ·{" "}
                {catalog?.invalidTotal ?? 0} rejected
              </small>
            </header>
            <div className="lidar-pack-list">
              {catalog?.items.map((pack) => (
                <button
                  type="button"
                  key={pack.packId}
                  data-selected={pack.packId === detail.pack.packId ? "true" : undefined}
                  onClick={() => setSelectedPackId(pack.packId)}
                >
                  <div>
                    <strong>{pack.sessionId}</strong>
                    <small>
                      {pack.pointFrames.toLocaleString("ru-RU")} кадров ·{" "}
                      {pack.points.toLocaleString("ru-RU")} точек
                    </small>
                  </div>
                  <StatusBadge tone="success">Passed</StatusBadge>
                </button>
              ))}
            </div>
            <footer>
              {detail.quality.limitations.map((limitation) => (
                <span key={limitation}>{limitation}</span>
              ))}
            </footer>
          </GlassSurface>
            </div>
          </details>
        </>
      )}
    </div>
  );
}
