import {
  announce,
  apiBlob,
  apiJson,
  registerWorkspace,
  setActiveButton,
} from "../core.js";
import { refreshCurrentDisplayPreview } from "../scene-board.js";
import { refreshColorTrigger } from "../color-picker.js";
import { setControlBusy, setControlReady, setControlUnavailable } from "../interaction-feedback.js";
import { renderUiCopy, renderUiValue } from "../ui-copy-runtime.js";
import {
  LatestSeekDispatcher,
  formatPlaybackTime,
  projectPlaybackPosition,
} from "../current-display-playback.js";

const statusEls = {
  orientation: document.getElementById("status-orientation"),
  brightness: document.getElementById("status-brightness"),
  currentContent: document.getElementById("topbar-current-content"),
  cpu: document.getElementById("topbar-cpu"),
  memory: document.getElementById("topbar-memory"),
  lowVoltageWarning: document.getElementById("topbar-low-voltage-warning"),
  voltage: document.getElementById("topbar-voltage"),
};
const fillButtons = Array.from(document.querySelectorAll("[data-test-fill]"));
const customFillButton = document.getElementById("custom-test-fill");
const customColor = document.getElementById("test-color");
const refreshStatusButton = document.getElementById("refresh-status");
const displayTestControls = document.getElementById("display-test-controls");
const testBrightness = document.getElementById("test-brightness");
const testBrightnessValue = document.getElementById("test-brightness-value");
const testBrightnessProtection = document.getElementById("test-brightness-protection");
const displayTestFeedback = document.getElementById("display-test-feedback");
const exitDisplayTest = document.getElementById("exit-display-test");
const storageEls = {
  total: document.getElementById("device-total-space"),
  free: document.getElementById("device-free-space"),
  software: document.getElementById("device-software-size"),
  templates: document.getElementById("device-template-size"),
  feedback: document.getElementById("device-storage-feedback"),
};
const resourceDialog = document.getElementById("resource-details-dialog");
const resourceDialogClose = document.getElementById("resource-details-close");
const resourceDetailsMessage = document.getElementById("resource-details-message");
const resourceCoreList = document.getElementById("resource-core-list");
const resourceDetailEls = {
  cpuAppCores: document.getElementById("resource-cpu-app-cores"),
  cpuSinglePercent: document.getElementById("resource-cpu-single-percent"),
  cpuAppPercent: document.getElementById("resource-cpu-app-percent"),
  cpuTotalPercent: document.getElementById("resource-cpu-total-percent"),
  memoryApp: document.getElementById("resource-memory-app"),
  memoryAppPercent: document.getElementById("resource-memory-app-percent"),
  memoryTotalPercent: document.getElementById("resource-memory-total-percent"),
};
const currentDisplayDialog = document.getElementById("current-display-dialog");
const currentDisplayDialogName = document.getElementById("current-display-dialog-name");
const currentDisplayDialogClose = document.getElementById("current-display-dialog-close");
const currentDisplayPreviewSurface = document.getElementById("current-display-preview-surface");
const currentDisplayPreviewImage = document.getElementById("current-display-preview-image");
const currentDisplayPreviewPlaceholder = document.getElementById("current-display-preview-placeholder");
const currentDisplayPlaybackControls = document.getElementById("current-display-playback-controls");
const currentDisplayProgress = document.getElementById("current-display-progress");
const currentDisplayProgressTime = document.getElementById("current-display-progress-time");
const currentDisplayPlayPause = document.getElementById("current-display-play-pause");
const currentDisplaySpeedButtons = Array.from(document.querySelectorAll("[data-playback-speed]"));
const currentDisplayPlaybackFeedback = document.getElementById("current-display-playback-feedback");
const currentDisplaySeekUnavailableReason = document.getElementById("current-display-seek-unavailable-reason");
let loadedOnce = false;
let lastStatusIdentity = null;
let latestResources = null;
let latestProtection = null;
let latestStatus = null;
let currentDisplayOpenIdentity = null;
let currentDisplayPlayback = null;
let currentDisplayPlaybackSampledAt = 0;
let currentDisplayPreviewTimer = null;
let currentDisplayPreviewPending = false;
let currentDisplayPreviewRequested = false;
let currentDisplayPreviewSequence = 0;
let currentDisplayPreviewUrl = null;
let currentDisplayAnimationFrame = null;
let currentDisplayDragging = false;
let currentDisplayFinalSeekPosition = null;
let currentDisplayControlPending = false;
let customTestColor = "#40A0FF";
let testActionPending = false;
let desiredTestBrightness = null;
let applyingTestBrightness = false;
let storageTimer = null;
const STORAGE_REFRESH_INTERVAL_MS = 300000;

const LOW_VOLTAGE_WARNING_TEXT = Object.freeze({
  limiting: "电压过低，屏幕亮度限制",
  critical: "电压过低，屏幕已经禁用，请充电",
});

function finiteNumber(value) {
  if (value === null || value === undefined || value === "") return null;
  const number = Number(value);
  return Number.isFinite(number) ? number : null;
}

