{# Chart.js Feature - Include this partial where data visualization is needed #}
{# Usage: {% include "../../includes/features/charts.html" %} #}

{% if enable_charts %}
  {# Chart.js - Loaded only when chart containers are detected #}
  <script>
    // Lazy load Chart.js using Intersection Observer for maximum performance
    (function() {
      let chartjsLoaded = false;
      let chartjsLoading = false;
      let pendingCharts = [];
      
      // Find all chart containers
      const chartContainers = document.querySelectorAll('.chart-container, canvas[data-chart], [data-chart-config]');
      
      if (chartContainers.length === 0) return; // Exit if no charts needed
      
      // Use Intersection Observer to load Chart.js only when a chart enters viewport
      if ('IntersectionObserver' in window) {
        const chartObserver = new IntersectionObserver((entries) => {
          entries.forEach(entry => {
            if (entry.isIntersecting) {
              if (!chartjsLoaded && !chartjsLoading) {
                loadChartJS();
              } else if (chartjsLoaded) {
                initializeChart(entry.target);
              } else {
                pendingCharts.push(entry.target);
              }
              chartObserver.unobserve(entry.target);
            }
          });
        }, {
          rootMargin: '100px' // Start loading 100px before chart enters viewport
        });
        
        chartContainers.forEach(container => {
          chartObserver.observe(container);
        });
      } else {
        // Fallback: Load immediately if Intersection Observer not supported
        loadChartJS();
      }
      
      function loadChartJS() {
        chartjsLoading = true;
        
        // Load Chart.js library
        const chartScript = document.createElement('script');
        chartScript.src = 'https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js';
        chartScript.async = true;
        
        chartScript.onload = function() {
          chartjsLoaded = true;
          chartjsLoading = false;
          
          // Initialize any pending charts
          pendingCharts.forEach(container => initializeChart(container));
          pendingCharts = [];
          
          // Initialize visible charts
          chartContainers.forEach(container => {
            if (isElementInViewport(container)) {
              initializeChart(container);
            }
          });
          
          // Setup chart builder if element exists
          const chartBuilder = document.getElementById('chart-builder');
          if (chartBuilder) {
            createChartBuilder(chartBuilder);
          }
        };
        
        document.head.appendChild(chartScript);
      }
      
      function isElementInViewport(el) {
        const rect = el.getBoundingClientRect();
        return (
          rect.top >= 0 &&
          rect.left >= 0 &&
          rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
          rect.right <= (window.innerWidth || document.documentElement.clientWidth)
        );
      }
      
      function initializeChart(container) {
        if (container.dataset.chartInitialized === 'true') return;
        
        let canvas = container;
        if (container.tagName !== 'CANVAS') {
          canvas = container.querySelector('canvas');
          if (!canvas) {
            canvas = document.createElement('canvas');
            container.appendChild(canvas);
          }
        }
        
        // Get chart configuration
        const config = container.dataset.chartConfig ? 
          JSON.parse(container.dataset.chartConfig) : 
          getDefaultConfig(container);
        
        // Add responsive options
        if (!config.options) config.options = {};
        config.options.responsive = true;
        config.options.maintainAspectRatio = container.dataset.maintainAspect !== 'false';
        
        // Add animations only for first render
        config.options.animation = {
          duration: container.dataset.animationDuration || 750,
          easing: 'easeInOutQuart'
        };
        
        // Create chart
        const chart = new Chart(canvas, config);
        
        // Store chart instance for updates
        container.chartInstance = chart;
        container.dataset.chartInitialized = 'true';
        
        // Add resize observer for better responsiveness
        if ('ResizeObserver' in window) {
          const resizeObserver = new ResizeObserver(() => {
            chart.resize();
          });
          resizeObserver.observe(container);
        }
      }
      
      function getDefaultConfig(container) {
        const type = container.dataset.chartType || 'bar';
        const labels = container.dataset.chartLabels ? 
          container.dataset.chartLabels.split(',') : 
          ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'];
        const data = container.dataset.chartData ? 
          container.dataset.chartData.split(',').map(Number) : 
          [12, 19, 3, 5, 2, 3];
        const label = container.dataset.chartLabel || 'Dataset';
        const backgroundColor = container.dataset.chartColors ? 
          container.dataset.chartColors.split(',') : 
          ['rgba(54, 162, 235, 0.5)'];
        const borderColor = container.dataset.chartBorderColors ? 
          container.dataset.chartBorderColors.split(',') : 
          ['rgba(54, 162, 235, 1)'];
        
        return {
          type: type,
          data: {
            labels: labels,
            datasets: [{
              label: label,
              data: data,
              backgroundColor: backgroundColor.length === 1 ? backgroundColor[0] : backgroundColor,
              borderColor: borderColor.length === 1 ? borderColor[0] : borderColor,
              borderWidth: 1
            }]
          },
          options: {
            scales: type !== 'pie' && type !== 'doughnut' ? {
              y: {
                beginAtZero: true
              }
            } : undefined,
            plugins: {
              legend: {
                display: container.dataset.showLegend !== 'false'
              },
              tooltip: {
                enabled: container.dataset.showTooltip !== 'false'
              }
            }
          }
        };
      }
      
      // Chart Builder Widget
      function createChartBuilder(container) {
        container.innerHTML = `
          <div class="chart-builder-widget">
            <h3>Interactive Chart Builder</h3>
            <div class="chart-builder-controls">
              <div class="chart-control">
                <label for="chart-type">Chart Type:</label>
                <select id="chart-type">
                  <option value="bar">Bar</option>
                  <option value="line">Line</option>
                  <option value="pie">Pie</option>
                  <option value="doughnut">Doughnut</option>
                  <option value="radar">Radar</option>
                  <option value="polarArea">Polar Area</option>
                </select>
              </div>
              <div class="chart-control">
                <label for="chart-data-input">Data (comma-separated):</label>
                <input type="text" id="chart-data-input" value="10,20,30,25,35,40" />
              </div>
              <div class="chart-control">
                <label for="chart-labels-input">Labels (comma-separated):</label>
                <input type="text" id="chart-labels-input" value="Jan,Feb,Mar,Apr,May,Jun" />
              </div>
              <button id="update-chart-btn">Update Chart</button>
            </div>
            <div class="chart-preview">
              <canvas id="builder-chart"></canvas>
            </div>
            <div class="chart-export">
              <button id="export-chart-image">Export as Image</button>
              <button id="export-chart-data">Export Data (CSV)</button>
            </div>
          </div>
        `;
        
        let builderChart = null;
        const canvas = container.querySelector('#builder-chart');
        const typeSelect = container.querySelector('#chart-type');
        const dataInput = container.querySelector('#chart-data-input');
        const labelsInput = container.querySelector('#chart-labels-input');
        const updateBtn = container.querySelector('#update-chart-btn');
        const exportImageBtn = container.querySelector('#export-chart-image');
        const exportDataBtn = container.querySelector('#export-chart-data');
        
        function updateChart() {
          const data = dataInput.value.split(',').map(v => parseFloat(v.trim()));
          const labels = labelsInput.value.split(',').map(l => l.trim());
          const type = typeSelect.value;
          
          const config = {
            type: type,
            data: {
              labels: labels,
              datasets: [{
                label: 'Dataset',
                data: data,
                backgroundColor: [
                  'rgba(255, 99, 132, 0.5)',
                  'rgba(54, 162, 235, 0.5)',
                  'rgba(255, 206, 86, 0.5)',
                  'rgba(75, 192, 192, 0.5)',
                  'rgba(153, 102, 255, 0.5)',
                  'rgba(255, 159, 64, 0.5)'
                ],
                borderColor: [
                  'rgba(255, 99, 132, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
                  'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
              }]
            },
            options: {
              responsive: true,
              plugins: {
                legend: {
                  position: 'top',
                },
                title: {
                  display: true,
                  text: 'Chart Builder Preview'
                }
              },
              scales: type !== 'pie' && type !== 'doughnut' && type !== 'polarArea' ? {
                y: {
                  beginAtZero: true
                }
              } : undefined
            }
          };
          
          if (builderChart) {
            builderChart.destroy();
          }
          
          builderChart = new Chart(canvas, config);
        }
        
        updateBtn.addEventListener('click', updateChart);
        
        exportImageBtn.addEventListener('click', () => {
          const link = document.createElement('a');
          link.download = 'chart.png';
          link.href = canvas.toDataURL();
          link.click();
        });
        
        exportDataBtn.addEventListener('click', () => {
          const labels = labelsInput.value;
          const data = dataInput.value;
          const csv = `Labels,Values\n${labels.split(',').map((l, i) => 
            `${l.trim()},${data.split(',')[i].trim()}`).join('\n')}`;
          
          const blob = new Blob([csv], { type: 'text/csv' });
          const link = document.createElement('a');
          link.download = 'chart-data.csv';
          link.href = URL.createObjectURL(blob);
          link.click();
        });
        
        // Initialize with default chart
        setTimeout(updateChart, 100);
      }
      
      // Public API for updating charts dynamically
      window.updateChart = function(selector, newData) {
        const container = document.querySelector(selector);
        if (container && container.chartInstance) {
          if (newData.data) {
            container.chartInstance.data = newData.data;
          }
          if (newData.options) {
            container.chartInstance.options = { ...container.chartInstance.options, ...newData.options };
          }
          container.chartInstance.update();
        }
      };
    })();
  </script>
  
  {# Chart Styles #}
  <style>
    .chart-container {
      position: relative;
      padding: 1rem;
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      margin: 1rem 0;
    }
    
    .chart-container canvas {
      max-width: 100%;
      height: auto !important;
    }
    
    .chart-builder-widget {
      background: #f8f9fa;
      border-radius: 8px;
      padding: 1.5rem;
      margin: 2rem 0;
    }
    
    .chart-builder-widget h3 {
      margin-top: 0;
      margin-bottom: 1rem;
      color: #333;
    }
    
    .chart-builder-controls {
      display: grid;
      gap: 1rem;
      margin-bottom: 1.5rem;
    }
    
    .chart-control label {
      display: block;
      margin-bottom: 0.25rem;
      font-weight: 500;
      font-size: 14px;
    }
    
    .chart-control input,
    .chart-control select {
      width: 100%;
      padding: 0.5rem;
      border: 1px solid #ced4da;
      border-radius: 4px;
    }
    
    #update-chart-btn {
      padding: 0.5rem 1.5rem;
      background: #007bff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
      transition: background 0.2s;
    }
    
    #update-chart-btn:hover {
      background: #0056b3;
    }
    
    .chart-preview {
      background: white;
      padding: 1rem;
      border-radius: 4px;
      margin-bottom: 1rem;
    }
    
    .chart-export {
      display: flex;
      gap: 1rem;
    }
    
    .chart-export button {
      flex: 1;
      padding: 0.5rem 1rem;
      background: #28a745;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: background 0.2s;
    }
    
    .chart-export button:hover {
      background: #218838;
    }
    
    /* Loading skeleton for charts */
    .chart-container:not([data-chart-initialized="true"]) {
      min-height: 300px;
      background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
      background-size: 200% 100%;
      animation: loading 1.5s infinite;
    }
    
    @keyframes loading {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }
  </style>
{% endif %}