{% extends 'base.html' %}

{% block title %}Auswertung Feedback – {{ event.name }}{% endblock %}

{% block content %}
{# Event information card #}
{% include 'components/event_info_card.html' %}

<div class="mb-4">
    <a href="{{ url_for('events.select_feedback_type', event_id=event.id) }}" class="btn btn-secondary btn-sm">Zurück zur Feedbackübersicht</a>
</div>

{# Table of contents #}
{% include 'components/feedback_toc.html' %}

{# Submission count tracking component #}
{% include 'components/submission_tracking.html' %}

{# People count charts and tables #}
{% include 'components/people_count_display.html' %}

<hr class="mb-4">

{# Feedback count and percentage charts #}
{% include 'components/feedback_count_display.html' %}

{# Talk feedback count charts #}
{% include 'components/talk_feedback_count_display.html' %}

{# Load Chart.js and helpers BEFORE rendering any charts #}
{% include 'components/imports/chartjs.html' %}
<script src="{{ url_for('static', filename='js/chart_helpers.js') }}"></script>
<script src="{{ url_for('static', filename='js/event_colors.js') }}"></script>

{# Labels for scales (4 – 1) #}
{% set scale_labels = {
    1: 'auf jeden Fall',
    2: 'eher ja',
    3: 'eher nein',
    4: 'auf keinen Fall'
} %}

{# Helper macro for per-event table #}
{% macro scale_table(counts) %}
<table class="table table-sm table-bordered mb-0">
    <thead>
        <tr>
            <th>Antwort</th>
            <th class="text-end">Anzahl</th>
        </tr>
    </thead>
    <tbody>
        {% for scale in [1, 2, 3, 4] %}
        <tr>
            <td>{{ scale_labels[scale] }}</td>
            <td class="text-end">{{ counts[scale] }}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>
{% endmacro %}

{# Helper macro for cross-event table #}
{% macro cross_event_table(compare_for_question, events_with_feedback) %}
<table class="table table-sm table-bordered mb-0">
    <thead>
        <tr>
            <th>Event</th>
            {% for scale in [1, 2, 3, 4] %}
            <th class="text-end">{{ scale_labels[scale] }}</th>
            {% endfor %}
        </tr>
    </thead>
    <tbody>
        {% for ev in events_with_feedback %}
        {% set counts = compare_for_question.get(ev.id) or {} %}
        <tr>
            <td>{{ ev.name }}</td>
            {% for scale in [1, 2, 3, 4] %}
            <td class="text-end">{{ counts.get(scale, 0) }}</td>
            {% endfor %}
        </tr>
        {% endfor %}
    </tbody>
</table>
{% endmacro %}

<div class="mb-5">
    <h2 class="h4">Hat dir die NooK gefallen?</h2>
    <div class="row g-3 align-items-stretch">
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-header">Dieses Event</div>
                <div class="card-body">
                    <canvas id="chart-like-event" height="180"></canvas>
                </div>
                <div class="card-footer p-0">
                    {{ scale_table(event_counts['like']) }}
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-header">Vergleich mit anderen Events</div>
                <div class="card-body">
                    <canvas id="chart-like-compare" height="180"></canvas>
                </div>
                <div class="card-footer p-0">
                    {{ cross_event_table(compare_counts['like'], events_with_feedback) }}
                </div>
            </div>
        </div>
    </div>
</div>

<div class="mb-5">
    <h2 class="h4">Würdest du noch einmal wiederkommen?</h2>
    <div class="row g-3 align-items-stretch">
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-header">Dieses Event</div>
                <div class="card-body">
                    <canvas id="chart-return-event" height="180"></canvas>
                </div>
                <div class="card-footer p-0">
                    {{ scale_table(event_counts['return']) }}
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-header">Vergleich mit anderen Events</div>
                <div class="card-body">
                    <canvas id="chart-return-compare" height="180"></canvas>
                </div>
                <div class="card-footer p-0">
                    {{ cross_event_table(compare_counts['return'], events_with_feedback) }}
                </div>
            </div>
        </div>
    </div>
</div>

<div class="mb-5">
    <h2 class="h4">Würdest du dich an der nächsten NooK beteiligen?</h2>
    <div class="row g-3 align-items-stretch">
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-header">Dieses Event</div>
                <div class="card-body">
                    <canvas id="chart-participate-event" height="180"></canvas>
                </div>
                <div class="card-footer p-0">
                    {{ scale_table(event_counts['participate']) }}
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-header">Vergleich mit anderen Events</div>
                <div class="card-body">
                    <canvas id="chart-participate-compare" height="180"></canvas>
                </div>
                <div class="card-footer p-0">
                    {{ cross_event_table(compare_counts['participate'], events_with_feedback) }}
                </div>
            </div>
        </div>
    </div>
</div>

{# How Heard Section #}
{% include 'components/how_heard_display.html' %}

<div class="mb-5">
    <h2 class="h4">Freitext-Antworten (Event)</h2>

    {% if do_more_answers %}
    <div class="mb-3">
        <h3 class="h6">Was sollten wir nochmal machen, mehr machen, wieder machen?</h3>
        <ul>
        {% for text in do_more_answers %}
            <li>{{ text }}</li>
        {% endfor %}
        </ul>
    </div>
    {% endif %}

    {% if do_less_answers %}
    <div class="mb-3">
        <h3 class="h6">Was sollen wir anders machen, weniger machen, nie wieder tun?</h3>
        <ul>
        {% for text in do_less_answers %}
            <li>{{ text }}</li>
        {% endfor %}
        </ul>
    </div>
    {% endif %}

    {% if topics_answers %}
    <div class="mb-3">
        <h3 class="h6">An welchen anderen Themen oder weiterführenden Vorträgen wärst du interessiert?</h3>
        <ul>
        {% for text in topics_answers %}
            <li>{{ text }}</li>
        {% endfor %}
        </ul>
    </div>
    {% endif %}

    {% if free_text_answers %}
    <div class="mb-3">
        <h3 class="h6">Freitext</h3>
        <ul>
        {% for text in free_text_answers %}
            <li>{{ text }}</li>
        {% endfor %}
        </ul>
    </div>
    {% endif %}
</div>

{% if speaker_feedback_texts %}
<div class="mb-5">
    <h2 class="h4">Speaker-Feedback</h2>
    <ul>
    {% for text in speaker_feedback_texts %}
        <li>{{ text }}</li>
    {% endfor %}
    </ul>
</div>
{% endif %}

{% if talk_feedback_by_talk %}
<div class="mb-5">
    <h2 class="h4">Talk-Feedback</h2>

    {% for talk_id, bucket in talk_feedback_by_talk.items() %}
    {% set talk = bucket.talk %}
    {% set feedback_data = bucket %}
    {% set chart_prefix = 'talk-' ~ talk_id %}
    {% include 'components/talk_feedback_display.html' %}
    {% include 'components/talk_feedback_charts.html' %}
    {% endfor %}
</div>
{% endif %}

{% include 'components/submission_charts.html' %}
{% include 'components/people_count_charts.html' %}
{% include 'components/feedback_count_charts.html' %}
{% include 'components/talk_feedback_count_charts.html' %}
{% include 'components/how_heard_charts.html' %}
<script>
  (function () {
    // Helper functions loaded from chart_helpers.js
    // Data for event feedback charts
    const eventCounts = {{ event_counts|tojson }};
    const compareCounts = {{ compare_counts|tojson }};
    const eventsMeta = {{ events_meta|tojson }};

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

      const data = scaleOrder.map((s) => counts[s] || 0);

      new Chart(ctx, {
        type: 'bar',
        data: {
          labels: scaleOrder.map((s) => scaleLabels[s] + ' (' + s + ')'),
          datasets: [{
            label: 'Anzahl',
            data: data,
            backgroundColor: scaleOrder.map((_, i) => makeColor(i)),
          }]
        },
        options: {
          responsive: true,
          plugins: {
            legend: { display: false },
          },
          scales: {
            y: {
              beginAtZero: true,
              ticks: { precision: 0 }
            }
          }
        }
      });
    }

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

      // Group by scale answer, with one bar per event
      const labels = scaleOrder.map((s) => scaleLabels[s] + ' (' + s + ')');
      const datasets = [];

      // Create one dataset per event
      eventsMeta.forEach((ev) => {
        const evCounts = compareForQuestion[String(ev.id)] || compareForQuestion[ev.id] || {};
        const data = scaleOrder.map((scale) => evCounts[scale] || 0);
        const color = getEventColor(ev);
        
        datasets.push({
          label: ev.name,
          data: data,
          backgroundColor: color,
          borderColor: color,
          borderWidth: 1
        });
      });

      new Chart(ctx, {
        type: 'bar',
        data: { labels, datasets },
        options: {
          responsive: true,
          plugins: {
            legend: { 
              position: 'bottom',
              display: true
            },
          },
          scales: {
            x: { stacked: false },  // Groups bars side by side
            y: {
              beginAtZero: true,
              ticks: { precision: 0 },
            }
          }
        }
      });
    }

    // Helper function for rendering simple count charts (used for talk feedback)
    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 } }
          }
        }
      });
    }

    renderEventChart('chart-like-event', eventCounts.like);
    renderEventChart('chart-return-event', eventCounts.return);
    renderEventChart('chart-participate-event', eventCounts.participate);

    renderCompareChart('chart-like-compare', compareCounts.like);
    renderCompareChart('chart-return-compare', compareCounts.return);
    renderCompareChart('chart-participate-compare', compareCounts.participate);
  })();
</script>
{% endblock %}