{% extends "sidebar.html" %}

{% block title %}AstraOS — Benutzerdetails{% endblock %}

{% block head %}
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
{% endblock %}

{% block content %}
<div x-data="{ showDeleteModal: false }">
    <header class="flex justify-between items-center mb-6">
        <h2 class="text-4xl font-bold tracking-wide {% if maintenance_active %}text-yellow-300{% else %}text-purple-300{% endif %}">Benutzerdetails</h2>
        <a href="{{ url_for('age_verification') }}" class="font-bold py-2 px-4 rounded-lg transition text-white {% if maintenance_active %}bg-yellow-600 hover:bg-yellow-700{% else %}bg-purple-600 hover:bg-purple-700{% endif %}">
            &larr; Zurück
        </a>
    </header>

    <div class="bg-black/40 p-6 rounded-xl backdrop-blur border {% if maintenance_active %}border-yellow-500/30{% else %}border-purple-500/20{% endif %}">
        <div class="space-y-3">
            <div>
                <p class="text-sm text-gray-400">Ingame Name</p>
                <p class="text-xl font-semibold">{{ user.ingame_name }}</p>
            </div>
            <div>
                <p class="text-sm text-gray-400">SteamID</p>
                <p class="text-xl font-semibold">{{ user.steam_id }}</p>
            </div>
            <div>
                <p class="text-sm text-gray-400">Geburtsdatum</p>
                <p class="text-xl font-semibold">{{ user.birthdate }}</p>
            </div>
            <div>
                <p class="text-sm text-gray-400">Aktuelles Alter</p>
                <p class="text-xl font-bold {% if user.age < 13 %}text-red-400{% else %}text-green-400{% endif %}">{{ user.age }} Jahre</p>
            </div>
            <div>
                <p class="text-sm text-gray-400">Überprüft von</p>
                <p class="text-xl font-semibold">{{ user.checked_by }} am {{ user.timestamp.strftime('%d.%m.%Y um %H:%M') }}</p>
            </div>
        </div>

        {% if result %}
        <div class="mt-6 border-t {% if maintenance_active %}border-yellow-500/30{% else %}border-purple-500/20{% endif %} pt-4">
            <h4 class="text-xl font-semibold mb-2">Aktion erforderlich</h4>
            <p class="text-lg mt-2">Diese Person muss für <span class="font-bold text-yellow-400">{{ result.ban_duration_days }}</span> Tage gesperrt werden.</p>
            <div class="mt-4">
                <label for="ban-command" class="block text-sm font-medium text-gray-300">Bann-Befehl</label>
                <div class="flex items-center gap-2 mt-1">
                    <input type="text" id="ban-command" readonly value="{{ result.ban_command }}"
                           class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white">
                    <button onclick="copyToClipboard('ban-command')" class="flex-shrink-0 font-bold py-2 px-4 rounded-lg transition text-white {% if maintenance_active %}bg-yellow-600 hover:bg-yellow-700{% else %}bg-purple-600 hover:bg-purple-700{% endif %}">
                        Kopieren
                    </button>
                </div>
            </div>
        </div>
        {% elif user.age >= 13 %}
        <div class="mt-6 border-t {% if maintenance_active %}border-yellow-500/30{% else %}border-purple-500/20{% endif %} pt-4">
            <p class="text-lg text-green-400">Keine Sperre erforderlich.</p>
        </div>
        {% endif %}

        <div class="mt-6 border-t {% if maintenance_active %}border-yellow-500/30{% else %}border-purple-500/20{% endif %} pt-6 flex justify-end">
            <button @click="showDeleteModal = true" class="font-bold py-2 px-4 rounded-lg transition text-white bg-red-600 hover:bg-red-700">
                Eintrag löschen
            </button>
        </div>
    </div>

    <!-- DELETE CONFIRMATION MODAL -->
    <div x-show="showDeleteModal" @keydown.escape.window="showDeleteModal = false" class="fixed inset-0 bg-black/70 backdrop-blur-sm flex items-center justify-center z-50" style="display: none;">
        <div @click.away="showDeleteModal = false" class="bg-gray-900 border border-red-500/50 rounded-xl shadow-2xl p-8 w-full max-w-md">
            <h3 class="text-2xl font-bold text-red-400 mb-4">Eintrag löschen</h3>
            <p class="text-gray-300 mb-6">Möchten Sie diesen Altersnachweis wirklich endgültig löschen?</p>
            <form action="{{ url_for('delete_age_verification', user_id=user._id) }}" method="POST" class="flex justify-end gap-4">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                <button type="button" @click="showDeleteModal = false" class="px-4 py-2 rounded-lg text-gray-300 hover:bg-gray-700 transition">Abbrechen</button>
                <button type="submit" class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white font-semibold rounded-lg transition">Löschen</button>
            </form>
        </div>
    </div>
</div>

<script>
function copyToClipboard(elementId) {
    const input = document.getElementById(elementId);
    input.select();
    input.setSelectionRange(0, 99999); // For mobile devices
    document.execCommand('copy');
    // Optional: Visuelles Feedback geben
    const originalButtonText = event.target.innerText;
    event.target.innerText = 'Kopiert!';
    setTimeout(() => {
        event.target.innerText = originalButtonText;
    }, 1500);
}
</script>
{% endblock %}