{# QR Code Generation Feature - Include this partial where QR codes are needed #}
{# Usage: {% include "../../includes/features/qr-code.html" %} #}

{% if enable_qr_code %}
  {# QR Code Generator - Using qrcode.js library #}
  <script>
    // Ensure QR code library loads only once
    (function() {
      // Check if already initialized
      if (window.QRCodeModuleInitialized) {
        return;
      }
      window.QRCodeModuleInitialized = true;
      
      // Initialize QR codes when DOM is ready
      function initQRCodes() {
        const qrContainers = document.querySelectorAll('.qr-code-container:not([data-qr-initialized]), [data-qr-content]:not([data-qr-initialized])');
        
        if (qrContainers.length === 0) {
          return;
        }
        
        // Check if QRCode library is already loaded
        if (typeof QRCode === 'undefined') {
          // Load QRCode.js library only once
          if (!window.QRCodeScriptLoading) {
            window.QRCodeScriptLoading = true;
            
            const qrScript = document.createElement('script');
            qrScript.src = 'https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js';
            qrScript.async = true;
            
            qrScript.onload = function() {
              window.QRCodeScriptLoaded = true;
              window.QRCodeScriptLoading = false;
              processQRContainers();
            };
            
            qrScript.onerror = function() {
              window.QRCodeScriptLoading = false;
              console.error('Failed to load QR code library');
            };
            
            document.head.appendChild(qrScript);
          } else {
            // Script is loading, wait for it
            const checkInterval = setInterval(function() {
              if (window.QRCodeScriptLoaded) {
                clearInterval(checkInterval);
                processQRContainers();
              }
            }, 100);
          }
        } else {
          // Library already loaded, process immediately
          processQRContainers();
        }
      }
      
      function processQRContainers() {
        const qrContainers = document.querySelectorAll('.qr-code-container:not([data-qr-initialized]), [data-qr-content]:not([data-qr-initialized])');
        
        qrContainers.forEach(container => {
          // Mark as initialized to prevent duplicate processing
          container.setAttribute('data-qr-initialized', 'true');
          
          const content = container.dataset.qrContent || window.location.href;
          const size = parseInt(container.dataset.qrSize) || 256;
          const darkColor = container.dataset.qrDark || '#000000';
          const lightColor = container.dataset.qrLight || '#ffffff';
          const format = container.dataset.qrFormat || 'png';
          
          // Clear container
          container.innerHTML = '';
          
          // Generate QR code
          try {
            const qrCode = new QRCode(container, {
              text: content,
              width: size,
              height: size,
              colorDark: darkColor,
              colorLight: lightColor,
              correctLevel: QRCode.CorrectLevel.H
            });
            
            // Add download button if requested
            if (container.dataset.qrDownload === 'true') {
              setTimeout(() => {
                const canvas = container.querySelector('canvas');
                const existingBtn = container.parentElement.querySelector('.qr-download-btn');
                
                if (canvas && existingBtn) {
                  existingBtn.onclick = function(e) {
                    e.preventDefault();
                    
                    if (format === 'svg') {
                      // Convert to SVG if requested
                      const svg = container.querySelector('svg');
                      if (svg) {
                        const svgData = new XMLSerializer().serializeToString(svg);
                        const blob = new Blob([svgData], {type: 'image/svg+xml'});
                        const url = URL.createObjectURL(blob);
                        const link = document.createElement('a');
                        link.download = 'qr-code.svg';
                        link.href = url;
                        link.click();
                        URL.revokeObjectURL(url);
                      }
                    } else {
                      // Default PNG download
                      const link = document.createElement('a');
                      link.download = 'qr-code.png';
                      link.href = canvas.toDataURL();
                      link.click();
                    }
                  };
                }
              }, 100);
            }
          } catch (error) {
            console.error('Error generating QR code:', error);
            container.setAttribute('data-qr-error', 'true');
          }
        });
        
        // Initialize QR generator widget if exists
        const qrWidget = document.getElementById('qr-generator-widget');
        if (qrWidget && !qrWidget.dataset.initialized) {
          createQRWidget(qrWidget);
          qrWidget.dataset.initialized = 'true';
        }
      }
      
      // QR Code Generator Widget
      function createQRWidget(container) {
        container.innerHTML = `
          <div class="qr-generator">
            <h3>Generate QR Code</h3>
            <div class="qr-input-group">
              <label for="qr-input">Enter URL or Text:</label>
              <input type="text" id="qr-input" placeholder="https://example.com or any text" />
              <button id="qr-generate-btn">Generate</button>
            </div>
            <div id="qr-output" class="qr-output"></div>
          </div>
        `;
        
        const input = container.querySelector('#qr-input');
        const button = container.querySelector('#qr-generate-btn');
        const output = container.querySelector('#qr-output');
        
        button.addEventListener('click', () => {
          const value = input.value.trim();
          if (value) {
            output.innerHTML = '';
            new QRCode(output, {
              text: value,
              width: 256,
              height: 256,
              correctLevel: QRCode.CorrectLevel.H
            });
            
            // Add download button
            setTimeout(() => {
              const canvas = output.querySelector('canvas');
              if (canvas) {
                const downloadBtn = document.createElement('button');
                downloadBtn.className = 'qr-download-btn';
                downloadBtn.textContent = 'Download';
                downloadBtn.onclick = function() {
                  const link = document.createElement('a');
                  link.download = 'generated-qr-code.png';
                  link.href = canvas.toDataURL();
                  link.click();
                };
                output.appendChild(downloadBtn);
              }
            }, 100);
          }
        });
        
        // Generate QR for current page by default
        input.value = window.location.href;
        button.click();
      }
      
      // Set up global function for modules to call
      window.initializeQRCodes = initQRCodes;
      
      // Initialize on DOM ready
      if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initQRCodes);
      } else {
        initQRCodes();
      }
      
      // Also listen for dynamically added QR containers (for AJAX content)
      const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
          if (mutation.addedNodes.length) {
            initQRCodes();
          }
        });
      });
      
      // Start observing
      observer.observe(document.body, {
        childList: true,
        subtree: true
      });
    })();
  </script>
  
  {# QR Code Styles - Also include only once #}
  {% unless qr_styles_included %}
    {% set qr_styles_included = true %}
    <style>
      .qr-code-container {
        display: inline-block;
        padding: 1rem;
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }
      
      .qr-code-container canvas,
      .qr-code-container img {
        display: block;
        margin: 0 auto;
      }
      
      .qr-download-btn {
        display: block;
        width: 100%;
        margin-top: 1rem;
        padding: 0.5rem 1rem;
        background: #007bff;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
        transition: background 0.2s;
      }
      
      .qr-download-btn:hover {
        background: #0056b3;
      }
      
      .qr-generator {
        max-width: 400px;
        padding: 1.5rem;
        background: #f8f9fa;
        border-radius: 8px;
        margin: 2rem 0;
      }
      
      .qr-generator h3 {
        margin-top: 0;
        margin-bottom: 1rem;
        color: #333;
      }
      
      .qr-input-group {
        margin-bottom: 1rem;
      }
      
      .qr-input-group label {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: 500;
      }
      
      .qr-input-group input {
        width: 100%;
        padding: 0.5rem;
        border: 1px solid #ddd;
        border-radius: 4px;
        margin-bottom: 0.5rem;
      }
      
      #qr-generate-btn {
        width: 100%;
        padding: 0.5rem 1rem;
        background: #28a745;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 16px;
        transition: background 0.2s;
      }
      
      #qr-generate-btn:hover {
        background: #218838;
      }
      
      .qr-output {
        text-align: center;
        padding: 1rem;
        background: white;
        border-radius: 4px;
        min-height: 280px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
    </style>
  {% endunless %}
{% endif %}