{% extends 'base.html' %}

{% block title %}Talk-Feedback – {{ event.name }}{% endblock %}

{% block content %}
<h1 class="h3 mb-3">Talk-Feedback für: {{ event.name }}</h1>

<form method="post" class="talk-feedback-form" autocomplete="off">
    <div class="mb-4">
        <div class="row g-3 align-items-start">
            <div class="col-md-4">
                <label for="talkFilter" class="form-label fw-bold mb-0">Talk</label>
                <div class="form-text">Tippen zum Filtern. Wenn nur noch ein Talk übrig bleibt, wird er automatisch ausgewählt.</div>
            </div>
            <div class="col-md-8">
                <input type="hidden" id="talk_id" name="talk_id" value="{{ selected_talk_id or '' }}">
                <input type="text" id="talkFilter" class="form-control mb-2" placeholder="Talk suchen..." value="{{ initial_talk_filter or '' }}">
                <div class="border rounded p-2" style="max-height: 240px; overflow-y: auto;" id="talkList">
                    {% for talk in talks %}
                    <button type="button"
                            class="btn btn-sm w-100 text-start mb-1 talk-item{% if selected_talk_id == talk.id %} btn-primary active{% else %} btn-outline-secondary{% endif %}"
                            data-talk-id="{{ talk.id }}">
                        {{ talk.title }}
                    </button>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

    <div class="mb-4 feedback-question" data-question-index="0">
        <div class="row g-3 align-items-start">
            <div class="col-md-4">
                <label class="form-label fw-bold mb-0">War der Vortrag interessant?</label>
                <div class="form-text">Tasten 1–4 wählen, Shift+↓ vor, Shift+↑ zurück, Enter bestätigt.</div>
            </div>
            <div class="col-md-8">
                <div class="d-flex flex-wrap gap-2" role="group" aria-label="Interessant-Skala">
                    {% for value, label in [(1, 'auf jeden Fall'), (2, 'eher ja'), (3, 'eher nein'), (4, 'auf keinen Fall')] %}
                    <div>
                        <input type="radio" class="btn-check" name="interesting_scale" id="interesting_{{ value }}" value="{{ value }}" autocomplete="off" {% if feedback and feedback.interesting_scale == value %}checked{% endif %}>
                        <label class="btn btn-outline-primary" for="interesting_{{ value }}">{{ value }} – {{ label }}</label>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

    <div class="mb-4 feedback-question" data-question-index="1">
        <div class="row g-3 align-items-start">
            <div class="col-md-4">
                <label class="form-label fw-bold mb-0">Hat der Vortragende das Thema beherrscht?</label>
            </div>
            <div class="col-md-8">
                <div class="d-flex flex-wrap gap-2" role="group" aria-label="Beherrschung-Skala">
                    {% for value, label in [(1, 'auf jeden Fall'), (2, 'eher ja'), (3, 'eher nein'), (4, 'auf keinen Fall')] %}
                    <div>
                        <input type="radio" class="btn-check" name="mastery_scale" id="mastery_{{ value }}" value="{{ value }}" autocomplete="off" {% if feedback and feedback.mastery_scale == value %}checked{% endif %}>
                        <label class="btn btn-outline-primary" for="mastery_{{ value }}">{{ value }} – {{ label }}</label>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

    <div class="mb-4 feedback-question" data-question-index="2">
        <div class="row g-3 align-items-start">
            <div class="col-md-4">
                <label class="form-label fw-bold mb-0">Konnten Fragen beantwortet werden?</label>
            </div>
            <div class="col-md-8">
                <div class="d-flex flex-wrap gap-2" role="group" aria-label="Fragen-Skala">
                    {% for value, label in [(1, 'auf jeden Fall'), (2, 'eher ja'), (3, 'eher nein'), (4, 'auf keinen Fall')] %}
                    <div>
                        <input type="radio" class="btn-check" name="questions_scale" id="questions_{{ value }}" value="{{ value }}" autocomplete="off" {% if feedback and feedback.questions_scale == value %}checked{% endif %}>
                        <label class="btn btn-outline-primary" for="questions_{{ value }}">{{ value }} – {{ label }}</label>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

    <div class="mb-4 feedback-question" data-question-index="3">
        <div class="row g-3 align-items-start">
            <div class="col-md-4">
                <label class="form-label fw-bold mb-0">War das Material (Folien o.ä.) ansprechend?</label>
            </div>
            <div class="col-md-8">
                <div class="d-flex flex-wrap gap-2" role="group" aria-label="Material-Skala">
                    {% for value, label in [(1, 'auf jeden Fall'), (2, 'eher ja'), (3, 'eher nein'), (4, 'auf keinen Fall')] %}
                    <div>
                        <input type="radio" class="btn-check" name="material_scale" id="material_{{ value }}" value="{{ value }}" autocomplete="off" {% if feedback and feedback.material_scale == value %}checked{% endif %}>
                        <label class="btn btn-outline-primary" for="material_{{ value }}">{{ value }} – {{ label }}</label>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

    <div class="mb-4 feedback-question" data-question-index="4">
        <div class="row g-3 align-items-start">
            <div class="col-md-4">
                <label for="good" class="form-label fw-bold mb-0">Hat dir an diesem Vortrag etwas besonders gut gefallen?</label>
            </div>
            <div class="col-md-8">
                <textarea id="good" name="good" rows="3" class="form-control">{{ (feedback.good if feedback else '') or '' }}</textarea>
            </div>
        </div>
    </div>

    <div class="mb-4 feedback-question" data-question-index="5">
        <div class="row g-3 align-items-start">
            <div class="col-md-4">
                <label for="improvements" class="form-label fw-bold mb-0">Hast du Verbesserungsvorschläge?</label>
            </div>
            <div class="col-md-8">
                <textarea id="improvements" name="improvements" rows="3" class="form-control">{{ (feedback.improvements if feedback else '') or '' }}</textarea>
            </div>
        </div>
    </div>

    <div class="mb-4 feedback-question" data-question-index="6">
        <div class="row g-3 align-items-start">
            <div class="col-md-4">
                <label for="free_text" class="form-label fw-bold mb-0">Freitext</label>
            </div>
            <div class="col-md-8">
                <textarea id="free_text" name="free_text" rows="3" class="form-control">{{ (feedback.free_text if feedback else '') or '' }}</textarea>
            </div>
        </div>
    </div>

    <div class="d-flex gap-2 mt-4">
        <button type="submit" name="action" value="save" class="btn btn-primary">Speichern</button>
        <button type="submit" name="action" value="save_next" class="btn btn-secondary" id="talkSaveNextBtn">Speichern &amp; Nächste</button>
        <a href="{{ url_for('events.list_talk_feedback', event_id=event.id) }}" class="btn btn-outline-secondary">Abbrechen</a>
        <span class="ms-2 align-self-center text-muted small">Tastatur: Shift+Enter (oder Strg+Shift+S) = Speichern &amp; Nächste</span>
    </div>