function formatPercent(value) {
  const number = finiteNumber(value);
  return number === null ? "-" : `${number.toFixed(1)}%`;
}

function formatMemoryDetailed(bytes) {
  const number = finiteNumber(bytes);
  if (number === null || number < 0) return "-";
  const mebibytes = number / (1024 * 1024);
  return `${mebibytes.toFixed(1)} MiB`;
}

function formatMemoryCompact(bytes) {
  const number = finiteNumber(bytes);
  if (number === null || number < 0) return "-";
  return `${Math.round(number / (1024 * 1024))}M`;
}

function formatCoreEquivalent(value) {
  const number = finiteNumber(value);
  return number === null ? "-" : `${number.toFixed(1)}核`;
}

function renderCoreMeters(cpu) {
  resourceCoreList.replaceChildren();
  const count = Number.isInteger(Number(cpu.logical_cpu_count))
    ? Math.max(0, Number(cpu.logical_cpu_count))
    : 0;
  const values = Array.isArray(cpu.cores_percent) ? cpu.cores_percent : [];
  for (let index = 0; index < count; index += 1) {
    const value = finiteNumber(values[index]);
    const row = document.createElement("div");
    row.className = "resource-core-row";
    const label = document.createElement("span");
    label.textContent = `CPU ${index + 1}`;
    const progress = document.createElement("progress");
    progress.max = 100;
    progress.value = value === null ? 0 : Math.max(0, Math.min(100, value));
    progress.setAttribute("aria-label", `CPU ${index + 1} 占用`);
    const output = document.createElement("output");
    output.textContent = formatPercent(value);
    row.append(label, progress, output);
    resourceCoreList.appendChild(row);
  }
}

function updateResourceDetails(resources) {
  const status = resources?.status || "starting";
  const cpu = resources?.cpu || {};
  const memory = resources?.memory || {};
  const coreCount = finiteNumber(cpu.logical_cpu_count);
  const coreEquivalent = finiteNumber(cpu.application_core_equivalent);
  resourceDetailEls.cpuAppCores.textContent = coreEquivalent === null
    ? "-"
    : `${coreEquivalent.toFixed(2)} / ${coreCount ?? "-"} 核`;
  resourceDetailEls.cpuSinglePercent.textContent = coreEquivalent === null
    ? "-"
    : formatPercent(coreEquivalent * 100);
  resourceDetailEls.cpuAppPercent.textContent = formatPercent(cpu.application_percent);
  resourceDetailEls.cpuTotalPercent.textContent = formatPercent(cpu.total_percent);
  resourceDetailEls.memoryApp.textContent = formatMemoryDetailed(memory.application_bytes);
  resourceDetailEls.memoryAppPercent.textContent = formatPercent(memory.application_percent);
  resourceDetailEls.memoryTotalPercent.textContent = formatPercent(memory.total_percent);
  renderCoreMeters(cpu);

  if (status === "error") {
    resourceDetailsMessage.textContent = "资源读取异常，屏幕、电压和其他控制功能不受影响。";
  } else if (status !== "ok") {
    resourceDetailsMessage.textContent = "正在收集资源样本…";
  } else if (coreEquivalent === null) {
    resourceDetailsMessage.textContent = "正在等待第二个 CPU 差分样本；内存数据已可用。";
  } else {
    resourceDetailsMessage.textContent = "";
  }
  resourceDetailsMessage.hidden = resourceDetailsMessage.textContent === "";
}

function showTopbarResources(resources) {
  latestResources = resources || null;
  const status = resources?.status || "starting";
  statusEls.cpu.dataset.status = status;
  statusEls.memory.dataset.status = status;
  if (status === "error") {
    statusEls.cpu.textContent = "CPU !";
    statusEls.memory.textContent = "RAM !";
    statusEls.cpu.setAttribute("aria-label", "CPU 读取异常，查看资源占用详情");
    statusEls.memory.setAttribute("aria-label", "内存读取异常，查看资源占用详情");
    updateResourceDetails(resources);
    return;
  }
  const cpu = resources?.cpu || {};
  const memory = resources?.memory || {};
  const cpuCompact = finiteNumber(cpu.application_core_equivalent) === null
    ? "CPU -"
    : `CPU ${formatCoreEquivalent(cpu.application_core_equivalent)} · ${formatPercent(cpu.total_percent)}`;
  const memoryCompact = finiteNumber(memory.application_bytes) === null
    ? "RAM -"
    : `RAM ${formatMemoryCompact(memory.application_bytes)} · ${formatPercent(memory.total_percent)}`;
  statusEls.cpu.textContent = cpuCompact;
  statusEls.memory.textContent = memoryCompact;
  statusEls.cpu.setAttribute("aria-label", `${cpuCompact}，查看 CPU 占用详情`);
  statusEls.memory.setAttribute("aria-label", `${memoryCompact}，查看内存占用详情`);
  updateResourceDetails(resources);
}

function openResourceDetails() {
  updateResourceDetails(latestResources);
  if (!resourceDialog.open) resourceDialog.showModal();
  resourceDialogClose.focus();
}

