app.js

const input = document.getElementById("qr-input");
const generateBtn = document.getElementById("generate-btn");
const qrOutput = document.getElementById("qr-output");
const qrContainer = document.getElementById("qr-container");
const emptyState = document.getElementById("empty-state");
const copyBtn = document.getElementById("copy-btn");
const downloadBtn = document.getElementById("download-btn");
const scanLine = document.querySelector(".scan-line");
let currentSVG = null;

function generate() {
  const text = input.value.trim();
  if (!text) return;

  const qr = qrcode(0, "H");
  qr.addData(text);
  qr.make();

  const svgStr = qr.createSvgTag({ scalable: true });
  qrContainer.innerHTML = svgStr;
  currentSVG = svgStr;

  qrOutput.style.display = "flex";
  requestAnimationFrame(() => {
    qrOutput.classList.add("visible");
  });

  emptyState.classList.add("hidden");

  scanLine.classList.add("flash");
  setTimeout(() => scanLine.classList.remove("flash"), 500);

  resetCopyBtn();
}

function downloadSVG() {
  if (!currentSVG) return;
  const blob = new Blob([currentSVG], { type: "image/svg+xml" });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = "qrcode.svg";
  a.click();
  URL.revokeObjectURL(url);
}

function copySVG() {
  if (!currentSVG) return;
  navigator.clipboard.writeText(currentSVG).then(() => {
    copyBtn.classList.add("success");
    copyBtn.innerHTML = `
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
      Copied!
    `;
    setTimeout(resetCopyBtn, 2000);
  });
}

function resetCopyBtn() {
  copyBtn.classList.remove("success");
  copyBtn.innerHTML = `
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
    Copy SVG
  `;
}

input.addEventListener("keydown", (e) => {
  if (e.key === "Enter") generate();
});

generateBtn.addEventListener("click", generate);
downloadBtn.addEventListener("click", downloadSVG);
copyBtn.addEventListener("click", copySVG);