// Entry point for the dashboard: wires UI events, pulls status, and initializes
// feature modules (services, settings, stats).
import {
  getStatus,
  triggerReset,
  getReleaseStatus,
  checkRelease,
  applyRelease,
  rollbackRelease,
  setReleaseAutoCheck,
  setReleaseChannel,
} from "./api.js";
import { placeholderStatus, renderStats } from "./status.js";
import { initServiceControls, renderServices } from "./services.js";
import { initSettings } from "./settings.js";
import { initUpdateSettings, isUpdatesDirty } from "./update-settings.js";

const servicesGrid = document.getElementById("servicesGrid");
const heroStats = document.getElementById("heroStats");
const refreshHintMain = document.getElementById("refreshHintMain");
const refreshHintServices = document.getElementById("refreshHintServices");
const refreshFlagTop = document.getElementById("refreshFlagTop");
const themeToggle = document.getElementById("themeToggle");
const themeToggleIcon = document.getElementById("themeToggleIcon");
const animToggle = document.getElementById("animToggle");

const resetConfirm = document.getElementById("resetConfirm");
const resetBtn = document.getElementById("resetBtn");
const updatesToggle = document.getElementById("updatesToggle");
const updatesStatus = document.getElementById("updatesStatus");
const updatesFlagTop = document.getElementById("updatesFlagTop");
const updatesNoteTop = document.getElementById("updatesNoteTop");
const tempFlagTop = document.getElementById("tempFlagTop");
const releaseFlagTop = document.getElementById("releaseFlagTop");
const refreshIntervalInput = document.getElementById("refreshIntervalInput");
const refreshIntervalSave = document.getElementById("refreshIntervalSave");
const refreshIntervalMsg = document.getElementById("refreshIntervalMsg");
const toastPosSelect = document.getElementById("toastPosSelect");
const toastAnimSelect = document.getElementById("toastAnimSelect");
const toastSpeedInput = document.getElementById("toastSpeedInput");
const toastDurationInput = document.getElementById("toastDurationInput");
const fontSelect = document.getElementById("fontSelect");
const updatesScope = document.getElementById("updatesScope");
const updateTimeInput = document.getElementById("updateTimeInput");
const upgradeTimeInput = document.getElementById("upgradeTimeInput");
const updatesCleanup = document.getElementById("updatesCleanup");
const updatesBandwidth = document.getElementById("updatesBandwidth");
const updatesRebootToggle = document.getElementById("updatesRebootToggle");
const updatesRebootTime = document.getElementById("updatesRebootTime");
const updatesRebootUsers = document.getElementById("updatesRebootUsers");
const updatesSaveBtn = document.getElementById("updatesSaveBtn");
const updatesMsg = document.getElementById("updatesMsg");
const updatesUnsavedNote = document.getElementById("updatesUnsavedNote");
const updatesSection = document.getElementById("updatesSection");
const svcName = document.getElementById("svcName");
const svcPort = document.getElementById("svcPort");
const svcPath = document.getElementById("svcPath");
const svcAddBtn = document.getElementById("svcAddBtn");
const svcMsg = document.getElementById("svcMsg");
const svcScheme = document.getElementById("svcScheme");
const svcNotice = document.getElementById("svcNotice");
const svcNoticeLink = document.getElementById("svcNoticeLink");
const svcSelfSigned = document.getElementById("svcSelfSigned");
const svcSelfSignedLabel = document.querySelector("label[for='svcSelfSigned']") || null;
const addServiceModal = document.getElementById("addServiceModal");
const addSvcClose = document.getElementById("addSvcClose");
const addServiceOpen = document.getElementById("addServiceOpen");
const menuModal = document.getElementById("menuModal");
const menuTitle = document.getElementById("menuTitle");
const menuSubtitle = document.getElementById("menuSubtitle");
const menuRename = document.getElementById("menuRename");
const menuPort = document.getElementById("menuPort");
const menuPath = document.getElementById("menuPath");
const menuScheme = document.getElementById("menuScheme");
const menuNotice = document.getElementById("menuNotice");
const menuNoticeLink = document.getElementById("menuNoticeLink");
const menuSelfSigned = document.getElementById("menuSelfSigned");
const menuSaveBtn = document.getElementById("menuSaveBtn");
const menuCancelBtn = document.getElementById("menuCancelBtn");
const menuRemoveBtn = document.getElementById("menuRemoveBtn");
const menuMsg = document.getElementById("menuMsg");
const menuClose = document.getElementById("menuClose");

