let dumpWidth = 1080;
let dumpHeight = 1920;

document.getElementById('xmlInput').addEventListener('change', handleXml);
document.getElementById('imgInput').addEventListener('change', handleImage);

function handleImage(event) {
  const file = event.target.files[0];
  if (!file) return;

  const url = URL.createObjectURL(file);
  document.getElementById('screenshot').src = url;
}

async function handleXml(event) {
  const file = event.target.files[0];
  if (!file) return;

  const text = await file.text();
  const parser = new DOMParser();
  const xml = parser.parseFromString(text, "text/xml");

  const nodes = Array.from(xml.querySelectorAll("node"));
  const canvas = document.getElementById("canvas");
  canvas.innerHTML = "";

  // Автоопределение размеров дампа
  let maxX = 0, maxY = 0;
  for (const node of nodes) {
    const bounds = node.getAttribute("bounds");
    const match = bounds && bounds.match(/\[(\d+),(\d+)\]\[(\d+),(\d+)\]/);
    if (!match) continue;

    const [, , , x2, y2] = match.map(Number);
    if (x2 > maxX) maxX = x2;
    if (y2 > maxY) maxY = y2;
  }
  dumpWidth = maxX;
  dumpHeight = maxY;

  // Масштабирование по высоте экрана с отступами
  const padding = 100;
  const displayHeight = window.innerHeight - padding;
  const scale = displayHeight / dumpHeight;
  const displayWidth = dumpWidth * scale;

  // Установка размеров canvas
  canvas.style.width = `${displayWidth}px`;
  canvas.style.height = `${displayHeight}px`;

  for (const node of nodes) {
    const bounds = node.getAttribute("bounds");
    const match = bounds && bounds.match(/\[(\d+),(\d+)\]\[(\d+),(\d+)\]/);
    if (!match) continue;

    const [, x1, y1, x2, y2] = match.map(Number);

    const div = document.createElement("div");
    div.className = "rect";
    div.style.left = `${x1 * scale}px`;
    div.style.top = `${y1 * scale}px`;
    div.style.width = `${(x2 - x1) * scale}px`;
    div.style.height = `${(y2 - y1) * scale}px`;

    const text = (node.getAttribute("text") || '').trim();
    if (text) div.innerText = text;

    canvas.appendChild(div);
  }
}