{% extends 'admin_base.html.twig' %}

{% block title %}Warteliste - Bewegungszentrum{% endblock %}
{% block header_title %}<i class="fas fa-list-ol me-2"></i>Warteliste - Bewegungszentrum{% endblock %}

{% block content %}
<div class="container-fluid mt-4">
    <div class="row g-3 mb-4" id="waitlistStats">
        <div class="col-md-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="text-muted small">Einträge gesamt</div>
                    <div class="fs-3 fw-bold" id="statTotal">–</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="text-muted small">Wartet</div>
                    <div class="fs-3 fw-bold text-info" id="statWaiting">–</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="text-muted small">Platz angeboten</div>
                    <div class="fs-3 fw-bold text-primary" id="statOffered">–</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="text-muted small">Kurse</div>
                    <div class="fs-3 fw-bold" id="statCourses">–</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filter -->
    <div class="card mb-4">
        <div class="card-body">
            <div class="row g-3 align-items-end">
                <div class="col-md-4">
                    <label class="form-label fw-bold">Kurs filtern</label>
                    <select class="form-select" id="courseFilter" onchange="loadWaitlist()">
                        <option value="">Alle Kurse</option>
                        {% for course in courses %}
                            <option value="{{ course.id }}">{{ course.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-bold">Suche</label>
                    <input type="search" class="form-control" id="searchFilter" placeholder="Name, E-Mail, Telefon…" oninput="applySearchFilter()">
                </div>
                <div class="col-md-4 d-flex justify-content-end gap-2">
                    <button class="btn btn-primary" onclick="loadWaitlist()">
                        <i class="fas fa-sync me-2"></i>Aktualisieren
                    </button>
                </div>
            </div>
            <p class="text-muted small mb-0 mt-3">
                <strong>Manuelles Löschen:</strong> Entfernt den Eintrag (Status storniert + gelöscht).
                Bei aktivem Platzangebot wird der nächste Nachrücker benachrichtigt.
                Reine Wartelisten-Einträge ohne Angebot lösen kein Nachrücken aus.
            </p>
        </div>
    </div>

    <!-- Warteliste -->
    <div id="waitlistContainer">
        <div class="text-center py-5">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Lädt...</span>
            </div>
        </div>
    </div>
</div>

<!-- Bestätigungs-Modal -->
<div class="modal fade" id="confirmModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">In Buchung umwandeln</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Möchten Sie diese Person von der Warteliste nehmen und als <strong>ausstehende Buchung</strong> anlegen? Es wird die gleiche Bestätigungs-E-Mail wie bei der Automatisierung versendet.</p>
                <div id="confirmBookingDetails"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
                <button type="button" class="btn btn-success" onclick="confirmBooking()">
                    <i class="fas fa-check me-2"></i>Umwandeln &amp; E-Mail senden
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Detail-Modal -->
<div class="modal fade" id="detailsModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Wartelisten-Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="detailsModalBody"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button>
            </div>
        </div>
    </div>
</div>

<script>
let waitlistData = [];
let selectedBookingId = null;
let confirmModal = null;
let detailsModal = null;

document.addEventListener('DOMContentLoaded', function() {
    confirmModal = new bootstrap.Modal(document.getElementById('confirmModal'));
    detailsModal = new bootstrap.Modal(document.getElementById('detailsModal'));
    loadWaitlist();
});

function loadWaitlist() {
    const courseId = document.getElementById('courseFilter').value;
    let url = '{{ path('admin_bz_courses_waitlist_api') }}';
    if (courseId) {
        url += '?courseId=' + courseId;
    }

    fetch(url)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                waitlistData = data.waitlist;
                updateStats(data.waitlist);
                applySearchFilter();
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showToast('Fehler beim Laden der Warteliste', 'error');
        });
}

function updateStats(waitlist) {
    let total = 0;
    let waiting = 0;
    let offered = 0;
    waitlist.forEach(group => {
        group.bookings.forEach(b => {
            total++;
            if (b.status === 'waitlist_offered') offered++;
            else waiting++;
        });
    });
    document.getElementById('statTotal').textContent = total;
    document.getElementById('statWaiting').textContent = waiting;
    document.getElementById('statOffered').textContent = offered;
    document.getElementById('statCourses').textContent = waitlist.length;
}

