app.js

const $ = (selector, root = document) => root.querySelector(selector);
const $$ = (selector, root = document) => [...root.querySelectorAll(selector)];

const modalBackdrop = $("#modalBackdrop");
const modalBody = $("#modalBody");
const modalTitle = $("#modalTitle");
const modalKicker = $("#modalKicker");
const closeModalButton = $("#closeModal");
const toast = $("#toast");
const toastText = $("#toastText");
let lastFocusedElement = null;
let toastTimer = null;
let activeToolCleanup = null;

const trackerParams = new Set([
  "utm_source","utm_medium","utm_campaign","utm_term","utm_content","utm_id",
  "fbclid","gclid","dclid","msclkid","yclid","mc_cid","mc_eid",
  "_ga","_gl","igshid","vero_id","oly_anon_id","oly_enc_id","ref_src","ref_url",
  "srsltid","gad_source","gad_campaignid","wbraid","gbraid","twclid","ttclid","epik"
]);

function showToast(message) {
  toastText.textContent = message;
  toast.classList.add("show");
  clearTimeout(toastTimer);
  toastTimer = setTimeout(() => toast.classList.remove("show"), 1800);
}

async function copyText(text) {
  if (!text) return showToast("Нечего копировать");
  try {
    await navigator.clipboard.writeText(text);
    showToast("Скопировано");
  } catch {
    const area = document.createElement("textarea");
    area.value = text;
    area.style.position = "fixed";
    area.style.opacity = "0";
    document.body.appendChild(area);
    area.select();
    document.execCommand("copy");
    area.remove();
    showToast("Скопировано");
  }
}

function openModal(toolName, opener) {
  const tool = tools[toolName];
  if (!tool) return;
  lastFocusedElement = opener || document.activeElement;
  modalTitle.textContent = tool.title;
  modalKicker.textContent = tool.kicker || "PRIVACYKIT TOOL";
  modalBody.innerHTML = tool.render();
  modalBackdrop.classList.add("open");
  modalBackdrop.setAttribute("aria-hidden", "false");
  document.body.style.overflow = "hidden";
  const cleanup = tool.mount?.();
  activeToolCleanup = typeof cleanup === "function" ? cleanup : null;
  requestAnimationFrame(() => {
    const first = $("textarea, input, button", modalBody);
    first?.focus();
  });
}

function closeModal() {
  if (activeToolCleanup) {
    try { activeToolCleanup(); } catch {}
    activeToolCleanup = null;
  }
  modalBackdrop.classList.remove("open");
  modalBackdrop.setAttribute("aria-hidden", "true");
  document.body.style.overflow = "";
  modalBody.innerHTML = "";
  lastFocusedElement?.focus?.();
}

closeModalButton.addEventListener("click", closeModal);
modalBackdrop.addEventListener("click", (e) => {
  if (e.target === modalBackdrop) closeModal();
});
document.addEventListener("keydown", (e) => {
  if (e.key === "Escape" && modalBackdrop.classList.contains("open")) closeModal();
  if (e.key === "Tab" && modalBackdrop.classList.contains("open")) {
    const focusables = $$('button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])', modalBackdrop);
    if (!focusables.length) return;
    const first = focusables[0];
    const last = focusables[focusables.length - 1];
    if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
    else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
  }
});

$$("[data-tool]").forEach(card => {
  card.addEventListener("click", () => openModal(card.dataset.tool, card));
});

$("[data-scroll-tools]").addEventListener("click", () => {
  $("#tools").scrollIntoView({ behavior: "smooth", block: "start" });
});

const themeButton = $("#themeButton");
const savedTheme = localStorage.getItem("privacykit-theme");
if (savedTheme === "light") document.body.classList.add("light");
themeButton.addEventListener("click", () => {
  document.body.classList.toggle("light");
  localStorage.setItem("privacykit-theme", document.body.classList.contains("light") ? "light" : "dark");
});

function cleanTrackingUrl(raw) {
  const input = raw.trim();
  if (!input) throw new Error("Вставьте ссылку");

  let candidate = input;
  if (!/^[a-zA-Z][a-zA-Z\d+\-.]*:/.test(candidate)) candidate = "https://" + candidate;

  const url = new URL(candidate);
  if (!["http:", "https:"].includes(url.protocol)) throw new Error("Поддерживаются только HTTP/HTTPS ссылки");

  const removed = [];
  [...url.searchParams.keys()].forEach(key => {
    const normalized = key.toLowerCase();
    if (
      trackerParams.has(normalized) ||
      normalized.startsWith("utm_") ||
      normalized.startsWith("pk_")
    ) {
      removed.push(key);
      url.searchParams.delete(key);
    }
  });

  return { url: url.toString(), removed };
}

function secureRandomInt(max) {
  if (max <= 0) return 0;
  const maxUint = 0xFFFFFFFF;
  const limit = maxUint - (maxUint % max);
  const arr = new Uint32Array(1);
  do crypto.getRandomValues(arr); while (arr[0] >= limit);
  return arr[0] % max;
}

function secureShuffle(chars) {
  const arr = [...chars];
  for (let i = arr.length - 1; i > 0; i--) {
    const j = secureRandomInt(i + 1);
    [arr[i], arr[j]] = [arr[j], arr[i]];
  }
  return arr.join("");
}

function generatePassword(length, groups) {
  const selected = groups.filter(g => g.enabled && g.chars);
  if (!selected.length) throw new Error("Выберите хотя бы один набор символов");
  const pool = selected.map(g => g.chars).join("");
  let out = selected.map(g => g.chars[secureRandomInt(g.chars.length)]).join("");
  while (out.length < length) out += pool[secureRandomInt(pool.length)];
  return secureShuffle(out).slice(0, length);
}

function utf8ToBase64(str) {
  const bytes = new TextEncoder().encode(str);
  let binary = "";
  const chunk = 0x8000;
  for (let i = 0; i < bytes.length; i += chunk) {
    binary += String.fromCharCode(...bytes.subarray(i, i + chunk));
  }
  return btoa(binary);
}

function base64ToUtf8(str) {
  const clean = str.replace(/\s+/g, "");
  const binary = atob(clean);
  const bytes = Uint8Array.from(binary, ch => ch.charCodeAt(0));
  return new TextDecoder("utf-8", { fatal: true }).decode(bytes);
}


function prettyUrl(urlString) {
  try {
    const url = new URL(urlString);
    const onlyRoot = url.pathname === "/" && !url.search && !url.hash;
    return onlyRoot ? `${url.protocol}//${url.host}` : url.toString();
  } catch {
    return urlString;
  }
}

function renderQrCode(target, text, size = 220) {
  if (!target) throw new Error("QR-контейнер не найден");
  if (!text?.trim()) throw new Error("Введите ссылку или текст");
  if (typeof QRCode === "undefined") throw new Error("Модуль QR не загрузился");

  target.innerHTML = "";
  new QRCode(target, {
    text: text.trim(),
    width: size,
    height: size,
    colorDark: "#0b0f14",
    colorLight: "#ffffff",
    correctLevel: QRCode.CorrectLevel.M
  });
}

function downloadQrCode(target, filename = "privacykit-qr.png") {
  const canvas = $("canvas", target);
  const image = $("img", target);

  if (canvas) {
    canvas.toBlob(blob => {
      if (!blob) return showToast("Не удалось сохранить QR");
      const href = URL.createObjectURL(blob);
      const link = document.createElement("a");
      link.href = href;
      link.download = filename;
      document.body.appendChild(link);
      link.click();
      link.remove();
      setTimeout(() => URL.revokeObjectURL(href), 1200);
      showToast("QR-код сохранён");
    }, "image/png");
    return;
  }

  if (image?.src) {
    const link = document.createElement("a");
    link.href = image.src;
    link.download = filename;
    document.body.appendChild(link);
    link.click();
    link.remove();
    showToast("QR-код сохранён");
    return;
  }

  showToast("Сначала создайте QR-код");
}

