import { loadScript } from './utils.js';

let qrLoaded = false;

async function ensureQrLib() {
  if (qrLoaded) return;
  await loadScript('https://cdnjs.cloudflare.com/ajax/libs/qrcode-generator/1.4.4/qrcode.min.js');
  qrLoaded = true;
}

/**
 * Show a QR code modal for the given URL.
 */
export async function showQrModal(url) {
  await ensureQrLib();

  const modal = document.getElementById('qr-modal');
  const canvas = document.getElementById('qr-canvas');
  const urlDisplay = document.getElementById('qr-url');

  // Generate QR
  const qr = qrcode(0, 'M');
  qr.addData(url);
  qr.make();

  canvas.innerHTML = qr.createSvgTag({ cellSize: 4, margin: 4 });
  // Make QR SVG white on dark background
  const svg = canvas.querySelector('svg');
  if (svg) {
    svg.style.background = '#fff';
    svg.style.borderRadius = '4px';
    svg.style.padding = '8px';
  }

  urlDisplay.textContent = url;
  modal.classList.remove('hidden');

  // Close handlers
  const close = () => modal.classList.add('hidden');
  document.getElementById('qr-modal-close').onclick = close;
  modal.onclick = (e) => { if (e.target === modal) close(); };
}