{{-- Conversió SVG -> PNG al navegador (descarregar i copiar al porta-retalls).
     Es fa al client perquè no depèn de l'extensió imagick de PHP. --}}
<script>
    (function () {
        if (window.qrToolsLoaded) return;
        window.qrToolsLoaded = true;

        const PNG_SIZE = 600;

        function findCard(btn) {
            const card = btn.closest('.qr-card');
            return {
                svg: card.querySelector('svg'),
                name: card.dataset.qrName || 'qr',
            };
        }

        function svgToPngBlob(svg) {
            return new Promise(function (resolve, reject) {
                const svgData = new XMLSerializer().serializeToString(svg);
                const svgBlob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
                const url = URL.createObjectURL(svgBlob);
                const img = new Image();

                img.onload = function () {
                    const canvas = document.createElement('canvas');
                    canvas.width = PNG_SIZE;
                    canvas.height = PNG_SIZE;
                    const ctx = canvas.getContext('2d');
                    ctx.imageSmoothingEnabled = false;
                    ctx.fillStyle = '#ffffff';
                    ctx.fillRect(0, 0, PNG_SIZE, PNG_SIZE);
                    ctx.drawImage(img, 0, 0, PNG_SIZE, PNG_SIZE);
                    URL.revokeObjectURL(url);
                    canvas.toBlob(function (blob) {
                        blob ? resolve(blob) : reject(new Error('toBlob ha fallat'));
                    }, 'image/png');
                };
                img.onerror = function () {
                    URL.revokeObjectURL(url);
                    reject(new Error('No s\'ha pogut carregar el SVG'));
                };
                img.src = url;
            });
        }

        function flash(btn, text) {
            const original = btn.dataset.label || btn.textContent.trim();
            btn.dataset.label = original;
            const labelSpan = btn.querySelector('.qr-btn-label');
            if (labelSpan) {
                labelSpan.textContent = text;
                setTimeout(function () { labelSpan.textContent = original; }, 1800);
            }
        }

        window.qrDownloadPng = async function (btn) {
            try {
                const { svg, name } = findCard(btn);
                const blob = await svgToPngBlob(svg);
                const a = document.createElement('a');
                a.href = URL.createObjectURL(blob);
                a.download = name + '.png';
                document.body.appendChild(a);
                a.click();
                a.remove();
                setTimeout(function () { URL.revokeObjectURL(a.href); }, 1000);
            } catch (e) {
                console.error(e);
                alert('No s\'ha pogut generar el PNG.');
            }
        };

        window.qrCopyImage = async function (btn) {
            try {
                const { svg } = findCard(btn);
                const blob = await svgToPngBlob(svg);
                if (!navigator.clipboard || !window.ClipboardItem) {
                    throw new Error('clipboard-no-suportat');
                }
                await navigator.clipboard.write([
                    new ClipboardItem({ 'image/png': blob }),
                ]);
                flash(btn, 'Copiat!');
            } catch (e) {
                console.error(e);
                flash(btn, 'No suportat');
                // Pista: copiar imatges només funciona en HTTPS (o localhost).
            }
        };
    })();
</script>