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

{% block title %}{{ is_edit ? 'Modifier' : 'Nouvelle' }} annonce - Admin{% endblock %}

{% set inputClass = '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 bg-gray-50 focus:bg-white' %}
{% set labelClass = 'block text-sm font-medium text-gray-700 mb-2' %}
{% set helpClass = 'mt-1.5 text-xs text-gray-400' %}
{% set scope = 'admin--announcement-preview' %}

{% block body %}
<div class="max-w-[900px] mx-auto" data-controller="{{ scope }}">

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

    {{ form_start(form, {'attr': {'class': 'space-y-6', 'data-turbo': 'false'}}) }}

        {# ── Contenu ── #}
        <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: 'document', size: 'md', color: 'primary' } only %}
                </div>
                <div>
                    <h2 class="text-lg font-semibold text-gray-900">Contenu</h2>
                    <p class="text-xs text-gray-400">Ce que la personne lit dans la modale</p>
                </div>
            </div>
            <div class="p-6 space-y-5">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-5">
                    <div>
                        {{ form_label(form.badge, null, {'label_attr': {'class': labelClass}}) }}
                        {{ form_widget(form.badge, {'attr': {
                            'class': inputClass ~ ' uppercase',
                            ('data-' ~ scope ~ '-target'): 'badgeInput',
                            'data-action': scope ~ '#refresh'
                        }}) }}
                        <p class="{{ helpClass }}">{{ form.badge.vars.help }}</p>
                        {{ form_errors(form.badge) }}
                    </div>
                    <div class="md:col-span-2">
                        {{ form_label(form.title, null, {'label_attr': {'class': labelClass}}) }}
                        {{ form_widget(form.title, {'attr': {
                            'class': inputClass,
                            ('data-' ~ scope ~ '-target'): 'titleInput',
                            'data-action': scope ~ '#refresh'
                        }}) }}
                        {{ form_errors(form.title) }}
                    </div>
                </div>

                <div>
                    {{ form_label(form.body, null, {'label_attr': {'class': labelClass}}) }}
                    {{ form_widget(form.body, {'attr': {
                        'class': inputClass ~ ' resize-none',
                        ('data-' ~ scope ~ '-target'): 'bodyInput',
                        'data-action': scope ~ '#refresh'
                    }}) }}
                    <p class="{{ helpClass }}">{{ form.body.vars.help }}</p>
                    {{ form_errors(form.body) }}
                </div>

                <div>
                    {{ form_label(form.bullets, null, {'label_attr': {'class': labelClass}}) }}
                    {{ form_widget(form.bullets, {'attr': {
                        'class': inputClass ~ ' resize-none',
                        ('data-' ~ scope ~ '-target'): 'bulletsInput',
                        'data-action': scope ~ '#refresh'
                    }}) }}
                    <p class="{{ helpClass }}">{{ form.bullets.vars.help }}</p>
                    {{ form_errors(form.bullets) }}
                </div>
            </div>
        </div>

        {# ── Illustration ── #}
        <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: 'palette-2', size: 'md', color: 'primary' } only %}
                </div>
                <div>
                    <h2 class="text-lg font-semibold text-gray-900">Illustration</h2>
                    <p class="text-xs text-gray-400">Affichée à droite du texte, au-dessus sur mobile</p>
                </div>
            </div>
            <div class="p-6 space-y-5">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-5 items-start">
                    <div>
                        {{ form_label(form.imageFile, null, {'label_attr': {'class': labelClass}}) }}
                        {{ form_widget(form.imageFile, {'attr': {
                            'class': 'w-full text-sm text-gray-600 file:mr-4 file:py-2.5 file:px-4 file:rounded-xl file:border-0 file:text-sm file:font-semibold file:bg-primary/10 file:text-primary hover:file:bg-primary/20 file:cursor-pointer cursor-pointer',
                            ('data-' ~ scope ~ '-target'): 'imageInput',
                            'data-action': scope ~ '#refresh',
                            'accept': 'image/jpeg,image/png,image/gif,image/webp'
                        }}) }}
                        <p class="{{ helpClass }}">{{ form.imageFile.vars.help }}</p>
                        {{ form_errors(form.imageFile) }}

                        <div class="mt-5">
                            {{ form_label(form.imageAlt, null, {'label_attr': {'class': labelClass}}) }}
                            {{ form_widget(form.imageAlt, {'attr': {
                                'class': inputClass,
                                ('data-' ~ scope ~ '-target'): 'imageAltInput',
                                'data-action': scope ~ '#refresh'
                            }}) }}
                            <p class="{{ helpClass }}">{{ form.imageAlt.vars.help }}</p>
                        </div>
                    </div>

                    <div>
                        {# Direction artistique commune aux illustrations. Elle est ici, à
                           l'endroit et au moment où l'on cherche une image, plutôt que
                           dans une documentation qu'il faudrait penser à rouvrir. #}
                        <p class="{{ labelClass }}">Prompt de génération</p>
                        <div class="rounded-xl border border-gray-200 bg-gray-50 p-3">
                            <p class="text-[11px] leading-relaxed text-gray-500 max-h-[104px] overflow-y-auto">{{ image_style_prompt }}</p>
                            <div class="flex items-center justify-between gap-3 mt-2.5 pt-2.5 border-t border-gray-200/70">
                                <p class="text-[11px] text-gray-400">Collez-le chez OpenAI, puis ajoutez votre sujet à la suite.</p>
                                <button type="button"
                                        data-copy="{{ image_style_prompt }}"
                                        class="shrink-0 inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg border border-gray-200 bg-white text-xs font-semibold text-gray-600 hover:border-primary/40 hover:text-primary transition-colors">
                                    {% include '_atoms/icon/icon.html.twig' with { name: 'copy', size: 'xs', color: 'current' } only %}
                                    <span data-copy-label>Copier</span>
                                </button>
                            </div>
                        </div>

                        <p class="{{ labelClass }} mt-5">Image actuelle</p>
                        {% if announcement.imagePath %}
                            <img src="{{ announcement.imagePath }}" alt="{{ announcement.imageAlt }}"
                                 class="w-full max-h-[200px] object-cover rounded-xl border border-gray-100 shadow-sm">
                        {% else %}
                            <div class="w-full h-[140px] rounded-xl border-2 border-dashed border-gray-200 bg-gray-50 flex items-center justify-center">
                                <p class="text-xs text-gray-400">Aucune image — le texte occupera toute la modale</p>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        {# ── Bouton ── #}
        <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">Bouton</h2>
                    <p class="text-xs text-gray-400">Optionnel — sans lui, seul « Fermer » est proposé</p>
                </div>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                    <div>
                        {{ form_label(form.ctaLabel, null, {'label_attr': {'class': labelClass}}) }}
                        {{ form_widget(form.ctaLabel, {'attr': {
                            'class': inputClass,
                            ('data-' ~ scope ~ '-target'): 'ctaLabelInput',
                            'data-action': scope ~ '#refresh'
                        }}) }}
                        <p class="{{ helpClass }}">{{ form.ctaLabel.vars.help }}</p>
                    </div>
                    <div>
                        {{ form_label(form.ctaUrl, null, {'label_attr': {'class': labelClass}}) }}
                        {{ form_widget(form.ctaUrl, {'attr': {
                            'class': inputClass ~ ' font-mono text-sm',
                            ('data-' ~ scope ~ '-target'): 'ctaUrlInput',
                            'data-action': scope ~ '#refresh'
                        }}) }}
                        <p class="{{ helpClass }}">{{ form.ctaUrl.vars.help }}</p>
                    </div>
                </div>
            </div>
        </div>

        {# ── Fenêtre d'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: 'calendar', size: 'md', color: 'primary' } only %}
                </div>
                <div>
                    <h2 class="text-lg font-semibold text-gray-900">Fenêtre d'affichage</h2>
                    <p class="text-xs text-gray-400">La publication se fait depuis la liste, une annonce à la fois</p>
                </div>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                    <div>
                        {{ form_label(form.startsAt, null, {'label_attr': {'class': labelClass}}) }}
                        {{ form_widget(form.startsAt, {'attr': {'class': inputClass}}) }}
                        {{ form_errors(form.startsAt) }}
                    </div>
                    <div>
                        {{ form_label(form.endsAt, null, {'label_attr': {'class': labelClass}}) }}
                        {{ form_widget(form.endsAt, {'attr': {'class': inputClass}}) }}
                        <p class="{{ helpClass }}">{{ form.endsAt.vars.help }}</p>
                        {{ form_errors(form.endsAt) }}
                    </div>
                </div>
            </div>
        </div>

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

            <div class="flex items-center gap-3">
                {% include '_atoms/button/button.html.twig' with {
                    label: 'Prévisualiser',
                    variant: 'secondary',
                    size: 'lg',
                    icon: 'eye',
                    type: 'button',
                    attr: { 'data-action': scope ~ '#open' }
                } only %}
                {% include '_atoms/button/button.html.twig' with {
                    label: is_edit ? 'Enregistrer' : 'Créer l\'annonce',
                    variant: 'primary',
                    size: 'lg',
                    icon: 'check',
                    type: 'submit'
                } only %}
            </div>
        </div>

    {{ form_end(form) }}

    {# Comportement des boutons [data-copy] — mutualisé avec l'espace commercial. #}
    {% include 'admin/commercial/_copy-script.html.twig' %}

    {# Prévisualisation — le vrai gabarit de la modale, rempli à la volée par le
       contrôleur depuis les champs ci-dessus. Aucune mise en forme n'est réécrite
       en JavaScript : ce qui s'affiche ici est ce que verront les utilisateurs. #}
    {% include '_organisms/announcement-modal/announcement-modal.html.twig' with {
        badge:     announcement.badge,
        title:     announcement.title,
        body:      announcement.body,
        bullets:   announcement.bullets,
        imagePath: announcement.imagePath,
        imageAlt:  announcement.imageAlt,
        ctaLabel:  announcement.ctaLabel,
        ctaUrl:    announcement.safeCtaUrl,
        targetScope: scope,
        previewBulletSlots: max_bullets,
        modalAttr: { ('data-' ~ scope ~ '-target'): 'modal' },
        closeAttr: { 'data-action': scope ~ '#close' },
        ctaAttr:   { 'data-action': scope ~ '#preventNavigation' }
    } only %}

</div>
{% endblock %}