function applySearchFilter() {
    const q = (document.getElementById('searchFilter').value || '').trim().toLowerCase();
    if (!q) {
        renderWaitlist(waitlistData);
        return;
    }
    const filtered = waitlistData.map(group => {
        const bookings = group.bookings.filter(b => {
            const hay = [b.fullName, b.email, b.phone, b.notes, b.bookingToken]
                .filter(Boolean).join(' ').toLowerCase();
            return hay.includes(q);
        });
        return bookings.length ? { ...group, bookings } : null;
    }).filter(Boolean);
    renderWaitlist(filtered);
}

function renderWaitlist(waitlist) {
    const container = document.getElementById('waitlistContainer');
    
    if (waitlist.length === 0) {
        container.innerHTML = `
            <div class="alert alert-info">
                <i class="fas fa-info-circle me-2"></i>
                Keine Einträge auf der Warteliste gefunden.
            </div>
        `;
        return;
    }

    let html = '';
    waitlist.forEach(group => {
        const course = group.course;
        const bookings = group.bookings;
        
        html += `
            <div class="card mb-4 shadow-sm">
                <div class="card-header bg-warning bg-opacity-10">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h5 class="mb-0">
                                <i class="fas fa-dumbbell me-2"></i>${escapeHtml(course.name)}
                            </h5>
                            <small class="text-muted">${escapeHtml(course.typeLabel || '')}</small>
                        </div>
                        <div class="text-end">
                            <span class="badge bg-warning text-dark">${bookings.length} Wartelisteneinträge</span>
                            ${course.maxParticipants ? `
                                <div class="mt-1">
                                    <small class="text-muted">
                                        ${course.maxParticipants} Plätze | 
                                        ${course.availablePlaces} frei
                                    </small>
                                </div>
                            ` : ''}
                        </div>
                    </div>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th style="width: 50px;">#</th>
                                    <th>Name</th>
                                    <th>Kontakt</th>
                                    <th>Alter</th>
                                    <th>Teilnehmer</th>
                                    <th>Eingetragen am</th>
                                    <th>Angebot</th>
                                    <th style="width: 180px;">Aktionen</th>
                                </tr>
                            </thead>
                            <tbody>
        `;

        bookings.forEach(booking => {
            const siblingsCount = booking.siblings ? booking.siblings.length : 0;
            const totalParticipants = booking.totalParticipants || 1;
            
            html += `
                                <tr>
                                    <td>
                                        <span class="badge bg-secondary">${booking.position}</span>
                                    </td>
                                    <td>
                                        <strong>${escapeHtml(booking.fullName)}</strong>
                                        ${booking.notes ? `
                                            <br><small class="text-muted">
                                                <i class="fas fa-comment me-1"></i>${escapeHtml(booking.notes)}
                                            </small>
                                        ` : ''}
                                    </td>
                                    <td>
                                        <div>
                                            <i class="fas fa-envelope me-1 text-muted"></i>
                                            <a href="mailto:${escapeHtml(booking.email)}">${escapeHtml(booking.email)}</a>
                                        </div>
                                        ${booking.phone ? `
                                            <div class="mt-1">
                                                <i class="fas fa-phone me-1 text-muted"></i>
                                                <a href="tel:${escapeHtml(booking.phone)}">${escapeHtml(booking.phone)}</a>
                                            </div>
                                        ` : ''}
                                    </td>
                                    <td>
                                        ${booking.age ? booking.age + ' Jahre' : ''}
                                        ${booking.birthDate ? `<br><small class="text-muted">${escapeHtml(booking.birthDate)}</small>` : ''}
                                    </td>
                                    <td>
                                        ${totalParticipants} Person${totalParticipants > 1 ? 'en' : ''}
                                        ${siblingsCount > 0 ? `
                                            <br><small class="text-muted">
                                                + ${siblingsCount} Geschwisterkind${siblingsCount > 1 ? 'er' : ''}
                                            </small>
                                        ` : ''}
                                    </td>
                                    <td>
                                        <small>${escapeHtml(booking.createdAt)}</small>
                                    </td>
                                    <td>
                                        ${booking.status === 'waitlist_offered'
                                            ? `<span class="badge bg-primary">Platz angeboten</span>
                                               <br><small>seit ${escapeHtml(booking.offeredAt || '–')}<br>bis ${escapeHtml(booking.offerUntil || '–')} Uhr</small>`
                                            : '<span class="badge bg-info">Wartet</span>'}
                                    </td>
                                    <td>
                                        <button class="btn btn-sm btn-success" onclick="showConfirmModal(${booking.id})" title="In Buchung umwandeln">
                                            <i class="fas fa-check"></i>
                                        </button>
                                        <button class="btn btn-sm btn-info" onclick="viewBookingDetails(${booking.id})" title="Details">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                        <button class="btn btn-sm btn-outline-danger" onclick="deleteBooking(${booking.id})" title="Löschen">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </td>
                                </tr>
            `;
        });

        html += `
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        `;
    });

    container.innerHTML = html;
}

