import type {
  MonitoringEntitySummary,
  MonitoringHistoryBundle,
  MonitoringMode,
  MonitoringPressure,
  MonitoringResponse,
  MonitoringSeriesBundle,
} from "@coder-studio/core";
import { Topics } from "@coder-studio/core";
import { useAtomValue } from "jotai";
import { useEffect, useMemo, useRef, useState } from "react";
import { connectionStatusAtom, wsClientAtom } from "../../atoms/connection";
import { Button, Notice, SegmentedControl, Tag } from "../../components/ui";
import { useViewport } from "../../hooks/use-viewport";
import { useTranslation } from "../../lib/i18n";
import { formatBytes, formatLoadAverage, formatPercent, formatUptime } from "./formatters";
import { Sparkline } from "./sparkline";

type SortMode = "cpu" | "memory";
export type TimeWindow = "5m" | "15m" | "30m";
type MonitoringViewStatus = "loading" | "disabled" | "ready" | "degraded" | "waiting" | "empty";
export type MonitoringDashboardProps = UseMonitoringDataResult & {
  onOpenSettings?: () => void;
  showRefreshControls?: boolean;
  timeWindow?: TimeWindow;
  onTimeWindowChange?: (timeWindow: TimeWindow) => void;
};

export type UseMonitoringDataResult = {
  error: string | null;
  loading: boolean;
  refresh: () => Promise<void>;
  response: MonitoringResponse | null;
};

const TIME_WINDOW_MS: Record<TimeWindow, number> = {
  "5m": 5 * 60 * 1000,
  "15m": 15 * 60 * 1000,
  "30m": 30 * 60 * 1000,
};

function MetricRow({ label, value }: { label: string; value: string }) {
  return (
    <div className="monitoring-metric">
      <span className="monitoring-metric__label">{label}</span>
      <strong className="monitoring-metric__value">{value}</strong>
    </div>
  );
}

function filterHistoryWindow(
  bundle: MonitoringSeriesBundle | null | undefined,
  sampledAt: number,
  timeWindow: TimeWindow
): MonitoringSeriesBundle | null {
  if (!bundle) {
    return null;
  }

  const minSampledAt = sampledAt - TIME_WINDOW_MS[timeWindow];
  return {
    points: bundle.points.filter((point) => point.sampledAt >= minSampledAt),
  };
}

function HistorySparkline({
  bundle,
  metric,
  sampledAt,
  timeWindow,
}: {
  bundle: MonitoringSeriesBundle | null | undefined;
  metric: "cpuPercent" | "memoryBytes";
  sampledAt: number;
  timeWindow: TimeWindow;
}) {
  const filteredBundle = filterHistoryWindow(bundle, sampledAt, timeWindow);

  if (!filteredBundle) {
    return null;
  }

  return (
    <div className="monitoring-history-strip">
      <Sparkline metric={metric} points={filteredBundle.points} />
    </div>
  );
}

function sortEntities(entities: MonitoringEntitySummary[], mode: SortMode) {
  return [...entities].sort((left, right) => {
    const leftValue = mode === "cpu" ? (left.cpuPercent ?? -1) : (left.memoryBytes ?? -1);
    const rightValue = mode === "cpu" ? (right.cpuPercent ?? -1) : (right.memoryBytes ?? -1);
    return rightValue - leftValue;
  });
}

function sortAttributionTree(
  workspaces: MonitoringEntitySummary[],
  childEntities: MonitoringEntitySummary[],
  mode: SortMode
) {
  const childrenByParent = new Map<string, MonitoringEntitySummary[]>();
  for (const entity of childEntities) {
    const parentId = entity.parentId ?? "";
    childrenByParent.set(parentId, [...(childrenByParent.get(parentId) ?? []), entity]);
  }

  return sortEntities(workspaces, mode).flatMap((workspace) => [
    workspace,
    ...sortEntities(childrenByParent.get(workspace.id) ?? [], mode),
  ]);
}

