{# JavaScript for rendering feedback count and percentage charts #}
{# Expects: eventsMeta, event_feedback_count, feedback_counts_by_event, event, max_attendee_count, feedback_percentage, feedback_percentage_by_event #}
{# Requires: chart_helpers.js to be loaded first (from static/js/) #}

<script>
(function() {
  // Use global helper functions from chart_helpers.js
  
  // Data for feedback count charts
  const eventsMeta = {{ events_meta|tojson }};
  const feedbackCountsByEvent = {{ feedback_counts_by_event|tojson }};
  const eventFeedbackCount = {{ event_feedback_count|tojson }};

  function renderCountChart(canvasId, count) {
      const ctx = document.getElementById(canvasId);
      if (!ctx) return;
      new Chart(ctx, {
        type: 'bar',
        data: {
          labels: ['Feedback-Einträge'],
          datasets: [{
            label: 'Anzahl',
            data: [count],
            backgroundColor: makeColor(0),
          }],
        },
        options: {
          responsive: true,
          plugins: { legend: { display: false } },
          scales: {
            y: { beginAtZero: true, ticks: { precision: 0 } }
          }
        }
      });
    }

    function renderCountCompareChart(canvasId, countsByEvent) {
      const ctx = document.getElementById(canvasId);
      if (!ctx) return;

      const labels = [];
      const data = [];
      const colors = [];
      for (const ev of eventsMeta) {
        labels.push(ev.name);
        const v = countsByEvent[String(ev.id)] ?? countsByEvent[ev.id] ?? 0;
        data.push(v);
        // Use event color if available, otherwise fallback to palette
        const color = ev.color ? hexToRgba(ev.color) : makeColor(colors.length);
        colors.push(color);
      }

      new Chart(ctx, {
        type: 'bar',
        data: {
          labels,
          datasets: [{
            label: 'Feedback-Einträge',
            data,
            backgroundColor: colors,
          }],
        },
        options: {
          responsive: true,
          plugins: { legend: { position: 'bottom' } },
          scales: {
            y: { beginAtZero: true, ticks: { precision: 0 } }
          }
        }
      });
    }

    // Render feedback count charts
    renderCountChart('chart-count-event', {{ event_feedback_count|tojson }});
    renderCountCompareChart('chart-count-compare', {{ feedback_counts_by_event|tojson }});

    // Feedback percentage charts (feedback entries as % of max attendees)
    {% if max_attendee_count > 0 %}
    const eventColor = '{{ event.color }}';
    const feedbackPercentageCtx = document.getElementById('chart-feedback-percentage');
    if (feedbackPercentageCtx) {
      new Chart(feedbackPercentageCtx, {
        type: 'bar',
        data: {
          labels: ['Beteiligungsquote'],
          datasets: [{
            label: 'Prozent der Besucher:innen',
            data: [{{ feedback_percentage }}],
            backgroundColor: eventColor ? hexToRgba(eventColor) : makeColor(0),
          }],
        },
        options: {
          responsive: true,
          plugins: { 
            legend: { display: false }
          },
          scales: {
            y: { 
              beginAtZero: true,
              max: 100,
              ticks: {
                callback: function(value) {
                  return value + '%';
                }
              },
              title: {
                display: true,
                text: 'Prozent'
              }
            }
          }
        }
      });
    }
    {% endif %}

    {% if feedback_percentage_by_event %}
    const feedbackPercentageCompareCtx = document.getElementById('chart-feedback-percentage-compare');
    if (feedbackPercentageCompareCtx) {
      const feedbackPercentageData = {{ feedback_percentage_by_event|tojson }};
      const labels = [];
      const data = [];
      const colors = [];
      
      // Sort by event name
      const sortedData = Object.entries(feedbackPercentageData).sort((a, b) => 
        a[1].event_name.localeCompare(b[1].event_name)
      );
      
      for (const [evId, evData] of sortedData) {
        labels.push(evData.event_name);
        data.push(evData.percentage);
        const color = evData.event_color ? hexToRgba(evData.event_color) : makeColor(colors.length);
        colors.push(color);
      }
      
      new Chart(feedbackPercentageCompareCtx, {
        type: 'bar',
        data: {
          labels,
          datasets: [{
            label: 'Beteiligungsquote (%)',
            data,
            backgroundColor: colors,
          }],
        },
        options: {
          responsive: true,
          plugins: { 
            legend: { display: false }
          },
          scales: {
            y: { 
              beginAtZero: true,
              max: 100,
              ticks: {
                callback: function(value) {
                  return value + '%';
                }
              },
              title: {
                display: true,
                text: 'Prozent'
              }
            }
          }
        }
      });
    }
    {% endif %}

  // Execute chart rendering
  renderCountChart('chart-count-event', eventFeedbackCount);
  renderCountCompareChart('chart-count-compare', feedbackCountsByEvent);
})();
</script>