{# PDF Generation Feature - Include this partial where PDF export is needed #}
{# Usage: {% include "../../includes/features/pdf-generator.html" %} #}

{% if enable_pdf_export %}
  {# PDF Generation using jsPDF and html2canvas #}
  <script>
    // Lazy load PDF libraries when PDF buttons are present
    (function() {
      const pdfButtons = document.querySelectorAll('.generate-pdf, [data-pdf-export]');
      
      if (pdfButtons.length > 0) {
        // Load html2canvas first
        const html2canvasScript = document.createElement('script');
        html2canvasScript.src = 'https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js';
        html2canvasScript.async = true;
        
        html2canvasScript.onload = function() {
          // Then load jsPDF
          const jsPDFScript = document.createElement('script');
          jsPDFScript.src = 'https://cdn.jsdelivr.net/npm/jspdf@2.5.1/dist/jspdf.umd.min.js';
          jsPDFScript.async = true;
          
          jsPDFScript.onload = function() {
            // Initialize PDF functionality
            window.jsPDF = window.jspdf.jsPDF;
            
            // Setup PDF export buttons
            pdfButtons.forEach(button => {
              button.addEventListener('click', function(e) {
                e.preventDefault();
                
                // Get options from data attributes
                const targetSelector = this.dataset.pdfTarget || '.body-container-wrapper';
                const filename = this.dataset.pdfFilename || 'document.pdf';
                const title = this.dataset.pdfTitle || document.title;
                const orientation = this.dataset.pdfOrientation || 'portrait';
                const format = this.dataset.pdfFormat || 'a4';
                const quality = parseFloat(this.dataset.pdfQuality) || 0.95;
                
                // Show loading state
                const originalText = this.textContent;
                this.textContent = 'Generating PDF...';
                this.disabled = true;
                
                // Generate PDF
                generatePDF({
                  element: document.querySelector(targetSelector),
                  filename: filename,
                  title: title,
                  orientation: orientation,
                  format: format,
                  quality: quality,
                  button: this,
                  originalText: originalText
                });
              });
            });
            
            // Create PDF toolbar if element exists
            const pdfToolbar = document.getElementById('pdf-toolbar');
            if (pdfToolbar) {
              createPDFToolbar(pdfToolbar);
            }
          };
          
          document.head.appendChild(jsPDFScript);
        };
        
        document.head.appendChild(html2canvasScript);
      }
      
      // PDF Generation Function
      function generatePDF(options) {
        const {
          element,
          filename,
          title,
          orientation,
          format,
          quality,
          button,
          originalText
        } = options;
        
        if (!element) {
          console.error('PDF target element not found');
          resetButton(button, originalText);
          return;
        }
        
        // Clone element for clean PDF
        const clone = element.cloneNode(true);
        
        // Remove elements that shouldn't be in PDF
        clone.querySelectorAll('.no-print, .pdf-toolbar, .generate-pdf').forEach(el => {
          el.remove();
        });
        
        // Temporarily append clone to body (hidden)
        clone.style.position = 'absolute';
        clone.style.left = '-9999px';
        clone.style.width = element.offsetWidth + 'px';
        document.body.appendChild(clone);
        
        // Convert to canvas
        html2canvas(clone, {
          scale: 2,
          useCORS: true,
          logging: false,
          backgroundColor: '#ffffff'
        }).then(canvas => {
          // Remove clone
          document.body.removeChild(clone);
          
          // Calculate dimensions
          const imgWidth = 210; // A4 width in mm
          const pageHeight = 297; // A4 height in mm
          const imgHeight = (canvas.height * imgWidth) / canvas.width;
          let heightLeft = imgHeight;
          
          // Create PDF
          const pdf = new jsPDF(orientation, 'mm', format);
          
          // Add metadata
          pdf.setProperties({
            title: title,
            subject: 'Generated from ' + window.location.href,
            author: document.querySelector('meta[name="author"]')?.content || 'HubSpot Theme',
            keywords: document.querySelector('meta[name="keywords"]')?.content || '',
            creator: 'HubSpot Theme PDF Generator'
          });
          
          // Add content
          let position = 0;
          const imgData = canvas.toDataURL('image/jpeg', quality);
          
          pdf.addImage(imgData, 'JPEG', 0, position, imgWidth, imgHeight);
          heightLeft -= pageHeight;
          
          // Add additional pages if needed
          while (heightLeft >= 0) {
            position = heightLeft - imgHeight;
            pdf.addPage();
            pdf.addImage(imgData, 'JPEG', 0, position, imgWidth, imgHeight);
            heightLeft -= pageHeight;
          }
          
          // Save PDF
          pdf.save(filename);
          
          // Reset button
          resetButton(button, originalText);
        }).catch(error => {
          console.error('PDF generation failed:', error);
          resetButton(button, originalText);
        });
      }
      
      function resetButton(button, text) {
        if (button) {
          button.textContent = text;
          button.disabled = false;
        }
      }
      
      // Create PDF Toolbar
      function createPDFToolbar(container) {
        container.innerHTML = `
          <div class="pdf-export-toolbar">
            <h4>Export Options</h4>
            <div class="pdf-options">
              <div class="pdf-option">
                <label for="pdf-orientation">Orientation:</label>
                <select id="pdf-orientation">
                  <option value="portrait">Portrait</option>
                  <option value="landscape">Landscape</option>
                </select>
              </div>
              <div class="pdf-option">
                <label for="pdf-format">Format:</label>
                <select id="pdf-format">
                  <option value="a4">A4</option>
                  <option value="letter">Letter</option>
                  <option value="legal">Legal</option>
                </select>
              </div>
              <div class="pdf-option">
                <label for="pdf-quality">Quality:</label>
                <select id="pdf-quality">
                  <option value="0.75">Standard</option>
                  <option value="0.95" selected>High</option>
                  <option value="1">Maximum</option>
                </select>
              </div>
            </div>
            <button id="pdf-export-btn" class="pdf-export-btn">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                <polyline points="14 2 14 8 20 8"></polyline>
                <line x1="16" y1="13" x2="8" y2="13"></line>
                <line x1="16" y1="17" x2="8" y2="17"></line>
                <polyline points="10 9 9 9 8 9"></polyline>
              </svg>
              Export as PDF
            </button>
          </div>
        `;
        
        const exportBtn = container.querySelector('#pdf-export-btn');
        const orientationSelect = container.querySelector('#pdf-orientation');
        const formatSelect = container.querySelector('#pdf-format');
        const qualitySelect = container.querySelector('#pdf-quality');
        
        exportBtn.addEventListener('click', function() {
          const originalText = this.innerHTML;
          this.innerHTML = '<span class="spinner"></span> Generating...';
          this.disabled = true;
          
          generatePDF({
            element: document.querySelector('.body-container-wrapper'),
            filename: (document.title || 'document').replace(/[^a-z0-9]/gi, '_').toLowerCase() + '.pdf',
            title: document.title,
            orientation: orientationSelect.value,
            format: formatSelect.value,
            quality: parseFloat(qualitySelect.value),
            button: this,
            originalText: originalText
          });
        });
      }
    })();
  </script>
  
  {# PDF Export Styles #}
  <style>
    .generate-pdf,
    .pdf-export-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.75rem 1.5rem;
      background: #dc3545;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
      font-weight: 500;
      transition: background 0.2s;
    }
    
    .generate-pdf:hover,
    .pdf-export-btn:hover {
      background: #c82333;
    }
    
    .generate-pdf:disabled,
    .pdf-export-btn:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }
    
    .pdf-export-toolbar {
      background: #f8f9fa;
      border: 1px solid #dee2e6;
      border-radius: 8px;
      padding: 1.5rem;
      margin: 2rem 0;
    }
    
    .pdf-export-toolbar h4 {
      margin-top: 0;
      margin-bottom: 1rem;
      color: #333;
    }
    
    .pdf-options {
      display: flex;
      gap: 1rem;
      margin-bottom: 1rem;
      flex-wrap: wrap;
    }
    
    .pdf-option {
      flex: 1;
      min-width: 150px;
    }
    
    .pdf-option label {
      display: block;
      margin-bottom: 0.25rem;
      font-weight: 500;
      font-size: 14px;
    }
    
    .pdf-option select {
      width: 100%;
      padding: 0.5rem;
      border: 1px solid #ced4da;
      border-radius: 4px;
      background: white;
    }
    
    @media print {
      .no-print,
      .pdf-toolbar,
      .generate-pdf,
      .pdf-export-toolbar {
        display: none !important;
      }
    }
    
    .spinner {
      display: inline-block;
      width: 16px;
      height: 16px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      border-top-color: white;
      animation: spin 0.6s linear infinite;
    }
    
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
  </style>
{% endif %}