statusEls.cpu.addEventListener("click", openResourceDetails);
statusEls.memory.addEventListener("click", openResourceDetails);

function activeCurrentDisplayPlayback(status = latestStatus) {
  const content = status?.state?.current_content;
  const playback = status?.state?.animation_playback;
  if (
    content?.category !== "animation"
    || playback?.active !== true
    || typeof playback.session_id !== "string"
    || playback.animation_id !== content.id
  ) return null;
  return playback;
}

function currentDisplayIdentity(status = latestStatus) {
  const content = status?.state?.current_content || {};
  const playback = activeCurrentDisplayPlayback(status);
  return [
    content.category || "unsaved",
    content.id || "",
    content.name || "未保存内容",
    playback?.session_id || "",
  ].join(":");
}

function setCurrentDisplayPlaybackFeedback(copyId = "", defaultText = "", values = {}, state = "idle") {
  if (copyId) renderUiCopy(copyId, currentDisplayPlaybackFeedback, defaultText, values);
  else renderUiValue(currentDisplayPlaybackFeedback, "");
  currentDisplayPlaybackFeedback.dataset.state = state;
  currentDisplayPlaybackFeedback.hidden = !defaultText;
}

function syncCurrentDisplayControlAvailability() {
  const controls = [currentDisplayPlayPause, ...currentDisplaySpeedButtons];
  if (currentDisplayControlPending) {
    [currentDisplayProgress, ...controls].forEach((control) => setControlBusy(control));
    return;
  }
  setControlReady(currentDisplayProgress);
  if (currentDisplayDragging) {
    const reason = currentDisplaySeekUnavailableReason.textContent || "请先完成当前进度跳转。";
    controls.forEach((control) => setControlUnavailable(control, reason));
  } else {
    controls.forEach((control) => setControlReady(control));
  }
}

function renderCurrentDisplayPosition(positionMs, { force = false } = {}) {
  if (!currentDisplayPlayback) return;
  const total = Math.max(1, Number(currentDisplayPlayback.total_duration_ms) || 1);
  const position = Math.max(0, Math.min(total - 1, Number(positionMs) || 0));
  if (force || !currentDisplayDragging) currentDisplayProgress.value = String(Math.floor(position));
  currentDisplayProgressTime.textContent = `${formatPlaybackTime(position)} / ${formatPlaybackTime(total)}`;
}

function applyCurrentDisplayPlayback(playback, { preservePosition = currentDisplayDragging } = {}) {
  if (!playback?.active) return;
  currentDisplayPlayback = { ...playback };
  currentDisplayPlaybackSampledAt = performance.now();
  const total = Math.max(1, Number(playback.total_duration_ms) || 1);
  currentDisplayProgress.max = String(total - 1);
  renderUiCopy(
    playback.paused ? "copy.dynamic.current_display.resume" : "copy.dynamic.current_display.pause",
    currentDisplayPlayPause,
    playback.paused ? "继续播放" : "暂停",
  );
  currentDisplayPlayPause.setAttribute("aria-pressed", String(Boolean(playback.paused)));
  currentDisplaySpeedButtons.forEach((button) => {
    button.setAttribute("aria-pressed", String(Number(button.dataset.playbackSpeed) === Number(playback.speed)));
  });
  if (!preservePosition) renderCurrentDisplayPosition(playback.position_ms, { force: true });
  syncCurrentDisplayControlAvailability();
  if (currentDisplayAnimationFrame === null) {
    currentDisplayAnimationFrame = window.requestAnimationFrame(animateCurrentDisplayProgress);
  }
}

function animateCurrentDisplayProgress(now) {
  currentDisplayAnimationFrame = null;
  if (!currentDisplayDialog.open || currentDisplayPlaybackControls.hidden || !currentDisplayPlayback) return;
  if (!currentDisplayDragging) {
    renderCurrentDisplayPosition(
      projectPlaybackPosition(currentDisplayPlayback, now - currentDisplayPlaybackSampledAt),
    );
  }
  currentDisplayAnimationFrame = window.requestAnimationFrame(animateCurrentDisplayProgress);
}

function scheduleCurrentDisplayPreview(delay = null) {
  if (!currentDisplayDialog.open || document.visibilityState !== "visible") return;
  if (currentDisplayPreviewTimer !== null) window.clearTimeout(currentDisplayPreviewTimer);
  const configured = Number(latestStatus?.ui?.preview_refresh_interval_ms);
  const wait = delay === null ? Math.max(1, Number.isFinite(configured) ? configured : 1000) : delay;
  currentDisplayPreviewTimer = window.setTimeout(() => {
    currentDisplayPreviewTimer = null;
    refreshCurrentDisplayDialogFrame();
  }, wait);
}