const advBtn = document.getElementById("advBtn");
const advModal = document.getElementById("advModal");
const advClose = document.getElementById("advClose");
const releaseBtn = document.getElementById("releaseBtn");
const releaseModal = document.getElementById("releaseModal");
const releaseClose = document.getElementById("releaseClose");
const releaseCurrent = document.getElementById("releaseCurrent");
const releaseLatest = document.getElementById("releaseLatest");
const releaseStatusMsg = document.getElementById("releaseStatusMsg");
const releaseProgress = document.getElementById("releaseProgress");
const releaseCheckBtn = document.getElementById("releaseCheckBtn");
const releaseApplyBtn = document.getElementById("releaseApplyBtn");
const releaseRollbackBtn = document.getElementById("releaseRollbackBtn");
const releaseAutoCheck = document.getElementById("releaseAutoCheck");
const releaseLog = document.getElementById("releaseLog");
const releaseLogStatus = document.getElementById("releaseLogStatus");
const releaseLogCopy = document.getElementById("releaseLogCopy");
// Guard against double-loading (cache/tunnel quirks)
const releaseChangelogBtn = window.__pikitReleaseChangelogBtn || document.getElementById("releaseChangelogBtn");
const releaseChannelToggle = window.__pikitReleaseChannelToggle || document.getElementById("releaseChannelToggle");
window.__pikitReleaseChangelogBtn = releaseChangelogBtn;
window.__pikitReleaseChannelToggle = releaseChannelToggle;

const helpBtn = document.getElementById("helpBtn");
const helpModal = document.getElementById("helpModal");
const helpClose = document.getElementById("helpClose");
const aboutBtn = document.getElementById("aboutBtn");
const aboutModal = document.getElementById("aboutModal");
const aboutClose = document.getElementById("aboutClose");
const busyOverlay = document.getElementById("busyOverlay");
const busyTitle = document.getElementById("busyTitle");
const busyText = document.getElementById("busyText");
const toastContainer = document.getElementById("toastContainer");
const readyOverlay = document.getElementById("readyOverlay");
const confirmModal = document.getElementById("confirmModal");
const confirmTitle = document.getElementById("confirmTitle");
const confirmBody = document.getElementById("confirmBody");
const confirmOk = document.getElementById("confirmOk");
const confirmCancel = document.getElementById("confirmCancel");
const changelogModal = document.getElementById("changelogModal");
const changelogTitle = document.getElementById("changelogTitle");
const changelogBody = document.getElementById("changelogBody");
const changelogClose = document.getElementById("changelogClose");

const TOAST_POS_KEY = "pikit-toast-pos";
const TOAST_ANIM_KEY = "pikit-toast-anim";
const TOAST_SPEED_KEY = "pikit-toast-speed";
const TOAST_DURATION_KEY = "pikit-toast-duration";
const FONT_KEY = "pikit-font";
const ALLOWED_TOAST_POS = [
  "bottom-center",
  "bottom-right",
  "bottom-left",
  "top-right",
  "top-left",
  "top-center",
];
const ALLOWED_TOAST_ANIM = ["slide-in", "fade", "pop", "bounce", "drop", "grow"];
const ALLOWED_FONTS = ["redhat", "space", "manrope", "dmsans", "sora", "chivo", "atkinson", "plex"];

let toastPosition = "bottom-center";
let toastAnimation = "slide-in";
let toastDurationMs = 5000;
let toastSpeedMs = 300;
let fontChoice = "redhat";
let releaseBusyActive = false;
let releaseLogLines = [];
let lastReleaseLogKey = "";
let releaseLastFetched = 0;
let changelogCache = { version: null, text: "" };
let lastChangelogUrl = null;
let releaseChannel = "dev";

function shorten(text, max = 90) {
  if (!text || typeof text !== "string") return text;
  return text.length > max ? `${text.slice(0, max - 3)}...` : text;
}

function applyToastSettings() {
  if (!toastContainer) return;
  toastContainer.className = `toast-container pos-${toastPosition}`;
  document.documentElement.style.setProperty("--toast-speed", `${toastSpeedMs}ms`);
  const dir = toastPosition.startsWith("top") ? -1 : 1;
  const isLeft = toastPosition.includes("left");
  const isRight = toastPosition.includes("right");
  const slideX = isLeft ? -26 : isRight ? 26 : 0;
  const slideY = isLeft || isRight ? 0 : dir * 24;
  document.documentElement.style.setProperty("--toast-slide-offset", `${dir * 24}px`);
  document.documentElement.style.setProperty("--toast-dir", `${dir}`);
  document.documentElement.style.setProperty("--toast-slide-x", `${slideX}px`);
  document.documentElement.style.setProperty("--toast-slide-y", `${slideY}px`);
  if (toastDurationInput) toastDurationInput.value = toastDurationMs;
}

function applyFontSetting() {
  document.documentElement.setAttribute("data-font", fontChoice);
  if (fontSelect) fontSelect.value = fontChoice;
}

