{% extends 'layouts/authenticated.html.twig' %}

{% block page_title %}{{ page_title }}{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto">
    {# Header #}
    <div class="mb-6">
        <nav class="flex mb-4" aria-label="Breadcrumb">
            <ol class="inline-flex items-center space-x-1 md:space-x-3">
                <li class="inline-flex items-center">
                    <a href="{{ path('app_admin_security_devices_index') }}" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-indigo-600">
                        <i class="fas fa-mobile-alt mr-2"></i> Appareils
                    </a>
                </li>
                <li aria-current="page">
                    <div class="flex items-center">
                        <i class="fas fa-chevron-right text-gray-400 mx-2"></i>
                        <span class="text-sm font-medium text-gray-500">#{{ device.id }}</span>
                    </div>
                </li>
            </ol>
        </nav>
        <div class="flex justify-between items-center">
            <div>
                <h1 class="text-3xl font-bold text-gray-900">{{ device.deviceName }}</h1>
                <p class="mt-1 text-sm text-gray-600">
                    {% if device.trusted %}
                        <span class="text-green-600 font-medium"><i class="fas fa-check-circle mr-1"></i> Appareil approuvé</span>
                    {% else %}
                        <span class="text-gray-600 font-medium"><i class="fas fa-question-circle mr-1"></i> Appareil non approuvé</span>
                    {% endif %}
                </p>
            </div>
            <div class="flex space-x-2">
                {% if device.trusted %}
                    <form method="post" action="{{ path('app_admin_security_devices_untrust', {id: device.id}) }}" style="display: inline;">
                        <input type="hidden" name="_token" value="{{ csrf_token('untrust_device_' ~ device.id) }}">
                        <button type="submit" onclick="return confirm('Retirer l\'approbation de cet appareil ?\\n\\nCela peut nécessiter une nouvelle approbation à la prochaine connexion.')"
                                class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-orange-600 hover:bg-orange-700">
                            <i class="fas fa-times-circle mr-2"></i> Retirer Approbation
                        </button>
                    </form>
                {% else %}
                    <form method="post" action="{{ path('app_admin_security_devices_trust', {id: device.id}) }}" style="display: inline;">
                        <input type="hidden" name="_token" value="{{ csrf_token('trust_device_' ~ device.id) }}">
                        <button type="submit" onclick="return confirm('Approuver cet appareil ?\\n\\nL\'appareil sera marqué comme approuvé.')"
                                class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700">
                            <i class="fas fa-check-circle mr-2"></i> Approuver
                        </button>
                    </form>
                {% endif %}
                <form method="post" action="{{ path('app_admin_security_devices_delete', {id: device.id}) }}" style="display: inline;">
                    <input type="hidden" name="_token" value="{{ csrf_token('delete_device_' ~ device.id) }}">
                    <button type="submit" onclick="return confirm('ATTENTION: Vous allez supprimer cet appareil.\\n\\nCette action est irréversible et l\'utilisateur devra réapprouver cet appareil.\\n\\nContinuer ?')"
                            class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700">
                        <i class="fas fa-trash mr-2"></i> Supprimer
                    </button>
                </form>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
        {# Main Content #}
        <div class="lg:col-span-2 space-y-6">
            {# Device Info #}
            <div class="bg-white shadow rounded-lg">
                <div class="px-4 py-5 sm:p-6">
                    <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">
                        <i class="fas fa-info-circle text-indigo-500 mr-2"></i>
                        Informations de l'Appareil
                    </h3>
                    <dl class="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2">
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Nom de l'appareil</dt>
                            <dd class="mt-1 text-sm font-semibold text-gray-900">{{ device.deviceName }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Type</dt>
                            <dd class="mt-1">
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full
                                    {{ device.deviceType == 'Desktop' ? 'bg-blue-100 text-blue-800' :
                                       (device.deviceType == 'Mobile' ? 'bg-purple-100 text-purple-800' :
                                       (device.deviceType == 'Tablet' ? 'bg-pink-100 text-pink-800' : 'bg-gray-100 text-gray-800')) }}">
                                    {{ device.deviceType }}
                                </span>
                            </dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Navigateur</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ device.browser|default('Unknown') }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Système d'exploitation</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ device.os|default('Unknown') }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Première visite</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ device.firstSeenAt|date('d/m/Y à H:i:s') }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Dernière visite</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ device.lastSeenAt|date('d/m/Y à H:i:s') }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Nombre de connexions</dt>
                            <dd class="mt-1 text-sm font-semibold text-gray-900">{{ device.loginCount }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Statut d'approbation</dt>
                            <dd class="mt-1">
                                {% if device.trusted %}
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                        <i class="fas fa-check mr-1"></i> Approuvé
                                    </span>
                                {% else %}
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                                        <i class="fas fa-question mr-1"></i> Non approuvé
                                    </span>
                                {% endif %}
                            </dd>
                        </div>
                        {% if device.deviceFingerprint %}
                            <div class="sm:col-span-2">
                                <dt class="text-sm font-medium text-gray-500">Device Fingerprint</dt>
                                <dd class="mt-1 text-sm text-gray-900 font-mono break-all">{{ device.deviceFingerprint }}</dd>
                            </div>
                        {% endif %}
                        {% if device.userAgent %}
                            <div class="sm:col-span-2">
                                <dt class="text-sm font-medium text-gray-500">User Agent</dt>
                                <dd class="mt-1 text-sm text-gray-900 break-all">{{ device.userAgent }}</dd>
                            </div>
                        {% endif %}
                    </dl>
                </div>
            </div>


            {# User Info #}
            <div class="bg-white shadow rounded-lg">
                <div class="px-4 py-5 sm:p-6">
                    <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">
                        <i class="fas fa-user text-blue-500 mr-2"></i>
                        Utilisateur
                    </h3>
                    <dl class="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2">
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Email</dt>
                            <dd class="mt-1 text-sm font-semibold text-gray-900">{{ device.user.email }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Nom</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ device.user.firstName }} {{ device.user.lastName }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Rôles</dt>
                            <dd class="mt-1">
                                {% for role in device.user.roles %}
                                    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-indigo-100 text-indigo-800 mr-1">
                                        {{ role }}
                                    </span>
                                {% endfor %}
                            </dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Statut du compte</dt>
                            <dd class="mt-1">
                                {% if device.user.isActive %}
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                        <i class="fas fa-check mr-1"></i> Actif
                                    </span>
                                {% else %}
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                                        <i class="fas fa-ban mr-1"></i> Inactif
                                    </span>
                                {% endif %}
                            </dd>
                        </div>
                    </dl>
                </div>
            </div>

            {# Location Info #}
            <div class="bg-white shadow rounded-lg">
                <div class="px-4 py-5 sm:p-6">
                    <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">
                        <i class="fas fa-map-marker-alt text-green-500 mr-2"></i>
                        Localisation & Réseau
                    </h3>
                    <dl class="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2">
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Dernière adresse IP</dt>
                            <dd class="mt-1 text-sm text-gray-900 font-mono">{{ device.lastIpAddress|default('-') }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Pays</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ device.lastCountry|default('-') }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Ville</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ device.lastCity|default('-') }}</dd>
                        </div>
                    </dl>
                </div>
            </div>
        </div>

        {# Sidebar #}
        <div class="space-y-6">
            {# Actions #}
            <div class="bg-white shadow rounded-lg">
                <div class="px-4 py-5 sm:p-6">
                    <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">
                        <i class="fas fa-bolt text-yellow-500 mr-2"></i>
                        Actions
                    </h3>
                    <div class="space-y-3">
                        <a href="{{ path('app_admin_security_devices_index') }}"
                           class="block w-full text-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                            <i class="fas fa-arrow-left mr-2"></i> Retour à la liste
                        </a>
                        {% if device.user %}
                            <a href="{{ path('app_admin_security_devices_index', {user_id: device.user.id}) }}"
                               class="block w-full text-center px-4 py-2 border border-blue-300 shadow-sm text-sm font-medium rounded-md text-blue-700 bg-white hover:bg-blue-50">
                                <i class="fas fa-mobile-alt mr-2"></i> Appareils de cet utilisateur
                            </a>
                        {% endif %}
                        {% if device.lastIpAddress %}
                            <a href="{{ path('app_admin_security_devices_index', {ip: device.lastIpAddress}) }}"
                               class="block w-full text-center px-4 py-2 border border-purple-300 shadow-sm text-sm font-medium rounded-md text-purple-700 bg-white hover:bg-purple-50">
                                <i class="fas fa-network-wired mr-2"></i> Appareils depuis cette IP
                            </a>
                        {% endif %}
                    </div>
                </div>
            </div>

            {# Stats Card #}
            <div class="bg-white shadow rounded-lg">
                <div class="px-4 py-5 sm:p-6">
                    <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">
                        <i class="fas fa-chart-bar text-indigo-500 mr-2"></i>
                        Statistiques
                    </h3>
                    <div class="space-y-4">
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-500">Connexions totales</span>
                            <span class="text-sm font-semibold text-gray-900">{{ device.loginCount }}</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-500">Appareil approuvé</span>
                            <span class="text-sm font-semibold {{ device.trusted ? 'text-green-600' : 'text-gray-600' }}">
                                {{ device.trusted ? 'Oui' : 'Non' }}
                            </span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-500">Type d'appareil</span>
                            <span class="text-sm font-semibold text-gray-900">{{ device.deviceType }}</span>
                        </div>
                        <div class="flex justify-between items-center pt-4 border-t border-gray-200">
                            <span class="text-sm text-gray-500">Actif depuis</span>
                            <span class="text-sm font-semibold text-gray-900">
                                {% set days = date().diff(device.firstSeenAt).days %}
                                {{ days }} jour{{ days > 1 ? 's' : '' }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            {# Info Card #}
            <div class="bg-blue-50 border-l-4 border-blue-400 p-4">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <i class="fas fa-info-circle text-blue-400 text-xl"></i>
                    </div>
                    <div class="ml-3">
                        <h3 class="text-sm font-medium text-blue-800">À propos des appareils</h3>
                        <div class="mt-2 text-sm text-blue-700">
                            <p>Un appareil est automatiquement créé lors de la première connexion d'un utilisateur.</p>
                            <ul class="list-disc list-inside mt-2 space-y-1">
                                <li>L'approbation permet d'éviter les validations répétées</li>
                                <li>La suppression nécessitera une nouvelle approbation</li>
                                <li>Le fingerprint identifie de manière unique l'appareil</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}