</form>
{% endblock %}

{% block extra_js %}
<script>
(function() {
  const form = document.querySelector('.talk-feedback-form');
  if (!form) return;

  const questions = Array.from(document.querySelectorAll('.feedback-question'));
  let currentIndex = 0;
  let talkSelected = !!document.getElementById('talk_id')?.value;

  const talkIdInput = document.getElementById('talk_id');
  const talkFilterInput = document.getElementById('talkFilter');
  const talkList = document.getElementById('talkList');

  function setActiveQuestion(index) {
    // If no talk is selected yet, focus the talk filter/list as the first "question"
    if (!talkSelected) {
      // Remove highlighting from feedback questions
      questions.forEach((q) => {
        q.classList.remove('border', 'border-primary', 'rounded');
      });

      // Focus talk filter or first talk item
      if (talkFilterInput) {
        talkFilterInput.focus();
      } else if (talkList) {
        const firstItem = talkList.querySelector('.talk-item');
        if (firstItem) firstItem.focus();
      }
      return;
    }

    currentIndex = Math.max(0, Math.min(index, questions.length - 1));
    questions.forEach((q, i) => {
      q.classList.toggle('border', i === currentIndex);
      q.classList.toggle('border-primary', i === currentIndex);
      q.classList.toggle('rounded', i === currentIndex);
      if (i === currentIndex) {
        const firstInput = q.querySelector('input,select,textarea,button');
        if (firstInput) firstInput.focus();
      }
    });
  }

  function handleScaleKey(value) {
    const q = questions[currentIndex];
    if (!q) return;
    const name = q.querySelector('input[type="radio"]')?.name;
    if (!name) return;
    const radio = form.querySelector(`input[name="${name}"][value="${value}"]`);
    if (radio) {
      radio.checked = true;
    }
    setActiveQuestion(currentIndex + 1);
  }

  function skipQuestion() {
    setActiveQuestion(currentIndex + 1);
  }

  function previousQuestion() {
    setActiveQuestion(currentIndex - 1);
  }

  function selectTalkByElement(el) {
    if (!el || !talkIdInput) return;
    const id = el.getAttribute('data-talk-id');
    if (!id) return;

    // Clear previous selection
    talkList.querySelectorAll('.talk-item').forEach(btn => {
      btn.classList.remove('btn-primary', 'active');
      btn.classList.add('btn-outline-secondary');
    });

    el.classList.remove('btn-outline-secondary');
    el.classList.add('btn-primary', 'active');
    talkIdInput.value = id;
    talkSelected = true;

    // Jump to first feedback question
    setActiveQuestion(0);
  }

  if (talkList) {
    talkList.addEventListener('click', function(e) {
      const btn = e.target.closest('.talk-item');
      if (!btn) return;
      selectTalkByElement(btn);
    });
  }

  function applyTalkFilter(term) {
    if (!talkList) return;
    const lower = term.toLowerCase();
    let visibleCount = 0;
    let lastVisible = null;

    talkList.querySelectorAll('.talk-item').forEach(btn => {
      const text = btn.textContent.toLowerCase();
      const show = text.includes(lower);
      btn.style.display = show ? '' : 'none';
      if (show) {
        visibleCount += 1;
        lastVisible = btn;
      }
    });

    if (visibleCount === 1 && lastVisible) {
      selectTalkByElement(lastVisible);
    }
  }

  if (talkFilterInput && talkList) {
    talkFilterInput.addEventListener('input', function() {
      applyTalkFilter(this.value || '');
    });
  }

  document.addEventListener('keydown', function(e) {
    // Check if user is typing in a text field
    const isTyping = e.target && (
      e.target.tagName === 'TEXTAREA' ||
      (e.target.tagName === 'INPUT' && e.target.type === 'text') ||
      e.target.tagName === 'SELECT'
    );

    if (isTyping) {
      // Allow typing/selecting, but still handle navigation shortcuts
      if (e.key && e.key.toLowerCase() === 's' && (e.ctrlKey || e.metaKey) && e.shiftKey) {
        e.preventDefault();
        const btn = document.getElementById('talkSaveNextBtn');
        if (btn) btn.click();
        return;
      }
      if (e.key === 'Enter' && e.shiftKey) {
        e.preventDefault();
        const btn = document.getElementById('talkSaveNextBtn');
        if (btn) btn.click();
        return;
      }
      if (e.key === 'ArrowDown' && e.shiftKey && talkSelected) {
        e.preventDefault();
        skipQuestion();
        return;
      }
      if (e.key === 'ArrowUp' && e.shiftKey && talkSelected) {
        e.preventDefault();
        previousQuestion();
        return;
      }
      // Allow normal typing (including 1-4 keys)
      return;
    }

    // Do not handle scale shortcuts before a talk is selected
    if (!talkSelected) {
      return;
    }

    // Number shortcuts only work when NOT typing in text fields
    if (e.key === '1' || e.key === '2' || e.key === '3' || e.key === '4') {
      e.preventDefault();
      handleScaleKey(parseInt(e.key, 10));
      return;
    }

    if (e.key === 'ArrowDown' && e.shiftKey) {
      e.preventDefault();
      skipQuestion();
      return;
    }

    if (e.key === 'ArrowUp' && e.shiftKey) {
      e.preventDefault();
      previousQuestion();
      return;
    }

    if (e.key === 'Enter' && !e.ctrlKey && !e.shiftKey) {
      const q = questions[currentIndex];
      if (q) {
        const focused = document.activeElement;
        if (focused && (focused.type === 'checkbox' || focused.type === 'radio')) {
          e.preventDefault();
          setActiveQuestion(currentIndex + 1);
          return;
        }
      }
    }

    if (e.key && e.key.toLowerCase() === 's' && (e.ctrlKey || e.metaKey) && e.shiftKey) {
      e.preventDefault();
      const btn = document.getElementById('talkSaveNextBtn');
      if (btn) btn.click();
    }

    if (e.key === 'Enter' && e.shiftKey) {
      e.preventDefault();
      const btn = document.getElementById('talkSaveNextBtn');
      if (btn) btn.click();
    }
  });

  setActiveQuestion(0);
})();
</script>
{% endblock %}