{% 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-6xl 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-plus-circle mr-2"></i>
                    {{ page_title }}
                </h1>
                <p class="text-gray-600 dark:text-gray-400">
                    Créer un appareil mobile pour un utilisateur (UID généré automatiquement)
                </p>
            </div>
            <a
                href="{{ path('admin_device_app_index') }}"
                class="px-4 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-arrow-left mr-2"></i>Retour
            </a>
        </div>
    </div>

    {# Info Card - Nouveau Processus #}
    <div class="bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-5 mb-6">
        <div class="flex">
            <div class="flex-shrink-0">
                <i class="fas fa-lightbulb text-blue-600 dark:text-blue-400 text-2xl"></i>
            </div>
            <div class="ml-4">
                <h3 class="text-base font-semibold text-blue-900 dark:text-blue-300 mb-2">
                    Fonctionnement Simplifié
                </h3>
                <div class="text-sm text-blue-800 dark:text-blue-400 space-y-2">
                    <p class="font-medium">📱 Création en 3 étapes :</p>
                    <ol class="list-decimal list-inside space-y-1 ml-2">
                        <li><strong>Vous créez</strong> : Sélectionnez l'utilisateur et activez l'appareil</li>
                        <li><strong>Système génère</strong> : Un UID unique est créé automatiquement</li>
                        <li><strong>Utilisateur se connecte</strong> : Les infos détaillées (modèle, OS, version) sont collectées au premier login</li>
                    </ol>
                    <div class="mt-3 p-3 bg-white/50 dark:bg-gray-800/50 rounded border border-blue-300 dark:border-blue-700">
                        <p class="text-xs"><strong>💡 Note :</strong> L'UID généré sera affiché après création. Communiquez-le à l'utilisateur pour qu'il puisse se connecter via l'application mobile.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {# Form - Ultra Simplifié #}
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8">
        <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-6 flex items-center">
            <i class="fas fa-edit mr-2 text-blue-600"></i>
            Informations de Base
        </h2>

        {{ form_start(form, {
            'attr': {
                'class': 'space-y-6',
                'novalidate': 'novalidate'
            }
        }) }}

        {# User Selection #}
        <div>
            {{ form_label(form.user) }}
            {{ form_widget(form.user) }}
            {{ form_errors(form.user) }}
            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                <i class="fas fa-info-circle mr-1"></i>L'utilisateur qui pourra utiliser cet appareil
            </p>
        </div>

        {# Device Name (Optional) #}
        <div>
            {{ form_label(form.deviceName) }}
            {{ form_widget(form.deviceName) }}
            {{ form_help(form.deviceName) }}
            {{ form_errors(form.deviceName) }}
        </div>

        {# Activate Immediately Checkbox #}
        <div class="border-t border-gray-200 dark:border-gray-700 pt-6">
            <div class="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4">
                <div class="flex items-start">
                    {{ form_widget(form.activateImmediately) }}
                    <div>
                        {{ form_label(form.activateImmediately) }}
                        {{ form_help(form.activateImmediately) }}
                    </div>
                </div>
                {{ form_errors(form.activateImmediately) }}
            </div>
        </div>

        {# Actions #}
        <div class="flex items-center justify-between pt-6 border-t border-gray-200 dark:border-gray-700">
            <a
                href="{{ path('admin_device_app_index') }}"
                class="px-6 py-2.5 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 inline-flex items-center"
            >
                <i class="fas fa-times mr-2"></i>Annuler
            </a>
            <button
                type="submit"
                class="px-6 py-2.5 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white rounded-lg font-medium transition-all shadow-lg hover:shadow-xl inline-flex items-center"
            >
                <i class="fas fa-magic mr-2"></i>Générer l'Appareil
            </button>
        </div>

        {{ form_end(form) }}
    </div>

    {# Help Section #}
    <div class="mt-6 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4">
        <div class="flex">
            <div class="flex-shrink-0">
                <i class="fas fa-question-circle text-yellow-600 dark:text-yellow-400 text-xl"></i>
            </div>
            <div class="ml-3">
                <h3 class="text-sm font-medium text-yellow-800 dark:text-yellow-300">
                    Que se passe-t-il après la création ?
                </h3>
                <div class="mt-2 text-sm text-yellow-700 dark:text-yellow-400">
                    <ul class="list-disc list-inside space-y-1">
                        <li>Un <strong>UID unique</strong> est généré et affiché</li>
                        <li>L'utilisateur doit <strong>entrer cet UID</strong> dans l'app mobile</li>
                        <li>Au <strong>premier login</strong>, l'app envoie automatiquement :
                            <ul class="list-circle list-inside ml-4 mt-1 space-y-0.5">
                                <li>Modèle de l'appareil (ex: Samsung Galaxy S23)</li>
                                <li>Système d'exploitation (ex: Android 14)</li>
                                <li>Version de l'application</li>
                                <li>Et toutes autres informations techniques</li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

</div>
{% endblock %}