function loadToastSettings() {
  try {
    const posSaved = localStorage.getItem(TOAST_POS_KEY);
    if (ALLOWED_TOAST_POS.includes(posSaved)) toastPosition = posSaved;
    const animSaved = localStorage.getItem(TOAST_ANIM_KEY);
    const migrated =
      animSaved === "slide-up" || animSaved === "slide-left" || animSaved === "slide-right"
        ? "slide-in"
        : animSaved;
    if (migrated && ALLOWED_TOAST_ANIM.includes(migrated)) toastAnimation = migrated;
    const savedSpeed = Number(localStorage.getItem(TOAST_SPEED_KEY));
    if (!Number.isNaN(savedSpeed) && savedSpeed >= 100 && savedSpeed <= 3000) {
      toastSpeedMs = savedSpeed;
    }
    const savedDur = Number(localStorage.getItem(TOAST_DURATION_KEY));
    if (!Number.isNaN(savedDur) && savedDur >= 1000 && savedDur <= 15000) {
      toastDurationMs = savedDur;
    }
    const savedFont = localStorage.getItem(FONT_KEY);
    if (ALLOWED_FONTS.includes(savedFont)) fontChoice = savedFont;
  } catch (e) {
    console.warn("Toast settings load failed", e);
  }
  if (toastPosSelect) toastPosSelect.value = toastPosition;
  if (toastAnimSelect) toastAnimSelect.value = toastAnimation;
  if (toastSpeedInput) toastSpeedInput.value = toastSpeedMs;
  if (toastDurationInput) toastDurationInput.value = toastDurationMs;
  if (fontSelect) fontSelect.value = fontChoice;
  applyToastSettings();
  applyFontSetting();
}

function persistToastSettings() {
  try {
    localStorage.setItem(TOAST_POS_KEY, toastPosition);
    localStorage.setItem(TOAST_ANIM_KEY, toastAnimation);
    localStorage.setItem(TOAST_SPEED_KEY, String(toastSpeedMs));
    localStorage.setItem(TOAST_DURATION_KEY, String(toastDurationMs));
    localStorage.setItem(FONT_KEY, fontChoice);
  } catch (e) {
    console.warn("Toast settings save failed", e);
  }
}

function showToast(message, type = "info") {
  if (!toastContainer || !message) return;
  const t = document.createElement("div");
  t.className = `toast ${type} anim-${toastAnimation}`;
  t.textContent = message;
  toastContainer.appendChild(t);
  const animOn = document.documentElement.getAttribute("data-anim") !== "off";
  if (!animOn) {
    t.classList.add("show");
  } else {
    requestAnimationFrame(() => t.classList.add("show"));
  }
  const duration = toastDurationMs;
  setTimeout(() => {
    const all = Array.from(toastContainer.querySelectorAll(".toast"));
    const others = all.filter((el) => el !== t && !el.classList.contains("leaving"));
    const first = new Map(
      others.map((el) => [el, el.getBoundingClientRect()]),
    );

    t.classList.add("leaving");
    // force layout
    void t.offsetHeight;

    requestAnimationFrame(() => {
      const second = new Map(
        others.map((el) => [el, el.getBoundingClientRect()]),
      );
      others.forEach((el) => {
        const dy = first.get(el).top - second.get(el).top;
        if (Math.abs(dy) > 0.5) {
          el.style.transition = "transform var(--toast-speed, 0.28s) ease";
          el.style.transform = `translateY(${dy}px)`;
          requestAnimationFrame(() => {
            el.style.transform = "";
          });
        }
      });
    });

    const removeDelay = animOn ? toastSpeedMs : 0;
    setTimeout(() => {
      t.classList.remove("show");
      t.remove();
      // clear transition styling
      others.forEach((el) => (el.style.transition = ""));
    }, removeDelay);
  }, duration);
}

function applyTooltips() {
  const tips = {
    updatesFlagTop: "Auto updates status; configure in Settings → Automatic updates.",
    refreshFlagTop: "Auto-refresh interval; change in Settings → Refresh interval.",
    tempFlagTop: "CPU temperature status; see details in the hero stats below.",
    releaseFlagTop: "Pi-Kit release status; open Settings → Updates to install.",
    themeToggle: "Toggle light or dark theme",
    helpBtn: "Open quick help",
    advBtn: "Open settings",
    animToggle: "Enable or disable dashboard animations",
    refreshIntervalInput: "Seconds between automatic refreshes (5-120)",
    refreshIntervalSave: "Save refresh interval",
    svcName: "Display name for the service card",
    svcPort: "Port number the service listens on",
    svcPath: "Optional path like /admin",
    svcScheme: "Choose HTTP or HTTPS link",
    svcSelfSigned: "Mark service as using a self-signed certificate",
    svcNotice: "Optional note shown on the service card",
    svcNoticeLink: "Optional link for more info about the service",
    svcAddBtn: "Add the service to the dashboard",
    updatesToggle: "Turn unattended upgrades on or off",
    updatesScope: "Select security-only or all updates",
    updateTimeInput: "Time to download updates (24h)",
    upgradeTimeInput: "Time to install updates (24h)",
    updatesCleanup: "Remove unused dependencies after upgrades",
    updatesBandwidth: "Limit download bandwidth in KB/s (0 = unlimited)",
    updatesRebootToggle: "Auto-reboot if required by updates",
    updatesRebootTime: "Scheduled reboot time when auto-reboot is on",
    updatesRebootUsers: "Allow reboot even if users are logged in",
    updatesSaveBtn: "Save unattended-upgrades settings",
    resetConfirm: "Type YES to enable factory reset",
    resetBtn: "Factory reset this Pi-Kit",
    menuRename: "Change the service display name",
    menuPort: "Change the service port",
    menuPath: "Optional service path",
    menuScheme: "Switch between HTTP and HTTPS",
    menuSelfSigned: "Mark the service as self-signed",
    menuNotice: "Edit the notice text shown on the card",
    menuNoticeLink: "Optional link for the notice",
    menuSaveBtn: "Save service changes",
    menuCancelBtn: "Cancel changes",
    menuRemoveBtn: "Remove this service",
  };
  Object.entries(tips).forEach(([id, text]) => {
    const el = document.getElementById(id);
    if (el) el.title = text;
  });
}

