{% extends 'layouts/authenticated.html.twig' %}
{% import 'flowbite_components/macros.html.twig' as flowbite %}

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

{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">

    {# Header #}
    <div class="mb-6">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">
                    <i class="fas fa-mobile-alt mr-2"></i>
                    {{ page_title }}
                </h1>
                <p class="text-gray-600 dark:text-gray-400">
                    Gestion centralisée des appareils mobiles autorisés à accéder à l'application
                </p>
            </div>
            <a
                href="{{ path('admin_device_app_create') }}"
                class="px-6 py-2.5 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-colors inline-flex items-center"
            >
                <i class="fas fa-plus mr-2"></i>Créer un Appareil
            </a>
        </div>
    </div>

    {# Statistics Cards #}
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        {# Total Devices #}
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0 bg-blue-100 dark:bg-blue-900 rounded-lg p-3">
                    <i class="fas fa-mobile-alt text-2xl text-blue-600 dark:text-blue-400"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Total Appareils</p>
                    <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ stats.total }}</p>
                </div>
            </div>
        </div>

        {# Active Devices #}
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0 bg-green-100 dark:bg-green-900 rounded-lg p-3">
                    <i class="fas fa-check-circle text-2xl text-green-600 dark:text-green-400"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Actifs</p>
                    <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ stats.active }}</p>
                </div>
            </div>
        </div>

        {# Inactive Devices #}
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0 bg-red-100 dark:bg-red-900 rounded-lg p-3">
                    <i class="fas fa-times-circle text-2xl text-red-600 dark:text-red-400"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Inactifs</p>
                    <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ stats.inactive }}</p>
                </div>
            </div>
        </div>

        {# Recently Active #}
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0 bg-purple-100 dark:bg-purple-900 rounded-lg p-3">
                    <i class="fas fa-clock text-2xl text-purple-600 dark:text-purple-400"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Actifs (7j)</p>
                    <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ stats.recently_active }}</p>
                </div>
            </div>
        </div>
    </div>

    {# Filters #}
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-6">
        <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
            <i class="fas fa-filter mr-2"></i>Filtres
        </h2>
        <form method="get" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            {# Search #}
            <div>
                <label for="search" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Rechercher
                </label>
                <input
                    type="text"
                    id="search"
                    name="search"
                    value="{{ filters.search ?? '' }}"
                    placeholder="Nom, modèle, email, UID..."
                    class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                >
            </div>

            {# User Filter #}
            <div>
                <label for="user_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Utilisateur
                </label>
                <select
                    id="user_id"
                    name="user_id"
                    class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                >
                    <option value="">Tous les utilisateurs</option>
                    {% for user in users %}
                        <option value="{{ user.id }}" {{ filters.user_id == user.id ? 'selected' : '' }}>
                            {{ user.email }}
                        </option>
                    {% endfor %}
                </select>
            </div>

            {# Platform Filter #}
            <div>
                <label for="platform" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Plateforme
                </label>
                <select
                    id="platform"
                    name="platform"
                    class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                >
                    <option value="">Toutes les plateformes</option>
                    {% for platform in platforms %}
                        <option value="{{ platform.platform }}" {{ filters.platform == platform.platform ? 'selected' : '' }}>
                            {{ platform.platform|upper }}
                        </option>
                    {% endfor %}
                </select>
            </div>

            {# Status Filter #}
            <div>
                <label for="is_active" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Statut
                </label>
                <select
                    id="is_active"
                    name="is_active"
                    class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                >
                    <option value="">Tous les statuts</option>
                    <option value="1" {{ filters.is_active == '1' ? 'selected' : '' }}>Actif</option>
                    <option value="0" {{ filters.is_active == '0' ? 'selected' : '' }}>Inactif</option>
                </select>
            </div>

            {# Actions #}
            <div class="col-span-full flex gap-2">
                <button
                    type="submit"
                    class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-colors"
                >
                    <i class="fas fa-search mr-2"></i>Filtrer
                </button>
                <a
                    href="{{ path('admin_device_app_index') }}"
                    class="px-6 py-2 bg-gray-200 hover:bg-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 text-gray-800 dark:text-white rounded-lg font-medium transition-colors"
                >
                    <i class="fas fa-times mr-2"></i>Réinitialiser
                </a>
            </div>
        </form>
    </div>

    {# Devices Table #}
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
                <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                    <tr>
                        <th scope="col" class="px-6 py-3">Appareil</th>
                        <th scope="col" class="px-6 py-3">Utilisateur</th>
                        <th scope="col" class="px-6 py-3">Plateforme</th>
                        <th scope="col" class="px-6 py-3">Statut</th>
                        <th scope="col" class="px-6 py-3">Dernière activité</th>
                        <th scope="col" class="px-6 py-3">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% if devices|length > 0 %}
                        {% for device in devices %}
                            <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                                <td class="px-6 py-4">
                                    <div class="flex items-center">
                                        <div class="flex-shrink-0">
                                            {% if device.platform == 'android' %}
                                                <i class="fab fa-android text-2xl text-green-500"></i>
                                            {% elseif device.platform == 'ios' %}
                                                <i class="fab fa-apple text-2xl text-gray-600"></i>
                                            {% else %}
                                                <i class="fas fa-mobile-alt text-2xl text-gray-400"></i>
                                            {% endif %}
                                        </div>
                                        <div class="ml-3">
                                            <p class="font-medium text-gray-900 dark:text-white">
                                                {{ device.deviceName ?? '<span class="text-gray-400 italic">En attente de configuration</span>'|raw }}
                                            </p>
                                            <p class="text-xs text-gray-500 dark:text-gray-400">
                                                {{ device.deviceModel ?? '<span class="italic">Modèle inconnu</span>'|raw }}
                                            </p>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4">
                                    <a href="{{ path('admin_users_show', {id: device.user.id}) }}" class="text-blue-600 hover:underline">
                                        {{ device.user.email }}
                                    </a>
                                </td>
                                <td class="px-6 py-4">
                                    <span class="uppercase text-xs font-semibold">
                                        {{ device.platform }}
                                    </span>
                                    <p class="text-xs text-gray-500">{{ device.osVersion }}</p>
                                </td>
                                <td class="px-6 py-4">
                                    {% if device.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 dark:bg-green-900 dark:text-green-300">
                                            <i class="fas fa-check-circle 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 dark:bg-red-900 dark:text-red-300">
                                            <i class="fas fa-times-circle mr-1"></i>Inactif
                                        </span>
                                    {% endif %}
                                </td>
                                <td class="px-6 py-4">
                                    {% if device.lastSeenAt %}
                                        <span class="text-xs">{{ device.lastSeenAt|date('d/m/Y H:i') }}</span>
                                    {% else %}
                                        <span class="text-xs text-gray-400">Jamais</span>
                                    {% endif %}
                                </td>
                                <td class="px-6 py-4">
                                    <a
                                        href="{{ path('admin_device_app_show', {id: device.id}) }}"
                                        class="text-blue-600 hover:text-blue-800 dark:text-blue-400 font-medium"
                                    >
                                        <i class="fas fa-eye mr-1"></i>Voir
                                    </a>
                                </td>
                            </tr>
                        {% endfor %}
                    {% else %}
                        <tr>
                            <td colspan="6" class="px-6 py-8 text-center text-gray-500 dark:text-gray-400">
                                <i class="fas fa-mobile-alt text-4xl mb-2 text-gray-300"></i>
                                <p class="font-medium">Aucun appareil trouvé</p>
                                <p class="text-sm">Essayez de modifier vos filtres de recherche</p>
                            </td>
                        </tr>
                    {% endif %}
                </tbody>
            </table>
        </div>

        {# Pagination #}
        {% if devices|length > 0 %}
            <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700">
                {{ knp_pagination_render(devices) }}
            </div>
        {% endif %}
    </div>

</div>
{% endblock %}