function formatBytes(bytes) {
  if (!Number.isFinite(bytes) || bytes < 0) return "—";
  if (bytes === 0) return "0 B";
  const units = ["B", "KB", "MB", "GB"];
  const index = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
  const value = bytes / (1024 ** index);
  return `${value >= 100 || index === 0 ? value.toFixed(0) : value.toFixed(2)} ${units[index]}`;
}

function bufferToHex(buffer) {
  return [...new Uint8Array(buffer)].map(byte => byte.toString(16).padStart(2, "0")).join("");
}

async function digestFile(file, algorithm) {
  if (!crypto?.subtle) throw new Error("Web Crypto API недоступен в этом браузере");
  const buffer = await file.arrayBuffer();
  const digest = await crypto.subtle.digest(algorithm, buffer);
  return bufferToHex(digest);
}


function isProbablyUrl(value) {
  const text = String(value || "").trim();
  if (!text) return false;
  try {
    const url = new URL(/^[a-zA-Z][a-zA-Z\d+\-.]*:/.test(text) ? text : `https://${text}`);
    return ["http:", "https:"].includes(url.protocol) && Boolean(url.hostname);
  } catch {
    return false;
  }
}

function normalizedOpenUrl(value) {
  const text = String(value || "").trim();
  if (!isProbablyUrl(text)) return "";
  return /^[a-zA-Z][a-zA-Z\d+\-.]*:/.test(text) ? text : `https://${text}`;
}

function getExtension(name) {
  const clean = String(name || "");
  const index = clean.lastIndexOf(".");
  return index > 0 && index < clean.length - 1 ? clean.slice(index + 1).toLowerCase() : "—";
}

function detectFileSignature(bytes) {
  const b = [...bytes.slice(0, 16)];
  const starts = (...values) => values.every((value, i) => b[i] === value);

  if (starts(0x89,0x50,0x4E,0x47,0x0D,0x0A,0x1A,0x0A)) return "PNG image";
  if (starts(0xFF,0xD8,0xFF)) return "JPEG image";
  if (starts(0x47,0x49,0x46,0x38)) return "GIF image";
  if (starts(0x25,0x50,0x44,0x46)) return "PDF document";
  if (starts(0x50,0x4B,0x03,0x04) || starts(0x50,0x4B,0x05,0x06) || starts(0x50,0x4B,0x07,0x08)) return "ZIP container";
  if (starts(0x4D,0x5A)) return "Windows executable";
  if (starts(0x7F,0x45,0x4C,0x46)) return "ELF executable";
  if (b[0] === 0x52 && b[1] === 0x49 && b[2] === 0x46 && b[3] === 0x46 &&
      b[8] === 0x57 && b[9] === 0x45 && b[10] === 0x42 && b[11] === 0x50) return "WebP image";
  if (starts(0x1F,0x8B)) return "GZIP archive";
  if (starts(0x52,0x61,0x72,0x21,0x1A,0x07)) return "RAR archive";
  if (starts(0x37,0x7A,0xBC,0xAF,0x27,0x1C)) return "7-Zip archive";
  return "Не распознана";
}

function bytesToHexPreview(bytes, limit = 64) {
  return [...bytes.slice(0, limit)]
    .map(byte => byte.toString(16).padStart(2, "0").toUpperCase())
    .join(" ");
}

function isTextLikeFile(file) {
  const type = (file.type || "").toLowerCase();
  const ext = getExtension(file.name);
  const textExts = new Set(["txt","md","json","xml","csv","log","ini","yaml","yml","js","css","html","htm","svg","py","php","java","c","cpp","h","ts","tsx","jsx","sh","ps1"]);
  return type.startsWith("text/") ||
    ["application/json","application/xml","application/javascript","image/svg+xml"].includes(type) ||
    textExts.has(ext);
}

async function inspectImageDimensions(file) {
  if (!(file.type || "").startsWith("image/")) return null;
  try {
    const bitmap = await createImageBitmap(file);
    const result = { width: bitmap.width, height: bitmap.height };
    bitmap.close?.();
    return result;
  } catch {
    return null;
  }
}

