const fileInput = document.getElementById("file-input");
const scaleEl = document.getElementById("scale");
const scaleValueEl = document.getElementById("scale-value");
const canvas = document.getElementById("preview-canvas");
const downloadBtn = document.getElementById("download-btn");

let sourceImage = null;

function render() {
  if (!sourceImage) return;

  const w = sourceImage.naturalWidth;
  const h = sourceImage.naturalHeight;
  const scale = parseInt(scaleEl.value) / 100;

  canvas.width = w;
  canvas.height = h;
  const ctx = canvas.getContext("2d");
  ctx.clearRect(0, 0, w, h);

  const sw = w * scale;
  const sh = h * scale;
  const sx = (w - sw) / 2;
  const sy = (h - sh) / 2;

  ctx.drawImage(sourceImage, sx, sy, sw, sh);
}

fileInput.addEventListener("change", () => {
  const file = fileInput.files[0];
  if (!file) return;

  const reader = new FileReader();
  reader.onload = (e) => {
    const img = new Image();
    img.onload = () => {
      sourceImage = img;
      downloadBtn.disabled = false;
      render();
    };
    img.src = e.target.result;
  };
  reader.readAsDataURL(file);
});

scaleEl.addEventListener("input", () => {
  scaleValueEl.textContent = scaleEl.value;
  render();
});

downloadBtn.addEventListener("click", () => {
  if (!sourceImage) return;
  const link = document.createElement("a");
  link.download = "resized.png";
  link.href = canvas.toDataURL("image/png");
  link.click();
});