import { Fragment, useState } from "react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import {
  apiPost,
  disconnectUmeToken,
  fetchUmeCurrentAlarms,
  fetchUmeNe,
  cancelUmeAlarmSubscription,
  clearLocalUmeAlarmSubscription,
  establishUmeAlarmSubscription,
  fetchUmeAlarmSubscriptionStatus,
  fetchUmeSyncStatus,
  fetchUmeTokenStatus,
  refreshUmeToken,
} from "../services/api";
import { HelpHint } from "../components/HelpHint";
import { queryKeys } from "../constants/queryKeys";
import { useI18n } from "../i18n";
import { useToast } from "../hooks/useToast";
import type { UmeAlarmSubscriptionStatus } from "../types";
import { pageCount, runtimeIntervalLabel } from "../utils/display";
import { formatSystemTime } from "../utils/time";

export function UmePage() {
  const { t } = useI18n();
  const { showOk, showError } = useToast();
  const queryClient = useQueryClient();
  const [tokenOpError, setTokenOpError] = useState("");
  const [runtimeTaskError, setRuntimeTaskError] = useState("");
  const [subscriptionOpError, setSubscriptionOpError] = useState("");
  const [syncPage, setSyncPage] = useState(1);
  const [syncPageSize, setSyncPageSize] = useState(20);
  const [neKeyword, setNeKeyword] = useState("");
  const [nePage, setNePage] = useState(1);
  const [nePageSize, setNePageSize] = useState(50);
  const [expandedNeId, setExpandedNeId] = useState("");
  const [nePanelOpen, setNePanelOpen] = useState(false);
  const [curSeverity, setCurSeverity] = useState("");
  const [curCleared, setCurCleared] = useState("");
  const [curHostName, setCurHostName] = useState("");
  const [curKeyword, setCurKeyword] = useState("");
  const [curPage, setCurPage] = useState(1);
  const [curPageSize, setCurPageSize] = useState(50);
  const [alarmsPanelOpen, setAlarmsPanelOpen] = useState(false);

  const syncMutation = useMutation({
    mutationFn: async (domains: string[]) => apiPost<{ ok: boolean; jobs: unknown[] }>("/v1/ume/sync", { domains }),
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: queryKeys.umeSyncStatusAll });
      await queryClient.invalidateQueries({ queryKey: queryKeys.umeNEAll });
      await queryClient.invalidateQueries({ queryKey: queryKeys.umeCurrentAlarmsAll });
    },
  });

  const syncStatusQuery = useQuery({
    queryKey: queryKeys.umeSyncStatus(syncPage, syncPageSize),
    queryFn: () => fetchUmeSyncStatus({ page: syncPage, pageSize: syncPageSize }),
    staleTime: 5000,
    refetchInterval: 5000,
  });
  const tokenStatusQuery = useQuery({
    queryKey: queryKeys.umeTokenStatus,
    queryFn: fetchUmeTokenStatus,
    staleTime: 3000,
    refetchInterval: 5000,
  });
  const tokenRefreshMutation = useMutation({
    mutationFn: refreshUmeToken,
    onMutate: () => setTokenOpError(""),
    onSuccess: async (res) => {
      if (!res?.ok) {
        const msg = String(res.error || res.error_kind || "token_refresh_failed");
        setTokenOpError(msg);
        showError(msg);
      } else {
        setTokenOpError("");
        showOk(res.changed ? t("ume.token.renewOkChanged") : t("ume.token.renewOkSame"));
      }
      await queryClient.invalidateQueries({ queryKey: queryKeys.umeTokenStatus });
      await queryClient.invalidateQueries({ queryKey: queryKeys.umeSyncStatusAll });
    },
    onError: (err) => {
      const msg = String(err);
      setTokenOpError(msg);
      showError(msg);
    },
  });
  const subscriptionStatusQuery = useQuery({
    queryKey: queryKeys.umeAlarmSubscription,
    queryFn: fetchUmeAlarmSubscriptionStatus,
    staleTime: 3000,
    refetchInterval: 5000,
  });

  const confirmClearLocalSubscription = (hint?: string) =>
    window.confirm(hint || t("ume.subscription.confirmClearDefault"));

  const subscriptionEstablishMutation = useMutation({
    mutationFn: (opts?: { forceReestablish?: boolean }) => establishUmeAlarmSubscription(opts),
    onMutate: () => setSubscriptionOpError(""),
    onSuccess: async (res) => {
      if (!res?.active) {
        const msg = t("ume.subscription.establishInvalid");
        setSubscriptionOpError(msg);
        showError(msg);
      } else {
        setSubscriptionOpError("");
        showOk(res.already_exists ? t("ume.subscription.establishExists") : t("ume.subscription.establishOk"));
      }
      await queryClient.invalidateQueries({ queryKey: queryKeys.umeAlarmSubscription });
      await queryClient.invalidateQueries({ queryKey: queryKeys.umeSyncStatusAll });
    },
    onError: (err) => {
      const msg = String(err);
      setSubscriptionOpError(msg);
      showError(msg);
    },
  });
  const subscriptionClearLocalMutation = useMutation({
    mutationFn: clearLocalUmeAlarmSubscription,
    onMutate: () => setSubscriptionOpError(""),
    onSuccess: async () => {
      setSubscriptionOpError("");
      showOk(t("ume.subscription.clearLocalOk"));
      await queryClient.invalidateQueries({ queryKey: queryKeys.umeAlarmSubscription });
      await queryClient.invalidateQueries({ queryKey: queryKeys.umeSyncStatusAll });
    },
    onError: (err) => {
      const msg = String(err);
      setSubscriptionOpError(msg);
      showError(msg);
    },
  });
  const subscriptionCancelMutation = useMutation({
    mutationFn: (opts?: { forceClearLocal?: boolean }) => cancelUmeAlarmSubscription(opts),
    onMutate: () => setSubscriptionOpError(""),
    onSuccess: async (res) => {
      if (res?.needs_local_cleanup) {
        const msg = res.message || t("ume.subscription.serverLostMsg");
        if (confirmClearLocalSubscription(msg)) {
          subscriptionCancelMutation.mutate({ forceClearLocal: true });
          return;
        }
        setSubscriptionOpError(msg);
        showError(msg);
        await queryClient.invalidateQueries({ queryKey: queryKeys.umeAlarmSubscription });
        await queryClient.invalidateQueries({ queryKey: queryKeys.umeSyncStatusAll });
        return;
      }
      if (res?.active) {
        const msg = t("ume.subscription.cancelFailed");
        setSubscriptionOpError(msg);
        showError(msg);
      } else {
        setSubscriptionOpError("");
        showOk(res?.ume_already_missing ? t("ume.subscription.cancelOkMissing") : t("ume.subscription.cancelOk"));
      }
      await queryClient.invalidateQueries({ queryKey: queryKeys.umeAlarmSubscription });
      await queryClient.invalidateQueries({ queryKey: queryKeys.umeSyncStatusAll });
    },
    onError: (err) => {
      const msg = String(err);
      setSubscriptionOpError(msg);
      showError(msg);
    },
  });
  const tokenDisconnectMutation = useMutation({
    mutationFn: disconnectUmeToken,
    onMutate: () => setTokenOpError(""),
    onSuccess: async (res) => {
      if (!res?.ok) {
        const msg = String(res.error || res.error_kind || "token_disconnect_failed");
        setTokenOpError(msg);
        showError(msg);
      } else {
        setTokenOpError("");
        showOk(t("ume.token.disconnectOk"));
      }
      await queryClient.invalidateQueries({ queryKey: queryKeys.umeTokenStatus });
      await queryClient.invalidateQueries({ queryKey: queryKeys.umeSyncStatusAll });
    },
    onError: (err) => {
      const msg = String(err);
      setTokenOpError(msg);
      showError(msg);
    },
  });

  const tokenExpiresIn = Number(tokenStatusQuery.data?.expires_in_s || 0);
  const hasToken = Boolean(tokenStatusQuery.data?.has_token);
  const tokenNeedsRenewal = hasToken && tokenExpiresIn <= 0;
  const tokenLevel = !hasToken
    ? "down"
    : tokenNeedsRenewal
      ? "warn"
      : tokenExpiresIn < 15
        ? "down"
        : tokenExpiresIn < 60
          ? "unknown"
          : "up";

  const neQuery = useQuery({
    queryKey: queryKeys.umeNE(neKeyword, nePage, nePageSize),
    queryFn: () => fetchUmeNe({ keyword: neKeyword, page: nePage, pageSize: nePageSize }),
    staleTime: 5000,
  });
  const currentQuery = useQuery({
    queryKey: queryKeys.umeCurrentAlarms(curSeverity, curCleared, curHostName, curKeyword, curPage, curPageSize),
    queryFn: () =>
      fetchUmeCurrentAlarms({
        severity: curSeverity,
        isCleared: curCleared,
        hostName: curHostName,
        keyword: curKeyword,
        page: curPage,
        pageSize: curPageSize,
      }),
    staleTime: 5000,
  });

  const runningTasks = (syncStatusQuery.data?.items || []).filter((x) => String(x.status || "").toLowerCase() === "running");
  const runtimeTasks = syncStatusQuery.data?.runtime_tasks || [];
  const alarmSub: UmeAlarmSubscriptionStatus =
    subscriptionStatusQuery.data ??
    syncStatusQuery.data?.alarm_subscription ??
    { active: false };
  const wsConsumer = runtimeTasks.find((x) => x.task === "alarms_current_ws_consumer");
  const wsConn = subscriptionStatusQuery.data?.ws_connection;
  const wsState = String(wsConn?.state || "");
  const wsPaused = Boolean(wsConsumer?.paused);
  const wsLabel =
    wsConn?.label ||
    (wsPaused ? t("ume.subscription.wssPaused") : wsConsumer?.last_error || wsConsumer?.status || t("common.empty"));
  const subscriptionActive = Boolean(alarmSub.active);
  const serverSubLost = Boolean(
    subscriptionStatusQuery.data?.server_subscription_lost ?? alarmSub.server_subscription_lost,
  );
  const serverSubLostReason = String(
    subscriptionStatusQuery.data?.server_subscription_lost_reason ?? alarmSub.server_subscription_lost_reason ?? "",
  );
  const currentAlarmsMode =
    subscriptionStatusQuery.data?.current_alarms_mode ?? alarmSub.current_alarms_mode ?? "rest";
  const scheduledSyncSkipped = Boolean(
    subscriptionStatusQuery.data?.scheduled_sync_skipped ?? alarmSub.scheduled_sync_skipped,
  );
  const wsPillLevel =
    serverSubLost || wsState === "subscription_lost"
      ? "warn"
      : wsPaused || wsState === "paused"
        ? "warn"
        : wsState === "connected"
          ? "up"
          : wsState === "connecting" || wsState === "reconnecting" || wsState === "waiting_token"
            ? "warn"
            : wsState === "no_subscription" || wsState === "disconnected" || wsState === "error" || wsState === "init"
              ? "down"
              : String(wsConsumer?.last_error || "").includes("connected")
                ? "up"
                : "unknown";
  const wsLogs = [...(subscriptionStatusQuery.data?.ws_logs ?? alarmSub.ws_logs ?? [])].reverse();
  const subPending =
    subscriptionEstablishMutation.isPending ||
    subscriptionCancelMutation.isPending ||
    subscriptionClearLocalMutation.isPending;

  const runtimeTaskMutation = useMutation({
    mutationFn: async (vars: { task: string; action: "pause" | "resume" }) =>
      apiPost<{ ok: boolean }>(`/v1/ume/runtime/tasks/${encodeURIComponent(vars.task)}/${vars.action}`, {}),
    onMutate: () => setRuntimeTaskError(""),
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: queryKeys.umeSyncStatusAll });
    },
    onError: (err) => setRuntimeTaskError(String(err)),
  });

  const syncTotal = Number(syncStatusQuery.data?.total || 0);
  const syncPages = pageCount(syncTotal, syncPageSize);
  const neTotal = Number(neQuery.data?.total || 0);
  const nePages = pageCount(neTotal, nePageSize);
  const curTotal = Number(currentQuery.data?.total || 0);
  const curPages = pageCount(curTotal, curPageSize);

  const perPage = (n: number) => t("common.perPage", { n: String(n) });

  return (
    <>
      <section className="cards">
        <article className="card card--full">
          <h3>{t("ume.token.title")}</h3>
          <div className="actions-row actions-row--inline">
            <span
              className={`conn-pill conn-pill--${!hasToken ? "down" : tokenNeedsRenewal ? "warn" : "up"}`}
              title={tokenNeedsRenewal ? t("ume.token.renewHint") : undefined}
            >
              token:{" "}
              {!hasToken
                ? t("ume.token.disconnected")
                : tokenNeedsRenewal
                  ? t("ume.token.connectedRenew")
                  : t("ume.token.connected")}
            </span>
            <span className={`conn-pill conn-pill--${tokenLevel}`}>
              {t("ume.token.expiresIn")}:{" "}
              {typeof tokenStatusQuery.data?.expires_in_s === "number"
                ? tokenNeedsRenewal
                  ? t("ume.token.needsRenew")
                  : `${tokenStatusQuery.data.expires_in_s}s`
                : t("common.empty")}
            </span>
            {tokenStatusQuery.data?.token_preview ? (
              <span className="conn-pill">
                {t("ume.token.preview")}: {tokenStatusQuery.data.token_preview}
              </span>
            ) : null}
          </div>
          <div className="actions-row actions-row--inline">
            <button
              onClick={() => queryClient.invalidateQueries({ queryKey: queryKeys.umeTokenStatus })}
              disabled={tokenStatusQuery.isFetching}
            >
              {tokenStatusQuery.isFetching ? (
                <>
                  <span className="inline-spinner" aria-hidden />
                  {t("common.refreshing")}
                </>
              ) : (
                t("ume.token.refreshStatus")
              )}
            </button>
            <button
              type="button"
              onClick={() => tokenRefreshMutation.mutate()}
              disabled={tokenRefreshMutation.isPending || tokenDisconnectMutation.isPending}
            >
              {tokenRefreshMutation.isPending ? (
                <>
                  <span className="inline-spinner" aria-hidden />
                  {t("ume.token.renewing")}
                </>
              ) : (
                t("ume.token.renewLogin")
              )}
            </button>
            <button
              type="button"
              onClick={() => tokenDisconnectMutation.mutate()}
              disabled={tokenRefreshMutation.isPending || tokenDisconnectMutation.isPending}
            >
              {tokenDisconnectMutation.isPending ? (
                <>
                  <span className="inline-spinner" aria-hidden />
                  {t("ume.token.disconnecting")}
                </>
              ) : (
                t("ume.token.disconnect")
              )}
            </button>
          </div>
          {(tokenOpError || tokenRefreshMutation.error || tokenDisconnectMutation.error) && (
            <div className="pill pill--high">
              {t("common.opFailed")}: {tokenOpError || String(tokenRefreshMutation.error || tokenDisconnectMutation.error)}
            </div>
          )}
        </article>

        <article className="card card--full">
          <h3 className="card-title-with-hint">
            {t("ume.subscription.title")}
            <HelpHint text={t("ume.subscription.help")} ariaLabel={t("common.help")} />
          </h3>
          <div className="actions-row actions-row--inline">
            <span className={`conn-pill conn-pill--${subscriptionActive ? "up" : "down"}`}>
              {t("ume.subscription.sub")}: {subscriptionActive ? t("ume.subscription.subActive") : t("ume.subscription.subInactive")}
            </span>
            {subscriptionActive && alarmSub.subscription_id ? (
              <span className="conn-pill" title={alarmSub.wss_uri || ""}>
                id: {String(alarmSub.subscription_id).slice(0, 12)}…
              </span>
            ) : null}
            {subscriptionActive || wsConsumer ? (
              <span
                className={`conn-pill conn-pill--${wsPillLevel}`}
                title={wsConn?.detail || wsConsumer?.last_error || alarmSub.wss_uri || ""}
              >
                WSS: {wsLabel}
              </span>
            ) : null}
          </div>
          {scheduledSyncSkipped && !serverSubLost ? (
            <div className="pill pill--low" style={{ marginTop: 8 }}>
              {t("ume.subscription.wssModeBanner", { mode: currentAlarmsMode })}
            </div>
          ) : null}
          {serverSubLost ? (
            <div className="pill pill--medium" style={{ marginTop: 8 }}>
              {t("ume.subscription.serverLostBanner")}
              {serverSubLostReason ? (
                <div className="muted" style={{ marginTop: 6, fontSize: 12, wordBreak: "break-word" }}>
                  {serverSubLostReason.slice(0, 280)}
                </div>
              ) : null}
            </div>
          ) : null}
          <div className="actions-row actions-row--inline">
            <button
              type="button"
              onClick={() => {
                if (serverSubLost && subscriptionActive) {
                  if (window.confirm(t("ume.subscription.confirmReestablish"))) {
                    subscriptionEstablishMutation.mutate({ forceReestablish: true });
                  }
                  return;
                }
                subscriptionEstablishMutation.mutate(undefined);
              }}
              disabled={subPending || (!serverSubLost && subscriptionActive) || !hasToken}
              title={
                !hasToken
                  ? t("ume.subscription.titleLoginFirst")
                  : serverSubLost
                    ? t("ume.subscription.titleReestablish")
                    : undefined
              }
            >
              {subscriptionEstablishMutation.isPending ? (
                <>
                  <span className="inline-spinner" aria-hidden />
                  {serverSubLost ? t("ume.subscription.reestablishing") : t("ume.subscription.establishing")}
                </>
              ) : serverSubLost ? (
                t("ume.subscription.reestablish")
              ) : (
                t("ume.subscription.establish")
              )}
            </button>
            {serverSubLost && subscriptionActive ? (
              <button
                type="button"
                onClick={() => {
                  if (confirmClearLocalSubscription()) subscriptionClearLocalMutation.mutate();
                }}
                disabled={subPending}
              >
                {subscriptionClearLocalMutation.isPending ? (
                  <>
                    <span className="inline-spinner" aria-hidden />
                    {t("ume.subscription.clearing")}
                  </>
                ) : (
                  t("ume.subscription.clearLocalOnly")
                )}
              </button>
            ) : null}
            <button
              type="button"
              onClick={() => subscriptionCancelMutation.mutate(undefined)}
              disabled={subPending || !subscriptionActive}
            >
              {subscriptionCancelMutation.isPending ? (
                <>
                  <span className="inline-spinner" aria-hidden />
                  {t("ume.subscription.cancelling")}
                </>
              ) : (
                t("ume.subscription.cancel")
              )}
            </button>
            <button
              type="button"
              onClick={() => queryClient.invalidateQueries({ queryKey: queryKeys.umeAlarmSubscription })}
              disabled={subscriptionStatusQuery.isFetching}
            >
              {t("ume.subscription.refreshStatus")}
            </button>
          </div>
          {subscriptionOpError ? (
            <div className="pill pill--high">
              {t("ume.subscription.opFailed")}: {subscriptionOpError}
            </div>
          ) : null}
          <div style={{ marginTop: 12 }}>
            <div className="actions-row actions-row--inline" style={{ marginTop: 0 }}>
              <strong style={{ fontSize: 13 }}>{t("ume.subscription.wsLogs")}</strong>
              <span className="muted" style={{ fontSize: 12 }}>
                {wsConsumer?.last_run_at
                  ? t("ume.subscription.wsActivity", { time: formatSystemTime(String(wsConsumer.last_run_at)) })
                  : t("ume.subscription.wsAutoRefresh")}
              </span>
            </div>
            <div className="ws-log-panel" role="log" aria-live="polite">
              {wsLogs.length === 0 ? (
                <div className="ws-log-line ws-log-line--info">{t("ume.subscription.wsLogsEmpty")}</div>
              ) : (
                wsLogs.map((line, idx) => {
                  const lvl = String(line.level || "info").toLowerCase();
                  const cls =
                    lvl === "error" ? "ws-log-line--error" : lvl === "warning" ? "ws-log-line--warning" : "ws-log-line--info";
                  return (
                    <div key={`${line.ts}-${idx}`} className={`ws-log-line ${cls}`}>
                      <span className="ws-log-ts">{formatSystemTime(line.ts)}</span>
                      <span>[{lvl}] </span>
                      <span>{line.message}</span>
                      {line.subscription_id ? (
                        <span className="muted"> · {String(line.subscription_id).slice(0, 8)}…</span>
                      ) : null}
                    </div>
                  );
                })
              )}
            </div>
          </div>
        </article>

        <article className="card card--full">
          <h3>{t("ume.sync.title")}</h3>
          <div className="actions-row actions-row--inline">
            <button onClick={() => syncMutation.mutate(["inventory"])} disabled={syncMutation.isPending}>
              {t("ume.sync.inventory")}
            </button>
            <button onClick={() => syncMutation.mutate(["alarms_current"])} disabled={syncMutation.isPending}>
              {t("ume.sync.alarmsCurrent")}
            </button>
            <button onClick={() => syncMutation.mutate(["inventory", "alarms_current"])} disabled={syncMutation.isPending}>
              {t("ume.sync.full")}
            </button>
          </div>
          {syncMutation.error && (
            <div className="pill pill--high">
              {t("ume.sync.failed")}: {String(syncMutation.error)}
            </div>
          )}
        </article>
      </section>

      <section className="panel">
        <h2>{t("ume.tasks.currentTitle")}</h2>
        <div className="actions-row actions-row--inline">
          <span className={`conn-pill conn-pill--${runningTasks.length > 0 ? "unknown" : "up"}`}>
            {t("ume.tasks.running")}: {runningTasks.length}
          </span>
          <button onClick={() => queryClient.invalidateQueries({ queryKey: queryKeys.umeSyncStatusAll })} disabled={syncStatusQuery.isFetching}>
            {t("common.refresh")}
          </button>
        </div>
        <table>
          <thead>
            <tr>
              <th>ID</th>
              <th>domain</th>
              <th>trigger_mode</th>
              <th>status</th>
              <th>started_at</th>
              <th>error</th>
            </tr>
          </thead>
          <tbody>
            {runningTasks.map((x) => (
              <tr key={`running-${x.id}`}>
                <td>{x.id}</td>
                <td>{x.domain}</td>
                <td>{x.trigger_mode}</td>
                <td>{x.status}</td>
                <td>{formatSystemTime(x.started_at)}</td>
                <td>{x.error_message || t("common.empty")}</td>
              </tr>
            ))}
            {!syncStatusQuery.isLoading && runningTasks.length === 0 && (
              <tr>
                <td colSpan={6}>{t("ume.tasks.noRunning")}</td>
              </tr>
            )}
          </tbody>
        </table>

        <h3 style={{ marginTop: 12 }}>{t("ume.tasks.runtimeTitle")}</h3>
        {runtimeTaskError ? (
          <div className="pill pill--high" style={{ marginBottom: 8 }}>
            {t("ume.tasks.runtimeOpFailed")}: {runtimeTaskError}
          </div>
        ) : null}
        <table>
          <thead>
            <tr>
              <th>task</th>
              <th title={t("ume.tasks.intervalTitle")}>interval</th>
              <th>status</th>
              <th title={t("ume.tasks.lastRunTitle")}>last_run_at</th>
              <th>last_error</th>
              <th>actions</th>
            </tr>
          </thead>
          <tbody>
            {runtimeTasks.map((x) => (
              <tr key={`runtime-${x.task}`}>
                <td>{x.task}</td>
                <td title={typeof x.interval_s === "number" ? `${x.interval_s}s` : undefined}>
                  {runtimeIntervalLabel(x.interval_label)}
                </td>
                <td>{x.status}</td>
                <td>{x.last_run_at ? formatSystemTime(x.last_run_at) : t("common.empty")}</td>
                <td>{x.last_error || t("common.empty")}</td>
                <td>
                  {Boolean(x.paused) ? (
                    <button
                      type="button"
                      className="link-btn"
                      disabled={runtimeTaskMutation.isPending}
                      onClick={() => runtimeTaskMutation.mutate({ task: x.task, action: "resume" })}
                    >
                      resume
                    </button>
                  ) : (
                    <button
                      type="button"
                      className="link-btn"
                      disabled={runtimeTaskMutation.isPending}
                      onClick={() => runtimeTaskMutation.mutate({ task: x.task, action: "pause" })}
                    >
                      pause
                    </button>
                  )}
                </td>
              </tr>
            ))}
            {!syncStatusQuery.isLoading && runtimeTasks.length === 0 && (
              <tr>
                <td colSpan={6}>{t("ume.tasks.noRuntime")}</td>
              </tr>
            )}
          </tbody>
        </table>
      </section>

      <section className="panel">
        <h2>{t("ume.syncStatus.title")}</h2>
        <div className="actions-row actions-row--inline">
          <button onClick={() => queryClient.invalidateQueries({ queryKey: queryKeys.umeSyncStatusAll })} disabled={syncStatusQuery.isFetching}>
            {t("common.refresh")}
          </button>
        </div>
        <table>
          <thead>
            <tr>
              <th>ID</th>
              <th>domain</th>
              <th>status</th>
              <th>pulled</th>
              <th>inserted</th>
              <th>updated</th>
              <th title={t("ume.tasks.deletedTitle")}>deleted</th>
              <th>started_at</th>
              <th>ended_at</th>
              <th>error</th>
            </tr>
          </thead>
          <tbody>
            {(syncStatusQuery.data?.items || []).map((x) => (
              <tr key={x.id}>
                <td>{x.id}</td>
                <td>{x.domain}</td>
                <td>{x.status}</td>
                <td>{x.pulled_count}</td>
                <td>{x.inserted_count}</td>
                <td>{x.updated_count}</td>
                <td>{Number(x.deleted ?? 0)}</td>
                <td>{formatSystemTime(x.started_at)}</td>
                <td>{x.ended_at ? formatSystemTime(x.ended_at) : t("common.empty")}</td>
                <td>{x.error_message || t("common.empty")}</td>
              </tr>
            ))}
            {!syncStatusQuery.isLoading && (syncStatusQuery.data?.items || []).length === 0 && (
              <tr>
                <td colSpan={10}>{t("ume.syncStatus.empty")}</td>
              </tr>
            )}
          </tbody>
        </table>
        <div className="pager">
          <div className="pager__meta">{t("common.pagerMeta", { total: syncTotal, page: syncPage, pages: syncPages })}</div>
          <div className="pager__controls">
            <button className="pager__btn" onClick={() => setSyncPage(Math.max(1, syncPage - 1))} disabled={syncPage <= 1}>
              {t("common.prevPage")}
            </button>
            <button className="pager__btn" onClick={() => setSyncPage(syncPage + 1)} disabled={syncPage >= syncPages}>
              {t("common.nextPage")}
            </button>
            <select
              className="pager__size"
              value={String(syncPageSize)}
              onChange={(e) => {
                setSyncPageSize(Number(e.target.value) || 20);
                setSyncPage(1);
              }}
            >
              <option value="20">{perPage(20)}</option>
              <option value="50">{perPage(50)}</option>
              <option value="100">{perPage(100)}</option>
              <option value="200">{perPage(200)}</option>
            </select>
          </div>
        </div>
      </section>

      <section className="panel">
        <div className="panel__toolbar">
          <h2>{t("ume.ne.title")}</h2>
          <button type="button" className="link-btn" onClick={() => setNePanelOpen((x) => !x)}>
            {nePanelOpen ? t("ume.ne.hidePanel") : t("ume.ne.showPanel")}
          </button>
        </div>
        {nePanelOpen ? (
          <>
        <div className="filter-inline">
          <input value={neKeyword} placeholder={t("ume.ne.keywordPh")} onChange={(e) => setNeKeyword(e.target.value)} />
          <button type="button" onClick={() => queryClient.invalidateQueries({ queryKey: queryKeys.umeNEAll })}>
            {t("common.query")}
          </button>
          <button
            type="button"
            title={t("ume.ne.clearTitle")}
            onClick={() => {
              setNeKeyword("");
              setNePage(1);
            }}
            disabled={!neKeyword.trim()}
          >
            {t("common.clearFilters")}
          </button>
        </div>
        <table>
          <thead>
            <tr>
              <th>ne_id</th>
              <th>user_label</th>
              <th>ip</th>
              <th>type</th>
              <th>device_level</th>
              <th>host_name</th>
              <th>hw_ver</th>
              <th>last_seen</th>
            </tr>
          </thead>
          <tbody>
            {(neQuery.data?.items || []).map((x) => (
              <Fragment key={x.ne_id}>
                <tr>
                  <td>
                    <button
                      className="link-btn"
                      onClick={() => setExpandedNeId(expandedNeId === x.ne_id ? "" : x.ne_id)}
                      title={expandedNeId === x.ne_id ? t("ume.ne.collapse") : t("ume.ne.expand")}
                    >
                      {x.ne_id}
                    </button>
                  </td>
                  <td>{x.user_label}</td>
                  <td>{x.ip_address}</td>
                  <td>{x.ne_type}</td>
                  <td>{x.device_level || t("common.empty")}</td>
                  <td>{x.host_name || t("common.empty")}</td>
                  <td>{x.hardware_version || t("common.empty")}</td>
                  <td>{x.last_seen_at ? formatSystemTime(x.last_seen_at) : t("common.empty")}</td>
                </tr>
                {expandedNeId === x.ne_id ? (
                  <tr>
                    <td colSpan={8}>
                      <div style={{ fontSize: 12, display: "grid", gridTemplateColumns: "repeat(3, minmax(180px, 1fr))", gap: 8 }}>
                        <div>consistent_state: {x.consistent_state || t("common.empty")}</div>
                        <div>admin_status: {x.admin_status || t("common.empty")}</div>
                        <div>connection_status: {x.connection_status || t("common.empty")}</div>
                        <div>maintain_status: {x.maintain_status || t("common.empty")}</div>
                        <div>address_type: {x.address_type || t("common.empty")}</div>
                        <div>location: {x.location || t("common.empty")}</div>
                        <div>loopback: {x.loopback || t("common.empty")}</div>
                        <div>net_mask: {x.net_mask || t("common.empty")}</div>
                        <div>mac: {x.mac || t("common.empty")}</div>
                        <div>interface_version: {x.interface_version || t("common.empty")}</div>
                        <div>create_time: {x.create_time || t("common.empty")}</div>
                        <div>creator: {x.creator || t("common.empty")}</div>
                      </div>
                    </td>
                  </tr>
                ) : null}
              </Fragment>
            ))}
          </tbody>
        </table>
        <div className="pager">
          <div className="pager__meta">{t("common.pagerMeta", { total: neTotal, page: nePage, pages: nePages })}</div>
          <div className="pager__controls">
            <button className="pager__btn" onClick={() => setNePage(Math.max(1, nePage - 1))} disabled={nePage <= 1}>
              {t("common.prevPage")}
            </button>
            <button className="pager__btn" onClick={() => setNePage(nePage + 1)} disabled={nePage >= nePages}>
              {t("common.nextPage")}
            </button>
            <select
              className="pager__size"
              value={String(nePageSize)}
              onChange={(e) => {
                setNePageSize(Number(e.target.value) || 50);
                setNePage(1);
              }}
            >
              <option value="20">{perPage(20)}</option>
              <option value="50">{perPage(50)}</option>
              <option value="100">{perPage(100)}</option>
              <option value="200">{perPage(200)}</option>
              <option value="500">{perPage(500)}</option>
            </select>
          </div>
        </div>
          </>
        ) : null}
      </section>

      <section className="panel">
        <div className="panel__toolbar">
          <h2>{t("ume.alarms.title")}</h2>
          <button type="button" className="link-btn" onClick={() => setAlarmsPanelOpen((x) => !x)}>
            {alarmsPanelOpen ? t("ume.alarms.hidePanel") : t("ume.alarms.showPanel")}
          </button>
        </div>
        {alarmsPanelOpen ? (
          <>
        <div className="filter-inline">
          <input value={curKeyword} placeholder={t("ume.alarms.keywordPh")} onChange={(e) => setCurKeyword(e.target.value)} />
          <input value={curHostName} placeholder={t("ume.alarms.hostNamePh")} onChange={(e) => setCurHostName(e.target.value)} />
          <select value={curSeverity} onChange={(e) => setCurSeverity(e.target.value)}>
            <option value="">{t("ume.alarms.allSeverity")}</option>
            <option value="critical">critical</option>
            <option value="major">major</option>
            <option value="minor">minor</option>
            <option value="warning">warning</option>
            <option value="info">info</option>
          </select>
          <select value={curCleared} onChange={(e) => setCurCleared(e.target.value)}>
            <option value="">{t("ume.alarms.clearedAll")}</option>
            <option value="true">true</option>
            <option value="false">false</option>
          </select>
          <button
            type="button"
            title={t("ume.alarms.clearTitle")}
            onClick={() => {
              setCurKeyword("");
              setCurHostName("");
              setCurSeverity("");
              setCurCleared("");
              setCurPage(1);
            }}
            disabled={!curKeyword.trim() && !curHostName.trim() && !curSeverity && !curCleared}
          >
            {t("common.clearFilters")}
          </button>
        </div>
        <table>
          <thead>
            <tr>
              <th>time_created</th>
              <th>severity</th>
              <th>ne_id</th>
              <th>host_name</th>
              <th>ne_type</th>
              <th>cause</th>
            </tr>
          </thead>
          <tbody>
            {(currentQuery.data?.items || []).map((x) => (
              <tr key={x.alarm_key}>
                <td>{formatSystemTime(x.time_created)}</td>
                <td>{x.perceived_severity}</td>
                <td>{x.ne_id}</td>
                <td>
                  {(x.host_name || "").trim() ? (
                    <button
                      className="link-btn"
                      type="button"
                      onClick={() => {
                        setCurHostName(x.host_name || "");
                        setCurKeyword("");
                        setCurPage(1);
                      }}
                      title={t("ume.alarms.filterByHost")}
                    >
                      {x.host_name}
                    </button>
                  ) : (
                    <span className="muted" title={t("ume.alarms.noHostName")}>
                      {t("common.empty")}
                    </span>
                  )}
                </td>
                <td>{x.ne_type ?? ""}</td>
                <td>{x.native_probable_cause}</td>
              </tr>
            ))}
          </tbody>
        </table>
        <div className="pager">
          <div className="pager__meta">{t("common.pagerMeta", { total: curTotal, page: curPage, pages: curPages })}</div>
          <div className="pager__controls">
            <button className="pager__btn" onClick={() => setCurPage(Math.max(1, curPage - 1))} disabled={curPage <= 1}>
              {t("common.prevPage")}
            </button>
            <button className="pager__btn" onClick={() => setCurPage(curPage + 1)} disabled={curPage >= curPages}>
              {t("common.nextPage")}
            </button>
            <select
              className="pager__size"
              value={String(curPageSize)}
              onChange={(e) => {
                setCurPageSize(Number(e.target.value) || 50);
                setCurPage(1);
              }}
            >
              <option value="50">{perPage(50)}</option>
              <option value="100">{perPage(100)}</option>
              <option value="200">{perPage(200)}</option>
              <option value="500">{perPage(500)}</option>
            </select>
          </div>
        </div>
          </>
        ) : null}
      </section>
    </>
  );
}