{% extends 'base.html' %}

{% block title %}nbsp.space - Benutzerdetails: {{ user.name }}{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1>Benutzerdetails: {{ user.name }}</h1>
        <div>
            {% if current_user and '/nbspspaceadmin' in current_user.groups and current_user.id != user.id %}
            <button class="btn btn-danger me-2" onclick="deleteUser()">
                <i class="fas fa-trash"></i> Benutzer löschen
            </button>
            {% endif %}
            <a href="{{ url_for('users.index') }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-1"></i> Zurück zur Liste
            </a>
        </div>
    </div>
    
    <div class="row">
        <div class="col-md-6">
            <div class="card mb-4">
                <div class="card-header bg-primary text-white">
                    <h5 class="card-title mb-0">Grundinformationen</h5>
                </div>
                <div class="card-body">
                    <table class="table">
                        <tr>
                            <th style="width: 30%">ID:</th>
                            <td>
                                <span id="user-id-display">{{ user.id }}</span>
                                {% if current_user and '/nbspspaceadmin' in current_user.groups %}
                                <button class="btn btn-sm btn-outline-warning ms-2" id="edit-id-btn" onclick="toggleIdEdit()">
                                    <i class="fas fa-edit"></i> Ändern
                                </button>
                                <div id="edit-id-form" style="display: none;" class="mt-2">
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="new-id-input" placeholder="Neue ID eingeben">
                                        <button class="btn btn-success" onclick="saveNewId()">
                                            <i class="fas fa-save"></i> Speichern
                                        </button>
                                        <button class="btn btn-secondary" onclick="cancelIdEdit()">
                                            <i class="fas fa-times"></i> Abbrechen
                                        </button>
                                    </div>
                                    <small class="text-muted">Warnung: Das Ändern der ID ist eine sensible Operation!</small>
                                </div>
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th>Name:</th>
                            <td>{{ user.name }}</td>
                        </tr>
                        <tr>
                            <th>E-Mail:</th>
                            <td>{{ user.email if user.email else '-' }}</td>
                        </tr>
                        <tr>
                            <th>Provider:</th>
                            <td>{{ user.provider }}</td>
                        </tr>
                        <tr>
                            <th>Presence Tracking:</th>
                            <td>
                                {% if user.setpresence %}
                                <span class="badge bg-success">Aktiviert</span>
                                {% else %}
                                <span class="badge bg-secondary">Deaktiviert</span>
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th>Verstecke nicht verfügbare:</th>
                            <td>
                                {% if user.removeunavailable %}
                                <span class="badge bg-success">Aktiviert</span>
                                {% else %}
                                <span class="badge bg-secondary">Deaktiviert</span>
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th>First Login:</th>
                            <td>
                                {% if user.first_login %}
                                <span class="badge bg-warning">Ja ({{ user.first_login }})</span>
                                {% else %}
                                <span class="badge bg-secondary">Nein ({{ user.first_login }})</span>
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th>Letzter Login Version:</th>
                            <td>{{ user.last_login_version or '-' }}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        
        <div class="col-md-6">
            <div class="card mb-4">
                <div class="card-header bg-success text-white">
                    <h5 class="card-title mb-0">Gruppen</h5>
                </div>
                <div class="card-body">
                    {% if user.groups %}
                        <div class="d-flex flex-wrap gap-2">
                            {% for group in user.groups %}
                            <span class="badge bg-secondary p-2">{{ group }}</span>
                            {% endfor %}
                        </div>
                    {% else %}
                        <p class="text-muted">Keine Gruppen zugewiesen</p>
                    {% endif %}
                </div>
            </div>
            
            <div class="card mb-4">
                <div class="card-header bg-info text-white">
                    <h5 class="card-title mb-0">Icebox-Account</h5>
                </div>
                <div class="card-body">
                    {% if user.icebox_account %}
                        <p>{{ user.icebox_account }}</p>
                    {% else %}
                        <p class="text-muted">Kein Icebox-Account konfiguriert</p>
                    {% endif %}
                </div>
            </div>
            
            <div class="card mb-4">
                <div class="card-header bg-warning text-dark">
                    <h5 class="card-title mb-0">Sediment iCal</h5>
                </div>
                <div class="card-body">
                    {% if user.sedimentical %}
                        <p><i class="fas fa-check-circle text-success"></i> Sediment iCal URL konfiguriert</p>
                    {% else %}
                        <p class="text-muted">Keine Sediment iCal URL konfiguriert</p>
                    {% endif %}
                </div>
            </div>
            
            <div class="card mb-4">
                <div class="card-header bg-secondary text-white">
                    <h5 class="card-title mb-0">UI-Einstellungen</h5>
                </div>
                <div class="card-body">
                    <table class="table">
                        <tr>
                            <th>Theme:</th>
                            <td>
                                {% if user.theme == 'light' %}
                                    <span class="badge bg-light text-dark">Light</span>
                                {% elif user.theme == 'dark' %}
                                    <span class="badge bg-dark text-white">Dark</span>
                                {% elif user.theme == 'classic' %}
                                    <span class="badge bg-secondary">Classic</span>
                                {% else %}
                                    <span class="badge bg-secondary">Standard</span>
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th>Desktop Layout:</th>
                            <td>
                                {% if user.desktop_layout == 'categorized' %}
                                    <span class="badge bg-info">Kategorisiert</span>
                                {% elif user.desktop_layout == 'compact' %}
                                    <span class="badge bg-info">Kompakt</span>
                                {% else %}
                                    <span class="badge bg-secondary">Standard</span>
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th>Mobile Layout:</th>
                            <td>
                                {% if user.mobile_layout == 'categorized' %}
                                    <span class="badge bg-info">Kategorisiert</span>
                                {% elif user.mobile_layout == 'compact' %}
                                    <span class="badge bg-info">Kompakt</span>
                                {% else %}
                                    <span class="badge bg-secondary">Standard</span>
                                {% endif %}
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Additional user information row -->
    <div class="row mt-4">
        <!-- Form information -->
        <div class="col-md-6">
            <div class="card mb-4">
                <div class="card-header bg-primary text-white">
                    <h5 class="card-title mb-0">Formular-Informationen</h5>
                </div>
                <div class="card-body">
                    <table class="table">
                        <tr>
                            <th>Formular-Name:</th>
                            <td>{{ user.form_name or '-' }}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        
        <!-- Hidden links -->
        <div class="col-md-6">
            <div class="card mb-4">
                <div class="card-header bg-danger text-white">
                    <h5 class="card-title mb-0">Ausgeblendete Links</h5>
                </div>
                <div class="card-body">
                    {% if user.hidden_links and user.hidden_links|length > 0 %}
                        <ul class="list-group">
                            {% for link in user.hidden_links %}
                            <li class="list-group-item">{{ link }}</li>
                            {% endfor %}
                        </ul>
                    {% else %}
                        <p class="text-muted">Keine ausgeblendeten Links</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    
    <!-- Notification settings row -->
    <div class="row mt-4">
        <div class="col-md-6">
            <div class="card mb-4">
                <div class="card-header bg-info text-white">
                    <h5 class="card-title mb-0">Benachrichtigungs-Einstellungen</h5>
                </div>
                <div class="card-body">
                    <table class="table">
                        <tr>
                            <th>Außer-Betrieb ausblenden:</th>
                            <td>
                                {% if user.no_out_of_service %}
                                <span class="badge bg-warning">Ja</span>
                                {% else %}
                                <span class="badge bg-secondary">Nein</span>
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th>Außer-Betrieb Ausnahmen:</th>
                            <td>
                                {% if user.out_of_service_exceptions and user.out_of_service_exceptions|length > 0 %}
                                {{ user.out_of_service_exceptions|join(', ') }}
                                {% else %}
                                <span class="text-muted">-</span>
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th>Wartung ausblenden:</th>
                            <td>
                                {% if user.no_maintenance %}
                                <span class="badge bg-warning">Ja</span>
                                {% else %}
                                <span class="badge bg-secondary">Nein</span>
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th>Events ausblenden:</th>
                            <td>
                                {% if user.no_events %}
                                <span class="badge bg-warning">Ja</span>
                                {% else %}
                                <span class="badge bg-secondary">Nein</span>
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th>Space offen ausblenden:</th>
                            <td>
                                {% if user.no_space_open %}
                                <span class="badge bg-warning">Ja</span>
                                {% else %}
                                <span class="badge bg-secondary">Nein</span>
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th>Infra-Ausfälle ausblenden:</th>
                            <td>
                                {% if user.no_infra_downtime %}
                                <span class="badge bg-warning">Ja</span>
                                {% else %}
                                <span class="badge bg-secondary">Nein</span>
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th>Infra-Ausfall Ausnahmen:</th>
                            <td>
                                {% if user.infra_downtime_exceptions and user.infra_downtime_exceptions|length > 0 %}
                                {{ user.infra_downtime_exceptions|join(', ') }}
                                {% else %}
                                <span class="text-muted">-</span>
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th>Update-Hinweise ausblenden:</th>
                            <td>
                                {% if user.no_update_notifications %}
                                <span class="badge bg-warning">Ja</span>
                                {% else %}
                                <span class="badge bg-secondary">Nein</span>
                                {% endif %}
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function toggleIdEdit() {
    document.getElementById('edit-id-form').style.display = 'block';
    document.getElementById('edit-id-btn').style.display = 'none';
    document.getElementById('new-id-input').value = '';
    document.getElementById('new-id-input').focus();
}

function cancelIdEdit() {
    document.getElementById('edit-id-form').style.display = 'none';
    document.getElementById('edit-id-btn').style.display = 'inline-block';
}

function saveNewId() {
    const oldId = '{{ user.id }}';
    const newId = document.getElementById('new-id-input').value.trim();
    
    if (!newId) {
        alert('Bitte geben Sie eine neue ID ein.');
        return;
    }
    
    if (newId === oldId) {
        alert('Die neue ID muss sich von der aktuellen ID unterscheiden.');
        return;
    }
    
    if (!confirm(`Sind Sie sicher, dass Sie die Benutzer-ID von "${oldId}" zu "${newId}" ändern möchten?\n\nDies ist eine sensible Operation und kann nicht rückgängig gemacht werden!`)) {
        return;
    }
    
    // Disable buttons during request
    const saveBtn = event.target;
    const cancelBtn = saveBtn.nextElementSibling;
    saveBtn.disabled = true;
    cancelBtn.disabled = true;
    saveBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Speichern...';
    
    fetch('/users/api/change-id', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            old_id: oldId,
            new_id: newId
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert(data.message);
            // Redirect to the new user detail page
            window.location.href = '/users/' + encodeURIComponent(newId);
        } else {
            alert('Fehler: ' + data.error);
            saveBtn.disabled = false;
            cancelBtn.disabled = false;
            saveBtn.innerHTML = '<i class="fas fa-save"></i> Speichern';
        }
    })
    .catch(error => {
        alert('Fehler beim Ändern der ID: ' + error);
        saveBtn.disabled = false;
        cancelBtn.disabled = false;
        saveBtn.innerHTML = '<i class="fas fa-save"></i> Speichern';
    });
}

function deleteUser() {
    const userId = '{{ user.id }}';
    const userName = '{{ user.name }}';
    
    if (!confirm(`WARNUNG: Sind Sie absolut sicher, dass Sie den Benutzer "${userName}" (ID: ${userId}) löschen möchten?\n\nDiese Aktion kann NICHT rückgängig gemacht werden!\n\nAlle Benutzerdaten werden permanent gelöscht.`)) {
        return;
    }
    
    // Second confirmation
    if (!confirm(`Letzte Bestätigung: Benutzer "${userName}" wirklich löschen?`)) {
        return;
    }
    
    fetch('/users/api/delete', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            user_id: userId
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert(data.message);
            // Redirect to user list
            window.location.href = '/users/';
        } else {
            alert('Fehler: ' + data.error);
        }
    })
    .catch(error => {
        alert('Fehler beim Löschen des Benutzers: ' + error);
    });
}
</script>
{% endblock %}