{% 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">
        <div class="flex justify-between items-center">
            <div>
                <h1 class="text-3xl font-bold text-gray-900 flex items-center">
                    <i class="fas fa-mobile-alt text-indigo-600 mr-3"></i>
                    {{ page_title }}
                </h1>
                <p class="mt-1 text-sm text-gray-600">{{ pagination.getTotalItemCount }} appareil(s) trouvé(s)</p>
            </div>
            <a href="{{ path('app_admin_security_devices_approval_codes') }}"
               class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700">
                <i class="fas fa-shield-alt mr-2"></i> Codes d'Approbation
            </a>
        </div>
    </div>

    {# Statistics Cards #}
    <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4 mb-8">
        {# Total Devices #}
        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
                            <i class="fas fa-mobile-alt text-2xl"></i>
                        </div>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Total Appareils</dt>
                            <dd class="text-2xl font-semibold text-gray-900">{{ stats.total|default(0)|number_format(0, ',', ' ') }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
            <div class="bg-gray-50 px-5 py-3">
                <div class="text-sm">
                    <span class="font-medium text-indigo-600">{{ stats.unique_users|default(0) }}</span>
                    <span class="text-gray-500">utilisateur(s)</span>
                </div>
            </div>
        </div>

        {# Trusted Devices #}
        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white">
                            <i class="fas fa-check-circle text-2xl"></i>
                        </div>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Approuvés</dt>
                            <dd class="text-2xl font-semibold text-gray-900">{{ stats.trusted|default(0)|number_format(0, ',', ' ') }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
            <div class="bg-gray-50 px-5 py-3">
                <div class="text-sm">
                    <span class="font-medium text-gray-600">{{ stats.untrusted|default(0) }}</span>
                    <span class="text-gray-500">non approuvé(s)</span>
                </div>
            </div>
        </div>

        {# Desktop Devices #}
        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
                            <i class="fas fa-desktop text-2xl"></i>
                        </div>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Desktop</dt>
                            <dd class="text-2xl font-semibold text-gray-900">{{ stats.desktop|default(0)|number_format(0, ',', ' ') }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
            <div class="bg-gray-50 px-5 py-3">
                <div class="text-sm">
                    <span class="text-gray-500">
                        {% if stats.total > 0 %}
                            {{ ((stats.desktop / stats.total) * 100)|number_format(1) }}%
                        {% else %}
                            0%
                        {% endif %}
                        du total
                    </span>
                </div>
            </div>
        </div>

        {# Mobile Devices #}
        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white">
                            <i class="fas fa-mobile text-2xl"></i>
                        </div>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Mobile</dt>
                            <dd class="text-2xl font-semibold text-gray-900">{{ stats.mobile|default(0)|number_format(0, ',', ' ') }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
            <div class="bg-gray-50 px-5 py-3">
                <div class="text-sm">
                    <span class="font-medium text-gray-600">{{ stats.tablet|default(0) }}</span>
                    <span class="text-gray-500">tablette(s)</span>
                </div>
            </div>
        </div>
    </div>

    {# Charts #}
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
        {# Browser Distribution #}
        <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-globe text-blue-500 mr-2"></i>
                    Distribution des Navigateurs
                </h3>
                <div class="h-64">
                    <canvas id="browserChart"></canvas>
                </div>
            </div>
        </div>

        {# OS Distribution #}
        <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-cogs text-purple-500 mr-2"></i>
                    Distribution des Systèmes d'Exploitation
                </h3>
                <div class="h-64">
                    <canvas id="osChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    {# Filters & List #}
    <div class="bg-white shadow rounded-lg overflow-hidden">
        {# Filters #}
        <div class="px-4 py-5 border-b border-gray-200 sm:px-6">
            <form method="get" action="{{ path('app_admin_security_devices_index') }}" data-controller="form-submit" class="space-y-4">
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
                    <div>
                        <label for="search" class="block text-sm font-medium text-gray-700 mb-1">Recherche</label>
                        <input type="text" name="search" id="search" value="{{ filters.search|default('') }}"
                               placeholder="Email, appareil, IP..."
                               class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                    </div>

                    <div>
                        <label for="type" class="block text-sm font-medium text-gray-700 mb-1">Type</label>
                        <select name="type" id="type" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                            <option value="">Tous</option>
                            <option value="Desktop" {{ filters.type|default('') == 'Desktop' ? 'selected' : '' }}>Desktop</option>
                            <option value="Mobile" {{ filters.type|default('') == 'Mobile' ? 'selected' : '' }}>Mobile</option>
                            <option value="Tablet" {{ filters.type|default('') == 'Tablet' ? 'selected' : '' }}>Tablet</option>
                        </select>
                    </div>

                    <div>
                        <label for="browser" class="block text-sm font-medium text-gray-700 mb-1">Navigateur</label>
                        <select name="browser" id="browser" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                            <option value="">Tous</option>
                            {% for browser in browsers %}
                                <option value="{{ browser }}" {{ filters.browser|default('') == browser ? 'selected' : '' }}>{{ browser }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <div>
                        <label for="os" class="block text-sm font-medium text-gray-700 mb-1">OS</label>
                        <select name="os" id="os" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                            <option value="">Tous</option>
                            {% for o in oses %}
                                <option value="{{ o }}" {{ filters.os|default('') == o ? 'selected' : '' }}>{{ o }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <div>
                        <label for="trusted" class="block text-sm font-medium text-gray-700 mb-1">Statut</label>
                        <select name="trusted" id="trusted" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                            <option value="">Tous</option>
                            <option value="1" {{ filters.trusted|default('') == '1' ? 'selected' : '' }}>Approuvés</option>
                            <option value="0" {{ filters.trusted|default('') == '0' ? 'selected' : '' }}>Non approuvés</option>
                        </select>
                    </div>

                    <div>
                        <label for="country" class="block text-sm font-medium text-gray-700 mb-1">Pays</label>
                        <select name="country" id="country" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                            <option value="">Tous</option>
                            {% for country in countries %}
                                <option value="{{ country }}" {{ filters.country|default('') == country ? 'selected' : '' }}>{{ country }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <div>
                        <label for="platform" class="block text-sm font-medium text-gray-700 mb-1">
                            <i class="fas fa-mobile-alt mr-1"></i> Plateforme
                        </label>
                        <select name="platform" id="platform" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                            <option value="">Toutes</option>
                            <option value="android" {{ filters.platform|default('') == 'android' ? 'selected' : '' }}>
                                <i class="fab fa-android"></i> Android
                            </option>
                            <option value="ios" {{ filters.platform|default('') == 'ios' ? 'selected' : '' }}>
                                <i class="fab fa-apple"></i> iOS
                            </option>
                            <option value="web" {{ filters.platform|default('') == 'web' ? 'selected' : '' }}>
                                <i class="fas fa-globe"></i> Web
                            </option>
                        </select>
                    </div>

                    <div>
                        <label for="isPhysicalDevice" class="block text-sm font-medium text-gray-700 mb-1">
                            <i class="fas fa-shield-alt mr-1"></i> Type appareil
                        </label>
                        <select name="isPhysicalDevice" id="isPhysicalDevice" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                            <option value="">Tous</option>
                            <option value="1" {{ filters.isPhysicalDevice|default('') == '1' ? 'selected' : '' }}>Physiques uniquement</option>
                            <option value="0" {{ filters.isPhysicalDevice|default('') == '0' ? 'selected' : '' }}>Émulateurs uniquement</option>
                        </select>
                    </div>

                    <div>
                        <label for="dateFrom" class="block text-sm font-medium text-gray-700 mb-1">Date début</label>
                        <input type="date" name="dateFrom" id="dateFrom" value="{{ filters.dateFrom|default('') }}"
                               class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                    </div>

                    <div>
                        <label for="dateTo" class="block text-sm font-medium text-gray-700 mb-1">Date fin</label>
                        <input type="date" name="dateTo" id="dateTo" value="{{ filters.dateTo|default('') }}"
                               class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                    </div>
                </div>

                <div class="flex justify-between items-center">
                    <div>
                        <button type="submit" data-form-submit-target="submit"
                                class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">
                            <i class="fas fa-filter mr-2"></i>
                            <span data-form-submit-target="buttonText">Filtrer</span>
                            <span data-form-submit-target="spinner" class="hidden ml-2">
                                <svg class="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                </svg>
                            </span>
                        </button>
                        <a href="{{ path('app_admin_security_devices_index') }}"
                           class="ml-3 inline-flex items-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-times mr-2"></i> Réinitialiser
                        </a>
                    </div>
                </div>
            </form>
        </div>

        {# List #}
        {% if pagination.getTotalItemCount == 0 %}
            <div class="text-center py-12">
                <i class="fas fa-inbox text-gray-400 text-5xl mb-4"></i>
                <p class="text-gray-500 mb-4">Aucun appareil trouvé</p>
            </div>
        {% else %}
            {# Desktop Table #}
            <div class="hidden lg:block overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Appareil</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Utilisateur</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Type</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Système</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Plateforme</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">App Version</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Dernière visite</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Localisation</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Statut</th>
                            <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        {% for device in pagination %}
                            <tr class="hover:bg-gray-50">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <div class="flex-shrink-0 h-10 w-10">
                                            <div class="h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center">
                                                <i class="fas fa-{{ device.deviceType == 'Mobile' ? 'mobile' : (device.deviceType == 'Tablet' ? 'tablet' : 'desktop') }} text-indigo-600"></i>
                                            </div>
                                        </div>
                                        <div class="ml-4">
                                            <div class="text-sm font-medium text-gray-900">{{ device.deviceName }}</div>
                                            <div class="text-xs text-gray-500">ID: #{{ device.id }}</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-medium text-gray-900">{{ device.user.email }}</div>
                                    <div class="text-xs text-gray-500">{{ device.user.firstName }} {{ device.user.lastName }}</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <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>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-900">{{ device.browser|default('Unknown') }}</div>
                                    <div class="text-xs text-gray-500">{{ device.os|default('Unknown') }}</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    {% if device.platform %}
                                        {% if device.platform == 'android' %}
                                            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-800">
                                                <i class="fab fa-android mr-1"></i> Android
                                            </span>
                                        {% elseif device.platform == 'ios' %}
                                            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold bg-gray-800 text-white">
                                                <i class="fab fa-apple mr-1"></i> iOS
                                            </span>
                                        {% else %}
                                            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold bg-blue-100 text-blue-800">
                                                <i class="fas fa-globe mr-1"></i> Web
                                            </span>
                                        {% endif %}
                                        {% if device.platform != 'web' and not device.isPhysicalDevice %}
                                            <div class="text-xs text-red-600 mt-1">
                                                <i class="fas fa-exclamation-triangle"></i> Émulateur
                                            </div>
                                        {% endif %}
                                    {% else %}
                                        <span class="text-xs text-gray-400">-</span>
                                    {% endif %}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    {% if device.appVersion %}
                                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-indigo-100 text-indigo-800">
                                            v{{ device.appVersion }}
                                        </span>
                                        {% if device.appBuildNumber %}
                                            <div class="text-xs text-gray-500 mt-1">Build {{ device.appBuildNumber }}</div>
                                        {% endif %}
                                    {% else %}
                                        <span class="text-xs text-gray-400">-</span>
                                    {% endif %}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-900">{{ device.lastSeenAt|date('d/m/Y') }}</div>
                                    <div class="text-xs text-gray-500">{{ device.lastSeenAt|date('H:i:s') }}</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-900">{{ device.lastCountry|default('-') }}</div>
                                    {% if device.lastIpAddress %}
                                        <div class="text-xs text-gray-500 font-mono">{{ device.lastIpAddress }}</div>
                                    {% endif %}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    {% if device.trusted %}
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                            <i class="fas fa-check mr-1"></i> Approuvé
                                        </span>
                                    {% else %}
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">
                                            <i class="fas fa-question mr-1"></i> Non approuvé
                                        </span>
                                    {% endif %}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <a href="{{ path('app_admin_security_devices_show', {id: device.id}) }}"
                                       class="inline-flex items-center px-2 py-1 text-xs font-medium rounded text-blue-600 hover:bg-blue-50 transition-colors duration-150">
                                        <i class="fas fa-eye mr-1"></i>
                                        Voir
                                    </a>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            {# Mobile Cards #}
            <div class="lg:hidden p-4 space-y-4">
                {% for device in pagination %}
                    {% include 'admin/components/cards/devices_card.html.twig' with {item: device} %}
                {% endfor %}
            </div>

            {# Pagination #}
            {% if pagination.pageCount > 1 %}
                <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
                    <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                        <div>
                            <p class="text-sm text-gray-700">
                                Page <span class="font-medium">{{ pagination.currentPageNumber }}</span> sur <span class="font-medium">{{ pagination.pageCount }}</span>
                            </p>
                        </div>
                        <div>
                            {{ knp_pagination_render(pagination) }}
                        </div>
                    </div>
                </div>
            {% endif %}
        {% endif %}
    </div>
</div>

{# Chart.js #}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
// Browser Chart
const browserCtx = document.getElementById('browserChart').getContext('2d');
const browserData = {{ browser_stats|json_encode|raw }};
new Chart(browserCtx, {
    type: 'doughnut',
    data: {
        labels: browserData.map(d => d.browser),
        datasets: [{
            data: browserData.map(d => d.deviceCount),
            backgroundColor: [
                'rgb(59, 130, 246)',
                'rgb(139, 92, 246)',
                'rgb(236, 72, 153)',
                'rgb(34, 197, 94)',
                'rgb(251, 146, 60)',
                'rgb(249, 115, 22)',
                'rgb(239, 68, 68)',
                'rgb(14, 165, 233)',
                'rgb(168, 85, 247)',
                'rgb(163, 163, 163)'
            ]
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'bottom'
            }
        }
    }
});

// OS Chart
const osCtx = document.getElementById('osChart').getContext('2d');
const osData = {{ os_stats|json_encode|raw }};
new Chart(osCtx, {
    type: 'doughnut',
    data: {
        labels: osData.map(d => d.os),
        datasets: [{
            data: osData.map(d => d.deviceCount),
            backgroundColor: [
                'rgb(139, 92, 246)',
                'rgb(59, 130, 246)',
                'rgb(34, 197, 94)',
                'rgb(251, 146, 60)',
                'rgb(236, 72, 153)',
                'rgb(249, 115, 22)',
                'rgb(239, 68, 68)',
                'rgb(14, 165, 233)',
                'rgb(168, 85, 247)',
                'rgb(163, 163, 163)'
            ]
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'bottom'
            }
        }
    }
});
</script>
{% endblock %}