{% extends 'base.html.twig' %}

{% block title %}{{ is_edit ? 'Modifier' : 'Nouvel' }} outil - Admin{% endblock %}

{% block body %}
<div class="max-w-[800px] mx-auto">

    {# Header #}
    <div class="mb-8">
        {% include '_molecules/page-header/page-header.html.twig' with {
            title: is_edit ? 'Modifier « ' ~ tool.name ~ ' »' : 'Nouvel outil',
            icon: is_edit ? 'edit' : 'plus',
            backHref: path('admin_tool_list'),
            backLabel: 'Retour aux outils'
        } only %}
    </div>

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

        {# ============================================================
           CARD 1 : Informations générales
           ============================================================ #}
        <div class="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-100 flex items-center gap-3">
                <div class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'settings', size: 'md', color: 'primary' } only %}
                </div>
                <div>
                    <h2 class="text-lg font-semibold text-gray-900">Informations générales</h2>
                    <p class="text-xs text-gray-400">Identité et description de l'outil</p>
                </div>
            </div>

            <div class="p-6 space-y-6">
                {# Nom et Code #}
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        {{ form_label(form.name, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700 mb-2'}}) }}
                        {{ form_widget(form.name, {'attr': {'class': 'w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all duration-base bg-gray-50 focus:bg-white'}}) }}
                        {{ form_errors(form.name) }}
                    </div>

                    <div>
                        {{ form_label(form.code, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700 mb-2'}}) }}
                        {{ form_widget(form.code, {'attr': {'class': 'w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all duration-base bg-gray-50 focus:bg-white font-mono text-sm'}}) }}
                        {% if form.code.vars.help %}
                            <p class="mt-1.5 text-xs text-gray-400">{{ form.code.vars.help }}</p>
                        {% endif %}
                        {{ form_errors(form.code) }}
                    </div>
                </div>

                {# Description #}
                <div>
                    {{ form_label(form.description, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700 mb-2'}}) }}
                    {{ form_widget(form.description, {'attr': {'class': 'w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all duration-base bg-gray-50 focus:bg-white resize-none', 'rows': 3}}) }}
                    {{ form_errors(form.description) }}
                </div>

                {# Icône et Token Tailwind #}
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        {{ form_label(form.icon, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700 mb-2'}}) }}
                        {{ form_widget(form.icon, {'attr': {'class': 'w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all duration-base bg-gray-50 focus:bg-white'}}) }}
                        {% if form.icon.vars.help %}
                            <p class="mt-1.5 text-xs text-gray-400">{{ form.icon.vars.help }}</p>
                        {% endif %}
                        {{ form_errors(form.icon) }}
                    </div>

                    <div>
                        {{ form_label(form.color, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700 mb-2'}}) }}
                        {{ form_widget(form.color, {'attr': {'class': 'w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all duration-base bg-gray-50 focus:bg-white appearance-none'}}) }}
                        {% if form.color.vars.help %}
                            <p class="mt-1.5 text-xs text-gray-400">{{ form.color.vars.help }}</p>
                        {% endif %}
                        {{ form_errors(form.color) }}
                    </div>
                </div>

                {# ── Palette de couleurs (4 sélecteurs visuels) ── #}
                <div>
                    <p class="block text-sm font-medium text-gray-700 mb-3">Palette de couleurs</p>

                    {# Aperçu live #}
                    <div class="mb-4 p-4 rounded-xl border-2 transition-all duration-base"
                         id="color-preview"
                         style="background: {{ form.colorBackground.vars.value ?? '#F3F4F6' }};
                                border-color: {{ form.colorBorder.vars.value ?? '#E5E7EB' }};">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-lg flex items-center justify-center"
                                 id="color-preview-icon"
                                 style="background: {{ form.colorPrimary.vars.value ?? '#6B7280' }}20;">
                                <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke-width="2"
                                     id="color-preview-svg"
                                     stroke="{{ form.colorPrimary.vars.value ?? '#6B7280' }}">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60 60 0 0 0-.491 6.347A48.6 48.6 0 0 1 12 20.904a48.6 48.6 0 0 1 8.232-4.41 61 61 0 0 0-.491-6.347m-15.482 0a50.6 50.6 0 0 0-2.658-.813A60 60 0 0 1 12 2.898a60 60 0 0 1 8.399 6.436 51 51 0 0 0-2.658.814m-15.482 0A51 51 0 0 1 12 13.489a51 51 0 0 1 7.74-3.342"/>
                                </svg>
                            </div>
                            <div>
                                <span class="font-semibold text-sm" id="color-preview-title"
                                      style="color: {{ form.colorPrimary.vars.value ?? '#6B7280' }};">
                                    {{ tool.name|default('Nom de l\'outil') }}
                                </span>
                                <span class="block text-xs"
                                      id="color-preview-sub"
                                      style="color: {{ form.colorSecondary.vars.value ?? '#9CA3AF' }};">
                                    Aperçu de la palette
                                </span>
                            </div>
                        </div>
                    </div>

                    {# 4 sélecteurs #}
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                        {% for fieldName, fieldLabel in {
                            'colorBackground': 'Fond',
                            'colorPrimary': 'Primaire',
                            'colorSecondary': 'Secondaire',
                            'colorBorder': 'Bordure'
                        } %}
                            {% set field = attribute(form, fieldName) %}
                            {% set hexVal = field.vars.value ?? '' %}
                            <div>
                                <label class="block text-xs font-medium text-gray-500 mb-1.5">{{ fieldLabel }}</label>
                                <div class="flex items-center gap-2">
                                    <input type="color"
                                           value="{{ hexVal ?: '#CCCCCC' }}"
                                           class="w-10 h-10 rounded-lg border-2 border-gray-200 cursor-pointer p-0.5 shrink-0"
                                           data-target="{{ field.vars.id }}"
                                           data-role="{{ fieldName }}"
                                           onchange="
                                               document.getElementById(this.dataset.target).value = this.value;
                                               updateColorPreview();
                                           ">
                                    {{ form_widget(field, {'attr': {'class': 'w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all duration-base bg-gray-50 focus:bg-white font-mono text-xs uppercase', 'oninput': "
                                        const picker = this.previousElementSibling?.previousElementSibling || this.closest('div').querySelector('input[type=color]');
                                        if (picker && this.value.match(/^#[0-9a-fA-F]{6}$/)) picker.value = this.value;
                                        updateColorPreview();
                                    "}}) }}
                                </div>
                                {{ form_errors(field) }}
                            </div>
                        {% endfor %}
                    </div>

                    <p class="mt-2 text-xs text-gray-400">Format hex (#RRGGBB). Le sélecteur met à jour l'aperçu en temps réel.</p>
                </div>

                <script>
                function updateColorPreview() {
                    const bg = document.getElementById('{{ form.colorBackground.vars.id }}')?.value || '#F3F4F6';
                    const primary = document.getElementById('{{ form.colorPrimary.vars.id }}')?.value || '#6B7280';
                    const secondary = document.getElementById('{{ form.colorSecondary.vars.id }}')?.value || '#9CA3AF';
                    const border = document.getElementById('{{ form.colorBorder.vars.id }}')?.value || '#E5E7EB';

                    const preview = document.getElementById('color-preview');
                    if (preview) {
                        preview.style.background = bg;
                        preview.style.borderColor = border;
                    }
                    const icon = document.getElementById('color-preview-icon');
                    if (icon) icon.style.background = primary + '20';
                    const svg = document.getElementById('color-preview-svg');
                    if (svg) svg.setAttribute('stroke', primary);
                    const title = document.getElementById('color-preview-title');
                    if (title) title.style.color = primary;
                    const sub = document.getElementById('color-preview-sub');
                    if (sub) sub.style.color = secondary;
                }
                </script>
            </div>
        </div>

        {# ============================================================
           CARD 2 : Routage
           ============================================================ #}
        <div class="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-100 flex items-center gap-3">
                <div class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'arrow-right', size: 'md', color: 'primary' } only %}
                </div>
                <div>
                    <h2 class="text-lg font-semibold text-gray-900">Routage</h2>
                    <p class="text-xs text-gray-400">Routes Symfony pour la navigation et la protection</p>
                </div>
            </div>

            <div class="p-6 space-y-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        {{ form_label(form.routeName, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700 mb-2'}}) }}
                        {{ form_widget(form.routeName, {'attr': {'class': 'w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all duration-base bg-gray-50 focus:bg-white font-mono text-sm'}}) }}
                        {% if form.routeName.vars.help %}
                            <p class="mt-1.5 text-xs text-gray-400">{{ form.routeName.vars.help }}</p>
                        {% endif %}
                        {{ form_errors(form.routeName) }}
                    </div>

                    <div>
                        {{ form_label(form.routePrefix, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700 mb-2'}}) }}
                        {{ form_widget(form.routePrefix, {'attr': {'class': 'w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all duration-base bg-gray-50 focus:bg-white font-mono text-sm'}}) }}
                        {% if form.routePrefix.vars.help %}
                            <p class="mt-1.5 text-xs text-gray-400">{{ form.routePrefix.vars.help }}</p>
                        {% endif %}
                        {{ form_errors(form.routePrefix) }}
                    </div>
                </div>
            </div>
        </div>

        {# ============================================================
           CARD 3 : Tokens et affichage
           ============================================================ #}
        <div class="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-100 flex items-center gap-3">
                <div class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'token', size: 'md', color: 'primary' } only %}
                </div>
                <div>
                    <h2 class="text-lg font-semibold text-gray-900">Tokens et affichage</h2>
                    <p class="text-xs text-gray-400">Consommation et ordre dans l'interface</p>
                </div>
            </div>

            <div class="p-6 space-y-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        {{ form_label(form.minTokens, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700 mb-2'}}) }}
                        {{ form_widget(form.minTokens, {'attr': {'class': 'w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all duration-base bg-gray-50 focus:bg-white tabular-nums'}}) }}
                        {% if form.minTokens.vars.help %}
                            <p class="mt-1.5 text-xs text-gray-400">{{ form.minTokens.vars.help }}</p>
                        {% endif %}
                        {{ form_errors(form.minTokens) }}
                    </div>

                    <div>
                        {{ form_label(form.sortOrder, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700 mb-2'}}) }}
                        {{ form_widget(form.sortOrder, {'attr': {'class': 'w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all duration-base bg-gray-50 focus:bg-white tabular-nums'}}) }}
                        {% if form.sortOrder.vars.help %}
                            <p class="mt-1.5 text-xs text-gray-400">{{ form.sortOrder.vars.help }}</p>
                        {% endif %}
                        {{ form_errors(form.sortOrder) }}
                    </div>
                </div>

                {# Toggles #}
                <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                    {# isTokenable #}
                    <label class="flex items-center gap-3 p-4 bg-gray-50 border-2 border-gray-200 rounded-xl
                                  cursor-pointer transition-all duration-base
                                  hover:border-primary/30 hover:bg-primary/5
                                  has-[:checked]:border-primary has-[:checked]:bg-primary/5">
                        {{ form_widget(form.isTokenable, {'attr': {'class': 'sr-only peer'}}) }}
                        <div class="w-10 h-6 bg-gray-300 peer-checked:bg-primary rounded-full relative
                                    transition-colors duration-base
                                    after:content-[''] after:absolute after:top-0.5 after:left-0.5
                                    after:w-5 after:h-5 after:bg-white after:rounded-full
                                    after:transition-transform after:duration-base
                                    peer-checked:after:translate-x-4 flex-shrink-0"></div>
                        <span class="text-sm font-medium text-gray-700">Consomme des tokens</span>
                    </label>

                    {# isVisibleInSidebar #}
                    <label class="flex items-center gap-3 p-4 bg-gray-50 border-2 border-gray-200 rounded-xl
                                  cursor-pointer transition-all duration-base
                                  hover:border-primary/30 hover:bg-primary/5
                                  has-[:checked]:border-primary has-[:checked]:bg-primary/5">
                        {{ form_widget(form.isVisibleInSidebar, {'attr': {'class': 'sr-only peer'}}) }}
                        <div class="w-10 h-6 bg-gray-300 peer-checked:bg-primary rounded-full relative
                                    transition-colors duration-base
                                    after:content-[''] after:absolute after:top-0.5 after:left-0.5
                                    after:w-5 after:h-5 after:bg-white after:rounded-full
                                    after:transition-transform after:duration-base
                                    peer-checked:after:translate-x-4 flex-shrink-0"></div>
                        <span class="text-sm font-medium text-gray-700">Visible sidebar</span>
                    </label>

                    {# isVisibleInDashboard #}
                    <label class="flex items-center gap-3 p-4 bg-gray-50 border-2 border-gray-200 rounded-xl
                                  cursor-pointer transition-all duration-base
                                  hover:border-primary/30 hover:bg-primary/5
                                  has-[:checked]:border-primary has-[:checked]:bg-primary/5">
                        {{ form_widget(form.isVisibleInDashboard, {'attr': {'class': 'sr-only peer'}}) }}
                        <div class="w-10 h-6 bg-gray-300 peer-checked:bg-primary rounded-full relative
                                    transition-colors duration-base
                                    after:content-[''] after:absolute after:top-0.5 after:left-0.5
                                    after:w-5 after:h-5 after:bg-white after:rounded-full
                                    after:transition-transform after:duration-base
                                    peer-checked:after:translate-x-4 flex-shrink-0"></div>
                        <span class="text-sm font-medium text-gray-700">Visible dashboard</span>
                    </label>
                </div>
            </div>
        </div>

        {# ============================================================
           CARD 4 : Visibilité et dashboard
           ============================================================ #}
        <div class="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-100 flex items-center gap-3">
                <div class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'eye', size: 'md', color: 'primary' } only %}
                </div>
                <div>
                    <h2 class="text-lg font-semibold text-gray-900">Visibilité et dashboard</h2>
                    <p class="text-xs text-gray-400">Règle de visibilité et description pour le dashboard</p>
                </div>
            </div>

            <div class="p-6 space-y-6">
                {# Règle de visibilité #}
                <div>
                    {{ form_label(form.visibilityRule, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700 mb-2'}}) }}
                    {{ form_widget(form.visibilityRule, {'attr': {'class': 'w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all duration-base bg-gray-50 focus:bg-white appearance-none'}}) }}
                    {% if form.visibilityRule.vars.help %}
                        <p class="mt-1.5 text-xs text-gray-400">{{ form.visibilityRule.vars.help }}</p>
                    {% endif %}
                    {{ form_errors(form.visibilityRule) }}
                </div>

                {# Description dashboard #}
                <div>
                    {{ form_label(form.dashboardDescription, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700 mb-2'}}) }}
                    {{ form_widget(form.dashboardDescription, {'attr': {'class': 'w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all duration-base bg-gray-50 focus:bg-white resize-none', 'rows': 3}}) }}
                    {% if form.dashboardDescription.vars.help %}
                        <p class="mt-1.5 text-xs text-gray-400">{{ form.dashboardDescription.vars.help }}</p>
                    {% endif %}
                    {{ form_errors(form.dashboardDescription) }}
                </div>
            </div>
        </div>

        {# Actions #}
        <div class="flex items-center justify-between pt-2">
            {% include '_atoms/button/button.html.twig' with {
                label: 'Annuler',
                variant: 'ghost',
                size: 'lg',
                icon: 'arrow-left',
                href: path('admin_tool_list')
            } only %}

            {% include '_atoms/button/button.html.twig' with {
                label: is_edit ? 'Enregistrer' : 'Créer l\'outil',
                variant: 'primary',
                size: 'lg',
                icon: 'check',
                type: 'submit'
            } only %}
        </div>

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