// Clamp name inputs to 30 chars
[svcName, menuRename].forEach((el) => {
  if (!el) return;
  el.setAttribute("maxlength", "32");
  el.addEventListener("input", () => {
    if (el.value.length > 32) el.value = el.value.slice(0, 32);
  });
});

function setUpdatesUI(enabled) {
  const on = !!enabled;
  updatesToggle.checked = on;
  updatesStatus.textContent = on ? "On" : "Off";
  updatesStatus.classList.toggle("chip-on", on);
  updatesStatus.classList.toggle("chip-off", !on);
}

async function loadStatus() {
  try {
    const data = await getStatus();
    renderStats(heroStats, data);
    renderServices(servicesGrid, data.services, { openAddService });
    const updatesEnabled =
      data?.auto_updates?.enabled ?? data.auto_updates_enabled;
    if (updatesEnabled !== undefined && !isUpdatesDirty()) {
      setUpdatesUI(updatesEnabled);
    }

    // Updates chip + reboot note
    updatesFlagEl(
      updatesEnabled === undefined ? null : updatesEnabled === true,
    );
    const cfg = data.updates_config || {};
    const rebootReq = data.reboot_required;
    setTempFlag(data.cpu_temp_c);
    if (updatesNoteTop) {
      updatesNoteTop.textContent = "";
      updatesNoteTop.classList.remove("note-warn");
      if (rebootReq) {
        if (cfg.auto_reboot) {
          updatesNoteTop.textContent = `Reboot scheduled at ${cfg.reboot_time || "02:00"}.`;
        } else {
          updatesNoteTop.textContent = "Reboot required. Please reboot when you can.";
          updatesNoteTop.classList.add("note-warn");
        }
      }
    }
    if (readyOverlay) {
      if (data.ready) {
        readyOverlay.classList.add("hidden");
      } else {
        readyOverlay.classList.remove("hidden");
        // When not ready, retry periodically until API reports ready
        setTimeout(loadStatus, 3000);
      }
    }
    // Pull Pi-Kit release status after core status
    loadReleaseStatus();
  } catch (e) {
    console.error(e);
    renderStats(heroStats, placeholderStatus);
  }
}

function setTempFlag(tempC) {
  if (!tempFlagTop) return;
  const t = typeof tempC === "number" ? tempC : null;
  let label = "Temp: n/a";
  tempFlagTop.classList.remove("chip-on", "chip-warm", "chip-off");
  if (t !== null) {
    if (t < 55) {
      label = "Temp: OK";
      tempFlagTop.classList.add("chip-on");
    } else if (t < 70) {
      label = "Temp: Warm";
      tempFlagTop.classList.add("chip-warm");
    } else {
      label = "Temp: Hot";
      tempFlagTop.classList.add("chip-off");
    }
  }
  tempFlagTop.textContent = label;
}

function updatesFlagEl(enabled) {
  if (!updatesFlagTop) return;
  const labelOn = "System updates: On";
  const labelOff = "System updates: Off";
  updatesFlagTop.textContent =
    enabled === true ? labelOn : enabled === false ? labelOff : "System updates";
  updatesFlagTop.className = "status-chip quiet chip-system";
  if (enabled === false) updatesFlagTop.classList.add("chip-off");
}

