app.js

const root = document.documentElement;
const themeButton = document.querySelector("[data-theme-toggle]");
const navToggle = document.querySelector("[data-nav-toggle]");
const nav = document.querySelector(".nav-links");

const savedTheme = localStorage.getItem("010-editor-theme");
if (savedTheme === "dark") root.dataset.theme = "dark";

if (themeButton) {
  const updateThemeLabel = () => {
    const dark = root.dataset.theme === "dark";
    themeButton.setAttribute("aria-label", dark ? "Switch to light theme" : "Switch to dark theme");
    themeButton.textContent = dark ? "☀" : "☾";
  };
  updateThemeLabel();
  themeButton.addEventListener("click", () => {
    const dark = root.dataset.theme === "dark";
    if (dark) delete root.dataset.theme;
    else root.dataset.theme = "dark";
    localStorage.setItem("010-editor-theme", dark ? "light" : "dark");
    updateThemeLabel();
  });
}

if (navToggle && nav) {
  navToggle.addEventListener("click", () => {
    const open = nav.classList.toggle("open");
    navToggle.setAttribute("aria-expanded", String(open));
  });
  nav.querySelectorAll("a").forEach(link => {
    link.addEventListener("click", () => {
      nav.classList.remove("open");
      navToggle.setAttribute("aria-expanded", "false");
    });
  });
}

const hexInput = document.querySelector("#hex-input");
const hexOutput = document.querySelector("#hex-output");
const textOutput = document.querySelector("#text-output");
const endianButtons = document.querySelectorAll("[data-endian]");

function cleanHex(value) {
  return value.replace(/[^0-9a-f]/gi, "").match(/.{1,2}/g)?.join(" ") ?? "";
}

function renderBytes() {
  if (!hexInput || !hexOutput || !textOutput) return;
  const normalized = cleanHex(hexInput.value);
  const parts = normalized ? normalized.split(" ") : [];
  const bytes = parts.map(part => Number.parseInt(part, 16)).filter(Number.isFinite);
  hexOutput.textContent = bytes.map(byte => byte.toString(16).padStart(2, "0").toUpperCase()).join(" ");
  textOutput.textContent = bytes.map(byte => byte >= 32 && byte <= 126 ? String.fromCharCode(byte) : "·").join("");
  hexInput.value = normalized;
}

if (hexInput) {
  hexInput.addEventListener("input", renderBytes);
  renderBytes();
}

endianButtons.forEach(button => {
  button.addEventListener("click", () => {
    endianButtons.forEach(item => item.setAttribute("aria-pressed", "false"));
    button.setAttribute("aria-pressed", "true");
    const bytes = cleanHex(hexInput.value).split(" ").filter(Boolean);
    if (bytes.length < 4) return;
    const group = bytes.slice(0, 4);
    const reordered = button.dataset.endian === "little" ? [...group].reverse() : group;
    const remaining = bytes.slice(4);
    hexInput.value = [...reordered, ...remaining].join(" ");
    renderBytes();
  });
});

document.querySelectorAll("[data-copy]").forEach(button => {
  button.addEventListener("click", async () => {
    const target = document.querySelector(button.dataset.copy);
    if (!target) return;
    try {
      await navigator.clipboard.writeText(target.textContent);
      const original = button.textContent;
      button.textContent = "Copied";
      setTimeout(() => button.textContent = original, 1200);
    } catch {
      button.textContent = "Select to copy";
    }
  });
});