document.addEventListener('DOMContentLoaded', () => {
    const codeBlocks = document.querySelectorAll('.wp-block-code');

    codeBlocks.forEach((block) => {
        // Button erstellen
        const button = document.createElement('button');
        button.className = 'code-copy-button';
        button.innerHTML = '<span>Kopieren</span>';
        block.appendChild(button);

        button.addEventListener('click', () => {
            const codeElement = block.querySelector('code');
            if (!codeElement) return;
            const textToCopy = codeElement.innerText;

            // Funktion für das visuelle Feedback (Grün/Textwechsel)
            const showSuccess = () => {
                button.classList.add('is-copied');
                button.querySelector('span').innerText = 'Kopiert!';
                setTimeout(() => {
                    button.classList.remove('is-copied');
                    button.querySelector('span').innerText = 'Kopieren';
                }, 2000);
            };

            // STRATEGIE 1: Moderne Clipboard API (nur bei HTTPS/Localhost verfügbar)
            if (navigator.clipboard && window.isSecureContext) {
                navigator.clipboard.writeText(textToCopy)
                    .then(showSuccess)
                    .catch(() => fallbackCopy(textToCopy, showSuccess));
            } else {
                // STRATEGIE 2: Fallback für HTTP (dein Raspberry Pi / Firefox lokal)
                fallbackCopy(textToCopy, showSuccess);
            }
        });
    });

    // Die "Magie" für HTTP: Erstellt ein unsichtbares Feld zum Kopieren
    function fallbackCopy(text, callback) {
        const textArea = document.createElement("textarea");
        textArea.value = text;
        
        // Verhindert, dass das Bild springt
        textArea.style.position = "fixed";
        textArea.style.left = "-9999px";
        textArea.style.top = "0";
        
        document.body.appendChild(textArea);
        textArea.focus();
        textArea.select();

        try {
            const successful = document.execCommand('copy');
            if (successful) callback();
        } catch (err) {
            console.error('Kopieren im Fallback gescheitert:', err);
        }

        document.body.removeChild(textArea);
    }
});



/*
document.addEventListener('DOMContentLoaded', () => {
    // Alle Gutenberg Code-Blöcke finden
    const codeBlocks = document.querySelectorAll('.wp-block-code');

    // Icons definieren (SVG)
    const iconCopy = '<svg xmlns="http://www.w3.org" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 6px;"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>';
    const iconCheck = '<svg xmlns="http://www.w3.org" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 6px;"><polyline points="20 6 9 17 4 12"></polyline></svg>';

    codeBlocks.forEach((block) => {
        // Button erstellen
        const button = document.createElement('button');
        button.className = 'code-copy-button';
        button.innerHTML = iconCopy + '<span>Kopieren</span>';
        
        // Block vorbereiten (Position relativ für den Button)
        block.style.position = 'relative';
        block.appendChild(button);

        button.addEventListener('click', () => {
            const codeText = block.querySelector('code').innerText;

            navigator.clipboard.writeText(codeText).then(() => {
                // Erfolg anzeigen
                button.innerHTML = iconCheck + '<span>Kopiert!</span>';
                button.classList.add('is-copied');

                // Zurücksetzen nach 2 Sekunden
                setTimeout(() => {
                    button.innerHTML = iconCopy + '<span>Kopieren</span>';
                    button.classList.remove('is-copied');
                }, 2000);
            });
        });
    });
});
*/