async function refreshCurrentDisplayDialogFrame() {
  if (!currentDisplayDialog.open || document.visibilityState !== "visible") return;
  if (currentDisplayPreviewPending) {
    currentDisplayPreviewRequested = true;
    return;
  }
  currentDisplayPreviewPending = true;
  currentDisplayPreviewRequested = false;
  const sequence = currentDisplayPreviewSequence;
  try {
    const blob = await apiBlob("/api/display/current-frame");
    if (!currentDisplayDialog.open || sequence !== currentDisplayPreviewSequence) return;
    const nextUrl = URL.createObjectURL(blob);
    const previousUrl = currentDisplayPreviewUrl;
    currentDisplayPreviewUrl = nextUrl;
    currentDisplayPreviewImage.src = nextUrl;
    currentDisplayPreviewImage.hidden = false;
    currentDisplayPreviewPlaceholder.hidden = true;
    if (previousUrl !== null) URL.revokeObjectURL(previousUrl);
  } catch (error) {
    if (!currentDisplayDialog.open || sequence !== currentDisplayPreviewSequence) return;
    currentDisplayPreviewImage.hidden = true;
    currentDisplayPreviewPlaceholder.hidden = false;
    renderUiCopy(
      "copy.dynamic.current_display.load_failed",
      currentDisplayPreviewPlaceholder,
      "当前画面读取失败：{reason}",
      { reason: error.message },
    );
  } finally {
    currentDisplayPreviewPending = false;
    if (!currentDisplayDialog.open) return;
    if (sequence !== currentDisplayPreviewSequence) {
      if (currentDisplayPreviewRequested) scheduleCurrentDisplayPreview(0);
      return;
    }
    if (currentDisplayPreviewRequested) scheduleCurrentDisplayPreview(0);
    else scheduleCurrentDisplayPreview();
  }
}

function requestCurrentDisplayPreviewRefresh() {
  if (currentDisplayPreviewPending) {
    currentDisplayPreviewRequested = true;
    return;
  }
  scheduleCurrentDisplayPreview(0);
}

function cleanupCurrentDisplayDialog() {
  currentDisplayOpenIdentity = null;
  currentDisplayPlayback = null;
  currentDisplayDragging = false;
  currentDisplayFinalSeekPosition = null;
  currentDisplayControlPending = false;
  currentDisplayPreviewSequence += 1;
  currentDisplayPreviewRequested = false;
  seekDispatcher.clear();
  if (currentDisplayPreviewTimer !== null) window.clearTimeout(currentDisplayPreviewTimer);
  currentDisplayPreviewTimer = null;
  if (currentDisplayAnimationFrame !== null) window.cancelAnimationFrame(currentDisplayAnimationFrame);
  currentDisplayAnimationFrame = null;
  if (currentDisplayPreviewUrl !== null) URL.revokeObjectURL(currentDisplayPreviewUrl);
  currentDisplayPreviewUrl = null;
  currentDisplayPreviewImage.removeAttribute("src");
  currentDisplayPreviewImage.hidden = true;
  currentDisplayPreviewPlaceholder.hidden = false;
  renderUiCopy(
    "copy.dynamic.current_display.loading",
    currentDisplayPreviewPlaceholder,
    "正在读取当前画面…",
  );
  setCurrentDisplayPlaybackFeedback();
}

function closeCurrentDisplayDialog() {
  if (currentDisplayDialog.open) currentDisplayDialog.close();
  else cleanupCurrentDisplayDialog();
}

async function openCurrentDisplayDialog() {
  if (currentDisplayDialog.open) return;
  setControlBusy(statusEls.currentContent);
  try {
    await refreshStatus({ source: "manual" });
  } catch (_error) {
    if (!latestStatus) return;
  } finally {
    setControlReady(statusEls.currentContent);
  }
  const content = latestStatus?.state?.current_content || { name: "未保存内容" };
  const playback = activeCurrentDisplayPlayback();
  currentDisplayOpenIdentity = currentDisplayIdentity();
  currentDisplayDialogName.textContent = content.name || "未保存内容";
  currentDisplayPlaybackControls.hidden = !playback;
  currentDisplayDialog.showModal();
  currentDisplayPreviewSequence += 1;
  if (playback) applyCurrentDisplayPlayback(playback, { preservePosition: false });
  refreshCurrentDisplayDialogFrame();
  if (playback) currentDisplayProgress.focus();
  else currentDisplayPreviewSurface.focus();
}

function syncCurrentDisplayDialogStatus(status) {
  latestStatus = status;
  if (!currentDisplayDialog.open) return;
  const identity = currentDisplayIdentity(status);
  if (identity !== currentDisplayOpenIdentity) {
    closeCurrentDisplayDialog();
    return;
  }
  const playback = activeCurrentDisplayPlayback(status);
  if (playback) applyCurrentDisplayPlayback(playback);
}

async function sendCurrentDisplayPlaybackPatch(fields) {
  const sessionId = currentDisplayPlayback?.session_id;
  if (!sessionId) throw new Error("当前动图播放会话已经结束");
  const result = await apiJson("/api/display/animation-playback", {
    method: "PATCH",
    body: JSON.stringify({ session_id: sessionId, ...fields }),
  });
  const playback = result.animation_playback;
  if (
    currentDisplayDialog.open
    && currentDisplayPlayback?.session_id === sessionId
    && playback?.session_id === sessionId
  ) {
    if (latestStatus?.state) latestStatus.state.animation_playback = playback;
    if (Number.isInteger(result.state_revision) && latestStatus?.service?.instance_id) {
      lastStatusIdentity = `${latestStatus.service.instance_id}:${result.state_revision}`;
    }
    applyCurrentDisplayPlayback(playback);
    requestCurrentDisplayPreviewRefresh();
  }
  return playback;
}

