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

{% block title %}User Management - B62a Minecraft{% endblock %}

{% block body %}
    <div class="page-title-bar">
        <h1 class="page-title">User Management</h1>
        <a href="{{ path('app_dashboard') }}" class="btn btn-back">← ZURÜCK ZUM DASHBOARD</a>
    </div>

    <div class="card">
        <div class="page-header">
            <h2 class="m-0">Dashboard Benutzer</h2>
            <button onclick="document.getElementById('create-user-modal').style.display='flex'" class="btn btn-auto bg-accent">
                + NEUER BENUTZER
            </button>
        </div>

        <div class="table-wrapper">
            <table class="users-table">
                <thead>
                    <tr>
                        <th>USERNAME</th>
                        <th>EMAIL</th>
                        <th>ROLLE</th>
                        <th>STATUS</th>
                        <th>ERSTELLT</th>
                        <th class="text-center">AKTIONEN</th>
                    </tr>
                </thead>
                <tbody>
                    {% for user in users %}
                    <tr>
                        <td>
                            <strong>{{ user.username }}</strong>
                            {% if user.id == app.user.id %}
                                <span class="user-tag">(Sie)</span>
                            {% endif %}
                        </td>
                        <td class="text-muted">{{ user.email ?? '-' }}</td>
                        <td>
                            {% if user.isSuperAdmin %}
                                <span class="badge badge-super-admin">SUPER ADMIN</span>
                            {% elseif user.isModerator %}
                                <span class="badge badge-mod">MODERATOR</span>
                            {% else %}
                                <span class="badge badge-user-role">USER</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if user.isActive %}
                                <span class="user-status-active">● Aktiv</span>
                            {% else %}
                                <span class="user-status-inactive">● Deaktiviert</span>
                            {% endif %}
                        </td>
                        <td class="text-muted text-lg">
                            {{ user.createdAt|date('d.m.Y H:i') }}
                        </td>
                        <td class="text-center">
                            <div class="actions-group">
                                <button onclick="openRoleModal({{ user.id }}, '{{ user.username }}', '{% if user.isSuperAdmin %}ROLE_SUPER_ADMIN{% elseif user.isModerator %}ROLE_MODERATOR{% else %}ROLE_USER{% endif %}')"
                                        class="btn btn-sm btn-xs"
                                        {% if user.id == app.user.id %}disabled{% endif %}>
                                    ROLLE ändern
                                </button>
                                <button onclick="openPasswordModal({{ user.id }}, '{{ user.username }}')"
                                        class="btn btn-sm btn-xs">
                                    PASSWORT ändern
                                </button>
                                <form action="{{ path('app_dashboard_user_toggle', {id: user.id}) }}" method="post" class="inline-form">
                                    <input type="hidden" name="_token" value="{{ csrf_token('toggle-user-' ~ user.id) }}">
                                    <button type="submit"
                                            class="btn btn-sm btn-xs {% if user.isActive %}btn-deactivate{% else %}btn-activate{% endif %}"
                                            {% if user.id == app.user.id %}disabled{% endif %}
                                            onclick="return confirm('Benutzer {{ user.isActive ? 'deaktivieren' : 'aktivieren' }}?')">
                                        {% if user.isActive %}Account DEAKTIVIEREN{% else %}Account AKTIVIEREN{% endif %}
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <!-- CREATE USER MODAL -->
    <div id="create-user-modal" class="modal-overlay">
        <div class="card modal-md">
            <div class="modal-header">
                <h2>Neuen Benutzer erstellen</h2>
                <button onclick="document.getElementById('create-user-modal').style.display='none'" class="modal-close-btn">&times;</button>
            </div>
            <form action="{{ path('app_dashboard_user_create') }}" method="post">
                <input type="hidden" name="_token" value="{{ csrf_token('create-user') }}">
                <label class="modal-form-label">Username: *</label>
                <input type="text" name="username" required minlength="3" placeholder="z.B. admin" class="modal-input">

                <label class="modal-form-label">Email: (optional)</label>
                <input type="email" name="email" placeholder="user@example.com" class="modal-input">

                <label class="modal-form-label">Passwort: * (min. 6 Zeichen)</label>
                <input type="password" name="password" required minlength="6" placeholder="••••••••" class="modal-input">

                <label class="modal-form-label">Rolle:</label>
                <select name="role" class="modal-select modal-input-lg">
                    <option value="ROLE_USER">User (Nur Lesen)</option>
                    <option value="ROLE_MODERATOR">Moderator (Server-Verwaltung)</option>
                    <option value="ROLE_SUPER_ADMIN">Super Admin (Volle Rechte)</option>
                </select>

                <div class="modal-actions">
                    <button type="button" onclick="document.getElementById('create-user-modal').style.display='none'" class="btn btn-outline flex-1">ABBRECHEN</button>
                    <button type="submit" class="btn bg-accent flex-1">ERSTELLEN</button>
                </div>
            </form>
        </div>
    </div>

    <!-- CHANGE ROLE MODAL -->
    <div id="role-modal" class="modal-overlay">
        <div class="card modal-sm">
            <div class="modal-header">
                <h2>Rolle ändern</h2>
                <button onclick="document.getElementById('role-modal').style.display='none'" class="modal-close-btn">&times;</button>
            </div>
            <form id="role-form" method="post">
                <input type="hidden" name="_token" id="role-csrf-token" value="{{ csrf_token('update-role') }}">
                <p class="modal-text">Rolle für <strong id="role-username"></strong> ändern:</p>
                <select name="role" id="role-select" class="modal-select modal-input-lg">
                    <option value="ROLE_USER">User (Nur Lesen)</option>
                    <option value="ROLE_MODERATOR">Moderator (Server-Verwaltung)</option>
                    <option value="ROLE_SUPER_ADMIN">Super Admin (Volle Rechte)</option>
                </select>

                <div class="modal-actions">
                    <button type="button" onclick="document.getElementById('role-modal').style.display='none'" class="btn btn-outline flex-1">ABBRECHEN</button>
                    <button type="submit" class="btn bg-accent flex-1">SPEICHERN</button>
                </div>
            </form>
        </div>
    </div>

    <!-- RESET PASSWORD MODAL -->
    <div id="password-modal" class="modal-overlay">
        <div class="card modal-sm">
            <div class="modal-header">
                <h2>Passwort zurücksetzen</h2>
                <button onclick="document.getElementById('password-modal').style.display='none'" class="modal-close-btn">&times;</button>
            </div>
            <form id="password-form" method="post">
                <input type="hidden" name="_token" id="password-csrf-token" value="{{ csrf_token('reset-password') }}">
                <p class="modal-text">Neues Passwort für <strong id="password-username"></strong>:</p>
                <input type="password" name="new_password" required minlength="6" placeholder="Neues Passwort (min. 6 Zeichen)" class="modal-input modal-input-lg">

                <div class="modal-actions">
                    <button type="button" onclick="document.getElementById('password-modal').style.display='none'" class="btn btn-outline flex-1">ABBRECHEN</button>
                    <button type="submit" class="btn bg-accent flex-1">ZURÜCKSETZEN</button>
                </div>
            </form>
        </div>
    </div>

{% endblock %}

{% block javascripts %}
<script>
    function openRoleModal(userId, username, currentRole) {
        document.getElementById('role-username').textContent = username;
        document.getElementById('role-select').value = currentRole;
        document.getElementById('role-form').action = '/dashboard/users/' + userId + '/update-role';
        document.getElementById('role-modal').style.display = 'flex';
    }

    function openPasswordModal(userId, username) {
        document.getElementById('password-username').textContent = username;
        document.getElementById('password-form').action = '/dashboard/users/' + userId + '/reset-password';
        document.getElementById('password-modal').style.display = 'flex';
    }
</script>
{% endblock %}