{% extends "sidebar.html" %}

{% block title %}AstraOS — IP Analyzer{% endblock %}

{% block head %}
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<style>
    /* Toggle Switch Styles */
    .switch { position: relative; display: inline-block; width: 50px; height: 28px; }
    .switch input { opacity: 0; width: 0; height: 0; }
    .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #4a5568; transition: .4s; border-radius: 28px; }
    .slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
    input:checked + .slider { background-color: #ef4444; } /* red-500 */
    input:checked + .slider:before { transform: translateX(22px); }
</style>
{% endblock %}

{% block content %}
<div x-data="{ isCheater: false }" class="space-y-10">
    <!-- HEADER -->
    <header class="flex justify-between items-center">
        <h2 class="text-4xl font-bold tracking-wide {% if maintenance_active %}text-yellow-300{% else %}text-purple-300{% endif %}">IP Analyzer</h2>
    </header>

    <!-- INPUT FORM -->
    <div class="bg-black/40 rounded-xl backdrop-blur-lg p-8 {% if maintenance_active %}border border-yellow-500/30{% else %}border border-purple-500/20{% endif %}">
        <form action="{{ url_for('ip_analyzer') }}" method="POST" class="space-y-6">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
            <div>
                <label for="ip_address" class="block text-sm font-medium text-gray-300">IP-Adresse</label>
                <input type="text" name="ip_address" id="ip_address" required placeholder="z.B. 8.8.8.8"
                       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 items-center justify-between p-4 bg-gray-900/50 rounded-lg">
                <div>
                    <h3 class="text-lg font-semibold text-red-400">Als Cheater markieren</h3>
                    <p class="text-gray-400 text-sm mt-1">Markiert diese IP als zu einem Cheater gehörig.</p>
                </div>
                <label class="switch">
                    <input type="checkbox" name="is_cheater" x-model="isCheater">
                    <span class="slider"></span>
                </label>
            </div>

            <div x-show="isCheater" x-transition>
                <label for="steam_id" class="block text-sm font-medium text-gray-300">SteamID64</label>
                <input type="text" name="steam_id" id="steam_id" placeholder="Erforderlich, wenn als Cheater markiert"
                       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 pt-4">
                <button type="submit" class="px-6 py-2 text-white font-semibold rounded-lg transition
                                               {% if maintenance_active %}bg-yellow-600 hover:bg-yellow-700{% else %}bg-purple-600 hover:bg-purple-700{% endif %}">
                    Analysieren
                </button>
            </div>
        </form>
    </div>

    <!-- RESULTS -->
    {% if error %}
        <div class="bg-red-500/20 border border-red-500/30 text-red-300 p-4 rounded-lg">{{ error }}</div>
    {% endif %}

    {% if ip_data %}
    <div class="bg-black/40 rounded-xl backdrop-blur-lg p-8 {% if maintenance_active %}border border-yellow-500/30{% else %}border border-purple-500/20{% endif %}">
        <h3 class="text-2xl font-bold mb-6 {% if maintenance_active %}text-yellow-300{% else %}text-purple-300{% endif %}">Analyse-Ergebnis</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-gray-300">
            <div class="bg-gray-900/50 p-4 rounded-lg"><strong>IP-Adresse:</strong> {{ ip_data.ip }}</div>
            <div class="bg-gray-900/50 p-4 rounded-lg"><strong>Land:</strong> {{ ip_data.location.country }} ({{ ip_data.location.city }})</div>
            <div class="bg-gray-900/50 p-4 rounded-lg"><strong>VPN:</strong> <span class="font-bold {{ 'text-red-400' if ip_data.security.vpn else 'text-green-400' }}">{{ 'Ja' if ip_data.security.vpn else 'Nein' }}</span></div>
            <div class="bg-gray-900/50 p-4 rounded-lg"><strong>Proxy:</strong> <span class="font-bold {{ 'text-red-400' if ip_data.security.proxy else 'text-green-400' }}">{{ 'Ja' if ip_data.security.proxy else 'Nein' }}</span></div>
            <div class="bg-gray-900/50 p-4 rounded-lg"><strong>Tor:</strong> <span class="font-bold {{ 'text-red-400' if ip_data.security.tor else 'text-green-400' }}">{{ 'Ja' if ip_data.security.tor else 'Nein' }}</span></div>
            <div class="bg-gray-900/50 p-4 rounded-lg"><strong>ASN:</strong> {{ ip_data.network.autonomous_system_number }}</div>
            <div class="md:col-span-2 bg-gray-900/50 p-4 rounded-lg"><strong>Netzwerk:</strong> {{ ip_data.network.network }}</div>
            <div class="md:col-span-2 bg-gray-900/50 p-4 rounded-lg"><strong>Organisation:</strong> {{ ip_data.network.autonomous_system_organization }}</div>
        </div>
    </div>
    {% endif %}

    {% if similar_ips %}
    <div class="bg-black/40 rounded-xl backdrop-blur-lg p-8 {% if maintenance_active %}border border-yellow-500/30{% else %}border border-purple-500/20{% endif %}">
        <h3 class="text-2xl font-bold mb-6 {% if maintenance_active %}text-yellow-300{% else %}text-purple-300{% endif %}">Ähnliche Einträge gefunden</h3>
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y {% if maintenance_active %}divide-yellow-500/30{% else %}divide-purple-500/20{% endif %}">
                <thead class="bg-black/20">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">IP</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Cheater</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">SteamID</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Hinzugefügt von</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Datum</th>
                    </tr>
                </thead>
                <tbody class="divide-y {% if maintenance_active %}divide-yellow-500/30{% else %}divide-purple-500/30{% endif %}">
                    {% for ip in similar_ips %}
                    <tr class="transition {% if maintenance_active %}hover:bg-yellow-500/5{% else %}hover:bg-purple-500/5{% endif %}">
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-white">{{ ip.ip }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm"><span class="font-bold {{ 'text-red-400' if ip.is_cheater else 'text-green-400' }}">{{ 'Ja' if ip.is_cheater else 'Nein' }}</span></td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">{{ ip.steam_id or 'N/A' }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">{{ ip.added_by }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">{{ ip.timestamp.strftime('%d.%m.%Y %H:%M') }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}