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

{% block title %}Outlook Import Test{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">
            <i class="fas fa-download text-primary"></i>
            Outlook Termine Importieren (Test)
        </h1>
        <a href="{{ path('admin_outlook_index') }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left"></i> Zurück zur Übersicht
        </a>
    </div>

    <!-- Info Card -->
    <div class="card shadow mb-4 border-left-info">
        <div class="card-body">
            <div class="row align-items-center">
                <div class="col-auto">
                    <i class="fas fa-info-circle fa-3x text-info"></i>
                </div>
                <div class="col">
                    <h5 class="font-weight-bold mb-1">Testseite für Outlook-Import</h5>
                    <p class="mb-0 text-gray-700">
                        Diese Seite zeigt alle Termine aus Ihrem Outlook-Kalender an. 
                        Sie können die Struktur der Termine prüfen, bevor Sie diese in das Buchungssystem importieren.
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- Kalender-Auswahl -->
    <div class="row">
        <div class="col-lg-4 mb-4">
            <div class="card shadow">
                <div class="card-header py-3 bg-primary text-white">
                    <h6 class="m-0 font-weight-bold">
                        <i class="fas fa-user-check"></i> Verbundene Konten
                    </h6>
                </div>
                <div class="card-body">
                    {% if active_syncs is empty %}
                        <div class="alert alert-warning">
                            <i class="fas fa-exclamation-triangle"></i>
                            Keine aktiven Outlook-Verbindungen gefunden.
                        </div>
                    {% else %}
                        <p class="text-muted small mb-3">Wählen Sie ein Konto, um dessen Termine anzuzeigen:</p>
                        <div class="list-group">
                            {% for sync in active_syncs %}
                                <a href="#" 
                                   class="list-group-item list-group-item-action account-item" 
                                   data-email="{{ sync.userEmail }}">
                                    <div class="d-flex w-100 justify-content-between align-items-center">
                                        <div>
                                            <i class="fas fa-calendar-alt text-primary me-2"></i>
                                            <strong>{{ sync.userEmail }}</strong>
                                        </div>
                                        <span class="badge bg-success">Aktiv</span>
                                    </div>
                                    <small class="text-muted d-block mt-1">
                                        Verbunden seit: {{ sync.createdAt|date('d.m.Y H:i') }}
                                    </small>
                                </a>
                            {% endfor %}
                        </div>

                        <!-- Zeitraum-Filter -->
                        <div class="mt-4">
                            <h6 class="font-weight-bold text-gray-800 mb-3">Zeitraum</h6>
                            <div class="mb-3">
                                <label class="form-label small">Startdatum</label>
                                <input type="date" class="form-control form-control-sm" id="startDate" 
                                       value="{{ 'now'|date_modify('-30 days')|date('Y-m-d') }}">
                            </div>
                            <div class="mb-3">
                                <label class="form-label small">Enddatum</label>
                                <input type="date" class="form-control form-control-sm" id="endDate" 
                                       value="{{ 'now'|date_modify('+90 days')|date('Y-m-d') }}">
                            </div>
                            <button id="refreshBtn" class="btn btn-sm btn-outline-primary w-100" disabled>
                                <i class="fas fa-sync-alt"></i> Aktualisieren
                            </button>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="col-lg-8 mb-4">
            <!-- Loading State -->
            <div id="loadingState" class="card shadow" style="display: none;">
                <div class="card-body text-center py-5">
                    <div class="spinner-border text-primary mb-3" role="status"></div>
                    <p class="text-muted">Lade Outlook-Termine...</p>
                </div>
            </div>

            <!-- Initial State -->
            <div id="initialState" class="card shadow">
                <div class="card-body text-center py-5">
                    <i class="fas fa-calendar-check fa-4x text-gray-300 mb-3"></i>
                    <p class="text-muted">Wählen Sie ein Konto aus, um die Termine anzuzeigen.</p>
                </div>
            </div>

            <!-- Results -->
            <div id="resultsContainer" style="display: none;">
                <!-- Stats Card -->
                <div class="card shadow mb-3 border-left-success">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col">
                                <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                    Gefundene Termine
                                </div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800" id="eventCount">0</div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-calendar-day fa-2x text-success"></i>
                            </div>
                        </div>
                        <small class="text-muted" id="periodInfo"></small>
                    </div>
                </div>

                <!-- Events List -->
                <div class="card shadow">
                    <div class="card-header py-3 d-flex justify-content-between align-items-center">
                        <h6 class="m-0 font-weight-bold text-primary">
                            <i class="fas fa-list"></i> Termine-Übersicht
                        </h6>
                        <button id="exportJsonBtn" class="btn btn-sm btn-outline-secondary">
                            <i class="fas fa-file-export"></i> Als JSON exportieren
                        </button>
                    </div>
                    <div class="card-body" style="max-height: 600px; overflow-y: auto;">
                        <div id="eventsList"></div>
                    </div>
                </div>
            </div>

            <!-- Error State -->
            <div id="errorState" class="card shadow" style="display: none;">
                <div class="card-body">
                    <div class="alert alert-danger mb-0">
                        <h5 class="alert-heading">
                            <i class="fas fa-exclamation-circle"></i> Fehler beim Laden
                        </h5>
                        <p id="errorMessage" class="mb-0"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.event-card {
    border-left: 4px solid #4e73df;
    transition: all 0.2s;
}
.event-card:hover {
    box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.15);
    transform: translateY(-2px);
}
.event-card.all-day {
    border-left-color: #f6c23e;
}
.event-card.cancelled {
    border-left-color: #e74a3b;
    opacity: 0.7;
}
.badge-custom {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    let currentEmail = null;
    let currentEvents = [];

    // Account Selection
    document.querySelectorAll('.account-item').forEach(item => {
        item.addEventListener('click', function(e) {
            e.preventDefault();
            
            // Remove active class from all items
            document.querySelectorAll('.account-item').forEach(i => i.classList.remove('active'));
            this.classList.add('active');
            
            currentEmail = this.dataset.email;
            document.getElementById('refreshBtn').disabled = false;
            
            // Load events
            loadEvents(currentEmail);
        });
    });

    // Refresh Button
    document.getElementById('refreshBtn').addEventListener('click', function() {
        if (currentEmail) {
            loadEvents(currentEmail);
        }
    });

    // Export JSON Button
    document.getElementById('exportJsonBtn').addEventListener('click', function() {
        const dataStr = JSON.stringify(currentEvents, null, 2);
        const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr);
        
        const exportFileDefaultName = `outlook-events-${new Date().toISOString().split('T')[0]}.json`;
        
        const linkElement = document.createElement('a');
        linkElement.setAttribute('href', dataUri);
        linkElement.setAttribute('download', exportFileDefaultName);
        linkElement.click();
    });

    function loadEvents(email) {
        // Show loading
        document.getElementById('initialState').style.display = 'none';
        document.getElementById('resultsContainer').style.display = 'none';
        document.getElementById('errorState').style.display = 'none';
        document.getElementById('loadingState').style.display = 'block';

        // Get dates
        const startDate = document.getElementById('startDate').value + 'T00:00:00';
        const endDate = document.getElementById('endDate').value + 'T23:59:59';

        // Fetch events - Use query parameters instead of URL parameters (PHP server issue with @ in URL)
        const currentPath = window.location.pathname; // e.g., /admin/outlook/import-test
        // Remove /public if present (for backward compatibility)
        const cleanPath = currentPath.replace('/public', '');
        const basePath = cleanPath.split('/import-test')[0]; // /admin/outlook
        const fetchUrl = basePath + '/fetch-events';
        const fullUrl = fetchUrl + '?email=' + encodeURIComponent(email) + '&start=' + encodeURIComponent(startDate) + '&end=' + encodeURIComponent(endDate);
        
        console.log('Current path:', currentPath);
        console.log('Base path:', basePath);
        console.log('Fetching from:', fullUrl);
        
        fetch(fullUrl)
            .then(response => response.json())
            .then(data => {
                document.getElementById('loadingState').style.display = 'none';
                
                if (data.success) {
                    currentEvents = data.events;
                    displayEvents(data);
                } else {
                    showError(data.message || 'Unbekannter Fehler');
                }
            })
            .catch(error => {
                document.getElementById('loadingState').style.display = 'none';
                showError('Netzwerkfehler: ' + error.message);
            });
    }

    function displayEvents(data) {
        document.getElementById('resultsContainer').style.display = 'block';
        document.getElementById('eventCount').textContent = data.count;
        document.getElementById('periodInfo').textContent = 
            `Zeitraum: ${new Date(data.period.start).toLocaleDateString('de-DE')} - ${new Date(data.period.end).toLocaleDateString('de-DE')}`;

        const eventsList = document.getElementById('eventsList');
        
        if (data.events.length === 0) {
            eventsList.innerHTML = `
                <div class="alert alert-info">
                    <i class="fas fa-info-circle"></i>
                    Keine Termine im ausgewählten Zeitraum gefunden.
                </div>
            `;
            return;
        }

        eventsList.innerHTML = data.events.map((event, index) => {
            const startDate = new Date(event.start);
            const endDate = new Date(event.end);
            const isCancelled = event.is_cancelled;
            const isAllDay = event.is_all_day;
            
            return `
                <div class="card event-card mb-3 ${isAllDay ? 'all-day' : ''} ${isCancelled ? 'cancelled' : ''}">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start mb-2">
                            <h6 class="mb-0 font-weight-bold text-gray-800">
                                ${isCancelled ? '<span class="text-danger">[ABGESAGT]</span> ' : ''}
                                ${event.subject}
                            </h6>
                            <div>
                                ${isAllDay ? '<span class="badge badge-warning badge-custom">Ganztägig</span>' : ''}
                                ${isCancelled ? '<span class="badge badge-danger badge-custom">Abgesagt</span>' : ''}
                                ${event.importance === 'high' ? '<span class="badge badge-danger badge-custom">Wichtig</span>' : ''}
                            </div>
                        </div>

                        <div class="row text-sm text-gray-700 mb-2">
                            <div class="col-md-6">
                                <i class="fas fa-calendar text-primary me-1"></i>
                                <strong>Start:</strong> ${startDate.toLocaleString('de-DE')}
                            </div>
                            <div class="col-md-6">
                                <i class="fas fa-calendar-check text-success me-1"></i>
                                <strong>Ende:</strong> ${endDate.toLocaleString('de-DE')}
                            </div>
                        </div>

                        ${event.location ? `
                            <div class="text-sm text-gray-700 mb-2">
                                <i class="fas fa-map-marker-alt text-danger me-1"></i>
                                <strong>Ort:</strong> ${event.location}
                            </div>
                        ` : ''}

                        ${event.organizer ? `
                            <div class="text-sm text-gray-700 mb-2">
                                <i class="fas fa-user text-info me-1"></i>
                                <strong>Organisator:</strong> ${event.organizer}
                            </div>
                        ` : ''}

                        ${event.attendees.length > 0 ? `
                            <div class="text-sm text-gray-700 mb-2">
                                <i class="fas fa-users text-secondary me-1"></i>
                                <strong>Teilnehmer (${event.attendees.length}):</strong>
                                <div class="ms-3 mt-1">
                                    ${event.attendees.slice(0, 5).map(a => 
                                        `<span class="badge bg-secondary badge-custom me-1">${a.name || a.email}</span>`
                                    ).join('')}
                                    ${event.attendees.length > 5 ? `<span class="text-muted">+${event.attendees.length - 5} weitere</span>` : ''}
                                </div>
                            </div>
                        ` : ''}

                        ${event.categories.length > 0 ? `
                            <div class="text-sm text-gray-700 mb-2">
                                <i class="fas fa-tags text-warning me-1"></i>
                                <strong>Kategorien:</strong>
                                ${event.categories.map(cat => `<span class="badge bg-info badge-custom">${cat}</span>`).join(' ')}
                            </div>
                        ` : ''}

                        ${event.body_preview ? `
                            <div class="mt-2">
                                <button class="btn btn-sm btn-outline-secondary" type="button" 
                                        data-bs-toggle="collapse" data-bs-target="#details${index}">
                                    <i class="fas fa-eye"></i> Details anzeigen
                                </button>
                            </div>
                            <div class="collapse mt-2" id="details${index}">
                                <div class="card card-body bg-light">
                                    <small>${event.body_preview}</small>
                                    ${event.web_link ? `
                                        <a href="${event.web_link}" target="_blank" class="btn btn-sm btn-primary mt-2">
                                            <i class="fas fa-external-link-alt"></i> In Outlook öffnen
                                        </a>
                                    ` : ''}
                                </div>
                            </div>
                        ` : ''}
                    </div>
                </div>
            `;
        }).join('');
    }

    function showError(message) {
        document.getElementById('errorState').style.display = 'block';
        document.getElementById('errorMessage').textContent = message;
    }
});
</script>
{% endblock %}