async function loadReleaseStatus(force = false) {
  if (!releaseFlagTop) return;
  const now = Date.now();
  if (!force && now - releaseLastFetched < 60000 && !releaseBusyActive) {
    return;
  }
  setReleaseChip({ status: "checking" });
  try {
    const data = await getReleaseStatus();
    const {
      current_version = "n/a",
      latest_version = "n/a",
      status = "unknown",
      message = "",
      auto_check = false,
      progress = null,
      channel = "dev",
    } = data || {};
    releaseChannel = channel || "dev";
    if (releaseChannelToggle) releaseChannelToggle.checked = releaseChannel === "dev";
    window.__lastReleaseState = data;
    const key = [status, progress, message].join("|");
    if (key !== lastReleaseLogKey) {
      logRelease(`Status: ${status}${progress ? " • " + progress : ""}${message ? " • " + message : ""}`);
      lastReleaseLogKey = key;
    }
    releaseLastFetched = now;
    if (status === "update_available" && message && message.startsWith("http")) {
      lastChangelogUrl = message;
    } else if (latest_version) {
      lastChangelogUrl = `https://git.44r0n.cc/44r0n7/pi-kit/releases/download/v${latest_version}/CHANGELOG-${latest_version}.txt`;
    }
    setReleaseChip(data);
    if (releaseCurrent) releaseCurrent.textContent = current_version;
    if (releaseLatest) releaseLatest.textContent = latest_version;
    if (releaseStatusMsg) {
      releaseStatusMsg.textContent =
        status === "update_available"
          ? message || "Update available"
          : status === "up_to_date"
            ? "Up to date"
            : message || status;
      releaseStatusMsg.classList.toggle("error", status === "error");
    }
    if (releaseAutoCheck) releaseAutoCheck.checked = !!auto_check;
    if (releaseProgress) {
      releaseProgress.textContent = progress ? progress : "";
    }
    if (status === "in_progress" && !releaseBusyActive) {
      releaseBusyActive = true;
      showBusy("Working on update…", progress || "This can take up to a minute.");
      pollReleaseStatus();
    }
  } catch (e) {
    console.error("Failed to load release status", e);
    setReleaseChip({ status: "error", message: "Failed to load" });
    if (releaseStatusMsg) {
      releaseStatusMsg.textContent = "Failed to load release status";
      releaseStatusMsg.classList.add("error");
    }
  }
}

function setReleaseChip(state) {
  if (!releaseFlagTop) return;
  releaseFlagTop.textContent = "Pi-Kit: n/a";
  releaseFlagTop.className = "status-chip quiet";
  if (!state) return;
  const { status, latest_version, current_version, message } = state;
  const label =
    status === "update_available"
      ? `Update → ${latest_version || "new"}`
      : status === "up_to_date"
        ? `Pi-Kit: ${current_version || "latest"}`
        : status === "checking"
          ? "Checking…"
          : status === "error"
            ? "Update error"
            : `Pi-Kit: ${current_version || "n/a"}`;
  releaseFlagTop.textContent = label;
  if (status === "update_available") releaseFlagTop.classList.add("chip-warm");
  if (status === "error") releaseFlagTop.classList.add("chip-off");
  const msg = shorten(message, 80) || "";
  releaseFlagTop.title = msg || "Pi-Kit release status";
  if (releaseStatusMsg) {
    releaseStatusMsg.textContent =
      status === "update_available"
        ? msg || "Update available"
        : status === "up_to_date"
          ? msg || "Up to date"
          : msg || status;
  }
  if (releaseLogStatus) {
    releaseLogStatus.textContent =
      status === "in_progress"
        ? "Running…"
        : status === "update_available"
          ? "Update available"
          : status === "error"
            ? "Error"
            : "Idle";
  }
  if (releaseChangelogBtn) {
    releaseChangelogBtn.disabled = status === "checking";
    releaseChangelogBtn.classList.toggle("ghost", status !== "update_available");
  }
}

function wireModals() {
  advBtn.onclick = () => advModal.classList.remove("hidden");
  advClose.onclick = () => advModal.classList.add("hidden");
  helpBtn.onclick = () => helpModal.classList.remove("hidden");
  helpClose.onclick = () => helpModal.classList.add("hidden");
  aboutBtn.onclick = () => aboutModal.classList.remove("hidden");
  aboutClose.onclick = () => aboutModal.classList.add("hidden");
  menuClose.onclick = () => menuModal.classList.add("hidden");
  addServiceOpen?.addEventListener("click", openAddService);
  addSvcClose?.addEventListener("click", () => addServiceModal?.classList.add("hidden"));
  addServiceModal?.addEventListener("click", (e) => {
    if (e.target === addServiceModal) addServiceModal.classList.add("hidden");
  });
  releaseBtn?.addEventListener("click", () => {
    releaseModal?.classList.remove("hidden");
    loadReleaseStatus();
  });
  releaseClose?.addEventListener("click", () => releaseModal?.classList.add("hidden"));
  releaseModal?.addEventListener("click", (e) => {
    if (e.target === releaseModal) releaseModal.classList.add("hidden");
  });
}