function entityHistory(
  history: MonitoringHistoryBundle,
  entity: MonitoringEntitySummary
): MonitoringSeriesBundle | null {
  if (entity.kind === "workspace") {
    return history.workspaces[entity.id] ?? null;
  }
  if (entity.kind === "session") {
    return history.sessions[entity.id] ?? null;
  }
  if (entity.kind === "subprocess_group") {
    return history.subprocessGroups[entity.id] ?? null;
  }
  return null;
}

function entityDetailRows(entity: MonitoringEntitySummary, t: ReturnType<typeof useTranslation>) {
  return [
    { label: t("monitoring.cpu"), value: formatPercent(entity.cpuPercent) },
    { label: t("monitoring.memory"), value: formatBytes(entity.memoryBytes) },
    { label: t("monitoring.process_count"), value: String(entity.processCount) },
    { label: t("monitoring.uptime"), value: formatUptime(entity.uptimeSec) },
  ];
}

function formatEntityKindLabel(
  kind: MonitoringEntitySummary["kind"],
  t: ReturnType<typeof useTranslation>
) {
  switch (kind) {
    case "workspace":
      return t("monitoring.entity_kind_workspace");
    case "session":
      return t("monitoring.entity_kind_session");
    case "subprocess_group":
      return t("monitoring.entity_kind_subprocess");
    case "background_group":
      return t("monitoring.entity_kind_background");
  }
}

function formatMonitoringMode(mode: MonitoringMode, t: ReturnType<typeof useTranslation>) {
  switch (mode) {
    case "disabled":
      return t("monitoring.mode_disabled");
    case "light":
      return t("monitoring.mode_light");
    case "standard":
      return t("monitoring.mode_standard");
    case "deep":
      return t("monitoring.mode_deep");
  }
}

function formatPressureLabel(pressure: MonitoringPressure, t: ReturnType<typeof useTranslation>) {
  switch (pressure) {
    case "normal":
      return t("monitoring.pressure_normal");
    case "elevated":
      return t("monitoring.pressure_elevated");
    case "hot":
      return t("monitoring.pressure_hot");
    case "unknown":
    default:
      return t("monitoring.pressure_unknown");
  }
}

function EntityList({
  entities,
  selectedEntityId,
  onSelect,
  history,
  sampledAt,
  timeWindow,
}: {
  entities: MonitoringEntitySummary[];
  selectedEntityId: string | null;
  onSelect: (entity: MonitoringEntitySummary) => void;
  history: MonitoringHistoryBundle;
  sampledAt: number;
  timeWindow: TimeWindow;
}) {
  const t = useTranslation();

  return (
    <div className="monitoring-process-list">
      {entities.map((entity) => {
        const kindLabel = formatEntityKindLabel(entity.kind, t);
        const displayTitle = entity.label;
        return (
          <button
            key={entity.id}
            type="button"
            aria-label={`${kindLabel} ${displayTitle} ${formatPercent(entity.cpuPercent)} / ${formatBytes(
              entity.memoryBytes
            )}`}
            className={`monitoring-entity-row ${entity.parentId ? "monitoring-entity-row--child" : ""} ${
              selectedEntityId === entity.id ? "monitoring-entity-row--selected" : ""
            }`}
            onClick={() => onSelect(entity)}
          >
            <div className="monitoring-entity-row__copy">
              <strong className="monitoring-entity-row__title">{displayTitle}</strong>
              <span className="monitoring-entity-row__meta">
                {kindLabel} · {formatPercent(entity.cpuPercent)} / {formatBytes(entity.memoryBytes)}
              </span>
            </div>
            <HistorySparkline
              bundle={entityHistory(history, entity)}
              metric="cpuPercent"
              sampledAt={sampledAt}
              timeWindow={timeWindow}
            />
          </button>
        );
      })}
    </div>
  );
}

