{% extends 'base.html' %}

{% if talk %}
    {% set page_title = 'Edit Talk' %}
{% else %}
    {% set page_title = 'New Talk' %}
{% endif %}

{% block title %}{{ page_title }} - NooK Feedback{% endblock %}

{% block content %}
<h1 class="h3 mb-3">{{ page_title }}</h1>

<form method="post" class="row g-3" autocomplete="off">
    <div class="col-md-6">
        <label for="title" class="form-label">Title</label>
        <input type="text" class="form-control" id="title" name="title" value="{{ talk.title if talk else '' }}" required autofocus>
    </div>
    <div class="col-md-2">
        <label for="duration_minutes" class="form-label">Duration (min)</label>
        <input type="number" class="form-control" id="duration_minutes" name="duration_minutes" value="{{ talk.duration_minutes if talk and talk.duration_minutes is not none else '' }}" min="0" step="5">
    </div>
    <div class="col-md-2">
        <label for="feedback_count_override" class="form-label">Feedback Count Override</label>
        <input type="number" class="form-control" id="feedback_count_override" name="feedback_count_override" value="{{ talk.feedback_count_override if talk and talk.feedback_count_override is not none else '' }}" min="0">
        <div class="form-text">Optional: Override the displayed feedback count</div>
    </div>
    <div class="col-md-4">
        <label for="event_id" class="form-label">Event</label>
        <select class="form-select" id="event_id" name="event_id">
            <option value="">-- None --</option>
            {% for event in events %}
                <option value="{{ event.id }}" {% if talk and talk.event_id == event.id %}selected{% endif %}>{{ event.name }}</option>
            {% endfor %}
        </select>
    </div>
    <div class="col-md-6">
        <label for="speaker_search" class="form-label">Speaker(s)</label>
        <input type="text" class="form-control" id="speaker_search" list="speaker_list" placeholder="Type to search speakers..." autocomplete="off">
        <datalist id="speaker_list">
            {% for speaker in speakers %}
                <option value="{{ speaker.name }}">
            {% endfor %}
        </datalist>
        <div id="selected_speakers" class="mt-2">
            {% if talk and talk.speakers %}
                {% for speaker in talk.speakers %}
                    <span class="badge bg-primary me-1 mb-1" data-speaker-id="{{ speaker.id }}">
                        {{ speaker.name }}
                        <button type="button" class="btn-close btn-close-white ms-1" style="font-size: 0.6rem;" onclick="removeSpeaker({{ speaker.id }})"></button>
                    </span>
                {% endfor %}
            {% endif %}
        </div>
        <!-- Hidden inputs for form submission -->
        <div id="speaker_inputs">
            {% if talk and talk.speakers %}
                {% for speaker in talk.speakers %}
                    <input type="hidden" name="speaker_ids" value="{{ speaker.id }}">
                {% endfor %}
            {% endif %}
        </div>
    </div>
    <div class="col-12 d-flex gap-2">
        <button type="submit" class="btn btn-primary">Save</button>
        <a href="{{ url_for('talks.list_talks') }}" class="btn btn-secondary">Cancel</a>
    </div>
</form>

<script>
    // Speaker data for autocomplete
    const speakers = [
        {% for speaker in speakers %}
        { id: {{ speaker.id }}, name: "{{ speaker.name }}" },
        {% endfor %}
    ];

    const searchInput = document.getElementById('speaker_search');
    const selectedContainer = document.getElementById('selected_speakers');
    const inputsContainer = document.getElementById('speaker_inputs');
    
    // Track selected speaker IDs
    const selectedSpeakers = new Set();
    
    // Initialize with existing speakers
    {% if talk and talk.speakers %}
        {% for speaker in talk.speakers %}
        selectedSpeakers.add({{ speaker.id }});
        {% endfor %}
    {% endif %}

    // Filter and show suggestions
    searchInput.addEventListener('input', function() {
        const query = this.value.toLowerCase();
        
        if (query.length < 1) return;
        
        // Find matching speakers
        const matches = speakers.filter(s => 
            !selectedSpeakers.has(s.id) && 
            s.name.toLowerCase().includes(query)
        );
        
        // Auto-select if exact match and Enter is pressed
        if (matches.length === 1 && matches[0].name.toLowerCase() === query) {
            addSpeaker(matches[0].id, matches[0].name);
            this.value = '';
        }
    });

    // Handle Enter key
    searchInput.addEventListener('keydown', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            const query = this.value.toLowerCase();
            
            // Find exact or partial match
            const match = speakers.find(s => 
                !selectedSpeakers.has(s.id) && 
                s.name.toLowerCase() === query
            );
            
            if (match) {
                addSpeaker(match.id, match.name);
                this.value = '';
            } else {
                // Try partial match
                const partialMatch = speakers.find(s => 
                    !selectedSpeakers.has(s.id) && 
                    s.name.toLowerCase().includes(query)
                );
                if (partialMatch) {
                    addSpeaker(partialMatch.id, partialMatch.name);
                    this.value = '';
                }
            }
        }
    });

    function addSpeaker(id, name) {
        if (selectedSpeakers.has(id)) return;
        
        selectedSpeakers.add(id);
        
        // Add badge
        const badge = document.createElement('span');
        badge.className = 'badge bg-primary me-1 mb-1';
        badge.setAttribute('data-speaker-id', id);
        badge.innerHTML = name + ' <button type="button" class="btn-close btn-close-white ms-1" style="font-size: 0.6rem;" onclick="removeSpeaker(' + id + ')"></button>';
        selectedContainer.appendChild(badge);
        
        // Add hidden input
        const input = document.createElement('input');
        input.type = 'hidden';
        input.name = 'speaker_ids';
        input.value = id;
        input.setAttribute('data-speaker-id', id);
        inputsContainer.appendChild(input);
    }

    function removeSpeaker(id) {
        selectedSpeakers.delete(id);
        
        // Remove badge
        const badge = selectedContainer.querySelector('[data-speaker-id="' + id + '"]');
        if (badge) badge.remove();
        
        // Remove hidden input
        const input = inputsContainer.querySelector('[data-speaker-id="' + id + '"]');
        if (input) input.remove();
    }
</script>
{% endblock %}