script.js

const upload = document.getElementById("upload");
const input = document.getElementById("fileInput");
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

const widthInput = document.getElementById("width");
const heightInput = document.getElementById("height");
const qualityInput = document.getElementById("quality");
const brightness = document.getElementById("brightness");
const contrast = document.getElementById("contrast");
const blur = document.getElementById("blur");
const grayscale = document.getElementById("grayscale");
const lockAspect = document.getElementById("lockAspect");

const cropBtn = document.getElementById("crop");
const rotateBtn = document.getElementById("rotate");
const bgBtn = document.getElementById("bgRemove");
const undoBtn = document.getElementById("undo");
const redoBtn = document.getElementById("redo");
const downloadBtn = document.getElementById("download");
const historyUI = document.getElementById("history");
const themeToggle = document.getElementById("themeToggle");

let images = [];
let currentImg = new Image();
let rotation = 0;
let history = [];
let redoStack = [];
let aspectRatio = 1;

upload.onclick = () => input.click();
input.onchange = e => {
  images = [...e.target.files];
  loadImage(images[0]);
};

function saveState() {
  history.push(canvas.toDataURL());
  redoStack = [];
  renderHistory();
}

function loadImage(file) {
  currentImg.src = URL.createObjectURL(file);
  currentImg.onload = () => {
    canvas.width = currentImg.width;
    canvas.height = currentImg.height;
    aspectRatio = currentImg.width / currentImg.height;
    ctx.drawImage(currentImg, 0, 0);
    widthInput.value = currentImg.width;
    heightInput.value = currentImg.height;
    saveState();
  };
}

rotateBtn.onclick = () => {
  rotation += 90;
  canvas.width = currentImg.height;
  canvas.height = currentImg.width;
  ctx.translate(canvas.width / 2, canvas.height / 2);
  ctx.rotate(rotation * Math.PI / 180);
  ctx.drawImage(currentImg, -currentImg.width / 2, -currentImg.height / 2);
  saveState();
};

cropBtn.onclick = () => {
  const s = Math.min(canvas.width, canvas.height);
  const imgData = ctx.getImageData(
    (canvas.width - s) / 2,
    (canvas.height - s) / 2,
    s, s
  );
  canvas.width = s;
  canvas.height = s;
  ctx.putImageData(imgData, 0, 0);
  saveState();
};

/* ---- Filters ---- */
function applyFilters() {
  ctx.filter = `
    brightness(${brightness.value}%)
    contrast(${contrast.value}%)
    blur(${blur.value}px)
    grayscale(${grayscale.value}%)
  `;
  ctx.drawImage(currentImg, 0, 0, canvas.width, canvas.height);
}

[brightness, contrast, blur, grayscale].forEach(input => {
  input.addEventListener("input", applyFilters);
});

/* ---- Undo/Redo ---- */
undoBtn.onclick = () => {
  if (history.length > 1) {
    redoStack.push(history.pop());
    const last = history[history.length - 1];
    const img = new Image();
    img.src = last;
    img.onload = () => ctx.drawImage(img, 0, 0);
  }
};
redoBtn.onclick = () => {
  if (redoStack.length > 0) {
    const state = redoStack.pop();
    history.push(state);
    const img = new Image();
    img.src = state;
    img.onload = () => ctx.drawImage(img, 0, 0);
  }
};

/* ---- BG Remove (AI Placeholder) ---- */
bgBtn.onclick = async () => {
  alert("🔧 Background removal requires backend integration.");
};

/* ---- Aspect Ratio Lock ---- */
widthInput.oninput = () => {
  if (lockAspect.checked)
    heightInput.value = Math.round(widthInput.value / aspectRatio);
};
heightInput.oninput = () => {
  if (lockAspect.checked)
    widthInput.value = Math.round(heightInput.value * aspectRatio);
};

/* ---- ZIP Download ---- */
downloadBtn.onclick = async () => {
  const zip = new JSZip();
  for (let file of images) {
    await loadTemp(file, zip);
  }
  const content = await zip.generateAsync({ type: "blob" });
  const a = document.createElement("a");
  a.href = URL.createObjectURL(content);
  a.download = "ResizrX-Edited.zip";
  a.click();
};

async function loadTemp(file, zip) {
  const img = new Image();
  img.src = URL.createObjectURL(file);
  await img.decode();
  const c = document.createElement("canvas");
  c.width = widthInput.value;
  c.height = heightInput.value;
  const cctx = c.getContext("2d");
  cctx.filter = ctx.filter;
  cctx.drawImage(img, 0, 0, c.width, c.height);
  const blob = await new Promise(r => c.toBlob(r, "image/jpeg", qualityInput.value));
  zip.file(file.name, blob);
}

/* ---- History Render ---- */
function renderHistory() {
  historyUI.innerHTML = history.map((_, i) => `<li>Step ${i + 1}</li>`).join("");
}

/* ---- Theme Toggle ---- */
themeToggle.onclick = () => {
  document.body.classList.toggle("light");
};

/* ---- PWA ---- */
if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("sw.js");
}