export function useMonitoringData(): UseMonitoringDataResult {
  const t = useTranslation();
  const wsClient = useAtomValue(wsClientAtom);
  const connectionStatus = useAtomValue(connectionStatusAtom);
  const [response, setResponse] = useState<MonitoringResponse | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const versionCounterRef = useRef(0);
  const latestIssuedRequestRef = useRef(0);
  const latestAppliedWriteRef = useRef(0);

  const issueRequestVersion = () => {
    const nextVersion = versionCounterRef.current + 1;
    versionCounterRef.current = nextVersion;
    latestIssuedRequestRef.current = nextVersion;
    return nextVersion;
  };

  const commitRequestWrite = (version: number, apply: () => void) => {
    if (version !== latestIssuedRequestRef.current || version <= latestAppliedWriteRef.current) {
      return false;
    }

    latestAppliedWriteRef.current = version;
    apply();
    return true;
  };

  useEffect(() => {
    if (!wsClient || connectionStatus !== "connected") {
      return;
    }

    let cancelled = false;

    const load = async () => {
      const requestVersion = issueRequestVersion();
      setLoading(true);
      setError(null);

      try {
        const next = await wsClient.sendCommand<MonitoringResponse>(
          "monitoring.get",
          {},
          undefined
        );
        if (!cancelled) {
          commitRequestWrite(requestVersion, () => {
            setResponse(next);
            setError(null);
            setLoading(false);
          });
        }
      } catch (loadError) {
        if (!cancelled) {
          commitRequestWrite(requestVersion, () => {
            setError(loadError instanceof Error ? loadError.message : t("monitoring.load_failed"));
            setLoading(false);
          });
        }
      }
    };

    void load();
    const unsubscribe = wsClient.subscribe(
      [Topics.monitoringSnapshotUpdated],
      (_topic, payload) => {
        const nextVersion = versionCounterRef.current + 1;
        versionCounterRef.current = nextVersion;
        latestAppliedWriteRef.current = nextVersion;
        setResponse(payload as MonitoringResponse);
        setLoading(false);
        setError(null);
      }
    );

    return () => {
      cancelled = true;
      unsubscribe();
    };
  }, [connectionStatus, t, wsClient]);

  const refresh = async () => {
    if (!wsClient) {
      return;
    }

    const requestVersion = issueRequestVersion();

    try {
      setError(null);
      const next = await wsClient.sendCommand<MonitoringResponse>(
        "monitoring.recheck",
        {},
        undefined
      );
      commitRequestWrite(requestVersion, () => {
        setResponse(next);
        setError(null);
        setLoading(false);
      });
    } catch (refreshError) {
      commitRequestWrite(requestVersion, () => {
        setError(
          refreshError instanceof Error ? refreshError.message : t("monitoring.refresh_failed")
        );
        setLoading(false);
      });
    }
  };

  return { error, loading, refresh, response };
}

