// QR modal — generates a scannable QR for any URL using a free QR service.
// Uses qrserver.com (Google chart deprecated). All client-side; no auth needed.

window.showQr = function(url) {
  const existing = document.getElementById('qr-modal');
  if (existing) existing.remove();
  const root = document.createElement('div');
  root.id = 'qr-modal';
  root.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:9999;display:grid;place-items:center;animation:qrfade .15s ease-out';
  const enc = encodeURIComponent(url);
  const src = `https://api.qrserver.com/v1/create-qr-code/?size=400x400&margin=0&data=${enc}`;
  root.innerHTML = `
    <style>@keyframes qrfade{from{opacity:0}to{opacity:1}}</style>
    <div style="background:var(--bg-1);border:1px solid var(--line);border-radius:14px;padding:24px;max-width:480px;width:90vw">
      <div style="display:flex;align-items:center;gap:12px;margin-bottom:16px">
        <div style="flex:1">
          <div style="font-size:15px;font-weight:600;margin-bottom:2px">Scan to open on phone</div>
          <div style="font-size:11px;color:var(--muted);font-family:'JetBrains Mono',monospace;word-break:break-all">${esc(url)}</div>
        </div>
        <button style="background:var(--bg-3);border:0;color:var(--text);padding:6px 12px;border-radius:6px;cursor:pointer" onclick="document.getElementById('qr-modal').remove()">Close</button>
      </div>
      <div style="background:#fff;padding:16px;border-radius:8px;display:grid;place-items:center">
        <img src="${src}" width="320" height="320" alt="QR" style="display:block">
      </div>
      <div style="margin-top:14px;display:flex;gap:8px">
        <button style="flex:1;background:var(--accent);color:#001a0c;border:0;padding:10px;border-radius:7px;font-weight:600;cursor:pointer" onclick="navigator.clipboard.writeText(${JSON.stringify(url)});this.textContent='✓ Copied'">Copy URL</button>
        <a href="${src.replace('400x400','800x800')}" target="_blank" download style="flex:1;background:var(--bg-3);color:var(--text);border:0;padding:10px;border-radius:7px;font-weight:600;text-align:center;text-decoration:none">Download PNG</a>
      </div>
    </div>
  `;
  function esc(s) { return String(s).replace(/[&<>"]/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c])); }
  root.addEventListener('click', e => { if (e.target === root) root.remove(); });
  document.body.appendChild(root);
};