function wireReleaseControls() {
  releaseCheckBtn?.addEventListener("click", async () => {
    try {
      if (releaseProgress) releaseProgress.textContent = "Checking for updates…";
      logRelease("Checking for updates…");
      await checkRelease();
      await loadReleaseStatus(true);
      const state = window.__lastReleaseState || {};
      logRelease(
        `Status: ${state.status || "unknown"}${
          state.message ? " • " + state.message : ""
        }`,
      );
      showToast("Checked for updates", "success");
    } catch (e) {
      showToast(e.error || "Check failed", "error");
      logRelease(`Error: ${e.error || "Check failed"}`);
    } finally {
      if (releaseProgress) releaseProgress.textContent = "";
    }
  });

  releaseApplyBtn?.addEventListener("click", async () => {
    try {
      const state = window.__lastReleaseState || {};
      const { current_version, latest_version } = state;
      const sameVersion =
        current_version &&
        latest_version &&
        String(current_version) === String(latest_version);
      if (sameVersion) {
        const proceed = await confirmAction(
          "Reinstall same version?",
          `You are already on ${current_version}. Reinstall this version anyway?`,
        );
        if (!proceed) {
          logRelease("Upgrade cancelled (same version).");
          return;
        }
      }
      releaseBusyActive = true;
      showBusy("Updating Pi-Kit…", "Applying release. This can take up to a minute.");
      if (releaseProgress) releaseProgress.textContent = "Downloading and installing…";
      logRelease("Starting upgrade…");
      await applyRelease();
      pollReleaseStatus();
      showToast("Update started", "success");
    } catch (e) {
      showToast(e.error || "Update failed", "error");
      logRelease(`Error: ${e.error || "Update failed"}`);
    } finally {
      if (releaseProgress) releaseProgress.textContent = "";
    }
  });

  releaseRollbackBtn?.addEventListener("click", async () => {
    try {
      releaseBusyActive = true;
      showBusy("Rolling back…", "Restoring previous backup.");
      if (releaseProgress) releaseProgress.textContent = "Rolling back…";
      logRelease("Starting rollback…");
      await rollbackRelease();
      pollReleaseStatus();
      showToast("Rollback started", "success");
    } catch (e) {
      showToast(e.error || "Rollback failed", "error");
      logRelease(`Error: ${e.error || "Rollback failed"}`);
    } finally {
      if (releaseProgress) releaseProgress.textContent = "";
    }
  });

  releaseAutoCheck?.addEventListener("change", async () => {
    try {
      await setReleaseAutoCheck(releaseAutoCheck.checked);
      showToast("Auto-check preference saved", "success");
    } catch (e) {
      showToast(e.error || "Failed to save preference", "error");
      releaseAutoCheck.checked = !releaseAutoCheck.checked;
    }
  });

  releaseChannelToggle?.addEventListener("change", async () => {
    try {
      const chan = releaseChannelToggle.checked ? "dev" : "stable";
      await setReleaseChannel(chan);
      releaseChannel = chan;
      logRelease(`Channel set to ${chan}`);
      await loadReleaseStatus(true);
    } catch (e) {
      showToast(e.error || "Failed to save channel", "error");
      releaseChannelToggle.checked = releaseChannel === "dev";
    }
  });

  releaseChangelogBtn?.addEventListener("click", async () => {
    const state = window.__lastReleaseState || {};
    const { latest_version, message } = state;
    const url = (message && message.startsWith("http") ? message : null) || lastChangelogUrl;
    if (!url) {
      showToast("No changelog URL available", "error");
      return;
    }
    await showChangelog(latest_version, url);
  });

  releaseLogCopy?.addEventListener("click", async () => {
    try {
      const text = releaseLogLines.join("\n") || "No log entries yet.";
      if (navigator.clipboard && window.isSecureContext) {
        await navigator.clipboard.writeText(text);
      } else {
        // Fallback for non-HTTPS contexts
        const ta = document.createElement("textarea");
        ta.value = text;
        ta.style.position = "fixed";
        ta.style.opacity = "0";
        document.body.appendChild(ta);
        ta.select();
        document.execCommand("copy");
        document.body.removeChild(ta);
      }
      showToast("Log copied", "success");
    } catch (e) {
      console.error("Copy failed", e);
      showToast("Could not copy log", "error");
    }
  });

  changelogClose?.addEventListener("click", () => {
    changelogModal?.classList.add("hidden");
    releaseModal?.classList.remove("hidden");
  });
}

function pollReleaseStatus() {
  let attempts = 0;
  const maxAttempts = 30; // ~1 min at 2s
  const started = Date.now();
  const minWaitMs = 3000;
  const tick = async () => {
    attempts += 1;
    await loadReleaseStatus(true);
    const state = window.__lastReleaseState || {};
    const tooSoon = Date.now() - started < minWaitMs;
    if ((state.status === "in_progress" || tooSoon) && attempts < maxAttempts) {
      setTimeout(tick, 1000);
    } else {
      releaseBusyActive = false;
      hideBusy();
      if (releaseProgress) releaseProgress.textContent = "";
      if (state.status === "up_to_date") {
        showToast(state.message || "Update complete", "success");
        logRelease("Update complete");
      } else if (state.status === "error") {
        showToast(state.message || "Update failed", "error");
        logRelease(`Error: ${state.message || "Update failed"}`);
      }
    }
  };
  tick();
}

function showBusy(title = "Working…", text = "This may take a few seconds.") {
  if (!busyOverlay) return;
  busyTitle.textContent = title;
  busyText.textContent = text || "";
  busyText.classList.toggle("hidden", !text);
  busyOverlay.classList.remove("hidden");
}

