{% 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">

    {# Back Button #}
    <div class="mb-4">
        <a href="{{ path('admin_device_app_index') }}" class="inline-flex items-center text-blue-600 hover:text-blue-800 dark:text-blue-400">
            <i class="fas fa-arrow-left mr-2"></i>
            Retour à la liste des appareils
        </a>
    </div>

    {# Header #}
    <div class="mb-6 flex items-center justify-between">
        <div>
            <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">
                {% if device.platform == 'android' %}
                    <i class="fab fa-android text-green-500 mr-2"></i>
                {% elseif device.platform == 'ios' %}
                    <i class="fab fa-apple text-gray-600 mr-2"></i>
                {% else %}
                    <i class="fas fa-mobile-alt mr-2"></i>
                {% endif %}
                {{ device.deviceName ?? 'Appareil en attente de configuration' }}
            </h1>
            <p class="text-gray-600 dark:text-gray-400">
                {{ device.deviceModel ?? 'Modèle inconnu' }} - {{ device.platform ? device.platform|upper : 'Plateforme inconnue' }}
            </p>
        </div>
        <div>
            {% if device.isActive %}
                <span class="inline-flex items-center px-4 py-2 rounded-lg text-sm font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300">
                    <i class="fas fa-check-circle mr-2"></i>Appareil Actif
                </span>
            {% else %}
                <span class="inline-flex items-center px-4 py-2 rounded-lg text-sm font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300">
                    <i class="fas fa-times-circle mr-2"></i>Appareil Inactif
                </span>
            {% endif %}
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

        {# Left Column - Device Information #}
        <div class="lg:col-span-2 space-y-6">

            {# Device Details Card #}
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow">
                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
                        <i class="fas fa-info-circle mr-2"></i>Informations de l'appareil
                    </h2>
                </div>
                <div class="px-6 py-4">
                    <dl class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">UID</dt>
                            <dd class="mt-1 text-sm text-gray-900 dark:text-white font-mono">{{ device.uid }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Metrics UUID</dt>
                            <dd class="mt-1 text-sm text-gray-900 dark:text-white font-mono">{{ device.metricsUuid }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Nom de l'appareil</dt>
                            <dd class="mt-1 text-sm text-gray-900 dark:text-white">{{ device.deviceName ?? '<span class="text-gray-400 italic">En attente du premier login</span>'|raw }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Modèle</dt>
                            <dd class="mt-1 text-sm text-gray-900 dark:text-white">{{ device.deviceModel ?? '<span class="text-gray-400 italic">En attente du premier login</span>'|raw }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Fabricant</dt>
                            <dd class="mt-1 text-sm text-gray-900 dark:text-white">{{ device.deviceManufacturer ?? 'N/A' }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Plateforme</dt>
                            <dd class="mt-1 text-sm text-gray-900 dark:text-white uppercase">{{ device.platform ?? '<span class="text-gray-400 italic normal-case">En attente du premier login</span>'|raw }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Version OS</dt>
                            <dd class="mt-1 text-sm text-gray-900 dark:text-white">{{ device.osVersion ?? '<span class="text-gray-400 italic">En attente du premier login</span>'|raw }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Version App</dt>
                            <dd class="mt-1 text-sm text-gray-900 dark:text-white">
                                {% if device.appVersion %}
                                    {{ device.appVersion }} (Build {{ device.appBuildNumber ?? 'N/A' }})
                                {% else %}
                                    <span class="text-gray-400 italic">En attente du premier login</span>
                                {% endif %}
                            </dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Native Device ID</dt>
                            <dd class="mt-1 text-sm text-gray-900 dark:text-white font-mono break-all">
                                {{ device.nativeDeviceId }}
                            </dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Créé le</dt>
                            <dd class="mt-1 text-sm text-gray-900 dark:text-white">
                                {{ device.createdAt|date('d/m/Y à H:i') }}
                            </dd>
                        </div>
                    </dl>
                </div>
            </div>

            {# User Information #}
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow">
                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
                        <i class="fas fa-user mr-2"></i>Utilisateur
                    </h2>
                </div>
                <div class="px-6 py-4">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <div class="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center">
                                <span class="text-xl font-bold text-blue-600 dark:text-blue-400">
                                    {% if device.user.firstName and device.user.lastName %}
                                        {{ device.user.firstName|slice(0, 1)|upper }}{{ device.user.lastName|slice(0, 1)|upper }}
                                    {% else %}
                                        {{ device.user.email|slice(0, 1)|upper }}{{ device.user.email|slice(1, 1)|upper }}
                                    {% endif %}
                                </span>
                            </div>
                        </div>
                        <div class="ml-4 flex-1">
                            <p class="font-medium text-gray-900 dark:text-white">
                                {% if device.user.firstName and device.user.lastName %}
                                    {{ device.user.firstName }} {{ device.user.lastName }}
                                {% else %}
                                    {{ device.user.email }}
                                {% endif %}
                            </p>
                            <p class="text-sm text-gray-500 dark:text-gray-400">{{ device.user.email }}</p>
                        </div>
                        <div>
                            <a
                                href="{{ path('admin_users_show', {id: device.user.id}) }}"
                                class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium transition-colors"
                            >
                                Voir le profil
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            {# Activity Information #}
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow">
                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
                        <i class="fas fa-chart-line mr-2"></i>Activité
                    </h2>
                </div>
                <div class="px-6 py-4">
                    <dl class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Dernière activité</dt>
                            <dd class="mt-1 text-sm text-gray-900 dark:text-white">
                                {% if device.lastSeenAt %}
                                    {{ device.lastSeenAt|date('d/m/Y à H:i') }}
                                {% else %}
                                    <span class="text-gray-400">Jamais</span>
                                {% endif %}
                            </dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Dernière IP</dt>
                            <dd class="mt-1 text-sm text-gray-900 dark:text-white font-mono">
                                {{ device.lastIpAddress ?? 'N/A' }}
                            </dd>
                        </div>
                    </dl>
                </div>
            </div>

            {# Activation/Deactivation History #}
            {% if device.activatedAt or device.deactivatedAt %}
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow">
                    <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                        <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
                            <i class="fas fa-history mr-2"></i>Historique
                        </h2>
                    </div>
                    <div class="px-6 py-4">
                        <div class="space-y-4">
                            {% if device.activatedAt %}
                                <div class="flex items-start">
                                    <div class="flex-shrink-0">
                                        <div class="w-8 h-8 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center">
                                            <i class="fas fa-check text-green-600 dark:text-green-400"></i>
                                        </div>
                                    </div>
                                    <div class="ml-3">
                                        <p class="text-sm font-medium text-gray-900 dark:text-white">Activation</p>
                                        <p class="text-xs text-gray-500 dark:text-gray-400">
                                            {{ device.activatedAt|date('d/m/Y à H:i') }}
                                            {% if device.activatedBy %}
                                                par {{ device.activatedBy.email }}
                                            {% endif %}
                                        </p>
                                    </div>
                                </div>
                            {% endif %}

                            {% if device.deactivatedAt %}
                                <div class="flex items-start">
                                    <div class="flex-shrink-0">
                                        <div class="w-8 h-8 rounded-full bg-red-100 dark:bg-red-900 flex items-center justify-center">
                                            <i class="fas fa-times text-red-600 dark:text-red-400"></i>
                                        </div>
                                    </div>
                                    <div class="ml-3">
                                        <p class="text-sm font-medium text-gray-900 dark:text-white">Désactivation</p>
                                        <p class="text-xs text-gray-500 dark:text-gray-400">
                                            {{ device.deactivatedAt|date('d/m/Y à H:i') }}
                                            {% if device.deactivatedBy %}
                                                par {{ device.deactivatedBy.email }}
                                            {% endif %}
                                        </p>
                                        {% if device.deactivationReason %}
                                            <p class="text-xs text-gray-600 dark:text-gray-300 mt-1">
                                                <span class="font-medium">Raison:</span> {{ device.deactivationReason }}
                                            </p>
                                        {% endif %}
                                    </div>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            {% endif %}

        </div>

        {# Right Column - Actions #}
        <div class="lg:col-span-1">
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow sticky top-6">
                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
                        <i class="fas fa-cog mr-2"></i>Actions
                    </h2>
                </div>
                <div class="px-6 py-4 space-y-3">

                    {% if device.isActive %}
                        {# Deactivate Button #}
                        <button
                            type="button"
                            data-modal-target="deactivate-modal"
                            data-modal-toggle="deactivate-modal"
                            class="w-full px-4 py-2 bg-yellow-600 hover:bg-yellow-700 text-white rounded-lg font-medium transition-colors"
                        >
                            <i class="fas fa-pause-circle mr-2"></i>Désactiver l'appareil
                        </button>
                    {% else %}
                        {# Activate Button #}
                        <form method="post" action="{{ path('admin_device_app_activate', {id: device.id}) }}" class="w-full">
                            <input type="hidden" name="_token" value="{{ csrf_token('activate_device_' ~ device.id) }}">
                            <button
                                type="submit"
                                class="w-full px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg font-medium transition-colors"
                                onclick="return confirm('Êtes-vous sûr de vouloir activer cet appareil ?');"
                            >
                                <i class="fas fa-check-circle mr-2"></i>Activer l'appareil
                            </button>
                        </form>
                    {% endif %}

                    {# Delete Button #}
                    <button
                        type="button"
                        data-modal-target="delete-modal"
                        data-modal-toggle="delete-modal"
                        class="w-full px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg font-medium transition-colors"
                    >
                        <i class="fas fa-trash mr-2"></i>Supprimer l'appareil
                    </button>

                </div>
            </div>
        </div>

    </div>

</div>

{# Deactivate Modal #}
<div id="deactivate-modal" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
    <div class="relative p-4 w-full max-w-md max-h-full">
        <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
            <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
                    Désactiver l'appareil
                </h3>
                <button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="deactivate-modal">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <form method="post" action="{{ path('admin_device_app_deactivate', {id: device.id}) }}">
                <div class="p-4 md:p-5 space-y-4">
                    <input type="hidden" name="_token" value="{{ csrf_token('deactivate_device_' ~ device.id) }}">
                    <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
                        Vous êtes sur le point de désactiver l'appareil <strong>{{ device.deviceName ?? ('UID: ' ~ device.uid) }}</strong>.
                        Tous les tokens JWT associés seront révoqués immédiatement.
                    </p>
                    <div>
                        <label for="reason" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                            Raison de la désactivation
                        </label>
                        <textarea
                            id="reason"
                            name="reason"
                            rows="3"
                            class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
                            placeholder="Ex: Appareil compromis, changement d'utilisateur..."
                        ></textarea>
                    </div>
                </div>
                <div class="flex items-center p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600">
                    <button type="submit" class="text-white bg-yellow-600 hover:bg-yellow-700 focus:ring-4 focus:outline-none focus:ring-yellow-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-yellow-600 dark:hover:bg-yellow-700">
                        Désactiver
                    </button>
                    <button data-modal-hide="deactivate-modal" type="button" class="ms-3 text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600">
                        Annuler
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{# Delete Modal #}
<div id="delete-modal" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
    <div class="relative p-4 w-full max-w-md max-h-full">
        <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
            <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
                    Supprimer l'appareil
                </h3>
                <button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="delete-modal">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <form method="post" action="{{ path('admin_device_app_delete', {id: device.id}) }}">
                <div class="p-4 md:p-5 space-y-4">
                    <input type="hidden" name="_token" value="{{ csrf_token('delete_device_' ~ device.id) }}">
                    <div class="flex items-center p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400" role="alert">
                        <i class="fas fa-exclamation-triangle mr-2"></i>
                        <div>
                            <span class="font-medium">Attention!</span> Cette action est irréversible.
                        </div>
                    </div>
                    <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
                        Vous êtes sur le point de supprimer définitivement l'appareil <strong>{{ device.deviceName ?? ('UID: ' ~ device.uid) }}</strong>.
                    </p>
                    <p class="text-sm text-gray-500 dark:text-gray-400">
                        Voulez-vous vraiment continuer ?
                    </p>
                </div>
                <div class="flex items-center p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600">
                    <button type="submit" class="text-white bg-red-600 hover:bg-red-700 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-red-600 dark:hover:bg-red-700">
                        Supprimer
                    </button>
                    <button data-modal-hide="delete-modal" type="button" class="ms-3 text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600">
                        Annuler
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{% endblock %}