function handleCurrentDisplayPlaybackError(error) {
  const defaultText = "动图播放控制失败：{reason}";
  setCurrentDisplayPlaybackFeedback(
    "copy.dynamic.current_display.control_failed",
    defaultText,
    { reason: error.message },
    "error",
  );
  announce(`动图播放控制失败：${error.message}`, true);
  if (error.status === 409) {
    closeCurrentDisplayDialog();
    refreshStatus({ source: "manual" }).catch(() => {});
  }
}

async function sendCurrentDisplaySeek(positionMs) {
  const playback = await sendCurrentDisplayPlaybackPatch({ position_ms: Math.round(positionMs) });
  if (currentDisplayFinalSeekPosition === positionMs) {
    currentDisplayDragging = false;
    currentDisplayFinalSeekPosition = null;
    applyCurrentDisplayPlayback(playback, { preservePosition: false });
    syncCurrentDisplayControlAvailability();
  }
}

const seekDispatcher = new LatestSeekDispatcher(sendCurrentDisplaySeek, {
  intervalMs: 100,
  onError: (error, positionMs) => {
    if (currentDisplayFinalSeekPosition === positionMs) {
      currentDisplayDragging = false;
      currentDisplayFinalSeekPosition = null;
      syncCurrentDisplayControlAvailability();
    }
    handleCurrentDisplayPlaybackError(error);
  },
});

statusEls.currentContent.addEventListener("click", openCurrentDisplayDialog);
currentDisplayDialogClose.addEventListener("click", closeCurrentDisplayDialog);
currentDisplayDialog.addEventListener("close", cleanupCurrentDisplayDialog);
currentDisplayDialog.addEventListener("click", (event) => {
  if (currentDisplayPlaybackControls.hidden || event.target === currentDisplayDialog) {
    closeCurrentDisplayDialog();
  }
});

currentDisplayProgress.addEventListener("pointerdown", () => {
  currentDisplayDragging = true;
  currentDisplayFinalSeekPosition = null;
  syncCurrentDisplayControlAvailability();
});
currentDisplayProgress.addEventListener("input", () => {
  currentDisplayDragging = true;
  currentDisplayFinalSeekPosition = null;
  const position = Number(currentDisplayProgress.value);
  renderCurrentDisplayPosition(position, { force: true });
  syncCurrentDisplayControlAvailability();
  seekDispatcher.enqueue(position);
});
function flushCurrentDisplaySeek() {
  if (!currentDisplayDragging) return;
  const position = Number(currentDisplayProgress.value);
  currentDisplayFinalSeekPosition = position;
  seekDispatcher.enqueue(position, { flush: true });
}
currentDisplayProgress.addEventListener("change", flushCurrentDisplaySeek);
currentDisplayProgress.addEventListener("pointerup", flushCurrentDisplaySeek);
currentDisplayProgress.addEventListener("pointercancel", flushCurrentDisplaySeek);

currentDisplayPlayPause.addEventListener("click", async () => {
  if (!currentDisplayPlayback || currentDisplayControlPending || currentDisplayDragging) return;
  currentDisplayControlPending = true;
  syncCurrentDisplayControlAvailability();
  setCurrentDisplayPlaybackFeedback(
    currentDisplayPlayback.paused
      ? "copy.dynamic.current_display.resuming"
      : "copy.dynamic.current_display.pausing",
    currentDisplayPlayback.paused ? "正在继续播放…" : "正在暂停…",
    {},
    "pending",
  );
  try {
    const playback = await sendCurrentDisplayPlaybackPatch({ paused: !currentDisplayPlayback.paused });
    setCurrentDisplayPlaybackFeedback(
      playback.paused
        ? "copy.dynamic.current_display.paused"
        : "copy.dynamic.current_display.resumed",
      playback.paused ? "动图已暂停" : "动图继续播放",
      {},
      "success",
    );
  } catch (error) {
    handleCurrentDisplayPlaybackError(error);
  } finally {
    currentDisplayControlPending = false;
    syncCurrentDisplayControlAvailability();
  }
});

currentDisplaySpeedButtons.forEach((button) => {
  button.addEventListener("click", async () => {
    const speed = Number(button.dataset.playbackSpeed);
    if (
      !currentDisplayPlayback
      || currentDisplayControlPending
      || currentDisplayDragging
      || speed === Number(currentDisplayPlayback.speed)
    ) return;
    currentDisplayControlPending = true;
    syncCurrentDisplayControlAvailability();
    setCurrentDisplayPlaybackFeedback(
      "copy.dynamic.current_display.speed_changing",
      "正在切换到 {speed}×…",
      { speed },
      "pending",
    );
    try {
      await sendCurrentDisplayPlaybackPatch({ speed });
      setCurrentDisplayPlaybackFeedback(
        "copy.dynamic.current_display.speed_changed",
        "已切换到 {speed}×",
        { speed },
        "success",
      );
    } catch (error) {
      handleCurrentDisplayPlaybackError(error);
    } finally {
      currentDisplayControlPending = false;
      syncCurrentDisplayControlAvailability();
    }
  });
});