function hideBusy() {
  busyOverlay?.classList.add("hidden");
}

function logRelease(msg) {
  if (!msg) return;
  const ts = new Date().toLocaleTimeString();
  const line = `${ts}  ${msg}`;
  if (releaseLogLines[0] === line) return;
  releaseLogLines.unshift(line);
  releaseLogLines = releaseLogLines.slice(0, 80);
  if (releaseLog) releaseLog.textContent = releaseLogLines.join("\n");
}

async function fetchText(url) {
  const res = await fetch(url);
  if (!res.ok) throw new Error(`Fetch failed (${res.status})`);
  return res.text();
}

async function showChangelog(version, url) {
  if (!changelogBody || !changelogModal) {
    window.open(url, "_blank");
    return;
  }
  try {
    if (changelogCache.version === version && changelogCache.text) {
      changelogBody.textContent = changelogCache.text;
    } else {
      changelogBody.textContent = "Loading changelog…";
      const res = await fetch(`/api/update/changelog?${url ? `url=${encodeURIComponent(url)}` : ""}`);
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      const data = await res.json();
      const text = data.text || "No changelog content.";
      changelogCache = { version, text };
      changelogBody.textContent = text;
    }
    changelogTitle.textContent = version ? `Changelog — ${version}` : "Changelog";
    changelogModal.classList.remove("hidden");
  } catch (e) {
    console.error("Changelog fetch failed", e);
    showToast("Failed to load changelog", "error");
  }
}

function confirmAction(title, body) {
  return new Promise((resolve) => {
    if (!confirmModal) {
      const ok = window.confirm(body || title || "Are you sure?");
      resolve(ok);
      return;
    }
    confirmTitle.textContent = title || "Are you sure?";
    confirmBody.textContent = body || "";
    confirmModal.classList.remove("hidden");
    const done = (val) => {
      confirmModal.classList.add("hidden");
      resolve(val);
    };
    const okHandler = () => done(true);
    const cancelHandler = () => done(false);
    confirmOk.onclick = okHandler;
    confirmCancel.onclick = cancelHandler;
  });
}

// Testing hook
if (typeof window !== "undefined") {
  window.__pikitTest = window.__pikitTest || {};
  window.__pikitTest.showBusy = showBusy;
  window.__pikitTest.hideBusy = hideBusy;
}

function wireResetAndUpdates() {
  resetBtn.onclick = async () => {
    resetBtn.disabled = true;
    try {
      await triggerReset(resetConfirm.value.trim());
      alert("Resetting now. The device will reboot.");
    } catch (e) {
      alert(e.error || "Reset failed");
    } finally {
      resetBtn.disabled = false;
    }
  };

  resetConfirm.addEventListener("input", () => {
    resetBtn.disabled = resetConfirm.value.trim() !== "YES";
  });
}

function wireAccordions() {
  const forceOpen = typeof window !== "undefined" && window.__pikitTest?.forceAccordionsOpen;
  const accordions = document.querySelectorAll(".accordion");
  if (forceOpen) {
    accordions.forEach((a) => a.classList.add("open"));
    return;
  }
  document.querySelectorAll(".accordion-toggle").forEach((btn) => {
    btn.addEventListener("click", () => {
      const acc = btn.closest(".accordion");
      if (acc.classList.contains("open")) {
        acc.classList.remove("open");
      } else {
        // Keep a single accordion expanded at a time for readability
        accordions.forEach((a) => a.classList.remove("open"));
        acc.classList.add("open");
      }
    });
  });
}

function collapseAccordions() {
  document.querySelectorAll(".accordion").forEach((a) => a.classList.remove("open"));
}

function openAddService() {
  if (addServiceModal) addServiceModal.classList.remove("hidden");
  document.getElementById("svcName")?.focus();
}
if (typeof window !== "undefined") {
  window.__pikitOpenAddService = openAddService;
}

