{% extends 'base.html' %}

{% block title %}NBSP.space - Profile{% endblock %}


{% block content %}
<div class="container">
    <h1 class="mb-4">Profil</h1>
    
    <div class="card mb-4">
        <div class="card-body">
            <h5 class="card-title">{{ current_user.name }}</h5>
            {% if current_user.contactmail and current_user.contactmail != 'Unknown' %}
                <p class="card-text"><strong>Kontaktadresse:</strong> {{ current_user.contactmail }}</p>
                <p class="card-text"><strong>Passwort Recovery Adresse:</strong> {{ current_user.email }}</p>
            {% else %}
                <p class="card-text"><strong>Email:</strong> {{ current_user.email }}</p>
            {% endif %}
            {% if '@chaotikum.org' in current_user.email %}
            <div class="alert alert-warning" role="alert">
                <i class="fas fa-exclamation-triangle me-2"></i>
                Deine aktuelle E-Mail adresse ist die Chaotikum E-Mail Adresse. Dies kann bei Passwortverlust ein Problem sein, weil die wiederherstellungsmail an diese Adresse geschickt wird. Wir empfehlen eine andere E-Mail Adresse für dein Konto zu nutzen.
            </div>
            {% endif %}
            <p>Deine Accountinformationen kannst du unter <a href="https://me.chaotikum.org/">me.chaotikum.org</a> verwalten.</p>
            <p class="card-text"><strong>Provider:</strong> {{ current_user.provider }}</p>
            
            <h6 class="mt-4">Groups</h6>
            {% if current_user.groups and current_user.groups|length > 0 %}
                <ul class="list-group">
                    {% for group in current_user.groups %}
                        <li class="list-group-item">{{ group }}</li>
                    {% endfor %}
                </ul>
            {% else %}
                <p>You are not a member of any groups.</p>
            {% endif %}
            
            <h6 class="mt-4">Zugewiesene Schlüssel</h6>
            {% if keys and keys|length > 0 %}
                <ul class="list-group">
                    {% for key in keys %}
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <div>
                                <i class="fas fa-key me-2"></i> {{ key.name }}
                            </div>
                            <a href="{{ url_for('keys.transfer_init', key_id=key.id) }}" class="btn btn-sm btn-outline-primary">
                                <i class="fas fa-exchange-alt me-1"></i> Schlüssel abgeben
                            </a>
                        </li>
                    {% endfor %}
                </ul>
            {% else %}
                <p>Du hast keine Schlüssel zugewiesen.</p>
            {% endif %}
        </div>
    </div>
    
    <div class="card mb-4">
        <div class="card-header">
            <h5 class="mb-0">Profile Settings</h5>
        </div>
        <div class="card-body">
            <form method="POST" action="{{ url_for('main.profile') }}">
                <div class="mb-3">
                    <label for="icebox_account" class="form-label">Icebox Account</label>
                    <input type="text" class="form-control" id="icebox_account" name="icebox_account" value="{{ current_user.icebox_account or '' }}">
                </div>
                
                <div class="mb-3 form-check">
                    <input type="checkbox" class="form-check-input" id="setpresence" name="setpresence" {% if current_user.setpresence %}checked{% endif %}>
                    <label class="form-check-label" for="setpresence">Space-Presence setzen</label>
                    <small class="form-text text-muted d-block">Wenn gesetzt wird geprüft ob du im space bist und dann der presence service gesetzt.</small>
                </div>
                
                
                <div class="card mb-3">
                    <div class="card-header">
                        <h6 class="mb-0">UI-Einstellungen</h6>
                    </div>
                    <div class="card-body">
                        <div class="mb-4 form-check">
                            <input type="checkbox" class="form-check-input" id="removeunavailable" name="removeunavailable" {% if current_user.removeunavailable %}checked{% endif %}>
                            <label class="form-check-label" for="removeunavailable">Nicht verfügbare ausblenden</label>
                            <small class="form-text text-muted d-block">Aktuell nicht verfügbare Links, entweder wegen Beschränkungen auf bestimmte Gruppen oder aufgrund des Ortes, werden nicht angezeigt.</small>
                        </div>

                        <div class="mb-3">
                            <label for="theme" class="form-label">Theme</label>
                            <select class="form-select" id="theme" name="theme">
                                <option value="light" {% if current_user.theme == 'light' %}selected{% endif %}>Light</option>
                                <option value="dark" {% if current_user.theme == 'dark' %}selected{% endif %}>Dark</option>
                                <option value="classic" {% if current_user.theme == 'classic' %}selected{% endif %}>Classic</option>
                            </select>
                            <small class="form-text text-muted d-block">Wähle dein bevorzugtes Farbschema.</small>
                        </div>
                        
                        <div class="mb-3">
                            <label for="desktop_layout" class="form-label">Desktop Layout</label>
                            <select class="form-select" id="desktop_layout" name="desktop_layout">
                                <option value="categorized" {% if current_user.desktop_layout == 'categorized' %}selected{% endif %}>Kategorisiert</option>
                                <option value="compact" {% if current_user.desktop_layout == 'compact' %}selected{% endif %}>Kompakt</option>
                            </select>
                            <small class="form-text text-muted d-block">Layout-Stil für Desktop-Ansicht. <strong>Kategorisiert</strong> zeigt Links nach Kategorien gruppiert, <strong>Kompakt</strong> zeigt alle Links ohne Kategorien.</small>
                        </div>
                        
                        <div class="mb-3">
                            <label for="mobile_layout" class="form-label">Mobile Layout</label>
                            <select class="form-select" id="mobile_layout" name="mobile_layout">
                                <option value="categorized" {% if current_user.mobile_layout == 'categorized' %}selected{% endif %}>Kategorisiert</option>
                                <option value="compact" {% if current_user.mobile_layout == 'compact' %}selected{% endif %}>Kompakt</option>
                            </select>
                            <small class="form-text text-muted d-block">Layout-Stil für mobile Ansicht.</small>
                        </div>
                    </div>
                </div>

                <div class="card mb-3">
                    <div class="card-header">
                        <h6 class="mb-0">Benachrichtigungen</h6>
                    </div>
                    <div class="card-body">
                        <p class="text-muted small mb-3">Diese Einstellungen steuern sowohl die Anzeige auf der Startseite als auch Browser-Benachrichtigungen.</p>
                        <div class="mb-4 form-check">
                            <input type="checkbox" class="form-check-input" id="no_out_of_service" name="no_out_of_service" {% if current_user.no_out_of_service %}checked{% endif %}>
                            <label class="form-check-label" for="no_out_of_service">Außer-Betrieb-Meldungen ausblenden</label>
                            <small class="form-text text-muted d-block">Meldungen über defekte Geräte werden nicht angezeigt.</small>
                        </div>

                        <div class="mb-4 ms-4" id="out-of-service-exceptions-container" style="{% if not current_user.no_out_of_service %}display: none;{% endif %}">
                            <label class="form-label">Ausnahmen (trotzdem anzeigen):</label>
                            <div id="out-of-service-exceptions-list">
                            </div>
                            <small class="form-text text-muted d-block">Wähle Geräte, für die du trotzdem Meldungen erhalten möchtest.</small>
                        </div>

                        <div class="mb-4 form-check">
                            <input type="checkbox" class="form-check-input" id="no_maintenance" name="no_maintenance" {% if current_user.no_maintenance %}checked{% endif %}>
                            <label class="form-check-label" for="no_maintenance">Wartungsmeldungen ausblenden</label>
                            <small class="form-text text-muted d-block">Meldungen über Wartungen an der digitalen Infrastruktur werden nicht angezeigt.</small>
                        </div>

                        <div class="mb-4 form-check">
                            <input type="checkbox" class="form-check-input" id="no_events" name="no_events" {% if current_user.no_events %}checked{% endif %}>
                            <label class="form-check-label" for="no_events">Veranstaltungen ausblenden</label>
                            <small class="form-text text-muted d-block">Meldungen über heutige Veranstaltungen werden nicht angezeigt.</small>
                        </div>

                        <div class="mb-4 form-check">
                            <input type="checkbox" class="form-check-input" id="no_space_open" name="no_space_open" {% if current_user.no_space_open %}checked{% endif %}>
                            <label class="form-check-label" for="no_space_open">Space offen/geschlossen ausblenden</label>
                            <small class="form-text text-muted d-block">Browser-Benachrichtigungen über Öffnung/Schließung des Spaces werden nicht gesendet.</small>
                        </div>

                        <div class="mb-4 form-check">
                            <input type="checkbox" class="form-check-input" id="no_infra_downtime" name="no_infra_downtime" {% if current_user.no_infra_downtime %}checked{% endif %}>
                            <label class="form-check-label" for="no_infra_downtime">Infra-Ausfälle ausblenden</label>
                            <small class="form-text text-muted d-block">Meldungen über Ausfälle der digitalen Infrastruktur werden nicht angezeigt.</small>
                        </div>

                        <div class="mb-4 ms-4" id="infra-downtime-exceptions-container" style="{% if not current_user.no_infra_downtime %}display: none;{% endif %}">
                            <label class="form-label">Ausnahmen (trotzdem anzeigen):</label>
                            <div id="infra-downtime-exceptions-list">
                            </div>
                            <small class="form-text text-muted d-block">Wähle Systeme, für die du trotzdem Meldungen erhalten möchtest.</small>
                        </div>

                        <div class="mb-4 form-check">
                            <input type="checkbox" class="form-check-input" id="no_feinstaub" name="no_feinstaub" {% if current_user.no_feinstaub %}checked{% endif %}>
                            <label class="form-check-label" for="no_feinstaub">Feinstaub-Warnungen ausblenden</label>
                            <small class="form-text text-muted d-block">Warnungen über erhöhte Feinstaubwerte im Space werden nicht angezeigt.</small>
                        </div>

                        <div class="mb-4 form-check">
                            <input type="checkbox" class="form-check-input" id="no_update_notifications" name="no_update_notifications" {% if current_user.no_update_notifications %}checked{% endif %}>
                            <label class="form-check-label" for="no_update_notifications">Software-Update-Hinweise ausblenden</label>
                            <small class="form-text text-muted d-block">Keine Benachrichtigung anzeigen, wenn nbsp.space aktualisiert wurde.</small>
                        </div>

                        <hr class="my-4">
                        <h6 class="mb-3">Push-Benachrichtigungen</h6>
                        <div class="d-flex align-items-center gap-2">
                            <span id="push-status" class="badge bg-secondary">Wird geladen...</span>
                            <button type="button" class="btn btn-sm btn-outline-primary" id="push-subscribe-btn" style="display: none;">Aktivieren</button>
                            <button type="button" class="btn btn-sm btn-outline-danger" id="push-unsubscribe-btn" style="display: none;">Deaktivieren</button>
                        </div>
                        <small class="form-text text-muted d-block mt-2">Push-Benachrichtigungen werden auch gesendet, wenn der Browser geschlossen ist.</small>
                        <small class="form-text text-muted d-block" id="push-browser-hint" style="display: none;">Um Benachrichtigungen komplett zu blockieren, ändere die Einstellungen in deinem Browser.</small>
                    </div>
                </div>
                
                <!-- {% include 'components/profile_form_center.html' %} -->
                
                <!-- {% include 'components/profile_sediment.html' %} -->
                
                <button type="submit" class="btn btn-primary">Speichern</button>
            </form>
        </div>
    </div>
    
    <div class="card mb-4">
        <div class="card-header">
            <h5 class="mb-0">Profil-Daten</h5>
        </div>
        <div class="card-body">
            <div class="mb-3">
                <h6>Profil exportieren</h6>
                <p class="text-muted">Exportiere deine Profileinstellungen als JSON-Datei, um sie zu sichern oder auf einem anderen Gerät zu verwenden.</p>
                <a href="{{ url_for('users.export_profile') }}" class="btn btn-primary">
                    <i class="fas fa-download me-1"></i> Profil exportieren
                </a>
            </div>
            
            <hr>
            
            <div class="mt-3">
                <h6>Profil importieren</h6>
                <p class="text-muted">Importiere deine zuvor exportierten Profileinstellungen.</p>
                <form id="import-profile-form" enctype="multipart/form-data">
                    <div class="mb-3">
                        <label for="profile_file" class="form-label">Profil-Datei auswählen</label>
                        <input class="form-control" type="file" id="profile_file" name="profile_file" accept=".json">
                    </div>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-upload me-1"></i> Profil importieren
                    </button>
                </form>
                <div id="import-result" class="mt-3" style="display: none;"></div>
            </div>
        </div>
    </div>
    
    <div class="card mb-4">
        <div class="card-header">
            <h5 class="mb-0">Zurücksetzen</h5>
        </div>
        <div class="card-body">
            <div class="d-flex flex-column gap-2">
                <button type="button" id="reset-section-order" class="btn btn-outline-secondary">Individuelle Sortierung zurücksetzen</button>
                <button type="button" id="reset-first-login" class="btn btn-outline-info">Willkommensnachricht erneut anzeigen</button>
            </div>
        </div>
    </div>
    
    {% if hidden_links %}
    <div class="card mb-4">
        <div class="card-header">
            <h5 class="mb-0">Ausgeblendete Links</h5>
        </div>
        <div class="card-body">
            <div class="list-group">
                {% for link in hidden_links %}
                <div class="list-group-item d-flex justify-content-between align-items-center">
                    <div>
                        {% if link.img %}
                        <img src="{{ url_for('uploads.uploaded_file', filename=link.img) }}" alt="{{ link.name }}" class="me-2" style="height: 24px; width: auto;">
                        {% endif %}
                        {{ link.name }}
                    </div>
                    <button class="btn btn-sm btn-outline-primary unhide-btn" data-url="{{ link.url }}">
                        <i class="fas fa-eye me-1"></i> Einblenden
                    </button>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}