document.addEventListener("visibilitychange", () => {
  if (!currentDisplayDialog.open) return;
  if (document.visibilityState === "visible") requestCurrentDisplayPreviewRefresh();
  else if (currentDisplayPreviewTimer !== null) {
    window.clearTimeout(currentDisplayPreviewTimer);
    currentDisplayPreviewTimer = null;
  }
});

function showTopbarVoltage(voltage) {
  const status = voltage?.status || "starting";
  statusEls.voltage.dataset.status = status;
  if (status === "ok" && Number.isFinite(Number(voltage.volts))) {
    renderUiCopy(
      "copy.dynamic.device.voltage_ok",
      statusEls.voltage,
      "屏幕输入电压 {volts} V",
      { volts: Number(voltage.volts).toFixed(2) },
    );
  } else if (status === "disconnected") {
    renderUiCopy("copy.dynamic.device.voltage_disconnected", statusEls.voltage, "电压传感器断开");
  } else if (status === "error") {
    renderUiCopy("copy.dynamic.device.voltage_error", statusEls.voltage, "电压读取异常");
  } else {
    renderUiCopy("copy.dynamic.device.voltage_loading", statusEls.voltage, "正在读取电压…");
  }
}

function showCurrentContent(state) {
  const name = typeof state?.current_content?.name === "string"
    ? state.current_content.name
    : "未保存内容";
  renderUiCopy(
    "copy.dynamic.device.current_content",
    statusEls.currentContent,
    "当前画面：{name}",
    { name },
  );
}

function showTopbarLowVoltageProtection(protection) {
  const requestedMode = typeof protection?.mode === "string" ? protection.mode : "unavailable";
  const warningMode = Object.prototype.hasOwnProperty.call(LOW_VOLTAGE_WARNING_TEXT, requestedMode);
  const mode = warningMode
    ? requestedMode
    : ["disabled", "unavailable", "inactive"].includes(requestedMode)
      ? requestedMode
      : "unavailable";
  const previousMode = statusEls.lowVoltageWarning.dataset.mode;
  const visible = Object.prototype.hasOwnProperty.call(LOW_VOLTAGE_WARNING_TEXT, mode);

  statusEls.lowVoltageWarning.dataset.mode = mode;
  if (!visible) {
    statusEls.lowVoltageWarning.hidden = true;
    if (previousMode !== mode) statusEls.lowVoltageWarning.textContent = "";
    return;
  }

  if (previousMode !== mode) {
    statusEls.lowVoltageWarning.textContent = LOW_VOLTAGE_WARNING_TEXT[mode];
  }
  statusEls.lowVoltageWarning.hidden = false;
}

function showDeviceBrightness(state) {
  const userBrightness = finiteNumber(state?.brightness);
  const effectiveBrightness = finiteNumber(state?.effective_brightness);
  if (userBrightness === null) {
    statusEls.brightness.textContent = "-";
    return;
  }
  if (effectiveBrightness === null) {
    statusEls.brightness.textContent = `${userBrightness}%`;
    return;
  }
  statusEls.brightness.textContent = `用户 ${userBrightness}% · 实际 ${effectiveBrightness}%`;
}

function formatBytes(value) {
  const bytes = Number(value);
  if (!Number.isFinite(bytes) || bytes < 0) return "-";
  if (bytes < 1024) return `${bytes} B`;
  const units = ["KiB", "MiB", "GiB", "TiB"];
  let size = bytes / 1024;
  let unit = units[0];
  for (let index = 1; index < units.length && size >= 1024; index += 1) {
    size /= 1024;
    unit = units[index];
  }
  return `${size >= 10 ? size.toFixed(1) : size.toFixed(2)} ${unit}`;
}

function normalizedHex(value) {
  const match = /^#([0-9A-Fa-f]{6})$/.exec(String(value || "").trim());
  return match ? `#${match[1].toUpperCase()}` : null;
}

function showTestColor(value, { editable = false } = {}) {
  const color = normalizedHex(value) || customTestColor;
  customColor.value = color;
  customColor.dataset.colorReadonly = String(!editable);
  customColor.setAttribute("aria-label", editable ? "编辑自定义测试颜色" : "查看测试颜色");
  refreshColorTrigger(customColor);
}

function setDisplayTestFeedback(text = "", state = "idle") {
  displayTestFeedback.textContent = text;
  displayTestFeedback.dataset.state = state;
  displayTestFeedback.hidden = !text;
}

