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

{% block title %}Whitelist Anfragen - B62a Minecraft{% endblock %}

{% block body %}
    <div class="requests-layout">
        <!-- LEFT COLUMN: Whitelist -->
        <div class="requests-column">
            <div class="card">
                <h2>✅ Aktuelle Whitelist ({{ whitelist|length }} Spieler)</h2>

                {% if is_granted('ROLE_MODERATOR') %}
                <div class="add-player-box">
                    <h3 class="add-player-title">➕ Spieler manuell zur Whitelist hinzufügen</h3>
                    <form action="{{ path('app_dashboard_whitelist_add') }}" method="post" class="add-player-form">
                        <input type="hidden" name="_token" value="{{ csrf_token('whitelist-add') }}">
                        <div class="add-player-input">
                            <input type="text"
                                   name="username"
                                   placeholder="Minecraft Username (z.B. Notch)"
                                   required
                                   pattern="[a-zA-Z0-9_]{3,16}"
                                   title="3-16 Zeichen: Buchstaben, Zahlen, Unterstriche"
                                   autocomplete="new-password"
                                   readonly
                                   onfocus="this.removeAttribute('readonly');"
                                   class="add-player-input">
                        </div>
                        <button type="submit" class="btn add-player-btn">
                            ✅ HINZUFÜGEN
                        </button>
                    </form>
                    <small class="add-player-hint">
                        💡 Tipp: Spieler ohne Request direkt hinzufügen (z.B. für Freunde)
                    </small>
                </div>
                {% endif %}

                {% if whitelist|length == 0 %}
                    <p class="empty-state-large">
                        Whitelist ist leer
                    </p>
                {% else %}
                    <div class="whitelist-items">
                        {% for player in whitelist %}
                            <div class="user-card user-card-compact">
                                <img src="https://minotar.net/avatar/{{ player.name }}/40" class="user-avatar" alt="{{ player.name }}">
                                <div class="user-info flex-grow">
                                    <b>{{ player.name }}</b>
                                    <span class="user-uuid">{{ player.uuid[:8] }}...</span>
                                </div>
                                {% if is_granted('ROLE_MODERATOR') %}
                                <form action="{{ path('app_dashboard_whitelist_remove') }}" method="post" class="inline-form">
                                    <input type="hidden" name="_token" value="{{ csrf_token('whitelist-remove-' ~ player.name) }}">
                                    <input type="hidden" name="username" value="{{ player.name }}">
                                    <button type="submit"
                                            onclick="return confirm('{{ player.name }} von der Whitelist entfernen?')"
                                            class="btn-remove">
                                        ✕
                                    </button>
                                </form>
                                {% endif %}
                            </div>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>
        </div>

        <!-- RIGHT COLUMN: Requests -->
        <div class="requests-column">
            <!-- Pending Requests -->
            <div class="card">
                <h2>📝 Offene Whitelist-Anfragen ({{ pending_requests|length }})</h2>

                {% if pending_requests|length == 0 %}
                    <div class="empty-requests">
                        <div class="empty-icon">✓</div>
                        Keine offenen Anfragen
                    </div>
                {% else %}
                    {% for request in pending_requests %}
                        <div class="request-card">
                            <div class="request-header">
                                <div>
                                    <h3 class="request-title">{{ request.minecraftUsername }}</h3>
                                    <div class="request-meta">
                                        <span>{{ request.createdAt|date('d.m.Y H:i') }}</span>
                                        {% if request.ipAddress %}
                                            <span class="request-meta-item">IP: {{ request.ipAddress }}</span>
                                        {% endif %}
                                    </div>
                                    <div class="request-reason">
                                        <small class="request-reason-label">Begründung:</small>
                                        {{ request.reason }}
                                    </div>
                                </div>

                                {% if is_granted('ROLE_MODERATOR') %}
                                <div class="request-actions">
                                    <form method="post" action="{{ path('app_dashboard_request_approve', {id: request.id}) }}">
                                        <button type="submit" class="btn" onclick="return confirm('{{ request.minecraftUsername }} zur Whitelist hinzufügen?')">
                                            ✅ AKZEPTIEREN
                                        </button>
                                    </form>
                                    <button class="btn btn-danger" onclick="showRejectModal({{ request.id }}, '{{ request.minecraftUsername }}')">
                                        ❌ ABLEHNEN
                                    </button>
                                </div>
                                {% endif %}
                            </div>
                        </div>
                    {% endfor %}
                {% endif %}
            </div>

            <!-- Whitelist History -->
            <div class="card">
                <h2>📜 Whitelist-History</h2>

                {% if whitelist_history|length == 0 %}
                    <p class="empty-state-large">
                        Noch keine History-Einträge
                    </p>
                {% else %}
                    <div class="table-wrapper">
                        <table class="data-table">
                            <thead>
                                <tr>
                                    <th>Username</th>
                                    <th>Aktion</th>
                                    <th>Von</th>
                                    <th>Datum</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for entry in whitelist_history %}
                                    <tr>
                                        <td class="p-10">
                                            <div class="history-user">
                                                <img src="https://minotar.net/avatar/{{ entry.minecraftUsername }}/24"
                                                     class="history-avatar"
                                                     alt="{{ entry.minecraftUsername }}">
                                                <b>{{ entry.minecraftUsername }}</b>
                                            </div>
                                        </td>
                                        <td class="p-10">
                                            {% if entry.action == 'approved' %}
                                                <span class="badge-approved">✅ APPROVED</span>
                                            {% elseif entry.action == 'added' %}
                                                <span class="badge-added">➕ ADDED</span>
                                            {% elseif entry.action == 'removed' %}
                                                <span class="badge-removed">➖ REMOVED</span>
                                            {% elseif entry.action == 'rejected' %}
                                                <span class="badge-rejected">❌ REJECTED</span>
                                            {% endif %}
                                        </td>
                                        <td class="p-10 text-muted text-md">
                                            {{ entry.performedBy ? entry.performedBy.username : 'System' }}
                                        </td>
                                        <td class="p-10 text-muted text-md">
                                            {{ entry.createdAt|date('d.m.Y H:i') }}
                                        </td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Reject Modal -->
    <div id="rejectModal" class="modal-overlay">
        <div class="card modal-content">
            <h2 id="rejectModalTitle" class="modal-title">Anfrage ablehnen</h2>
            <form id="rejectForm" method="post">
                <div class="mb-20">
                    <label for="rejectNotes" class="form-label">Begründung (optional):</label>
                    <textarea id="rejectNotes" name="notes" class="min-h-100"></textarea>
                </div>
                <div class="modal-actions">
                    <button type="button" class="btn btn-outline" onclick="closeRejectModal()">ABBRECHEN</button>
                    <button type="submit" class="btn btn-danger">ABLEHNEN</button>
                </div>
            </form>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
<script>
    function showRejectModal(requestId, username) {
        const modal = document.getElementById('rejectModal');
        const form = document.getElementById('rejectForm');
        const title = document.getElementById('rejectModalTitle');

        title.textContent = 'Ablehnen: ' + username;
        form.action = '{{ path('app_dashboard_request_reject', {id: '__ID__'}) }}'.replace('__ID__', requestId);

        modal.style.display = 'flex';
    }

    function closeRejectModal() {
        document.getElementById('rejectModal').style.display = 'none';
        document.getElementById('rejectNotes').value = '';
    }

    document.getElementById('rejectModal').addEventListener('click', function(e) {
        if (e.target === this) {
            closeRejectModal();
        }
    });
</script>
{% endblock %}