{% block extra_js %}
<script src="{{ url_for('static', filename='js/section-controls.js') }}"></script>
<script src="{{ url_for('static', filename='js/reset-first-login.js') }}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Handle unhide button clicks
        document.querySelectorAll('.unhide-btn').forEach(function(btn) {
            btn.addEventListener('click', function(e) {
                e.preventDefault();
                const url = this.getAttribute('data-url');
                const listItem = this.closest('.list-group-item');
                
                fetch('/api/unhide', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ url: url }),
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // Remove the item from the list
                        listItem.remove();
                        
                        // If no more hidden links, hide the section
                        const listGroup = document.querySelector('.list-group');
                        if (listGroup && listGroup.children.length === 0) {
                            const card = document.querySelector('.card:last-child');
                            if (card) card.style.display = 'none';
                        }
                    }
                });
            });
        });
        
        // Handle reset section order button
        const resetSectionOrderBtn = document.getElementById('reset-section-order');
        if (resetSectionOrderBtn) {
            resetSectionOrderBtn.addEventListener('click', function(e) {
                e.preventDefault();
                
                fetch('/api/section/reset-order', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({}),
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        window.location.reload();
                    }
                });
            });
        }
        
        // Handle profile import form submission
        const importForm = document.getElementById('import-profile-form');
        const importResult = document.getElementById('import-result');
        
        if (importForm) {
            importForm.addEventListener('submit', function(e) {
                e.preventDefault();
                
                // Show loading state
                importResult.innerHTML = '<div class="alert alert-info">Importing profile...</div>';
                importResult.style.display = 'block';
                
                const formData = new FormData(importForm);
                
                fetch('{{ url_for("users.import_profile") }}', {
                    method: 'POST',
                    body: formData
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // Show success message with any validation warnings
                        let warningsHtml = '';
                        if (data.validation_warnings && data.validation_warnings.length > 0) {
                            warningsHtml = `
                                <div class="alert alert-warning mt-3">
                                    <h6>Validation Warnings:</h6>
                                    <ul class="mb-0">
                                        ${data.validation_warnings.map(warning => `<li>${warning}</li>`).join('')}
                                    </ul>
                                </div>
                            `;
                        }
                        
                        importResult.innerHTML = `
                            <div class="alert alert-success">
                                <h5>${data.message}</h5>
                                <p>Updated fields: ${data.updated_fields.join(', ') || 'None'}</p>
                                <p>Reloading page in 3 seconds...</p>
                            </div>
                            ${warningsHtml}
                        `;
                        
                        // Reload page after 3 seconds
                        setTimeout(() => {
                            window.location.reload();
                        }, 3000);
                    } else {
                        // Show error message
                        importResult.innerHTML = `
                            <div class="alert alert-danger">
                                <h5>Error importing profile</h5>
                                <p>${data.error || 'Unknown error'}</p>
                            </div>
                        `;
                    }
                })
                .catch(error => {
                    // Show error message
                    importResult.innerHTML = `
                        <div class="alert alert-danger">
                            <h5>Error importing profile</h5>
                            <p>${error.message || 'Unknown error'}</p>
                        </div>
                    `;
                });
            });
        }

        // Handle out-of-service exceptions
        const noOutOfServiceCheckbox = document.getElementById('no_out_of_service');
        const exceptionsContainer = document.getElementById('out-of-service-exceptions-container');
        const exceptionsList = document.getElementById('out-of-service-exceptions-list');
        const userExceptions = {{ current_user.out_of_service_exceptions | tojson }};

        if (noOutOfServiceCheckbox && exceptionsContainer) {
            noOutOfServiceCheckbox.addEventListener('change', function() {
                exceptionsContainer.style.display = this.checked ? 'block' : 'none';
            });

            // Fetch and populate device checkboxes
            fetch('/api/status/out-of-service-devices')
                .then(response => response.json())
                .then(devices => {
                    if (devices.length === 0) {
                        exceptionsList.innerHTML = '<small class="text-muted">Keine Geräte verfügbar.</small>';
                        return;
                    }

                    devices.forEach(device => {
                        const div = document.createElement('div');
                        div.className = 'form-check';

                        const checkbox = document.createElement('input');
                        checkbox.type = 'checkbox';
                        checkbox.className = 'form-check-input';
                        checkbox.name = 'out_of_service_exception';
                        checkbox.value = device;
                        checkbox.id = 'exception_' + device.replace(/[^a-zA-Z0-9]/g, '_');
                        if (userExceptions.includes(device)) {
                            checkbox.checked = true;
                        }

                        const label = document.createElement('label');
                        label.className = 'form-check-label';
                        label.htmlFor = checkbox.id;
                        label.textContent = device;

                        div.appendChild(checkbox);
                        div.appendChild(label);
                        exceptionsList.appendChild(div);
                    });
                });
        }

        // Infra downtime exceptions toggle
        const infraDowntimeCheckbox = document.getElementById('no_infra_downtime');
        const infraDowntimeExceptionsContainer = document.getElementById('infra-downtime-exceptions-container');
        const infraDowntimeExceptionsList = document.getElementById('infra-downtime-exceptions-list');

        if (infraDowntimeCheckbox && infraDowntimeExceptionsContainer && infraDowntimeExceptionsList) {
            const userInfraExceptions = {{ (current_user.infra_downtime_exceptions | tojson) if current_user.infra_downtime_exceptions else '[]' | safe }};

            infraDowntimeCheckbox.addEventListener('change', function() {
                infraDowntimeExceptionsContainer.style.display = this.checked ? 'block' : 'none';
            });

            // Fetch and populate system checkboxes
            fetch('/api/status/infra-systems')
                .then(response => response.json())
                .then(systems => {
                    if (systems.length === 0) {
                        infraDowntimeExceptionsList.innerHTML = '<small class="text-muted">Keine Systeme verfügbar.</small>';
                        return;
                    }

                    systems.forEach(system => {
                        const div = document.createElement('div');
                        div.className = 'form-check';

                        const checkbox = document.createElement('input');
                        checkbox.type = 'checkbox';
                        checkbox.className = 'form-check-input';
                        checkbox.name = 'infra_downtime_exception';
                        checkbox.value = system;
                        checkbox.id = 'infra_exception_' + system.replace(/[^a-zA-Z0-9]/g, '_');
                        if (userInfraExceptions.includes(system)) {
                            checkbox.checked = true;
                        }

                        const label = document.createElement('label');
                        label.className = 'form-check-label';
                        label.htmlFor = checkbox.id;
                        label.textContent = system;

                        div.appendChild(checkbox);
                        div.appendChild(label);
                        infraDowntimeExceptionsList.appendChild(div);
                    });
                });
        }

        // Push notification management
        async function initPushUI() {
            const statusBadge = document.getElementById('push-status');
            const subscribeBtn = document.getElementById('push-subscribe-btn');
            const unsubscribeBtn = document.getElementById('push-unsubscribe-btn');
            const browserHint = document.getElementById('push-browser-hint');

            // Reset button visibility
            subscribeBtn.style.display = 'none';
            unsubscribeBtn.style.display = 'none';
            browserHint.style.display = 'none';

            if (!('serviceWorker' in navigator) || !('PushManager' in window)) {
                statusBadge.textContent = 'Nicht unterstützt';
                statusBadge.className = 'badge bg-secondary';
                return;
            }

            try {
                const registration = await navigator.serviceWorker.getRegistration('/sw.js');
                if (registration) {
                    const subscription = await registration.pushManager.getSubscription();
                    if (subscription) {
                        statusBadge.textContent = 'Aktiviert';
                        statusBadge.className = 'badge bg-success';
                        unsubscribeBtn.style.display = 'inline-block';
                        browserHint.style.display = 'block';
                    } else {
                        statusBadge.textContent = 'Deaktiviert';
                        statusBadge.className = 'badge bg-warning text-dark';
                        subscribeBtn.style.display = 'inline-block';
                    }
                } else {
                    statusBadge.textContent = 'Deaktiviert';
                    statusBadge.className = 'badge bg-warning text-dark';
                    subscribeBtn.style.display = 'inline-block';
                }
            } catch (e) {
                statusBadge.textContent = 'Fehler';
                statusBadge.className = 'badge bg-danger';
            }

        }

        function urlBase64ToUint8Array(base64String) {
            const padding = '='.repeat((4 - base64String.length % 4) % 4);
            const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
            const rawData = window.atob(base64);
            const outputArray = new Uint8Array(rawData.length);
            for (let i = 0; i < rawData.length; ++i) {
                outputArray[i] = rawData.charCodeAt(i);
            }
            return outputArray;
        }

        // Set up event listeners once
        document.getElementById('push-subscribe-btn').addEventListener('click', async () => {
            try {
                const registration = await navigator.serviceWorker.register('/sw.js');
                const permission = await Notification.requestPermission();
                if (permission !== 'granted') {
                    showToast('Benachrichtigungsberechtigung verweigert', 'danger');
                    return;
                }

                const response = await fetch('/api/push/vapid-public-key');
                const { publicKey } = await response.json();
                if (!publicKey) {
                    showToast('Push-Konfiguration fehlt', 'danger');
                    return;
                }

                const subscription = await registration.pushManager.subscribe({
                    userVisibleOnly: true,
                    applicationServerKey: urlBase64ToUint8Array(publicKey)
                });

                await fetch('/api/push/subscribe', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(subscription.toJSON())
                });

                showToast('Push-Benachrichtigungen aktiviert', 'success');
                initPushUI();
            } catch (e) {
                showToast('Aktivierung fehlgeschlagen', 'danger');
            }
        });

        document.getElementById('push-unsubscribe-btn').addEventListener('click', async () => {
            try {
                const registration = await navigator.serviceWorker.getRegistration('/sw.js');
                const subscription = await registration.pushManager.getSubscription();
                if (subscription) {
                    await fetch('/api/push/unsubscribe', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({ endpoint: subscription.endpoint })
                    });
                    await subscription.unsubscribe();
                }
                showToast('Push-Benachrichtigungen deaktiviert', 'success');
                initPushUI();
            } catch (e) {
                showToast('Deaktivierung fehlgeschlagen', 'danger');
            }
        });

        initPushUI();
    });
</script>
{% endblock %}