{% extends 'base.html' %}

{% block title %}
    {% if feedback %}Speaker-Feedback bearbeiten{% else %}Neues Speaker-Feedback{% endif %} – {{ event.name }}
{% endblock %}

{% block content %}
<h1 class="h3 mb-4">
    {% if feedback %}Speaker-Feedback bearbeiten{% else %}Neues Speaker-Feedback{% endif %} für: {{ event.name }}
</h1>

<form method="post">
    <!-- Speaker Selection (outside keyboard navigation) -->
    <div class="mb-4">
        <label for="speakerFilter" class="form-label">Speaker suchen <span class="text-muted">(optional)</span></label>
        <input 
            type="text" 
            class="form-control mb-2" 
            id="speakerFilter" 
            placeholder="Tippe, um zu filtern..."
            value="{{ initial_speaker_filter }}"
        >
        <div id="speakerButtons" class="d-flex flex-wrap gap-2">
            {% for speaker in speakers %}
            <button 
                type="button" 
                class="btn btn-outline-primary speaker-btn"
                data-speaker-id="{{ speaker.id }}"
                data-speaker-name="{{ speaker.name }}"
                {% if feedback and feedback.speaker_id == speaker.id %}style="display:block;"{% endif %}
            >
                {{ speaker.name }}
            </button>
            {% endfor %}
        </div>
        <input type="hidden" name="speaker_id" id="selectedSpeakerId" value="{% if feedback %}{{ feedback.speaker_id }}{% elif initial_speaker_id %}{{ initial_speaker_id }}{% endif %}">
        <div id="selectedSpeaker" class="mt-2">
            {% if feedback and feedback.speaker %}
                <strong>Ausgewählt:</strong> {{ feedback.speaker.name }}
                <button type="button" class="btn btn-sm btn-outline-secondary ms-2" id="clearSpeaker">Auswahl löschen</button>
            {% endif %}
        </div>
    </div>

    <hr>

    <!-- Feedback Text Field (data-question-index="0" for keyboard nav) -->
    <div class="mb-4 feedback-question" data-question-index="0">
        <label for="feedback" class="form-label">Feedback</label>
        <textarea 
            class="form-control" 
            id="feedback" 
            name="feedback" 
            rows="5"
            placeholder="Das Feedback..."
        >{{ (feedback.feedback if feedback else '') or '' }}</textarea>
    </div>

    <div class="d-flex gap-2">
        <button type="submit" name="action" value="save" class="btn btn-primary">Speichern</button>
        <button type="submit" name="action" value="save_next" class="btn btn-success">Speichern & Nächste</button>
        <a href="{{ url_for('events.list_speaker_feedback', event_id=event.id) }}" class="btn btn-secondary">Abbrechen</a>
    </div>
</form>
{% endblock %}

{% block extra_js %}
<script>
(function() {
    const speakerFilter = document.getElementById('speakerFilter');
    const speakerButtons = document.querySelectorAll('.speaker-btn');
    const selectedIdInput = document.getElementById('selectedSpeakerId');
    const selectedSpeakerDiv = document.getElementById('selectedSpeaker');
    const feedbackTextarea = document.getElementById('feedback');

    let speakersEnabled = {% if feedback %}true{% else %}false{% endif %};

    // Speaker filtering
    function applySpeakerFilter() {
        const filterText = speakerFilter.value.toLowerCase();
        let visibleCount = 0;

        speakerButtons.forEach(btn => {
            const speakerName = btn.getAttribute('data-speaker-name').toLowerCase();
            if (speakerName.includes(filterText)) {
                btn.style.display = 'block';
                visibleCount++;
            } else {
                btn.style.display = 'none';
            }
        });

        // Auto-select if only one speaker is visible and not in edit mode
        if (visibleCount === 1 && !{% if feedback %}true{% else %}false{% endif %}) {
            const visibleBtn = Array.from(speakerButtons).find(btn => btn.style.display !== 'none');
            if (visibleBtn) {
                selectSpeaker(visibleBtn.getAttribute('data-speaker-id'), visibleBtn.getAttribute('data-speaker-name'));
            }
        }
    }

    speakerFilter.addEventListener('input', applySpeakerFilter);

    // Speaker selection
    speakerButtons.forEach(btn => {
        btn.addEventListener('click', function() {
            const speakerId = this.getAttribute('data-speaker-id');
            const speakerName = this.getAttribute('data-speaker-name');
            selectSpeaker(speakerId, speakerName);
        });
    });

    function selectSpeaker(speakerId, speakerName) {
        selectedIdInput.value = speakerId;
        selectedSpeakerDiv.innerHTML = `<strong>Ausgewählt:</strong> ${speakerName} <button type="button" class="btn btn-sm btn-outline-secondary ms-2" id="clearSpeaker">Auswahl löschen</button>`;
        
        // Attach clear handler
        document.getElementById('clearSpeaker').addEventListener('click', clearSpeaker);
        
        // Highlight selected button
        speakerButtons.forEach(btn => {
            if (btn.getAttribute('data-speaker-id') === speakerId) {
                btn.classList.remove('btn-outline-primary');
                btn.classList.add('btn-primary');
            } else {
                btn.classList.remove('btn-primary');
                btn.classList.add('btn-outline-primary');
            }
        });

        speakersEnabled = true;
        feedbackTextarea.focus();
    }

    function clearSpeaker() {
        selectedIdInput.value = '';
        selectedSpeakerDiv.innerHTML = '';
        
        // Remove all highlights
        speakerButtons.forEach(btn => {
            btn.classList.remove('btn-primary');
            btn.classList.add('btn-outline-primary');
        });
        
        speakersEnabled = false;
    }

    // If editing, highlight the selected speaker and attach clear handler
    {% if feedback %}
    const selectedBtn = Array.from(speakerButtons).find(btn => btn.getAttribute('data-speaker-id') === '{{ feedback.speaker_id }}');
    if (selectedBtn) {
        selectedBtn.classList.remove('btn-outline-primary');
        selectedBtn.classList.add('btn-primary');
    }
    const clearBtn = document.getElementById('clearSpeaker');
    if (clearBtn) {
        clearBtn.addEventListener('click', clearSpeaker);
    }
    {% endif %}

    // Apply initial filter if provided
    {% if initial_speaker_filter %}
    applySpeakerFilter();
    {% endif %}

    // Keyboard shortcuts for Save & Next
    document.addEventListener('keydown', function(e) {
        // Shift + Enter: Save & Next
        if (e.shiftKey && e.key === 'Enter' && !e.ctrlKey && !e.metaKey) {
            e.preventDefault();
            document.querySelector('button[value="save_next"]').click();
        }
        // Ctrl/Cmd + Shift + S: Save & Next
        else if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 's') {
            e.preventDefault();
            document.querySelector('button[value="save_next"]').click();
        }
    });

    // Focus textarea initially if speaker is already selected
    if (speakersEnabled) {
        feedbackTextarea.focus();
    }
})();
</script>
{% endblock %}