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

{% block title %}E-Mail Postfach{% endblock %}
{% block header_title %}E-Mail Postfach{% endblock %}

{% block stylesheets %}
{{ parent() }}
<style>
    .email-client {
        display: flex;
        height: calc(100vh - var(--header-height, 60px) - 2rem);
        min-height: 400px;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
        overflow: hidden;
    }
    .email-folders {
        width: 220px;
        min-width: 220px;
        background: #f6f8fa;
        border-right: 1px solid #e1e4e8;
        padding: 1rem 0;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow-y: auto;
    }
    .email-folders h6 {
        padding: 0 1rem 0.5rem;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #586069;
        margin: 0;
    }
    .folder-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.5rem 1rem;
        margin: 0 0.25rem;
        border-radius: 6px;
        cursor: pointer;
        color: #24292e;
        text-decoration: none;
        transition: background 0.15s;
    }
    .folder-item:hover {
        background: #e1e4e8;
    }
    .folder-item.active {
        background: #0969da;
        color: #fff;
    }
    .folder-item i {
        margin-right: 0.5rem;
        width: 20px;
        text-align: center;
    }
    .folder-badge {
        font-size: 0.75rem;
        background: rgba(0,0,0,0.1);
        padding: 0.15rem 0.5rem;
        border-radius: 10px;
    }
    .folder-item.active .folder-badge {
        background: rgba(255,255,255,0.25);
    }
    .folder-category .folder-badge {
        display: none;
    }
    .email-folders-actions {
        margin-top: auto;
        padding: 1rem;
        border-top: 1px solid #e1e4e8;
    }
    .email-folders-actions .btn {
        width: 100%;
        margin-bottom: 0.5rem;
        font-size: 0.875rem;
    }
    .email-main {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-width: 0;
    }
    .email-toolbar {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid #e1e4e8;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        flex-wrap: wrap;
    }
    .email-toolbar .search-wrap {
        flex: 1;
        min-width: 200px;
        max-width: 400px;
    }
    .email-toolbar .search-wrap input {
        width: 100%;
        padding: 0.4rem 0.75rem 0.4rem 2rem;
        border: 1px solid #d0d7de;
        border-radius: 6px;
        font-size: 0.875rem;
    }
    .email-toolbar .btn-group-compact .btn {
        padding: 0.4rem 0.75rem;
        font-size: 0.875rem;
    }
    .email-list-wrap {
        flex: 1;
        overflow: auto;
    }
    .email-list-head {
        display: grid;
        grid-template-columns: 2fr 3fr 80px;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        background: #f6f8fa;
        font-size: 0.75rem;
        font-weight: 600;
        color: #586069;
        border-bottom: 1px solid #e1e4e8;
    }
    .email-row {
        display: grid;
        grid-template-columns: 2fr 3fr 80px;
        gap: 0.5rem;
        padding: 0.6rem 1rem;
        border-bottom: 1px solid #eaecef;
        cursor: pointer;
        align-items: center;
        transition: background 0.1s;
        text-decoration: none;
        color: inherit;
    }
    .email-row:hover {
        background: #f6f8fa;
    }
    .email-row.unread {
        background: #f0f6ff;
    }
    .email-row.unread:hover {
        background: #e6f0ff;
    }
    .email-row .from {
        font-weight: 600;
        font-size: 0.875rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .email-row .subject {
        font-size: 0.875rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .email-row .date {
        font-size: 0.75rem;
        color: #586069;
        text-align: right;
    }
    .email-row .meta {
        grid-column: 1 / -1;
        font-size: 0.75rem;
        color: #586069;
        margin-top: 0.25rem;
    }
    .email-row .meta .badge {
        font-size: 0.65rem;
        margin-right: 0.5rem;
    }
    .email-list-empty {
        padding: 3rem 2rem;
        text-align: center;
        color: #586069;
    }
    .email-list-empty i {
        font-size: 3rem;
        margin-bottom: 1rem;
        opacity: 0.5;
    }
    .notification-toast {
        position: fixed;
        top: 1rem;
        right: 1rem;
        z-index: 9999;
        max-width: 360px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        border-radius: 8px;
        overflow: hidden;
        animation: slideIn 0.25s ease-out;
    }
    @keyframes slideIn {
        from { transform: translateX(100%); opacity: 0; }
        to { transform: translateX(0); opacity: 1; }
    }
</style>
{% endblock %}

{% block content %}
<div class="email-client">
    <aside class="email-folders">
        <h6>Ordner</h6>
        <div class="folder-item active" data-folder="inbox" data-status="" data-message-type="customer">
            <span><i class="fas fa-user"></i>Kunden &amp; Antworten</span>
            <span class="folder-badge" id="countCustomer">0</span>
        </div>
        <div class="folder-item" data-folder="system" data-status="" data-message-type="system_booking">
            <span><i class="fas fa-file-invoice"></i>Buchungsbestätigungen</span>
            <span class="folder-badge" id="countSystemBooking">0</span>
        </div>
        <div class="folder-item" data-folder="all" data-status="" data-message-type="">
            <span><i class="fas fa-inbox"></i>Alle E-Mails</span>
            <span class="folder-badge" id="countTotal">0</span>
        </div>
        <div class="folder-item" data-folder="unread" data-status="unread" data-message-type="customer">
            <span><i class="fas fa-envelope"></i>Ungelesen</span>
            <span class="folder-badge" id="countUnread">0</span>
        </div>
        <div class="folder-item" data-folder="replied" data-status="replied" data-message-type="customer">
            <span><i class="fas fa-reply"></i>Beantwortet</span>
            <span class="folder-badge" id="countReplied">0</span>
        </div>
        <h6>Standorte</h6>
        <div id="sidebarLocations">
            <div class="folder-item folder-category" data-category="location" data-id="" onclick="setLocationFilter('')">
                <span><i class="fas fa-map-marker-alt"></i>Alle Standorte</span>
            </div>
        </div>
        <h6>Kurse</h6>
        <div id="sidebarCourses">
            <div class="folder-item folder-category" data-category="course" data-id="" onclick="setCourseFilter('')">
                <span><i class="fas fa-graduation-cap"></i>Alle Kurse</span>
            </div>
        </div>
        <div class="email-folders-actions">
            <button type="button" class="btn btn-primary btn-sm" onclick="syncEmails()">
                <i class="fas fa-sync-alt me-1"></i>Synchronisieren
            </button>
            <button type="button" class="btn btn-outline-secondary btn-sm" onclick="testConnection()">
                <i class="fas fa-plug me-1"></i>Verbindung testen
            </button>
        </div>
    </aside>
    <div class="email-main">
        <div class="email-toolbar">
            <div class="search-wrap position-relative">
                <i class="fas fa-search position-absolute" style="left: 0.75rem; top: 50%; transform: translateY(-50%); color: #586069; font-size: 0.875rem;"></i>
                <input type="text" id="searchFilter" placeholder="Suchen (Absender, Betreff, Inhalt…)" onkeypress="if(event.key==='Enter')loadEmails()">
            </div>
            <input type="date" id="dateFilter" class="form-control form-control-sm" style="width: auto;">
            <div class="btn-group-compact">
                <button type="button" class="btn btn-outline-primary" onclick="loadEmails()">
                    <i class="fas fa-search"></i> Suchen
                </button>
                <button type="button" class="btn btn-outline-secondary" onclick="clearFilters()">
                    <i class="fas fa-times"></i> Zurücksetzen
                </button>
            </div>
        </div>
        <div class="email-list-head">
            <span>Von</span>
            <span>Betreff</span>
            <span class="text-end">Datum</span>
        </div>
        <div class="email-list-wrap" id="emailList">
            <div class="email-list-empty">
                <i class="fas fa-inbox"></i>
                <p class="mb-0">Lade E-Mails…</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
(function() {
    let emails = [];
    let currentFolder = 'inbox';
    let currentStatus = '';
    let currentMessageType = 'customer';
    let currentLocationId = '';
    let currentCourseId = '';

    const listEl = document.getElementById('emailList');
    const searchEl = document.getElementById('searchFilter');
    const dateEl = document.getElementById('dateFilter');

    function showToast(message, type) {
        type = type || 'success';
        const el = document.createElement('div');
        el.className = 'notification-toast alert alert-' + (type === 'error' ? 'danger' : type === 'info' ? 'info' : 'success');
        el.innerHTML = message + ' <button type="button" class="btn-close btn-sm float-end" onclick="this.parentElement.remove()"></button>';
        document.body.appendChild(el);
        setTimeout(function() { if (el.parentNode) el.remove(); }, 5000);
    }

    function setFolder(folder, status, messageType) {
        currentFolder = folder;
        currentStatus = status || '';
        if (messageType !== undefined && messageType !== null) {
            currentMessageType = messageType;
        }
        document.querySelectorAll('.email-folders .folder-item[data-folder]').forEach(function(item) {
            item.classList.toggle('active', item.getAttribute('data-folder') === folder);
        });
        loadEmails();
    }

    function setLocationFilter(id) {
        currentLocationId = id || '';
        document.querySelectorAll('.email-folders .folder-item[data-category="location"]').forEach(function(item) {
            var isActive = currentLocationId !== '' && item.getAttribute('data-id') === currentLocationId;
            item.classList.toggle('active', isActive);
        });
        loadEmails();
    }

    function setCourseFilter(id) {
        currentCourseId = id || '';
        document.querySelectorAll('.email-folders .folder-item[data-category="course"]').forEach(function(item) {
            var isActive = currentCourseId !== '' && item.getAttribute('data-id') === currentCourseId;
            item.classList.toggle('active', isActive);
        });
        loadEmails();
    }

    window.setLocationFilter = setLocationFilter;
    window.setCourseFilter = setCourseFilter;

    function loadCounts() {
        fetch('{{ path('admin_email_api_counts') }}')
            .then(function(r) { return r.json(); })
            .then(function(data) {
                if (data.success) {
                    var el;
                    el = document.getElementById('countTotal'); if (el) el.textContent = data.total;
                    el = document.getElementById('countCustomer'); if (el) el.textContent = data.customer ?? 0;
                    el = document.getElementById('countSystemBooking'); if (el) el.textContent = data.systemBooking ?? 0;
                    el = document.getElementById('countUnread'); if (el) el.textContent = data.unread;
                    el = document.getElementById('countReplied'); if (el) el.textContent = data.replied;
                }
            })
            .catch(function() {});
    }

    function loadEmails() {
        listEl.innerHTML = '<div class="email-list-empty"><i class="fas fa-spinner fa-spin"></i><p class="mb-0">Lade E-Mails…</p></div>';
        const params = new URLSearchParams();
        if (currentStatus) params.set('status', currentStatus);
        if (dateEl.value) params.set('date', dateEl.value);
        if (searchEl.value.trim()) params.set('search', searchEl.value.trim());
        if (currentLocationId) params.set('locationId', currentLocationId);
        if (currentCourseId) params.set('courseId', currentCourseId);
        if (currentMessageType) params.set('messageType', currentMessageType);

        fetch('{{ path('admin_email_api_list') }}?' + params.toString())
            .then(function(r) {
                return r.json().then(function(data) {
                    return { ok: r.ok, status: r.status, data: data };
                }).catch(function() {
                    return { ok: false, status: r.status, data: null, parseError: true };
                });
            })
            .then(function(result) {
                if (result.parseError) {
                    listEl.innerHTML = '<div class="email-list-empty"><i class="fas fa-exclamation-triangle text-danger"></i><p class="mb-0">Server-Antwort ungültig (HTTP ' + result.status + '). Bitte Cache leeren oder Logs prüfen.</p></div>';
                    return;
                }
                const data = result.data;
                if (data && data.success) {
                    emails = data.emails;
                    renderList(emails);
                    loadCounts();
                } else {
                    const msg = (data && data.error) ? data.error : ('Fehler beim Laden (HTTP ' + result.status + ')');
                    listEl.innerHTML = '<div class="email-list-empty"><i class="fas fa-exclamation-triangle text-danger"></i><p class="mb-0">' + escapeHtml(msg) + '</p></div>';
                }
            })
            .catch(function(err) {
                listEl.innerHTML = '<div class="email-list-empty"><i class="fas fa-exclamation-triangle text-danger"></i><p class="mb-0">Verbindungsfehler – Server nicht erreichbar oder Request abgebrochen.</p></div>';
            });
    }

    function renderList(data) {
        const viewUrl = '{{ path('admin_email_view', { id: 'ID' }) }}';
        const replyUrl = '{{ path('admin_email_reply', { id: 'ID' }) }}';
        const markReadUrl = '{{ path('admin_email_mark_read', { id: 'ID' }) }}';
        const deleteUrl = '{{ path('admin_email_delete', { id: 'ID' }) }}';

        if (!data.length) {
            listEl.innerHTML = '<div class="email-list-empty"><i class="fas fa-inbox"></i><p class="mb-0">Keine E-Mails in diesem Ordner</p></div>';
            return;
        }
        listEl.innerHTML = data.map(function(email) {
            const from = (email.fromDisplayName || email.fromEmail || '').trim() || '-';
            const subj = (email.subject || '').trim() || '(Kein Betreff)';
            const date = email.receivedAt || '';
            const unread = !email.isRead;
            const badges = [];
            if (unread) badges.push('<span class="badge bg-primary">Ungelesen</span>');
            if (email.isReplied) badges.push('<span class="badge bg-success">Beantwortet</span>');
            if (email.messageCategory === 'system_booking') badges.push('<span class="badge bg-warning text-dark">System</span>');
            else badges.push('<span class="badge bg-primary bg-opacity-75">Kunde</span>');
            if (email.hasAttachments) badges.push('<span class="badge bg-secondary"><i class="fas fa-paperclip"></i></span>');
            const loc = (email.locationName || '').trim();
            const course = (email.courseName || '').trim();
            if (loc) badges.push('<span class="badge bg-info"><i class="fas fa-map-marker-alt me-1"></i>' + escapeHtml(loc) + '</span>');
            if (course) badges.push('<span class="badge bg-secondary"><i class="fas fa-graduation-cap me-1"></i>' + escapeHtml(course) + '</span>');
            return '<a class="email-row' + (unread ? ' unread' : '') + '" href="' + viewUrl.replace('ID', email.id) + '">' +
                '<span class="from">' + escapeHtml(from) + '</span>' +
                '<span class="subject">' + escapeHtml(subj) + '</span>' +
                '<span class="date">' + escapeHtml(date) + '</span>' +
                (badges.length ? '<div class="meta">' + badges.join(' ') + '</div>' : '') +
                '</a>';
        }).join('');
    }

    function escapeHtml(s) {
        if (!s) return '';
        const div = document.createElement('div');
        div.textContent = s;
        return div.innerHTML;
    }

    function clearFilters() {
        searchEl.value = '';
        dateEl.value = '';
        currentLocationId = '';
        currentCourseId = '';
        document.querySelectorAll('.email-folders .folder-item[data-category="location"]').forEach(function(item) {
            item.classList.remove('active');
        });
        document.querySelectorAll('.email-folders .folder-item[data-category="course"]').forEach(function(item) {
            item.classList.remove('active');
        });
        loadEmails();
    }

    function loadCategories() {
        fetch('{{ path('admin_email_api_categories') }}')
            .then(function(r) { return r.json(); })
            .then(function(data) {
                if (!data.success) return;
                var locWrap = document.getElementById('sidebarLocations');
                var courseWrap = document.getElementById('sidebarCourses');
                locWrap.innerHTML = '';
                courseWrap.innerHTML = '';
                var locAll = document.createElement('div');
                locAll.className = 'folder-item folder-category';
                locAll.setAttribute('data-category', 'location');
                locAll.setAttribute('data-id', '');
                locAll.innerHTML = '<span><i class="fas fa-map-marker-alt"></i>Alle Standorte</span>';
                locAll.onclick = function() { setLocationFilter(''); };
                locWrap.appendChild(locAll);
                (data.locations || []).forEach(function(l) {
                    var el = document.createElement('div');
                    el.className = 'folder-item folder-category' + (currentLocationId === String(l.id) ? ' active' : '');
                    el.setAttribute('data-category', 'location');
                    el.setAttribute('data-id', String(l.id));
                    el.innerHTML = '<span><i class="fas fa-map-marker-alt"></i>' + escapeHtml(l.name) + '</span>';
                    el.onclick = function() { setLocationFilter(String(l.id)); };
                    locWrap.appendChild(el);
                });
                var courseAll = document.createElement('div');
                courseAll.className = 'folder-item folder-category';
                courseAll.setAttribute('data-category', 'course');
                courseAll.setAttribute('data-id', '');
                courseAll.innerHTML = '<span><i class="fas fa-graduation-cap"></i>Alle Kurse</span>';
                courseAll.onclick = function() { setCourseFilter(''); };
                courseWrap.appendChild(courseAll);
                (data.courses || []).forEach(function(c) {
                    var el = document.createElement('div');
                    el.className = 'folder-item folder-category' + (currentCourseId === String(c.id) ? ' active' : '');
                    el.setAttribute('data-category', 'course');
                    el.setAttribute('data-id', String(c.id));
                    el.innerHTML = '<span><i class="fas fa-graduation-cap"></i>' + escapeHtml(c.name) + '</span>';
                    el.onclick = function() { setCourseFilter(String(c.id)); };
                    courseWrap.appendChild(el);
                });
            })
            .catch(function() {});
    }

    function syncEmails() {
        if (!confirm('E-Mails jetzt synchronisieren?')) return;
        fetch('{{ path('admin_email_sync') }}', { method: 'POST', headers: { 'Content-Type': 'application/json' } })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                if (data.success) {
                    showToast(data.message + (data.synced ? ' (' + data.synced + ' neu)' : ''));
                    loadEmails();
                } else {
                    showToast(data.error || 'Fehler', 'error');
                }
            })
            .catch(function() { showToast('Netzwerkfehler', 'error'); });
    }

    function testConnection() {
        fetch('{{ path('admin_email_test_connection') }}', { method: 'POST', headers: { 'Content-Type': 'application/json' } })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                showToast(data.success ? data.message : (data.error || 'Fehler'), data.success ? 'success' : 'error');
            })
            .catch(function() { showToast('Netzwerkfehler', 'error'); });
    }

    document.querySelectorAll('.email-folders .folder-item[data-folder]').forEach(function(item) {
        item.addEventListener('click', function(e) {
            e.preventDefault();
            setFolder(
                item.getAttribute('data-folder'),
                item.getAttribute('data-status') || '',
                item.getAttribute('data-message-type')
            );
        });
    });
    document.addEventListener('DOMContentLoaded', function() {
        loadCategories();
        loadCounts();
        loadEmails();
    });

    window.loadEmails = loadEmails;
    window.clearFilters = clearFilters;
    window.syncEmails = syncEmails;
    window.testConnection = testConnection;
})();
</script>
{% endblock %}