const tools = {
  linkCleaner: {
    title: "Link Cleaner",
    kicker: "PRIVACY • LINKS",
    render: () => `
      <p class="tool-description">Удаляет распространённые рекламные и аналитические параметры. Если ссылка уже чистая, PrivacyKit прямо об этом скажет — это не ошибка.</p>
      <label class="field-label" for="linkInput"><span>Исходная ссылка</span><span>HTTP / HTTPS</span></label>
      <textarea id="linkInput" spellcheck="false" placeholder="https://example.com/product?id=42&utm_source=telegram&fbclid=..."></textarea>
      <div class="tool-actions">
        <button class="action-btn primary" id="cleanLinkBtn">Проверить и очистить</button>
        <button class="action-btn" id="pasteLinkBtn">Вставить</button>
        <button class="action-btn danger" id="clearLinkBtn">Очистить поле</button>
      </div>

      <div class="result-summary" id="linkSummary" hidden>
        <div class="result-summary-left">
          <span class="result-summary-icon" id="linkSummaryIcon">✓</span>
          <span><strong id="linkSummaryTitle">Готово</strong><small id="linkSummaryText"></small></span>
        </div>
      </div>

      <div class="output-wrap">
        <label class="field-label"><span>Готовая ссылка</span><span id="removedCount">—</span></label>
        <div class="output-box mono" id="linkOutput">Результат появится здесь.</div>
        <div class="stat-row" id="removedParams"></div>
        <div class="tool-actions">
          <button class="action-btn" id="copyLinkBtn" disabled>Копировать</button>
          <button class="action-btn" id="openLinkBtn" disabled>Открыть</button>
          <button class="action-btn" id="makeLinkQrBtn" disabled>Создать QR-код</button>
        </div>
      </div>

      <div class="qr-panel" id="linkQrPanel" hidden>
        <div class="qr-panel-head">
          <span><strong>QR-код очищенной ссылки</strong><small> • создаётся локально</small></span>
          <button class="action-btn" id="downloadLinkQrBtn">Скачать PNG</button>
        </div>
        <div class="qr-content">
          <div class="qr-box" id="linkQrBox"></div>
          <div class="qr-details">
            <p id="linkQrText"></p>
            <div class="notice ok" style="margin-top:0">В QR-код помещается уже очищенная ссылка. Её содержимое не отправляется в API или на сервер генерации.</div>
          </div>
        </div>
      </div>

      <div class="notice ok">PrivacyKit не отправляет введённую ссылку на сервер — проверка, очистка и QR-генерация выполняются в браузере.</div>
    `,
    mount: () => {
      const input = $("#linkInput");
      const output = $("#linkOutput");
      const removedCount = $("#removedCount");
      const removedParams = $("#removedParams");
      const copyBtn = $("#copyLinkBtn");
      const openBtn = $("#openLinkBtn");
      const makeQrBtn = $("#makeLinkQrBtn");
      const qrPanel = $("#linkQrPanel");
      const qrBox = $("#linkQrBox");
      const qrText = $("#linkQrText");
      const summary = $("#linkSummary");
      const summaryIcon = $("#linkSummaryIcon");
      const summaryTitle = $("#linkSummaryTitle");
      const summaryText = $("#linkSummaryText");
      let cleanUrl = "";

      const setSummary = (type, title, text, icon) => {
        summary.hidden = false;
        summary.className = `result-summary ${type}`;
        summaryIcon.textContent = icon;
        summaryTitle.textContent = title;
        summaryText.textContent = text;
      };

      const resetQr = () => {
        qrPanel.hidden = true;
        qrBox.innerHTML = "";
        qrText.textContent = "";
      };

      $("#cleanLinkBtn").onclick = () => {
        try {
          const result = cleanTrackingUrl(input.value);
          cleanUrl = result.url;
          const shownUrl = prettyUrl(result.url);
          output.textContent = shownUrl;
          removedCount.textContent = result.removed.length ? `${result.removed.length} удалено` : "ссылка чистая";
          removedParams.innerHTML = result.removed.length
            ? result.removed.map(p => `<span class="stat-chip">Удалено <strong>${escapeHtml(p)}</strong></span>`).join("")
            : `<span class="stat-chip">Статус <strong>трекеров нет</strong></span>`;

          if (result.removed.length) {
            setSummary("changed", "Ссылка очищена", `Удалено параметров отслеживания: ${result.removed.length}.`, "✓");
            showToast("Ссылка очищена");
          } else {
            setSummary("success", "Ссылка уже чистая", "В ней нет известных PrivacyKit параметров отслеживания.", "✓");
            showToast("Ссылка уже чистая");
          }

          copyBtn.disabled = false;
          openBtn.disabled = false;
          makeQrBtn.disabled = false;
          resetQr();
        } catch (err) {
          cleanUrl = "";
          output.textContent = err.message || "Некорректная ссылка";
          removedCount.textContent = "ошибка";
          removedParams.innerHTML = "";
          copyBtn.disabled = true;
          openBtn.disabled = true;
          makeQrBtn.disabled = true;
          resetQr();
          setSummary("error", "Не удалось обработать ссылку", err.message || "Проверьте адрес и попробуйте ещё раз.", "!");
        }
      };

      $("#pasteLinkBtn").onclick = async () => {
        try {
          input.value = await navigator.clipboard.readText();
          input.focus();
        } catch {
          showToast("Браузер не разрешил вставку");
        }
      };

      $("#clearLinkBtn").onclick = () => {
        input.value = "";
        output.textContent = "Результат появится здесь.";
        removedCount.textContent = "—";
        removedParams.innerHTML = "";
        copyBtn.disabled = true;
        openBtn.disabled = true;
        makeQrBtn.disabled = true;
        cleanUrl = "";
        summary.hidden = true;
        resetQr();
        input.focus();
      };

      copyBtn.onclick = () => copyText(prettyUrl(cleanUrl));
      openBtn.onclick = () => window.open(cleanUrl, "_blank", "noopener,noreferrer");
      makeQrBtn.onclick = () => {
        if (!cleanUrl) return;
        try {
          renderQrCode(qrBox, cleanUrl, 220);
          qrText.textContent = prettyUrl(cleanUrl);
          qrPanel.hidden = false;
          qrPanel.scrollIntoView({ behavior: "smooth", block: "nearest" });
          showToast("QR-код создан");
        } catch (err) {
          showToast(err.message || "Не удалось создать QR");
        }
      };
      $("#downloadLinkQrBtn").onclick = () => downloadQrCode(qrBox, "privacykit-link-qr.png");
    }
  },
  passwordGenerator: {
    title: "Password Generator",
    kicker: "SECURITY • LOCAL",
    render: () => `
      <p class="tool-description">Генерирует пароль через <code>crypto.getRandomValues()</code>. Генерация выполняется локально и не требует сети.</p>
      <div class="password-result">
        <div class="output-box mono" id="passwordOutput"></div>
        <button class="action-btn" id="copyPasswordBtn">Копировать</button>
      </div>
      <div class="strength"><span id="strengthBar"></span></div>

      <div class="option-grid">
        <span class="field-label" style="margin:0"><span>Длина</span></span>
        <div class="range-wrap">
          <input type="range" id="passwordLengthRange" min="8" max="64" value="20">
          <input type="number" id="passwordLengthNumber" min="8" max="64" value="20">
        </div>

        <span class="field-label" style="margin:0"><span>Символы</span></span>
        <div class="checks">
          <label class="check-pill"><input type="checkbox" id="pwLower" checked> a-z</label>
          <label class="check-pill"><input type="checkbox" id="pwUpper" checked> A-Z</label>
          <label class="check-pill"><input type="checkbox" id="pwNumbers" checked> 0-9</label>
          <label class="check-pill"><input type="checkbox" id="pwSymbols" checked> !@#</label>
        </div>
      </div>

      <div class="tool-actions">
        <button class="action-btn primary" id="generatePasswordBtn">Сгенерировать заново</button>
      </div>
      <div class="notice ok">Пароль не сохраняется в localStorage и исчезнет после закрытия инструмента.</div>
    `,
    mount: () => {
      const out = $("#passwordOutput");
      const range = $("#passwordLengthRange");
      const number = $("#passwordLengthNumber");
      const bar = $("#strengthBar");

      const syncLength = (value) => {
        const v = Math.max(8, Math.min(64, Number(value) || 20));
        range.value = v;
        number.value = v;
        generate();
      };

      const generate = () => {
        const groups = [
          { enabled: $("#pwLower").checked, chars: "abcdefghijklmnopqrstuvwxyz" },
          { enabled: $("#pwUpper").checked, chars: "ABCDEFGHIJKLMNOPQRSTUVWXYZ" },
          { enabled: $("#pwNumbers").checked, chars: "0123456789" },
          { enabled: $("#pwSymbols").checked, chars: "!@#$%^&*()-_=+[]{};:,.?/|~" }
        ];
        try {
          const pw = generatePassword(Number(number.value), groups);
          out.textContent = pw;
          const diversity = groups.filter(g => g.enabled).length;
          const score = Math.min(100, Math.round((pw.length / 32) * 70 + diversity * 7.5));
          bar.style.width = `${score}%`;
        } catch (err) {
          out.textContent = err.message;
          bar.style.width = "0%";
        }
      };

      range.oninput = () => { number.value = range.value; generate(); };
      number.onchange = () => syncLength(number.value);
      $$("#pwLower, #pwUpper, #pwNumbers, #pwSymbols").forEach(el => el.onchange = generate);
      $("#generatePasswordBtn").onclick = generate;
      $("#copyPasswordBtn").onclick = () => copyText(out.textContent);
      generate();
    }
  },

  jsonFormatter: {
    title: "JSON Formatter",
    kicker: "DEVELOPER • JSON",
    render: () => `
      <p class="tool-description">Проверяет JSON и форматирует его с удобными отступами. Можно также получить минифицированную версию.</p>
      <label class="field-label" for="jsonInput"><span>JSON</span><span id="jsonStatus">Ожидание</span></label>
      <textarea class="mono" id="jsonInput" spellcheck="false" placeholder='{"privacy":true,"tools":["links","text","json"]}'></textarea>
      <div class="tool-actions">
        <button class="action-btn primary" id="formatJsonBtn">Форматировать</button>
        <button class="action-btn" id="minifyJsonBtn">Минифицировать</button>
        <button class="action-btn" id="copyJsonBtn">Копировать результат</button>
      </div>
      <div class="output-wrap">
        <label class="field-label"><span>Результат</span><span id="jsonSize"></span></label>
        <div class="output-box mono" id="jsonOutput">Результат появится здесь.</div>
      </div>
    `,
    mount: () => {
      const input = $("#jsonInput");
      const output = $("#jsonOutput");
      const status = $("#jsonStatus");
      const size = $("#jsonSize");

      const process = (pretty) => {
        try {
          const parsed = JSON.parse(input.value);
          const result = JSON.stringify(parsed, null, pretty ? 2 : 0);
          output.textContent = result;
          status.textContent = "Валидный JSON";
          status.style.color = "var(--accent)";
          size.textContent = `${new Blob([result]).size} bytes`;
          showToast(pretty ? "JSON отформатирован" : "JSON минифицирован");
        } catch (err) {
          output.textContent = err.message;
          status.textContent = "Ошибка";
          status.style.color = "var(--danger)";
          size.textContent = "";
        }
      };
      $("#formatJsonBtn").onclick = () => process(true);
      $("#minifyJsonBtn").onclick = () => process(false);
      $("#copyJsonBtn").onclick = () => copyText(output.textContent === "Результат появится здесь." ? "" : output.textContent);
    }
  },

  textCleaner: {
    title: "Text Cleaner",
    kicker: "TEXT • CLEANUP",
    render: () => `
      <p class="tool-description">Убирает zero-width символы, неразрывные пробелы, пробелы в конце строк и чрезмерные пустые строки.</p>
      <label class="field-label" for="textCleanerInput"><span>Исходный текст</span><span id="textInputStats">0 символов</span></label>
      <textarea id="textCleanerInput" placeholder="Вставьте текст..."></textarea>
      <div class="tool-actions">
        <button class="action-btn primary" id="cleanTextBtn">Очистить текст</button>
        <button class="action-btn" id="copyCleanTextBtn">Копировать</button>
      </div>
      <div class="output-wrap">
        <label class="field-label"><span>Очищенный текст</span><span id="textOutputStats"></span></label>
        <div class="output-box" id="cleanTextOutput">Результат появится здесь.</div>
      </div>
      <div class="stat-row" id="textStats"></div>
    `,
    mount: () => {
      const input = $("#textCleanerInput");
      const output = $("#cleanTextOutput");
      const inputStats = $("#textInputStats");
      const outputStats = $("#textOutputStats");
      const stats = $("#textStats");

      input.oninput = () => inputStats.textContent = `${input.value.length} символов`;

      $("#cleanTextBtn").onclick = () => {
        const original = input.value;
        let clean = original
          .replace(/[\u200B-\u200D\u2060\uFEFF]/g, "")
          .replace(/\u00A0/g, " ")
          .replace(/[ \t]+$/gm, "")
          .replace(/[ \t]{2,}/g, " ")
          .replace(/\n{3,}/g, "\n\n");

        output.textContent = clean || "Результат пуст.";
        outputStats.textContent = `${clean.length} символов`;
        const removed = Math.max(0, original.length - clean.length);
        stats.innerHTML = `
          <span class="stat-chip">Было <strong>${original.length}</strong></span>
          <span class="stat-chip">Стало <strong>${clean.length}</strong></span>
          <span class="stat-chip">Удалено <strong>${removed}</strong></span>`;
        showToast("Текст очищен");
      };

      $("#copyCleanTextBtn").onclick = () => {
        const text = output.textContent;
        copyText(text === "Результат появится здесь." || text === "Результат пуст." ? "" : text);
      };
    }
  },

  base64Tool: {
    title: "Base64",
    kicker: "DEVELOPER • ENCODE",
    render: () => `
      <p class="tool-description">Кодирует UTF-8 текст в Base64 и декодирует обратно. Поддерживается кириллица и эмодзи.</p>
      <label class="field-label" for="base64Input"><span>Ввод</span><span>UTF-8</span></label>
      <textarea class="mono" id="base64Input" spellcheck="false" placeholder="PrivacyKit 🔒"></textarea>
      <div class="tool-actions">
        <button class="action-btn primary" id="encodeBase64Btn">Encode</button>
        <button class="action-btn" id="decodeBase64Btn">Decode</button>
        <button class="action-btn" id="copyBase64Btn">Копировать результат</button>
      </div>
      <div class="output-wrap">
        <label class="field-label"><span>Результат</span><span id="base64Status"></span></label>
        <div class="output-box mono" id="base64Output">Результат появится здесь.</div>
      </div>
    `,
    mount: () => {
      const input = $("#base64Input");
      const output = $("#base64Output");
      const status = $("#base64Status");

      $("#encodeBase64Btn").onclick = () => {
        try {
          output.textContent = utf8ToBase64(input.value);
          status.textContent = "Encoded";
          status.style.color = "var(--accent)";
        } catch {
          output.textContent = "Не удалось закодировать текст.";
          status.textContent = "Ошибка";
          status.style.color = "var(--danger)";
        }
      };
      $("#decodeBase64Btn").onclick = () => {
        try {
          output.textContent = base64ToUtf8(input.value);
          status.textContent = "Decoded";
          status.style.color = "var(--accent)";
        } catch {
          output.textContent = "Некорректная Base64-строка или повреждённый UTF-8.";
          status.textContent = "Ошибка";
          status.style.color = "var(--danger)";
        }
      };
      $("#copyBase64Btn").onclick = () => copyText(output.textContent === "Результат появится здесь." ? "" : output.textContent);
    }
  },

  qrGenerator: {
    title: "QR Generator",
    kicker: "QR • LOCAL",
    render: () => `
      <p class="tool-description">Создаёт QR-код из ссылки или обычного текста. Генерация выполняется на устройстве, а результат можно скачать как PNG.</p>
      <div class="qr-standalone">
        <div>
          <label class="field-label" for="qrInput"><span>Ссылка или текст</span><span>локально</span></label>
          <textarea id="qrInput" spellcheck="false" placeholder="https://cayplay.ru"></textarea>
          <div class="qr-input-row" style="margin-top:10px">
            <button class="action-btn primary" id="generateQrBtn">Создать QR-код</button>
            <select class="qr-size-select" id="qrSize" aria-label="Размер QR-кода">
              <option value="192">192 px</option>
              <option value="256" selected>256 px</option>
              <option value="320">320 px</option>
            </select>
          </div>
          <div class="tool-actions">
            <button class="action-btn" id="pasteQrBtn">Вставить</button>
            <button class="action-btn" id="downloadQrBtn" disabled>Скачать PNG</button>
            <button class="action-btn danger" id="clearQrBtn">Очистить</button>
          </div>
          <div class="notice ok">QR-код создаётся библиотекой, загруженной вместе с PrivacyKit. Введённые данные не отправляются в сервис генерации QR.</div>
        </div>
        <div class="qr-preview-card" id="qrPreviewCard">
          <div class="qr-preview-placeholder" id="qrPlaceholder"><strong>QR появится здесь</strong>Введите ссылку или текст и нажмите «Создать QR-код».</div>
          <div class="qr-box" id="qrStandaloneBox" hidden></div>
        </div>
      </div>
    `,
    mount: () => {
      const input = $("#qrInput");
      const size = $("#qrSize");
      const box = $("#qrStandaloneBox");
      const placeholder = $("#qrPlaceholder");
      const downloadBtn = $("#downloadQrBtn");

      const generate = () => {
        const value = input.value.trim();
        if (!value) return showToast("Введите ссылку или текст");
        try {
          renderQrCode(box, value, Number(size.value));
          box.hidden = false;
          placeholder.hidden = true;
          downloadBtn.disabled = false;
          showToast("QR-код создан");
        } catch (err) {
          showToast(err.message || "Не удалось создать QR");
        }
      };

      $("#generateQrBtn").onclick = generate;
      input.addEventListener("keydown", e => {
        if ((e.ctrlKey || e.metaKey) && e.key === "Enter") generate();
      });
      size.onchange = () => { if (!box.hidden && input.value.trim()) generate(); };
      $("#pasteQrBtn").onclick = async () => {
        try { input.value = await navigator.clipboard.readText(); input.focus(); }
        catch { showToast("Браузер не разрешил вставку"); }
      };
      downloadBtn.onclick = () => downloadQrCode(box, "privacykit-qr.png");
      $("#clearQrBtn").onclick = () => {
        input.value = "";
        box.innerHTML = "";
        box.hidden = true;
        placeholder.hidden = false;
        downloadBtn.disabled = true;
        input.focus();
      };
    }
  },


  qrReader: {
    title: "QR Reader",
    kicker: "QR • SCAN",
    render: () => `
      <p class="tool-description">Считывает QR-код с изображения или камеры. Снимок остаётся на устройстве; PrivacyKit не отправляет его на сервер.</p>
      <div class="reader-layout">
        <div>
          <label class="dropzone compact-dropzone" id="qrReaderDropzone">
            <input type="file" id="qrReaderInput" accept="image/*">
            <span>
              <strong>Добавьте изображение с QR-кодом</strong>
              <small>PNG, JPG, WebP и другие форматы, которые открывает браузер</small>
            </span>
          </label>
          <div class="reader-preview" id="qrReaderPreview" style="margin-top:10px">
            <div class="reader-placeholder" id="qrReaderPlaceholder">
              <strong>Ожидание QR-кода</strong>
              Выберите изображение или включите камеру.
            </div>
            <img id="qrReaderImage" alt="Изображение для распознавания QR" hidden>
            <video id="qrReaderVideo" autoplay muted playsinline hidden></video>
            <div class="reader-scan-frame" id="qrReaderFrame" hidden></div>
          </div>
        </div>

        <div class="reader-side">
          <button class="action-btn primary" id="qrCameraBtn">Включить камеру</button>
          <button class="action-btn" id="qrStopCameraBtn" disabled>Остановить камеру</button>

          <div class="reader-result-card" id="qrReaderResult" hidden>
            <span>Распознано</span>
            <div class="reader-result-value" id="qrReaderValue"></div>
            <div class="tool-actions">
              <button class="action-btn" id="qrReaderCopyBtn">Копировать</button>
              <button class="action-btn" id="qrReaderOpenBtn" hidden>Открыть ссылку</button>
            </div>
          </div>

          <div class="notice ok reader-compat" id="qrReaderCompat">
            Используется встроенный QR/Barcode detector браузера. Камера на GitHub Pages работает по HTTPS.
          </div>
        </div>
      </div>
    `,
    mount: () => {
      const input = $("#qrReaderInput");
      const dropzone = $("#qrReaderDropzone");
      const placeholder = $("#qrReaderPlaceholder");
      const image = $("#qrReaderImage");
      const video = $("#qrReaderVideo");
      const frame = $("#qrReaderFrame");
      const result = $("#qrReaderResult");
      const value = $("#qrReaderValue");
      const copyBtn = $("#qrReaderCopyBtn");
      const openBtn = $("#qrReaderOpenBtn");
      const cameraBtn = $("#qrCameraBtn");
      const stopBtn = $("#qrStopCameraBtn");
      const compat = $("#qrReaderCompat");
      let stream = null;
      let scanTimer = null;
      let imageUrl = null;
      let detector = null;
      let lastValue = "";

      const hasDetector = "BarcodeDetector" in window;

      if (!hasDetector) {
        cameraBtn.disabled = true;
        compat.className = "notice warn reader-compat";
        compat.innerHTML = "<strong>QR Reader недоступен в этом браузере.</strong><br>Остальные инструменты PrivacyKit продолжат работать. Откройте проект в современном Chromium-браузере для чтения QR.";
      } else {
        try {
          detector = new BarcodeDetector({ formats: ["qr_code"] });
        } catch {
          detector = new BarcodeDetector();
        }
      }

      const showResult = raw => {
        lastValue = raw || "";
        result.hidden = !lastValue;
        value.textContent = lastValue || "";
        const url = normalizedOpenUrl(lastValue);
        openBtn.hidden = !url;
        openBtn.dataset.url = url;
        if (lastValue) {
          stopCamera();
          showToast("QR-код распознан");
        }
      };

      const detectSource = async source => {
        if (!detector) return;
        try {
          const found = await detector.detect(source);
          if (found?.length && found[0].rawValue) showResult(found[0].rawValue);
          else showToast("QR-код на изображении не найден");
        } catch {
          showToast("Не удалось прочитать QR-код");
        }
      };

      const loadImage = file => {
        if (!file || !detector) return;
        stopCamera();
        if (imageUrl) URL.revokeObjectURL(imageUrl);
        imageUrl = URL.createObjectURL(file);
        image.onload = () => detectSource(image);
        image.src = imageUrl;
        image.hidden = false;
        video.hidden = true;
        placeholder.hidden = true;
        frame.hidden = true;
        result.hidden = true;
      };

      const scanVideo = async () => {
        if (!stream || !detector || video.readyState < 2) return;
        try {
          const found = await detector.detect(video);
          if (found?.length && found[0].rawValue) {
            showResult(found[0].rawValue);
          }
        } catch {}
      };

      function stopCamera() {
        if (scanTimer) {
          clearInterval(scanTimer);
          scanTimer = null;
        }
        if (stream) {
          stream.getTracks().forEach(track => track.stop());
          stream = null;
        }
        video.srcObject = null;
        video.hidden = true;
        frame.hidden = true;
        stopBtn.disabled = true;
        cameraBtn.disabled = !hasDetector;
      }

      async function startCamera() {
        if (!hasDetector || !navigator.mediaDevices?.getUserMedia) {
          showToast("Камера недоступна");
          return;
        }
        stopCamera();
        try {
          stream = await navigator.mediaDevices.getUserMedia({
            video: { facingMode: { ideal: "environment" } },
            audio: false
          });
          video.srcObject = stream;
          image.hidden = true;
          placeholder.hidden = true;
          video.hidden = false;
          frame.hidden = false;
          stopBtn.disabled = false;
          cameraBtn.disabled = true;
          await video.play();
          scanTimer = setInterval(scanVideo, 450);
          showToast("Камера включена");
        } catch {
          stopCamera();
          showToast("Нет доступа к камере");
        }
      }

      input.onchange = () => loadImage(input.files[0]);
      ["dragenter","dragover"].forEach(type => dropzone.addEventListener(type, event => {
        event.preventDefault();
        dropzone.classList.add("dragover");
      }));
      ["dragleave","drop"].forEach(type => dropzone.addEventListener(type, event => {
        event.preventDefault();
        dropzone.classList.remove("dragover");
      }));
      dropzone.addEventListener("drop", event => loadImage(event.dataTransfer.files[0]));
      cameraBtn.onclick = startCamera;
      stopBtn.onclick = () => {
        stopCamera();
        placeholder.hidden = false;
      };
      copyBtn.onclick = () => copyText(lastValue);
      openBtn.onclick = () => {
        const url = openBtn.dataset.url;
        if (url) window.open(url, "_blank", "noopener,noreferrer");
      };

      return () => {
        stopCamera();
        if (imageUrl) URL.revokeObjectURL(imageUrl);
      };
    }
  },

  fileHash: {
    title: "File Hash",
    kicker: "FILES • VERIFY",
    render: () => `
      <p class="tool-description">Проверяет целостность файла по контрольной сумме. Файл читается только браузером и никуда не загружается.</p>
      <label class="dropzone compact-dropzone" id="hashDropzone">
        <input type="file" id="hashFileInput">
        <span>
          <strong>Перетащите любой файл сюда</strong>
          <small>или нажмите, чтобы выбрать файл<br>Рекомендуемый размер — до 500 МБ</small>
        </span>
      </label>

      <div id="hashWorkArea" hidden>
        <div class="file-summary-card">
          <div class="file-summary-icon">#</div>
          <div class="file-summary-copy">
            <strong id="hashFileName"></strong>
            <small id="hashFileMeta"></small>
          </div>
          <span class="file-private-badge">LOCAL</span>
        </div>

        <div class="hash-controls">
          <div>
            <label class="field-label" for="hashAlgorithm"><span>Алгоритм</span><span>Web Crypto</span></label>
            <select class="qr-size-select wide-select" id="hashAlgorithm">
              <option value="SHA-256" selected>SHA-256 — рекомендуется</option>
              <option value="SHA-1">SHA-1 — совместимость</option>
              <option value="SHA-384">SHA-384</option>
              <option value="SHA-512">SHA-512</option>
            </select>
          </div>
          <button class="action-btn primary hash-run-btn" id="calculateHashBtn">Рассчитать</button>
        </div>

        <div class="output-wrap">
          <label class="field-label"><span>Контрольная сумма</span><span id="hashStatus">ожидание</span></label>
          <div class="output-box mono hash-output" id="hashOutput">Нажмите «Рассчитать».</div>
          <div class="tool-actions">
            <button class="action-btn" id="copyHashBtn" disabled>Копировать</button>
          </div>
        </div>

        <div class="hash-compare">
          <label class="field-label" for="expectedHash"><span>Сравнить с опубликованной суммой</span><span>необязательно</span></label>
          <input type="text" class="mono" id="expectedHash" placeholder="Вставьте SHA-256 / SHA-1..." spellcheck="false">
          <div class="result-summary" id="hashCompareResult" hidden>
            <div class="result-summary-left">
              <span class="result-summary-icon" id="hashCompareIcon">✓</span>
              <span><strong id="hashCompareTitle"></strong><small id="hashCompareText"></small></span>
            </div>
          </div>
        </div>
      </div>
      <div class="notice ok">Удобно для проверки ISO, архивов, установщиков и других скачанных файлов. PrivacyKit не сохраняет сам файл.</div>
    `,
    mount: () => {
      const input = $("#hashFileInput");
      const dropzone = $("#hashDropzone");
      const workArea = $("#hashWorkArea");
      const fileName = $("#hashFileName");
      const fileMeta = $("#hashFileMeta");
      const algorithm = $("#hashAlgorithm");
      const output = $("#hashOutput");
      const status = $("#hashStatus");
      const calculateBtn = $("#calculateHashBtn");
      const copyBtn = $("#copyHashBtn");
      const expected = $("#expectedHash");
      const compareResult = $("#hashCompareResult");
      const compareIcon = $("#hashCompareIcon");
      const compareTitle = $("#hashCompareTitle");
      const compareText = $("#hashCompareText");
      let currentFile = null;
      let currentHash = "";

      const normalizeHash = value => value.trim().toLowerCase().replace(/[^a-f0-9]/g, "");

      const compare = () => {
        const wanted = normalizeHash(expected.value);
        if (!wanted || !currentHash) {
          compareResult.hidden = true;
          return;
        }
        const actual = normalizeHash(currentHash);
        const same = wanted === actual;
        compareResult.hidden = false;
        compareResult.className = `result-summary ${same ? "success" : "error"}`;
        compareIcon.textContent = same ? "✓" : "!";
        compareTitle.textContent = same ? "Хэши совпадают" : "Хэши не совпадают";
        compareText.textContent = same
          ? "Файл соответствует указанной контрольной сумме."
          : "Не запускайте файл, если ожидали точное совпадение.";
      };

      const loadFile = file => {
        if (!file) return;
        if (file.size > 500 * 1024 * 1024) {
          showToast("Файл очень большой — расчёт может занять время");
        }
        currentFile = file;
        currentHash = "";
        workArea.hidden = false;
        fileName.textContent = file.name;
        fileMeta.textContent = `${formatBytes(file.size)} • ${file.type || "неизвестный тип"}`;
        output.textContent = "Нажмите «Рассчитать».";
        status.textContent = "ожидание";
        status.style.color = "";
        copyBtn.disabled = true;
        compareResult.hidden = true;
      };

      input.onchange = () => loadFile(input.files[0]);
      ["dragenter", "dragover"].forEach(type => dropzone.addEventListener(type, event => {
        event.preventDefault();
        dropzone.classList.add("dragover");
      }));
      ["dragleave", "drop"].forEach(type => dropzone.addEventListener(type, event => {
        event.preventDefault();
        dropzone.classList.remove("dragover");
      }));
      dropzone.addEventListener("drop", event => loadFile(event.dataTransfer.files[0]));

      calculateBtn.onclick = async () => {
        if (!currentFile) return showToast("Сначала выберите файл");
        calculateBtn.disabled = true;
        copyBtn.disabled = true;
        status.textContent = "расчёт...";
        status.style.color = "var(--warning)";
        output.textContent = "Читаем файл и считаем хэш…";
        try {
          currentHash = await digestFile(currentFile, algorithm.value);
          output.textContent = currentHash;
          status.textContent = algorithm.value;
          status.style.color = "var(--accent)";
          copyBtn.disabled = false;
          compare();
          showToast("Контрольная сумма готова");
        } catch (error) {
          currentHash = "";
          output.textContent = error.message || "Не удалось рассчитать хэш.";
          status.textContent = "ошибка";
          status.style.color = "var(--danger)";
        } finally {
          calculateBtn.disabled = false;
        }
      };

      algorithm.onchange = () => {
        currentHash = "";
        output.textContent = "Алгоритм изменён. Рассчитайте хэш заново.";
        status.textContent = "ожидание";
        status.style.color = "";
        copyBtn.disabled = true;
        compareResult.hidden = true;
      };
      expected.oninput = compare;
      copyBtn.onclick = () => copyText(currentHash);
    }
  },


  fileInspector: {
    title: "File Inspector",
    kicker: "FILES • INSPECT",
    render: () => `
      <p class="tool-description">Быстро показывает основную информацию о файле: расширение, MIME, сигнатуру первых байт, дату изменения, SHA-256 и безопасный текстовый preview.</p>
      <label class="dropzone compact-dropzone" id="inspectDropzone">
        <input type="file" id="inspectFileInput">
        <span>
          <strong>Перетащите файл для анализа</strong>
          <small>Файл не загружается • читаются только локальные данные в браузере</small>
        </span>
      </label>

      <div id="inspectWorkArea" hidden>
        <div class="file-summary-card">
          <div class="file-summary-icon">i</div>
          <div class="file-summary-copy">
            <strong id="inspectFileName"></strong>
            <small id="inspectFileLine"></small>
          </div>
          <span class="file-private-badge">LOCAL</span>
        </div>

        <div class="inspector-grid">
          <div class="inspector-metric"><span>Размер</span><strong id="inspectSize">—</strong></div>
          <div class="inspector-metric"><span>Расширение</span><strong id="inspectExt">—</strong></div>
          <div class="inspector-metric"><span>MIME</span><strong id="inspectMime">—</strong></div>
          <div class="inspector-metric"><span>Сигнатура</span><strong id="inspectSignature">—</strong></div>
          <div class="inspector-metric"><span>Изменён</span><strong id="inspectModified">—</strong></div>
          <div class="inspector-metric"><span>Разрешение</span><strong id="inspectDimensions">—</strong></div>
        </div>

        <div class="inspector-section">
          <label class="field-label"><span>Первые байты</span><span>HEX preview</span></label>
          <div class="output-box hex-preview" id="inspectHex">—</div>
        </div>

        <div class="inspector-section" id="inspectTextSection" hidden>
          <label class="field-label"><span>Текстовый preview</span><span>до 64 КБ</span></label>
          <div class="output-box mono text-preview" id="inspectText"></div>
        </div>

        <div class="inspector-section">
          <label class="field-label"><span>SHA-256</span><span id="inspectHashStatus">не рассчитан</span></label>
          <div class="output-box mono hash-output" id="inspectHash">Нажмите «Рассчитать SHA-256».</div>
          <div class="tool-actions">
            <button class="action-btn primary" id="inspectHashBtn">Рассчитать SHA-256</button>
            <button class="action-btn" id="inspectCopyHashBtn" disabled>Копировать хэш</button>
            <button class="action-btn" id="inspectCopyInfoBtn">Копировать информацию</button>
          </div>
        </div>

        <div class="repo-ready-strip"><span class="status-dot"></span><span><strong>Privacy-first:</strong> анализ выполняется локально, без отправки файла на сервер.</span></div>
      </div>
    `,
    mount: () => {
      const input = $("#inspectFileInput");
      const dropzone = $("#inspectDropzone");
      const workArea = $("#inspectWorkArea");
      const hashBtn = $("#inspectHashBtn");
      const copyHashBtn = $("#inspectCopyHashBtn");
      const hashOutput = $("#inspectHash");
      const hashStatus = $("#inspectHashStatus");
      const textSection = $("#inspectTextSection");
      const textOutput = $("#inspectText");
      let currentFile = null;
      let currentHash = "";
      let infoText = "";

      const loadFile = async file => {
        if (!file) return;
        currentFile = file;
        currentHash = "";
        workArea.hidden = false;
        copyHashBtn.disabled = true;
        hashOutput.textContent = "Нажмите «Рассчитать SHA-256».";
        hashStatus.textContent = "не рассчитан";
        hashStatus.style.color = "";

        const head = new Uint8Array(await file.slice(0, 128).arrayBuffer());
        const signature = detectFileSignature(head);
        const dimensions = await inspectImageDimensions(file);
        const modified = file.lastModified ? new Date(file.lastModified).toLocaleString("ru-RU") : "—";

        $("#inspectFileName").textContent = file.name;
        $("#inspectFileLine").textContent = `${formatBytes(file.size)} • ${file.type || "MIME не указан"}`;
        $("#inspectSize").textContent = formatBytes(file.size);
        $("#inspectExt").textContent = getExtension(file.name);
        $("#inspectMime").textContent = file.type || "не указан";
        $("#inspectSignature").textContent = signature;
        $("#inspectSignature").className = signature === "Не распознана" ? "signature-neutral" : "signature-good";
        $("#inspectModified").textContent = modified;
        $("#inspectDimensions").textContent = dimensions ? `${dimensions.width}×${dimensions.height}` : "—";
        $("#inspectHex").textContent = bytesToHexPreview(head);

        if (isTextLikeFile(file)) {
          try {
            const preview = await file.slice(0, 64 * 1024).text();
            textOutput.textContent = preview || "(пустой файл)";
            textSection.hidden = false;
          } catch {
            textSection.hidden = true;
          }
        } else {
          textSection.hidden = true;
          textOutput.textContent = "";
        }

        infoText = [
          `Файл: ${file.name}`,
          `Размер: ${formatBytes(file.size)}`,
          `Расширение: ${getExtension(file.name)}`,
          `MIME: ${file.type || "не указан"}`,
          `Сигнатура: ${signature}`,
          `Изменён: ${modified}`,
          `Разрешение: ${dimensions ? `${dimensions.width}×${dimensions.height}` : "—"}`
        ].join("\n");

        showToast("Файл проанализирован");
      };

      input.onchange = () => loadFile(input.files[0]);
      ["dragenter","dragover"].forEach(type => dropzone.addEventListener(type, event => {
        event.preventDefault();
        dropzone.classList.add("dragover");
      }));
      ["dragleave","drop"].forEach(type => dropzone.addEventListener(type, event => {
        event.preventDefault();
        dropzone.classList.remove("dragover");
      }));
      dropzone.addEventListener("drop", event => loadFile(event.dataTransfer.files[0]));

      hashBtn.onclick = async () => {
        if (!currentFile) return showToast("Сначала выберите файл");
        hashBtn.disabled = true;
        copyHashBtn.disabled = true;
        hashStatus.textContent = "расчёт...";
        hashStatus.style.color = "var(--warning)";
        hashOutput.textContent = "Считаем SHA-256…";
        try {
          currentHash = await digestFile(currentFile, "SHA-256");
          hashOutput.textContent = currentHash;
          hashStatus.textContent = "готово";
          hashStatus.style.color = "var(--accent)";
          copyHashBtn.disabled = false;
          showToast("SHA-256 готов");
        } catch (error) {
          currentHash = "";
          hashOutput.textContent = error.message || "Не удалось рассчитать SHA-256.";
          hashStatus.textContent = "ошибка";
          hashStatus.style.color = "var(--danger)";
        } finally {
          hashBtn.disabled = false;
        }
      };

      copyHashBtn.onclick = () => copyText(currentHash);
      $("#inspectCopyInfoBtn").onclick = () => copyText(infoText + (currentHash ? `\nSHA-256: ${currentHash}` : ""));
    }
  },

  imageStudio: {
    title: "Image Studio",
    kicker: "IMAGES • OPTIMIZE",
    render: () => `
      <p class="tool-description">Уменьшает разрешение и вес изображения, конвертирует JPG/PNG/WebP и одновременно убирает встроенные метаданные.</p>
      <label class="dropzone" id="studioDropzone">
        <input type="file" id="studioImageInput" accept="image/jpeg,image/png,image/webp">
        <span>
          <strong>Добавьте изображение</strong>
          <small>JPG, PNG или WebP • до 40 МБ<br>файл остаётся на вашем устройстве</small>
        </span>
      </label>

      <div id="studioWorkArea" hidden>
        <div class="image-studio-layout">
          <div class="image-preview-shell">
            <img id="studioPreview" class="preview-image studio-preview" alt="Предпросмотр изображения">
            <div class="image-preview-caption" id="studioOriginalMeta"></div>
          </div>

          <div class="studio-settings">
            <div>
              <label class="field-label"><span>Размер</span><span id="studioRatioLabel">сохранять пропорции</span></label>
              <div class="dimension-grid">
                <div><small>Ширина</small><input type="number" id="studioWidth" min="1" max="12000"></div>
                <div><small>Высота</small><input type="number" id="studioHeight" min="1" max="12000"></div>
              </div>
              <label class="check-pill studio-lock"><input type="checkbox" id="studioLockRatio" checked> Сохранять пропорции</label>
            </div>

            <div>
              <label class="field-label"><span>Формат</span><span>конвертация</span></label>
              <div class="checks">
                <label class="check-pill"><input type="radio" name="studioFormat" value="image/jpeg" checked> JPG</label>
                <label class="check-pill"><input type="radio" name="studioFormat" value="image/png"> PNG</label>
                <label class="check-pill"><input type="radio" name="studioFormat" value="image/webp"> WebP</label>
              </div>
            </div>

            <div id="studioQualityBlock">
              <label class="field-label"><span>Качество</span><span id="studioQualityValue">82%</span></label>
              <input type="range" id="studioQuality" min="45" max="100" value="82">
            </div>
          </div>
        </div>

        <div class="tool-actions studio-actions">
          <button class="action-btn primary" id="studioProcessBtn">Подготовить файл</button>
          <button class="action-btn" id="studioDownloadBtn" disabled>Скачать результат</button>
          <button class="action-btn" id="studioResetBtn">Исходный размер</button>
        </div>

        <div class="studio-result" id="studioResult" hidden>
          <div class="studio-metric"><span>Исходник</span><strong id="studioBeforeSize">—</strong></div>
          <div class="studio-metric"><span>Результат</span><strong id="studioAfterSize">—</strong></div>
          <div class="studio-metric emphasis"><span>Изменение</span><strong id="studioSaving">—</strong></div>
          <div class="studio-metric"><span>Разрешение</span><strong id="studioOutputDimensions">—</strong></div>
        </div>
      </div>
      <div class="notice ok">После переэкспорта Canvas обычно удаляет EXIF/GPS-метаданные. Для PNG ползунок качества не используется.</div>
    `,
    mount: () => {
      const input = $("#studioImageInput");
      const dropzone = $("#studioDropzone");
      const workArea = $("#studioWorkArea");
      const preview = $("#studioPreview");
      const originalMeta = $("#studioOriginalMeta");
      const widthInput = $("#studioWidth");
      const heightInput = $("#studioHeight");
      const lockRatio = $("#studioLockRatio");
      const quality = $("#studioQuality");
      const qualityValue = $("#studioQualityValue");
      const qualityBlock = $("#studioQualityBlock");
      const processBtn = $("#studioProcessBtn");
      const downloadBtn = $("#studioDownloadBtn");
      const resetBtn = $("#studioResetBtn");
      const result = $("#studioResult");
      const beforeSize = $("#studioBeforeSize");
      const afterSize = $("#studioAfterSize");
      const saving = $("#studioSaving");
      const outputDimensions = $("#studioOutputDimensions");
      let currentFile = null;
      let imageEl = null;
      let imageUrl = null;
      let outputUrl = null;
      let outputBlob = null;
      let ratio = 1;
      let editingDimension = false;

      const selectedFormat = () => $('input[name="studioFormat"]:checked').value;
      const revokeOutput = () => {
        if (outputUrl) URL.revokeObjectURL(outputUrl);
        outputUrl = null;
        outputBlob = null;
        downloadBtn.disabled = true;
        result.hidden = true;
      };

      const syncFormatUi = () => {
        qualityBlock.style.opacity = selectedFormat() === "image/png" ? ".45" : "1";
        quality.disabled = selectedFormat() === "image/png";
        revokeOutput();
      };

      const loadFile = file => {
        if (!file) return;
        if (!["image/jpeg", "image/png", "image/webp"].includes(file.type)) return showToast("Поддерживаются JPG, PNG и WebP");
        if (file.size > 40 * 1024 * 1024) return showToast("Изображение больше 40 МБ");

        currentFile = file;
        if (imageUrl) URL.revokeObjectURL(imageUrl);
        revokeOutput();
        imageUrl = URL.createObjectURL(file);
        const img = new Image();
        img.onload = () => {
          imageEl = img;
          ratio = img.naturalWidth / img.naturalHeight;
          widthInput.value = img.naturalWidth;
          heightInput.value = img.naturalHeight;
          preview.src = imageUrl;
          originalMeta.textContent = `${img.naturalWidth}×${img.naturalHeight} • ${formatBytes(file.size)}`;
          workArea.hidden = false;
          beforeSize.textContent = formatBytes(file.size);
          showToast("Изображение готово к обработке");
        };
        img.onerror = () => showToast("Не удалось открыть изображение");
        img.src = imageUrl;
      };

      input.onchange = () => loadFile(input.files[0]);
      ["dragenter", "dragover"].forEach(type => dropzone.addEventListener(type, event => {
        event.preventDefault();
        dropzone.classList.add("dragover");
      }));
      ["dragleave", "drop"].forEach(type => dropzone.addEventListener(type, event => {
        event.preventDefault();
        dropzone.classList.remove("dragover");
      }));
      dropzone.addEventListener("drop", event => loadFile(event.dataTransfer.files[0]));

      widthInput.oninput = () => {
        revokeOutput();
        if (!lockRatio.checked || editingDimension || !ratio) return;
        editingDimension = true;
        heightInput.value = Math.max(1, Math.round((Number(widthInput.value) || 1) / ratio));
        editingDimension = false;
      };
      heightInput.oninput = () => {
        revokeOutput();
        if (!lockRatio.checked || editingDimension || !ratio) return;
        editingDimension = true;
        widthInput.value = Math.max(1, Math.round((Number(heightInput.value) || 1) * ratio));
        editingDimension = false;
      };
      quality.oninput = () => {
        qualityValue.textContent = `${quality.value}%`;
        revokeOutput();
      };
      $$('input[name="studioFormat"]').forEach(radio => radio.onchange = syncFormatUi);
      resetBtn.onclick = () => {
        if (!imageEl) return;
        widthInput.value = imageEl.naturalWidth;
        heightInput.value = imageEl.naturalHeight;
        revokeOutput();
      };

      processBtn.onclick = () => {
        if (!currentFile || !imageEl) return showToast("Сначала выберите изображение");
        const width = Math.max(1, Math.min(12000, Math.round(Number(widthInput.value) || imageEl.naturalWidth)));
        const height = Math.max(1, Math.min(12000, Math.round(Number(heightInput.value) || imageEl.naturalHeight)));
        const format = selectedFormat();
        const q = Number(quality.value) / 100;
        const canvas = document.createElement("canvas");
        canvas.width = width;
        canvas.height = height;
        const ctx = canvas.getContext("2d", { alpha: format !== "image/jpeg" });
        if (!ctx) return showToast("Canvas недоступен");
        if (format === "image/jpeg") {
          ctx.fillStyle = "#ffffff";
          ctx.fillRect(0, 0, width, height);
        }
        ctx.imageSmoothingEnabled = true;
        ctx.imageSmoothingQuality = "high";
        ctx.drawImage(imageEl, 0, 0, width, height);
        processBtn.disabled = true;
        processBtn.textContent = "Обработка…";
        canvas.toBlob(blob => {
          processBtn.disabled = false;
          processBtn.textContent = "Подготовить файл";
          if (!blob) return showToast("Не удалось создать изображение");
          revokeOutput();
          outputBlob = blob;
          outputUrl = URL.createObjectURL(blob);
          downloadBtn.disabled = false;
          result.hidden = false;
          beforeSize.textContent = formatBytes(currentFile.size);
          afterSize.textContent = formatBytes(blob.size);
          const delta = currentFile.size ? ((1 - blob.size / currentFile.size) * 100) : 0;
          saving.textContent = delta >= 0 ? `−${delta.toFixed(1)}%` : `+${Math.abs(delta).toFixed(1)}%`;
          saving.className = delta >= 0 ? "saving-good" : "saving-warn";
          outputDimensions.textContent = `${width}×${height}`;
          showToast(delta >= 0 ? "Изображение оптимизировано" : "Файл подготовлен");
        }, format, format === "image/png" ? undefined : q);
      };

      downloadBtn.onclick = () => {
        if (!outputUrl || !outputBlob || !currentFile) return;
        const format = selectedFormat();
        const ext = format === "image/jpeg" ? "jpg" : format.split("/")[1];
        const baseName = currentFile.name.replace(/\.[^.]+$/, "");
        const link = document.createElement("a");
        link.href = outputUrl;
        link.download = `${baseName}-privacykit.${ext}`;
        document.body.appendChild(link);
        link.click();
        link.remove();
        showToast("Файл сохранён");
      };
      syncFormatUi();
    }
  }
};

function escapeHtml(value) {
  return String(value)
    .replaceAll("&", "&amp;")
    .replaceAll("<", "&lt;")
    .replaceAll(">", "&gt;")
    .replaceAll('"', "&quot;")
    .replaceAll("'", "&#039;");
}