function showTestProtection(testValue, effectiveValue) {
  const mode = latestProtection?.mode;
  if (mode !== "limiting" && mode !== "critical") {
    testBrightnessProtection.hidden = true;
    testBrightnessProtection.textContent = "";
    return;
  }
  testBrightnessProtection.dataset.mode = mode;
  if (mode === "critical") {
    testBrightnessProtection.textContent = "电压过低，纯色测试暂时由 35% 亮度的低电图标覆盖；退出或恢复电压前，测试颜色和亮度会保留。";
  } else {
    const limit = finiteNumber(latestProtection?.brightness_limit_percent);
    const effective = finiteNumber(effectiveValue);
    testBrightnessProtection.textContent = `电压过低，当前允许的最高亮度为 ${limit ?? "-"}%；测试设置 ${testValue}%，实际 ${effective ?? "-"}%。`;
  }
  testBrightnessProtection.hidden = false;
}

function syncDisplayTest(state, protection = latestProtection) {
  latestProtection = protection || null;
  const displayTest = state?.display_test || {};
  const active = displayTest.active === true;
  displayTestControls.hidden = !active;
  if (!active) {
    setActiveButton(fillButtons, null);
    customFillButton.classList.remove("active");
    customFillButton.setAttribute("aria-pressed", "false");
    showTestColor(customTestColor);
    showTestProtection(50, state?.effective_brightness);
    return;
  }

  const color = normalizedHex(displayTest.color) || customTestColor;
  const brightness = Math.max(1, Math.min(100, Number(displayTest.brightness) || 50));
  const matchingFixed = fillButtons.find((button) => button.dataset.testFill === color) || null;
  setActiveButton(fillButtons, matchingFixed);
  customFillButton.classList.toggle("active", !matchingFixed);
  customFillButton.setAttribute("aria-pressed", String(!matchingFixed));
  testBrightness.value = String(brightness);
  testBrightnessValue.textContent = `${brightness}%`;
  showTestColor(color, { editable: !matchingFixed });
  showTestProtection(brightness, state?.effective_brightness);
}

export async function refreshDeviceStorage() {
  storageEls.feedback.textContent = "正在读取设备容量…";
  storageEls.feedback.dataset.state = "pending";
  storageEls.feedback.hidden = false;
  try {
    const data = await apiJson("/api/device-storage");
    storageEls.total.textContent = formatBytes(data.device_total_bytes);
    storageEls.free.textContent = formatBytes(data.device_free_bytes);
    storageEls.software.textContent = formatBytes(data.software_bytes);
    storageEls.templates.textContent = formatBytes(data.templates_bytes);
    storageEls.feedback.textContent = "";
    storageEls.feedback.hidden = true;
    return data;
  } catch (error) {
    storageEls.feedback.textContent = `容量读取失败：${error.message}`;
    storageEls.feedback.dataset.state = "error";
    announce(storageEls.feedback.textContent, true);
    throw error;
  }
}

export async function refreshStatus({ source = "manual" } = {}) {
  try {
    const data = await apiJson("/api/status");
    syncCurrentDisplayDialogStatus(data);
    statusEls.orientation.textContent = `${data.state.orientation}°`;
    showDeviceBrightness(data.state);
    showCurrentContent(data.state);
    showTopbarResources(data.resources);
    showTopbarLowVoltageProtection(data.power?.low_voltage_protection);
    showTopbarVoltage(data.power?.screen_input_voltage);
    syncDisplayTest(data.state, data.power?.low_voltage_protection);
    const statusIdentity = `${data.service?.instance_id || "legacy"}:${data.state.revision ?? "legacy"}`;
    const externalChange = source === "poll" && lastStatusIdentity !== null && statusIdentity !== lastStatusIdentity;
    lastStatusIdentity = statusIdentity;
    document.dispatchEvent(new CustomEvent("matrix:status", {
      detail: { ...data, externalChange },
    }));
    if (externalChange) {
      announce("设备状态已由其他页面更新；本页画板未被自动应用");
    }
    return data;
  } catch (error) {
    if (source !== "poll") announce(`状态读取失败：${error.message}`, true);
    throw error;
  }
}

fillButtons.forEach((button) => {
  button.addEventListener("click", () => startDisplayTest(
    button,
    button.dataset.testFill,
    button.textContent.trim(),
  ));
});

async function startDisplayTest(button, color, label, { openEditor = false } = {}) {
  if (testActionPending) return;
  testActionPending = true;
  [...fillButtons, customFillButton].forEach((control) => setControlBusy(control));
  setDisplayTestFeedback(`正在显示${label}…`, "pending");
  try {
    await apiJson("/api/display/test/fill", {
      method: "POST",
      body: JSON.stringify({ color }),
    });
    showTestColor(color, { editable: openEditor });
    setDisplayTestFeedback(`${label}测试已开始`, "success");
    announce(`${label}测试已开始`);
    refreshCurrentDisplayPreview();
    await refreshStatus();
    if (openEditor) {
      showTestColor(color, { editable: true });
      customColor.click();
    }
  } catch (error) {
    setDisplayTestFeedback(`纯色测试失败：${error.message}`, "error");
    announce(`纯色测试失败：${error.message}`, true);
  } finally {
    testActionPending = false;
    [...fillButtons, customFillButton].forEach((control) => setControlReady(control));
  }
}