export function MonitoringDashboard({
  error,
  loading,
  onOpenSettings,
  onTimeWindowChange,
  refresh: onRefresh,
  response,
  showRefreshControls = true,
  timeWindow: controlledTimeWindow,
}: MonitoringDashboardProps) {
  const t = useTranslation();
  const isMobile = useViewport() === "mobile";
  const [sortMode, setSortMode] = useState<SortMode>("cpu");
  const [internalTimeWindow, setInternalTimeWindow] = useState<TimeWindow>("15m");
  const [selectedEntityId, setSelectedEntityId] = useState<string | null>(null);
  const timeWindow = controlledTimeWindow ?? internalTimeWindow;

  const handleTimeWindowChange = (nextTimeWindow: TimeWindow) => {
    if (controlledTimeWindow === undefined) {
      setInternalTimeWindow(nextTimeWindow);
    }
    onTimeWindowChange?.(nextTimeWindow);
  };

  const attributionEntities = useMemo(() => {
    if (!response) {
      return [];
    }

    return sortAttributionTree(
      response.snapshot.workspaces,
      [
        ...response.snapshot.sessions,
        ...response.snapshot.backgroundGroups.filter((entity) =>
          entity.parentId?.startsWith("workspace:")
        ),
      ],
      sortMode
    );
  }, [response, sortMode]);

  const processEntities = useMemo(() => {
    if (!response) {
      return [];
    }

    return sortEntities(response.snapshot.subprocessGroups, sortMode);
  }, [response, sortMode]);

  const backgroundEntities = useMemo(() => {
    if (!response) {
      return [];
    }

    return sortEntities(
      response.snapshot.backgroundGroups.filter((entity) => !entity.parentId),
      sortMode
    );
  }, [response, sortMode]);

  const selectableEntities = useMemo(() => {
    if (!response) {
      return [];
    }

    return [
      ...sortEntities(response.snapshot.workspaces, sortMode),
      ...sortEntities(response.snapshot.sessions, sortMode),
      ...sortEntities(response.snapshot.subprocessGroups, sortMode),
      ...sortEntities(response.snapshot.backgroundGroups, sortMode),
    ];
  }, [response, sortMode]);

  const selectedEntity = useMemo(() => {
    if (!response) {
      return null;
    }

    return (
      [
        ...response.snapshot.workspaces,
        ...response.snapshot.sessions,
        ...response.snapshot.subprocessGroups,
        ...response.snapshot.backgroundGroups,
      ].find((entity) => entity.id === selectedEntityId) ?? null
    );
  }, [response, selectedEntityId]);

  useEffect(() => {
    if (!selectableEntities.length) {
      setSelectedEntityId(null);
      return;
    }

    setSelectedEntityId((current) =>
      current && selectableEntities.some((entity) => entity.id === current)
        ? current
        : (selectableEntities[0]?.id ?? null)
    );
  }, [selectableEntities]);

  const runtimeStatus = useMemo<MonitoringViewStatus>(() => {
    if (!response) {
      return "loading";
    }
    if (!response.settings.runtimeSummaryEnabled) {
      return "disabled";
    }
    if (response.snapshot.runtime) {
      return "ready";
    }
    if (response.telemetry?.degraded) {
      return "degraded";
    }
    return "waiting";
  }, [response]);

  const attributionStatus = useMemo<MonitoringViewStatus>(() => {
    if (!response) {
      return "loading";
    }
    if (!response.settings.workspaceAttributionEnabled) {
      return "disabled";
    }
    if (attributionEntities.length > 0) {
      return "ready";
    }
    if (runtimeStatus === "degraded") {
      return "degraded";
    }
    if (runtimeStatus === "waiting") {
      return "waiting";
    }
    return "empty";
  }, [attributionEntities.length, response, runtimeStatus]);

  const processStatus = useMemo<MonitoringViewStatus>(() => {
    if (!response) {
      return "loading";
    }
    if (!response.settings.subprocessDrilldownEnabled) {
      return "disabled";
    }
    if (processEntities.length > 0) {
      return "ready";
    }
    if (runtimeStatus === "degraded") {
      return "degraded";
    }
    if (runtimeStatus === "waiting") {
      return "waiting";
    }
    return "empty";
  }, [processEntities.length, response, runtimeStatus]);

  const backgroundStatus = useMemo<MonitoringViewStatus>(() => {
    if (!response) {
      return "loading";
    }
    if (!response.settings.runtimeSummaryEnabled) {
      return "disabled";
    }
    if (backgroundEntities.length > 0) {
      return "ready";
    }
    if (runtimeStatus === "degraded") {
      return "degraded";
    }
    if (runtimeStatus === "waiting") {
      return "waiting";
    }
    return "empty";
  }, [backgroundEntities.length, response, runtimeStatus]);

  const primaryState =
    loading || (error && !response) ? (
      <Notice
        title={loading ? t("monitoring.title") : t("monitoring.load_failed")}
        message={loading ? t("monitoring.loading") : (error ?? t("monitoring.load_failed"))}
        tone={loading ? "info" : "error"}
      />
    ) : null;
  const dashboardToolbar = showRefreshControls ? (
    <div className="monitoring-dashboard-toolbar">
      <div className="monitoring-dashboard-toolbar__copy">
        {response ? (
          <Tag color="neutral" caps={false}>
            {formatMonitoringMode(response.snapshot.mode, t)}
          </Tag>
        ) : null}
        <span className="monitoring-dashboard-toolbar__label">{t("monitoring.time_window")}</span>
      </div>
      <div className="monitoring-dashboard-toolbar__controls">
        <SegmentedControl
          aria-label={t("monitoring.time_window")}
          size="sm"
          value={timeWindow}
          onChange={(value) => handleTimeWindowChange(value as TimeWindow)}
          options={[
            { value: "5m", label: "5m" },
            { value: "15m", label: "15m" },
            { value: "30m", label: "30m" },
          ]}
        />
        {showRefreshControls ? (
          <Button
            aria-label={`${t("action.refresh")} ${t("monitoring.command_label").toLowerCase()}`}
            size={isMobile ? "sm" : undefined}
            variant={isMobile ? "ghost" : "secondary"}
            onClick={() => void onRefresh()}
          >
            {t("action.refresh")}
          </Button>
        ) : null}
      </div>
    </div>
  ) : null;

  const disabledState =
    response && !response.settings.enabled ? (
      <div className="monitoring-card monitoring-card--empty">
        <h2 className="monitoring-card__title">{t("monitoring.disabled_title")}</h2>
        <p>{t("monitoring.disabled_description")}</p>
        {onOpenSettings ? (
          <div className="settings-actions-row">
            <Button variant="secondary" onClick={onOpenSettings}>
              {t("monitoring.open_settings")}
            </Button>
          </div>
        ) : null}
      </div>
    ) : null;
  const renderDetailPanel = () =>
    response && response.settings.enabled ? (
      <div className="monitoring-detail monitoring-detail-panel">
        <div className="monitoring-card__header">
          <div className="monitoring-panel-header__copy">
            <h2>{t("monitoring.detail_panel")}</h2>
            <p>{t("monitoring.select_entity")}</p>
          </div>
          {selectedEntity ? (
            <Tag color="neutral" caps={false}>
              {formatEntityKindLabel(selectedEntity.kind, t)}
            </Tag>
          ) : null}
        </div>
        {selectedEntity ? (
          <>
            <h3 className="monitoring-detail__entity-title">{selectedEntity.label}</h3>
            {selectedEntity.kind === "subprocess_group" ? (
              <code className="monitoring-detail__path">{selectedEntity.label}</code>
            ) : null}
            {entityDetailRows(selectedEntity, t).map((row) => (
              <MetricRow key={row.label} label={row.label} value={row.value} />
            ))}
            <HistorySparkline
              bundle={entityHistory(response.history, selectedEntity)}
              metric="cpuPercent"
              sampledAt={response.snapshot.sampledAt}
              timeWindow={timeWindow}
            />
          </>
        ) : null}
      </div>
    ) : null;

  const dashboardSections =
    response && response.settings.enabled ? (
      <section className="monitoring-dashboard-grid">
        <div className="monitoring-overview-grid">
          <div className="monitoring-card">
            <div className="monitoring-card__header">
              <div className="monitoring-panel-header__copy">
                <h2>{t("monitoring.host_overview")}</h2>
                <p>{t("monitoring.host_overview_description")}</p>
              </div>
              <Tag color="neutral" caps={false}>
                {formatPressureLabel(response.snapshot.host?.pressure ?? "unknown", t)}
              </Tag>
            </div>
            <MetricRow
              label={t("monitoring.cpu")}
              value={formatPercent(response.snapshot.host?.cpuPercent ?? null)}
            />
            <MetricRow
              label={t("monitoring.memory")}
              value={formatBytes(response.snapshot.host?.memoryUsedBytes ?? null)}
            />
            <MetricRow
              label={t("monitoring.available_memory")}
              value={formatBytes(response.snapshot.host?.memoryAvailableBytes ?? null)}
            />
            <MetricRow
              label={t("monitoring.load_average")}
              value={formatLoadAverage(response.snapshot.host?.loadAverage ?? null)}
            />
            <MetricRow
              label={t("monitoring.uptime")}
              value={formatUptime(response.snapshot.host?.uptimeSec ?? null)}
            />
            {response.snapshot.host ? (
              <HistorySparkline
                bundle={response.history.host}
                metric="cpuPercent"
                sampledAt={response.snapshot.sampledAt}
                timeWindow={timeWindow}
              />
            ) : null}
          </div>

          <div className="monitoring-card">
            <div className="monitoring-card__header">
              <div className="monitoring-panel-header__copy">
                <h2>{t("monitoring.runtime_summary_title")}</h2>
                <p>{t("monitoring.runtime_summary_description")}</p>
              </div>
              <Tag color="neutral" caps={false}>
                {formatMonitoringMode(response.snapshot.mode, t)}
              </Tag>
            </div>
            {runtimeStatus === "ready" && response.snapshot.runtime ? (
              <>
                <MetricRow
                  label={t("monitoring.server_cpu")}
                  value={formatPercent(response.snapshot.runtime.serverCpuPercent)}
                />
                <MetricRow
                  label={t("monitoring.server_memory")}
                  value={formatBytes(response.snapshot.runtime.serverMemoryBytes)}
                />
                <MetricRow
                  label={t("monitoring.managed_cpu")}
                  value={formatPercent(response.snapshot.runtime.totalManagedCpuPercent)}
                />
                <MetricRow
                  label={t("monitoring.managed_memory")}
                  value={formatBytes(response.snapshot.runtime.totalManagedMemoryBytes)}
                />
                <MetricRow
                  label={t("monitoring.process_count")}
                  value={String(response.snapshot.runtime.managedProcessCount)}
                />
                <HistorySparkline
                  bundle={response.history.runtime}
                  metric="cpuPercent"
                  sampledAt={response.snapshot.sampledAt}
                  timeWindow={timeWindow}
                />
              </>
            ) : runtimeStatus === "degraded" ? (
              <Notice
                title={t("monitoring.process_collection_degraded")}
                message={t("monitoring.process_collection_unavailable")}
                tone="warning"
              />
            ) : runtimeStatus === "waiting" ? (
              <Notice
                title={t("monitoring.runtime_summary_pending")}
                message={t("monitoring.runtime_summary_pending_description")}
                tone="info"
              />
            ) : (
              <Notice
                title={t("monitoring.runtime_summary_disabled")}
                message={t("monitoring.enable_runtime_summary")}
                tone="info"
              />
            )}
          </div>
        </div>

        <section className="monitoring-attribution">
          <div className="monitoring-tree">
            <div className="monitoring-card__header">
              <div className="monitoring-panel-header__copy">
                <h2>{t("monitoring.attribution_tree")}</h2>
                <p>{t("monitoring.attribution_description")}</p>
              </div>
              <div className="monitoring-panel-header__actions">
                <SegmentedControl
                  aria-label={t("monitoring.sort_by")}
                  size="sm"
                  value={sortMode}
                  onChange={(value) => setSortMode(value as SortMode)}
                  options={[
                    { value: "cpu", label: t("monitoring.cpu") },
                    { value: "memory", label: t("monitoring.memory") },
                  ]}
                />
              </div>
            </div>
            {attributionStatus === "disabled" ? (
              <Notice
                title={t("monitoring.attribution_disabled")}
                message={t("monitoring.enable_attribution")}
                tone="info"
              />
            ) : attributionStatus === "ready" ? (
              <EntityList
                entities={attributionEntities}
                selectedEntityId={selectedEntityId}
                onSelect={(entity) => setSelectedEntityId(entity.id)}
                history={response.history}
                sampledAt={response.snapshot.sampledAt}
                timeWindow={timeWindow}
              />
            ) : attributionStatus === "degraded" ? (
              <Notice
                title={t("monitoring.process_collection_degraded")}
                message={t("monitoring.process_collection_unavailable")}
                tone="warning"
              />
            ) : attributionStatus === "waiting" ? (
              <Notice
                title={t("monitoring.runtime_summary_pending")}
                message={t("monitoring.runtime_summary_pending_description")}
                tone="info"
              />
            ) : (
              <Notice
                title={t("monitoring.attribution_empty")}
                message={t("monitoring.attribution_empty_description")}
                tone="info"
              />
            )}
          </div>

          {!isMobile ? renderDetailPanel() : null}
        </section>

        {isMobile && selectedEntity ? renderDetailPanel() : null}

        <section className="monitoring-tree monitoring-process-section">
          <div className="monitoring-card__header">
            <div className="monitoring-panel-header__copy">
              <h2>{t("monitoring.subprocess_drilldown")}</h2>
              <p>{t("monitoring.subprocess_description")}</p>
            </div>
          </div>
          {processStatus === "disabled" ? (
            <Notice
              title={t("monitoring.subprocess_disabled")}
              message={t("monitoring.enable_subprocess")}
              tone="info"
            />
          ) : processStatus === "ready" ? (
            <EntityList
              entities={processEntities}
              selectedEntityId={selectedEntityId}
              onSelect={(entity) => setSelectedEntityId(entity.id)}
              history={response.history}
              sampledAt={response.snapshot.sampledAt}
              timeWindow={timeWindow}
            />
          ) : processStatus === "degraded" ? (
            <Notice
              title={t("monitoring.process_collection_degraded")}
              message={t("monitoring.process_collection_unavailable")}
              tone="warning"
            />
          ) : processStatus === "waiting" ? (
            <Notice
              title={t("monitoring.runtime_summary_pending")}
              message={t("monitoring.runtime_summary_pending_description")}
              tone="info"
            />
          ) : (
            <Notice
              title={t("monitoring.subprocess_empty")}
              message={t("monitoring.subprocess_empty_description")}
              tone="info"
            />
          )}
        </section>

        <section className="monitoring-tree monitoring-process-section">
          <div className="monitoring-card__header">
            <div className="monitoring-panel-header__copy">
              <h2>{t("monitoring.background_runtime")}</h2>
              <p>{t("monitoring.background_runtime_description")}</p>
            </div>
          </div>
          {backgroundStatus === "ready" ? (
            <EntityList
              entities={backgroundEntities}
              selectedEntityId={selectedEntityId}
              onSelect={(entity) => setSelectedEntityId(entity.id)}
              history={response.history}
              sampledAt={response.snapshot.sampledAt}
              timeWindow={timeWindow}
            />
          ) : backgroundStatus === "degraded" ? (
            <Notice
              title={t("monitoring.process_collection_degraded")}
              message={t("monitoring.process_collection_unavailable")}
              tone="warning"
            />
          ) : backgroundStatus === "waiting" ? (
            <Notice
              title={t("monitoring.runtime_summary_pending")}
              message={t("monitoring.runtime_summary_pending_description")}
              tone="info"
            />
          ) : backgroundStatus === "disabled" ? (
            <Notice
              title={t("monitoring.runtime_summary_disabled")}
              message={t("monitoring.enable_runtime_summary")}
              tone="info"
            />
          ) : (
            <Notice
              title={t("monitoring.background_runtime_empty")}
              message={t("monitoring.background_runtime_empty_description")}
              tone="info"
            />
          )}
        </section>
      </section>
    ) : null;

  return (
    <div className={`monitoring-dashboard ${isMobile ? "monitoring-dashboard--mobile" : ""}`}>
      {dashboardToolbar}
      {error && response ? (
        <Notice title={t("monitoring.refresh_failed")} message={error} tone="error" />
      ) : null}
      {primaryState}
      {disabledState}
      {dashboardSections}
    </div>
  );
}

export function MonitoringContent() {
  const monitoringData = useMonitoringData();
  const isMobile = useViewport() === "mobile";

  return (
    <div className={`monitoring-page ${isMobile ? "monitoring-page--mobile" : ""}`}>
      <main className="monitoring-content">
        <MonitoringDashboard {...monitoringData} />
      </main>
    </div>
  );
}