function main() {
  applyTooltips();
  wireModals();
  wireReleaseControls();
  wireResetAndUpdates();
  wireAccordions();
  loadToastSettings();

  if (advClose) {
    advClose.onclick = () => {
      advModal.classList.add("hidden");
      collapseAccordions();
    };
  }

  initServiceControls({
    gridEl: servicesGrid,
    onChange: loadStatus,
    overlay: { show: showBusy, hide: hideBusy },
    toast: showToast,
    openAddService,
    menu: {
      modal: menuModal,
      title: menuTitle,
      subtitle: menuSubtitle,
      renameInput: menuRename,
      portInput: menuPort,
      pathInput: menuPath,
      schemeSelect: menuScheme,
      saveBtn: menuSaveBtn,
      cancelBtn: menuCancelBtn,
      removeBtn: menuRemoveBtn,
      msg: menuMsg,
      noticeInput: menuNotice,
      noticeLinkInput: menuNoticeLink,
      selfSignedInput: menuSelfSigned,
    },
    addForm: {
      nameInput: svcName,
      portInput: svcPort,
      pathInput: svcPath,
      schemeSelect: svcScheme,
      addBtn: svcAddBtn,
      msg: svcMsg,
      noticeInput: svcNotice,
      noticeLinkInput: svcNoticeLink,
      selfSignedInput: svcSelfSigned,
    },
  });

  initSettings({
    refreshHintMain,
    refreshHintServices,
    refreshFlagTop,
    refreshIntervalInput,
    refreshIntervalSave,
    refreshIntervalMsg,
    themeToggle,
    themeToggleIcon,
    animToggle,
    onTick: loadStatus,
    toast: showToast,
    onThemeToggle: () => {
      document.body.classList.add("theming");
      setTimeout(() => document.body.classList.remove("theming"), 300);
    },
  });

  // Toast controls
  toastPosSelect?.addEventListener("change", () => {
    const val = toastPosSelect.value;
    if (ALLOWED_TOAST_POS.includes(val)) {
      toastPosition = val;
      applyToastSettings();
      persistToastSettings();
    } else {
      toastPosSelect.value = toastPosition;
      showToast("Invalid toast position", "error");
    }
  });
  toastAnimSelect?.addEventListener("change", () => {
    let val = toastAnimSelect.value;
    if (val === "slide-up" || val === "slide-left" || val === "slide-right") val = "slide-in"; // migrate old label if cached
    if (ALLOWED_TOAST_ANIM.includes(val)) {
      toastAnimation = val;
      persistToastSettings();
    } else {
      toastAnimSelect.value = toastAnimation;
      showToast("Invalid toast animation", "error");
    }
  });
  const clampSpeed = (val) => Math.min(3000, Math.max(100, val));
  const clampDuration = (val) => Math.min(15000, Math.max(1000, val));

  toastSpeedInput?.addEventListener("input", () => {
    const raw = toastSpeedInput.value;
    if (raw === "") return; // allow typing
    const val = Number(raw);
    if (Number.isNaN(val) || val < 100 || val > 3000) return; // wait until valid
    toastSpeedMs = val;
    applyToastSettings();
    persistToastSettings();
  });
  toastSpeedInput?.addEventListener("blur", () => {
    const raw = toastSpeedInput.value;
    if (raw === "") {
      toastSpeedInput.value = toastSpeedMs;
      return;
    }
    const val = Number(raw);
    if (Number.isNaN(val) || val < 100 || val > 3000) {
      toastSpeedMs = clampSpeed(toastSpeedMs);
      toastSpeedInput.value = toastSpeedMs;
      showToast("Toast speed must be 100-3000 ms", "error");
      return;
    }
    toastSpeedMs = val;
    toastSpeedInput.value = toastSpeedMs;
    applyToastSettings();
    persistToastSettings();
  });

  toastDurationInput?.addEventListener("input", () => {
    const raw = toastDurationInput.value;
    if (raw === "") return; // allow typing
    const val = Number(raw);
    if (Number.isNaN(val) || val < 1000 || val > 15000) return; // wait until valid
    toastDurationMs = val;
    persistToastSettings();
  });
  toastDurationInput?.addEventListener("blur", () => {
    const raw = toastDurationInput.value;
    if (raw === "") {
      toastDurationInput.value = toastDurationMs;
      return;
    }
    const val = Number(raw);
    if (Number.isNaN(val) || val < 1000 || val > 15000) {
      toastDurationMs = clampDuration(toastDurationMs);
      toastDurationInput.value = toastDurationMs;
      showToast("Toast duration must be 1000-15000 ms", "error");
      return;
    }
    toastDurationMs = val;
    toastDurationInput.value = toastDurationMs;
    persistToastSettings();
  });
  fontSelect?.addEventListener("change", () => {
    const val = fontSelect.value;
    if (!ALLOWED_FONTS.includes(val)) {
      fontSelect.value = fontChoice;
      showToast("Invalid font choice", "error");
      return;
    }
    fontChoice = val;
    applyFontSetting();
    persistToastSettings();
  });
  toastTestBtn?.addEventListener("click", () => showToast("This is a test toast", "info"));

  initUpdateSettings({
    elements: {
      updatesStatus,
      updatesToggle,
      scopeSelect: updatesScope,
      updateTimeInput,
      upgradeTimeInput,
      cleanupToggle: updatesCleanup,
      bandwidthInput: updatesBandwidth,
      rebootToggle: updatesRebootToggle,
      rebootTimeInput: updatesRebootTime,
      rebootWithUsersToggle: updatesRebootUsers,
      saveBtn: updatesSaveBtn,
      msgEl: updatesMsg,
      updatesUnsavedNote,
      updatesSection,
    },
    onAfterSave: loadStatus,
    overlay: { show: showBusy, hide: hideBusy },
    toast: showToast,
  });

  // initial paint
  renderStats(heroStats, placeholderStatus);
  loadStatus();
}

main();