{% extends "sidebar.html" %}

{% block title %}AstraOS — Altersüberprüfung{% endblock %}

{% block head %}
{% endblock %}

{% block content %}
<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 %}">Altersüberprüfung</h2>
</header>

<!-- FLASH MESSAGES -->
{% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
    <div class="toast-container">
        {% for category, message in messages %}
            <div x-data="{ show: true }" x-init="setTimeout(() => show = false, 5000)" x-show="show"
                 x-transition:enter="toast transition ease-out duration-300"
                 x-transition:enter-start="opacity-0 translate-x-8"
                 x-transition:enter-end="opacity-100 translate-x-0"
                 x-transition:leave="toast transition ease-in duration-300"
                 x-transition:leave-start="opacity-100"
                 x-transition:leave-end="opacity-0"
                 class="max-w-md w-full bg-gray-800 shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden border border-{{ 'red' if category == 'danger' else ('green' if category == 'success' else ('blue' if category == 'info' else 'gray')) }}-500/40">
                <div class="p-4">
                    <div class="flex items-start">
                        <div class="flex-shrink-0">
                            {% if category == 'success' %}
                                <svg class="h-6 w-6 text-green-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                            {% elif category == 'danger' %}
                                <svg class="h-6 w-6 text-red-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                            {% else %}
                                <svg class="h-6 w-6 text-blue-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                            {% endif %}
                        </div>
                        <div class="ml-3 w-0 flex-1 pt-0.5">
                            <p class="text-sm font-medium text-gray-100">{{ message }}</p>
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
    {% endif %}
{% endwith %}

<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
    <!-- Verification Form -->
    <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 %}">
        <h3 class="text-2xl font-semibold mb-4">Neue Überprüfung</h3>
        <form method="POST" class="space-y-4">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
            <div>
                <label for="birthdate" class="block text-sm font-medium text-gray-300">Geburtsdatum</label>
                <input type="date" name="birthdate" id="birthdate" required
                       class="mt-1 w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white focus:outline-none focus:ring-2 {% if maintenance_active %}focus:ring-yellow-500{% else %}focus:ring-purple-500{% endif %}">
            </div>
            <div>
                <label for="steam_id" class="block text-sm font-medium text-gray-300">SteamID</label>
                <input type="text" name="steam_id" id="steam_id" placeholder="z.B. 76561199045670704" required
                       class="mt-1 w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white focus:outline-none focus:ring-2 {% if maintenance_active %}focus:ring-yellow-500{% else %}focus:ring-purple-500{% endif %}">
            </div>
            <div>
                <label for="ingame_name" class="block text-sm font-medium text-gray-300">Ingame Name</label>
                <input type="text" name="ingame_name" id="ingame_name" placeholder="z.B. Max Mustermann" required
                       class="mt-1 w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white focus:outline-none focus:ring-2 {% if maintenance_active %}focus:ring-yellow-500{% else %}focus:ring-purple-500{% endif %}">
            </div>
            <div class="flex justify-end">
                <button type="submit" 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 %}">
                    Überprüfen
                </button>
            </div>
        </form>

        {% 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">Ergebnis</h4>
            <p class="text-lg">Die Person ist <span class="font-bold {% if result.age < 13 %}text-red-400{% else %}text-green-400{% endif %}">{{ result.age }}</span> Jahre alt.</p>
            {% if result.age < 13 %}
                <p class="text-lg mt-2">Diese Person muss für <span class="font-bold text-yellow-400">{{ result.ban_duration_days }}</span> Tage gebannt 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>
            {% else %}
                <p class="text-lg mt-2 text-green-400">Keine Sperre erforderlich.</p>
            {% endif %}
        </div>
        {% endif %}
    </div>

    <!-- User Search -->
    <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 %}">
        <h3 class="text-2xl font-semibold mb-4">Benutzer suchen</h3>
        <form method="GET" class="flex gap-2 mb-4">
            <input type="text" name="search" placeholder="Suche nach Name oder SteamID..." value="{{ search_query }}"
                   class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white focus:outline-none focus:ring-2 {% if maintenance_active %}focus:ring-yellow-500{% else %}focus:ring-purple-500{% endif %}">
            <button type="submit" 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 %}">
                Suchen
            </button>
        </form>

        <div class="space-y-2 max-h-96 overflow-y-auto">
            {% for user in users %}
            <a href="{{ url_for('view_user_age_details', user_id=user._id) }}" class="block p-3 rounded-lg transition {% if maintenance_active %}hover:bg-yellow-500/10{% else %}hover:bg-purple-500/10{% endif %}">
                <div class="flex justify-between items-center">
                    <div>
                        <p class="font-semibold {% if user.age < 13 %}text-red-400{% else %}text-white{% endif %}">{{ user.ingame_name }}</p>
                        <p class="text-sm text-gray-400">{{ user.steam_id }}</p>
                    </div>
                    <div class="text-right">
                        <p class="text-lg font-bold">{{ user.age }} Jahre</p>
                        <p class="text-xs text-gray-500">{{ user.timestamp.strftime('%d.%m.%Y') }}</p>
                    </div>
                </div>
            </a>
            {% else %}
            <p class="text-gray-400">Keine Benutzer gefunden.</p>
            {% endfor %}
        </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 %}