customFillButton.addEventListener("click", () => startDisplayTest(
  customFillButton,
  customTestColor,
  "自定义纯色",
  { openEditor: true },
));

customColor.addEventListener("change", async () => {
  if (customColor.dataset.colorReadonly === "true") return;
  const requested = normalizedHex(customColor.value);
  if (!requested || requested === customTestColor) return;
  setControlBusy(customColor, { message: "正在保存并应用自定义纯色…" });
  setDisplayTestFeedback("正在保存并应用自定义纯色…", "pending");
  try {
    const config = await apiJson("/api/config", {
      method: "PUT",
      body: JSON.stringify({ custom_test_color: requested }),
    });
    customTestColor = normalizedHex(config.custom_test_color) || requested;
    await apiJson("/api/display/test/fill", {
      method: "POST",
      body: JSON.stringify({ color: customTestColor }),
    });
    setDisplayTestFeedback(`自定义纯色 ${customTestColor} 已保存并应用`, "success");
    announce(`自定义纯色 ${customTestColor} 已保存并应用`);
    refreshCurrentDisplayPreview();
    await refreshStatus();
  } catch (error) {
    setDisplayTestFeedback(`自定义纯色保存或应用失败：${error.message}`, "error");
    announce(displayTestFeedback.textContent, true);
    await refreshStatus().catch(() => {});
  } finally {
    setControlReady(customColor);
  }
});

async function processTestBrightnessQueue() {
  if (applyingTestBrightness) return;
  applyingTestBrightness = true;
  while (desiredTestBrightness !== null) {
    const requested = desiredTestBrightness;
    desiredTestBrightness = null;
    setDisplayTestFeedback(`正在应用测试亮度 ${requested}%…`, "pending");
    try {
      const response = await apiJson("/api/display/test/brightness", {
        method: "PUT",
        body: JSON.stringify({ brightness: requested }),
      });
      const applied = Number(response.display_test?.brightness) || requested;
      testBrightness.value = String(applied);
      testBrightnessValue.textContent = `${applied}%`;
      showTestProtection(applied, response.effective_brightness);
      setDisplayTestFeedback(`测试亮度 ${applied}% 已生效，不会修改用户亮度`, "success");
    } catch (error) {
      setDisplayTestFeedback(`测试亮度应用失败：${error.message}`, "error");
      announce(displayTestFeedback.textContent, true);
      if (desiredTestBrightness === null) await refreshStatus().catch(() => {});
    }
  }
  applyingTestBrightness = false;
  refreshCurrentDisplayPreview();
  await refreshStatus().catch(() => {});
}

function queueTestBrightness(value) {
  desiredTestBrightness = Math.max(1, Math.min(100, Number(value)));
  void processTestBrightnessQueue();
}

testBrightness.addEventListener("input", () => {
  testBrightnessValue.textContent = `${testBrightness.value}%`;
  showTestProtection(testBrightness.value, null);
  queueTestBrightness(testBrightness.value);
});
testBrightness.addEventListener("change", () => queueTestBrightness(testBrightness.value));

exitDisplayTest.addEventListener("click", async () => {
  setControlBusy(exitDisplayTest, { label: "正在退出…", message: "正在退出纯色测试…" });
  setDisplayTestFeedback("正在退出纯色测试…", "pending");
  try {
    await apiJson("/api/display/test", { method: "DELETE" });
    setDisplayTestFeedback();
    announce("已退出纯色测试，恢复进入测试前的设备状态");
    refreshCurrentDisplayPreview();
    await refreshStatus();
  } catch (error) {
    setDisplayTestFeedback(`退出测试失败：${error.message}`, "error");
    announce(displayTestFeedback.textContent, true);
  } finally {
    setControlReady(exitDisplayTest);
  }
});

refreshStatusButton.addEventListener("click", async () => {
  setControlBusy(refreshStatusButton, { label: "正在刷新…" });
  announce("正在刷新设备状态…");
  try {
    await refreshStatus();
    announce("设备状态已刷新");
  } catch (_error) {
    // refreshStatus already reports the failure.
  } finally {
    setControlReady(refreshStatusButton);
  }
});

registerWorkspace({
  id: "device",
  title: "设备状态和测试",
  elementId: "workspace-device",
  order: 10,
  persistence: "none",
  async onEnter() {
    if (!loadedOnce) {
      loadedOnce = true;
      try {
        const config = await apiJson("/api/config");
        customTestColor = normalizedHex(config.custom_test_color) || customTestColor;
        showTestColor(customTestColor);
      } catch (error) {
        announce(`自定义纯色读取失败：${error.message}`, true);
      }
    }
    await refreshStatus();
    await refreshDeviceStorage().catch(() => {});
    window.clearInterval(storageTimer);
    storageTimer = window.setInterval(() => refreshDeviceStorage().catch(() => {}), STORAGE_REFRESH_INTERVAL_MS);
  },
  onLeave() {
    window.clearInterval(storageTimer);
    storageTimer = null;
  },
});

document.addEventListener("matrix:composition-applied", () => refreshStatus().catch(() => {}));