{# JavaScript for rendering "How Heard" charts #}
{# Expects: how_heard_counts, how_heard_by_event, all_how_heard_labels, top_10_labels #}
{# Requires: Chart.js to be loaded first #}

{% if how_heard_counts %}
<script>
  // How Heard - Current Event Chart
  (function() {
    const ctx = document.getElementById('howHeardCurrentChart');
    if (ctx) {
      const labels = {{ how_heard_counts.keys() | list | tojson }};
      const data = {{ how_heard_counts.values() | list | tojson }};
      
      // Filter out empty labels
      const filtered = labels.map((label, i) => ({label, value: data[i]}))
                             .filter(item => item.value > 0)
                             .sort((a, b) => b.value - a.value);
      
      new Chart(ctx, {
        type: 'bar',
        data: {
          labels: filtered.map(item => item.label),
          datasets: [{
            label: 'Anzahl Nennungen',
            data: filtered.map(item => item.value),
            backgroundColor: '#4bc0c0',
            borderColor: '#36a2eb',
            borderWidth: 1
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              display: false
            },
            title: {
              display: false
            }
          },
          scales: {
            y: {
              beginAtZero: true,
              ticks: { precision: 0 }
            }
          }
        }
      });
    }
  })();

  // How Heard - Comparison Chart (Percentages)
  (function() {
    const ctx = document.getElementById('howHeardCompareChart');
    if (ctx) {
      const allLabels = {{ all_how_heard_labels | tojson }};
      const eventData = {{ how_heard_by_event | tojson }};
      
      // Sort events by date/name
      const sortedEvents = Object.values(eventData).sort((a, b) => {
        return a.event_name.localeCompare(b.event_name);
      });
      
      // Create datasets for each event
      const datasets = sortedEvents.map((evtData, index) => {
        const percentages = allLabels.map(label => 
          evtData.percentages[label] || 0
        );
        
        const colors = [
          '#4bc0c0', '#ff6384', '#ffce56', '#36a2eb', 
          '#9966ff', '#ff9f40', '#c9cbcf', '#4dc9f6'
        ];
        
        return {
          label: evtData.event_name,
          data: percentages,
          backgroundColor: colors[index % colors.length],
          borderWidth: 1
        };
      });
      
      new Chart(ctx, {
        type: 'bar',
        data: {
          labels: allLabels,
          datasets: datasets
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              display: true,
              position: 'top'
            },
            title: {
              display: false
            },
            tooltip: {
              callbacks: {
                label: function(context) {
                  return context.dataset.label + ': ' + context.parsed.y.toFixed(1) + '%';
                }
              }
            }
          },
          scales: {
            x: {
              ticks: {
                autoSkip: false,
                maxRotation: 45,
                minRotation: 45
              }
            },
            y: {
              beginAtZero: true,
              max: 100,
              ticks: {
                callback: function(value) {
                  return value + '%';
                }
              },
              title: {
                display: true,
                text: 'Prozent der Antworten'
              }
            }
          }
        }
      });
    }
  })();

  // How Heard - Trend Chart (Top 10 Over Time)
  (function() {
    const ctx = document.getElementById('howHeardTrendChart');
    if (ctx) {
      const top10Labels = {{ top_10_labels | tojson }};
      const eventData = {{ how_heard_by_event | tojson }};
      
      // Sort events by name (chronologically)
      const sortedEvents = Object.values(eventData).sort((a, b) => {
        return a.event_name.localeCompare(b.event_name);
      });
      
      const eventNames = sortedEvents.map(evt => evt.event_name);
      
      // Color palette for lines
      const colors = [
        '#4bc0c0', '#ff6384', '#ffce56', '#36a2eb', 
        '#9966ff', '#ff9f40', '#c9cbcf', '#4dc9f6',
        '#e74c3c', '#2ecc71'
      ];
      
      // Create a dataset for each top 10 label
      const datasets = top10Labels.map((label, index) => {
        const dataPoints = sortedEvents.map(evt => 
          evt.percentages[label] || 0
        );
        
        return {
          label: label,
          data: dataPoints,
          borderColor: colors[index % colors.length],
          backgroundColor: colors[index % colors.length] + '33', // Add transparency
          borderWidth: 2,
          fill: false,
          tension: 0.3,
          pointRadius: 4,
          pointHoverRadius: 6
        };
      });
      
      new Chart(ctx, {
        type: 'line',
        data: {
          labels: eventNames,
          datasets: datasets
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          interaction: {
            mode: 'index',
            intersect: false
          },
          plugins: {
            legend: {
              display: true,
              position: 'right',
              labels: {
                boxWidth: 15,
                padding: 10
              }
            },
            title: {
              display: false
            },
            tooltip: {
              callbacks: {
                label: function(context) {
                  return context.dataset.label + ': ' + context.parsed.y.toFixed(1) + '%';
                }
              }
            }
          },
          scales: {
            x: {
              title: {
                display: true,
                text: 'Event'
              },
              ticks: {
                autoSkip: false,
                maxRotation: 45,
                minRotation: 45
              }
            },
            y: {
              beginAtZero: true,
              max: 100,
              ticks: {
                callback: function(value) {
                  return value + '%';
                }
              },
              title: {
                display: true,
                text: 'Prozent der Antworten'
              }
            }
          }
        }
      });
    }
  })();
</script>
{% endif %}