function findBooking(bookingId) {
    for (const group of waitlistData) {
        const booking = group.bookings.find(b => b.id === bookingId);
        if (booking) {
            return { booking, course: group.course };
        }
    }
    return null;
}

function showConfirmModal(bookingId) {
    selectedBookingId = bookingId;
    const found = findBooking(bookingId);
    if (!found) {
        showToast('Buchung nicht gefunden', 'error');
        return;
    }

    document.getElementById('confirmBookingDetails').innerHTML = `
        <div class="alert alert-info">
            <strong>${escapeHtml(found.booking.fullName)}</strong><br>
            Kurs: ${escapeHtml(found.course.name)}<br>
            E-Mail: ${escapeHtml(found.booking.email)}<br>
            ${found.booking.phone ? 'Telefon: ' + escapeHtml(found.booking.phone) + '<br>' : ''}
            Eingetragen: ${escapeHtml(found.booking.createdAt)}
        </div>
    `;

    confirmModal.show();
}

function confirmBooking() {
    if (!selectedBookingId) return;

    // Wie Automatisierung (Claim): pending + confirmation-Mail
    const url = '{{ path('admin_course_bookings_api_update_status', {id: '__ID__'}) }}'.replace('__ID__', selectedBookingId);
    
    fetch(url, {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            status: 'pending'
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            confirmModal.hide();
            showToast('In Buchung umgewandelt – Bestätigungs-E-Mail wird versendet', 'success');
            loadWaitlist();
        } else {
            showToast(data.error || 'Fehler beim Umwandeln', 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showToast('Fehler beim Umwandeln', 'error');
    });
}

function viewBookingDetails(bookingId) {
    const found = findBooking(bookingId);
    if (!found) {
        showToast('Buchung nicht gefunden', 'error');
        return;
    }
    const b = found.booking;
    const c = found.course;
    const childName = [b.childFirstName, b.childLastName].filter(Boolean).join(' ');
    const siblings = Array.isArray(b.siblings) ? b.siblings : [];
    const siblingsHtml = siblings.length > 0
        ? `<ul class="mb-0 small">${siblings.map(s => {
            const name = s.raw ? s.raw : [s.firstName, s.lastName].filter(Boolean).join(' ').trim();
            const details = [
                s.birthDate ? 'Geb. ' + String(s.birthDate).replace(/^(\d{4})-(\d{2})-(\d{2}).*$/, '$3.$2.$1') : '',
                s.preExistingConditions ? 'Vorerkrankungen: ' + s.preExistingConditions : '',
                s.allergiesMedications ? 'Allergien/Medikamente: ' + s.allergiesMedications : '',
                s.dietNotes ? 'Ernährung: ' + s.dietNotes : '',
                s.imageVideoConsent === true ? 'Foto/Video: Ja' : (s.imageVideoConsent === false ? 'Foto/Video: Nein' : ''),
            ].filter(Boolean).join('; ');
            return `<li>${escapeHtml(name || 'Geschwisterkind')}${details ? ' — ' + escapeHtml(details) : ''}</li>`;
        }).join('')}</ul>`
        : '';
    document.getElementById('detailsModalBody').innerHTML = `
        <dl class="row mb-0">
            <dt class="col-sm-4">Kurs</dt><dd class="col-sm-8">${escapeHtml(c.name)}</dd>
            <dt class="col-sm-4">Position</dt><dd class="col-sm-8">#${b.position}</dd>
            <dt class="col-sm-4">Status</dt><dd class="col-sm-8">${escapeHtml(b.statusLabel || b.status)}</dd>
            <dt class="col-sm-4">Name</dt><dd class="col-sm-8">${escapeHtml(b.fullName)}</dd>
            ${childName ? `<dt class="col-sm-4">Kind</dt><dd class="col-sm-8">${escapeHtml(childName)}</dd>` : ''}
            <dt class="col-sm-4">E-Mail</dt><dd class="col-sm-8"><a href="mailto:${escapeHtml(b.email)}">${escapeHtml(b.email)}</a></dd>
            <dt class="col-sm-4">Telefon</dt><dd class="col-sm-8">${escapeHtml(b.phone || '–')}</dd>
            <dt class="col-sm-4">Adresse</dt><dd class="col-sm-8">${escapeHtml(b.address || '–')}</dd>
            <dt class="col-sm-4">Alter / Geburtsdatum</dt><dd class="col-sm-8">${b.age ? b.age + ' Jahre' : '–'}${b.birthDate ? ' (' + escapeHtml(b.birthDate) + ')' : ''}</dd>
            <dt class="col-sm-4">Teilnehmer</dt><dd class="col-sm-8">${b.totalParticipants || 1}${siblings.length > 0 ? ` (1 Hauptkind + ${siblings.length} Geschwisterkind${siblings.length > 1 ? 'er' : ''})` : ''}</dd>
            ${siblingsHtml ? `<dt class="col-sm-4">Geschwisterkinder</dt><dd class="col-sm-8">${siblingsHtml}</dd>` : ''}
            <dt class="col-sm-4">Buchungsnr.</dt><dd class="col-sm-8"><code>${escapeHtml(b.bookingToken || '–')}</code></dd>
            <dt class="col-sm-4">Eingetragen</dt><dd class="col-sm-8">${escapeHtml(b.createdAt)}</dd>
            ${b.status === 'waitlist_offered' ? `
                <dt class="col-sm-4">Angebot</dt>
                <dd class="col-sm-8">seit ${escapeHtml(b.offeredAt || '–')}, bis ${escapeHtml(b.offerUntil || '–')}</dd>
            ` : ''}
            <dt class="col-sm-4">Notizen</dt><dd class="col-sm-8">${escapeHtml(b.notes || '–')}</dd>
        </dl>
        <p class="text-muted small mt-3 mb-0">Zahlung kann erst nach Umwandlung in eine Buchung markiert werden (wie bei Schwimmkursen).</p>
    `;
    detailsModal.show();
}

function deleteBooking(bookingId) {
    const found = findBooking(bookingId);
    if (!found) return;
    const hadOffer = found.booking.status === 'waitlist_offered';
    const msg = hadOffer
        ? `„${found.booking.fullName}“ löschen? Ein aktives Platzangebot wird freigegeben und der nächste Nachrücker benachrichtigt.`
        : `„${found.booking.fullName}“ von der Warteliste löschen? (Kein Nachrücken bei reinem Wartelisten-Eintrag.)`;
    if (!confirm(msg)) return;

    const url = '{{ path('admin_course_bookings_api_delete', {id: '__ID__'}) }}'.replace('__ID__', bookingId);
    fetch(url, { method: 'DELETE' })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                showToast('Eintrag gelöscht', 'success');
                loadWaitlist();
            } else {
                showToast(data.error || 'Löschen fehlgeschlagen', 'error');
            }
        })
        .catch(() => showToast('Löschen fehlgeschlagen', 'error'));
}

function escapeHtml(value) {
    return String(value ?? '')
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#039;');
}

function showToast(message, type) {
    const toast = document.createElement('div');
    toast.className = `alert alert-${type === 'success' ? 'success' : 'danger'} alert-dismissible fade show position-fixed top-0 end-0 m-3`;
    toast.style.zIndex = '9999';
    toast.innerHTML = `
        ${escapeHtml(message)}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    document.body.appendChild(toast);
    
    setTimeout(() => {
        toast.remove();
    }, 3000);
}
</script>
{% endblock %}