{% trans_default_domain 'admin' %}

{% set isVariant = offer.isVariant %}
{% set isReadonly = isReadonly|default(false) or isVariant %}

<div {{ attributes.defaults({ class: 'border-t border-gray-200 dark:border-gray-800 mt-6 pt-6' }) }}>

        <div class="space-y-6">
        {# Variant notice lives in the global edit_page_header block in
           page/offers/edit.html.twig — don't repeat it here. The
           isVariant flag is still folded into isReadonly above so we
           keep hiding the mutation controls below. #}
        {% if not isReadonly %}
        {# 1. Action buttons: change picture or upload #}
        <div class="flex items-center gap-4">
            <twig:Admin:Dropdown position="left">
                <twig:block name="toggle">
                    <button type="button"
                            class="inline-flex items-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-100 dark:ring-gray-700 dark:hover:bg-gray-700">
                        Bild hinzufügen / ändern
                        <twig:ux:icon name="ph:caret-down" class="-mr-1 h-5 w-5 text-gray-400" aria-hidden="true" />
                    </button>
                </twig:block>
                <twig:block name="dropdown">
                    <div class="py-1">
                        <a href="{{ path('admin_files', { storage: 'media', offer: offer.uuid }) }}"
                                data-turbo-frame="modal"
                                class="text-gray-700 block px-4 py-2 text-sm w-full text-left hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700">
                            Aus Dateien wählen
                        </a>
                        <button type="button"
                                class="text-gray-700 block px-4 py-2 text-sm w-full text-left hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"
                                data-action="live#action"
                                data-live-action-param="setMediaAction"
                                data-live-mode-param="upload">
                            Neu hochladen
                        </button>
                        <button type="button"
                                class="text-gray-700 block px-4 py-2 text-sm w-full text-left hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"
                                data-action="live#action"
                                data-live-action-param="setMediaAction"
                                data-live-mode-param="ai-generate">
                            Bild mit KI generieren
                        </button>
                    </div>
                </twig:block>
            </twig:Admin:Dropdown>

            {% if mediaAction %}
                <button type="button"
                        class="text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
                        data-action="live#action"
                        data-live-action-param="resetMediaAction">
                    Abbrechen
                </button>
            {% endif %}
        </div>
        {% endif %}

        {# 2. Conditional rendering of Picker or Dropzone #}
        {% if not isReadonly and mediaAction == 'upload' %}
            <div class="rounded-lg p-4 border border-gray-200 dark:border-gray-700">
                <h4 class="text-sm font-medium mb-4">Bild hochladen</h4>
                <div class="relative group" {{ stimulus_controller('symfony/ux-dropzone/dropzone') }}
                     data-action="change->live#action" data-live-action-param="files|upload">
                    <input type="file"
                           name="media"
                           class="absolute inset-0 z-10 w-full h-full opacity-0 cursor-pointer"
                           data-symfony--ux-dropzone--dropzone-target="input">
                    <div class="py-8 border-2 border-dashed border-gray-300 rounded-lg text-center group-hover:border-primary-500 transition-colors"
                         data-symfony--ux-dropzone--dropzone-target="placeholder">
                        <p class="text-sm text-gray-500">{{ 'offers.dropzonePlaceholder'|trans }}</p>
                    </div>
                    <div class="hidden py-8 border-2 border-dashed border-gray-300 rounded-lg text-center transition-colors"
                         data-symfony--ux-dropzone--dropzone-target="preview">
                        <div data-symfony--ux-dropzone--dropzone-target="previewImage" class="hidden"></div>
                        <div data-symfony--ux-dropzone--dropzone-target="previewFilename"
                             class="text-sm font-medium"></div>
                        <button type="button" data-symfony--ux-dropzone--dropzone-target="previewClearButton"
                                class="mt-2 text-xs text-red-600 hover:text-red-800 dark:text-red-500 dark:hover:text-red-400">Löschen
                        </button>
                    </div>
                </div>
            </div>
        {% elseif not isReadonly and mediaAction == 'ai-generate' %}
            <div class="rounded-lg p-4 border border-gray-200 dark:border-gray-700">
                <h4 class="text-sm font-medium mb-4">Bild mit KI generieren</h4>
                {{ component('Admin:Offer:ImageGenerator', { offerId: offer.id, key: 'generator' }) }}
            </div>
        {% endif %}

        {% if offer.media|length > 0 %}
            <div class="grid grid-cols-1 lg:grid-cols-4 gap-8 mt-10">
                {# 3. List of existing media as thumbnails #}
                <div class="lg:col-span-1 space-y-4">
                    <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">
                        Bilder</h3>
                    <div class="grid grid-cols-3 lg:grid-cols-1 gap-2"
                            {{ isReadonly ? '' : stimulus_controller('ferienpass/admin-media-sortable') }}>
                        {% for om in offer.media %}
                            {% set uuid = om.media.uuid.toRfc4122 %}
                            {% set isActive = activeMediaUuid == uuid %}
                            <div class="group relative cursor-pointer rounded-lg overflow-hidden border-2 {{ isActive ? 'border-primary-600' : 'border-transparent' }} bg-gray-100 dark:bg-gray-900"
                                 data-uuid="{{ uuid }}"
                                 data-action="click->live#action"
                                 data-live-action-param="setActiveMedia"
                                 data-live-uuid-param="{{ uuid }}">

                                {% if not isReadonly %}
                                    <div class="drag-handle absolute top-1 left-1 z-10 p-1 bg-white/80 dark:bg-gray-800/80 rounded opacity-0 group-hover:opacity-100 cursor-move transition-opacity shadow-sm"
                                         data-action="click->live#action:prevent">
                                        <twig:ux:icon name="ph:dots-six-vertical" class="h-4 w-4 text-gray-600 dark:text-gray-400" />
                                    </div>
                                {% endif %}

                                {{ contao_figure(om | to_image, picture_config({
                                    width: 400,
                                    height: 400,
                                    resizeMode: 'crop',
                                    densities: '1,2',
                                }), {options: { attr: { class: 'w-full aspect-square object-cover ' ~ (isActive ? 'opacity-100' : 'opacity-60 group-hover:opacity-100') ~ ' transition-opacity' }}}) }}
                                {% if isActive %}
                                    <div class="absolute bottom-0 inset-x-0 h-1 bg-primary-600"></div>
                                {% endif %}
                            </div>
                        {% endfor %}
                    </div>
                </div>

                {# 4. Edit mask for active media #}
                <div class="lg:col-span-3">
                    {% set activeMedia = null %}
                    {% for om in offer.media %}
                        {% if activeMediaUuid == om.media.uuid.toRfc4122 %}
                            {% set activeMedia = om.media %}
                        {% endif %}
                    {% endfor %}

                    {% if activeMedia %}
                        {% set uuid = activeMedia.uuid.toRfc4122 %}
                        <div class="relative bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6">
                            {% if not isReadonly %}
                                <div class="absolute top-4 right-4 z-10 flex gap-4">
                                    <button type="button"
                                            class="inline-flex items-center gap-1.5 text-sm font-medium text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
                                            data-action="live#action"
                                            data-live-action-param="unassignMedia"
                                            data-live-uuid-param="{{ uuid }}"
                                            onclick="return confirm('Möchten Sie dieses Bild wirklich von diesem Angebot entfernen?')">
                                        <twig:ux:icon name="ph:minus-circle" class="h-5 w-5" />
                                        Zuordnung aufheben
                                    </button>
                                    <button type="button"
                                            class="inline-flex items-center gap-1.5 text-sm font-medium text-red-600 hover:text-red-800 dark:text-red-500 dark:hover:text-red-400"
                                            data-action="live#action"
                                            data-live-action-param="deleteMedia"
                                            data-live-uuid-param="{{ uuid }}"
                                            onclick="return confirm('Möchten Sie dieses Bild wirklich endgültig löschen?')">
                                        <twig:ux:icon name="ph:trash" class="h-5 w-5" />
                                        Endgültig löschen
                                    </button>
                                </div>
                            {% endif %}

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mt-4">
                                {% if isReadonly %}
                                    <div class="inline-block max-w-full">
                                        <img src="{{ this.getPublicUrl(activeMedia) }}"
                                             alt="{{ activeMedia.alt }}"
                                             class="w-full h-auto rounded-md" />
                                    </div>
                                {% else %}
                                    <div class="cropperjs inline-block max-w-full"
                                               data-controller="ferienpass--admin-cropper"
                                               data-ferienpass--admin-cropper-public-url-value="{{ this.getPublicUrl(activeMedia) }}"
                                               data-ferienpass--admin-cropper-options-value="{{ this.getCropperOptions(uuid)|json_encode }}"
                                    >
                                        <input type="hidden"
                                               data-ferienpass--admin-cropper-target="input"
                                               data-model="on(change)|debounce|mediaMetadata.{{ uuid }}.importantPart"
                                        >
                                    </div>
                                {% endif %}
                                <div class="space-y-4">
                                    <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300">Metadaten</h3>
                                    <div>
                                        <label for="media-alt-{{ uuid }}" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Alt-Text</label>
                                        <input type="text"
                                               id="media-alt-{{ uuid }}"
                                               {% if isReadonly %}readonly disabled value="{{ mediaMetadata[uuid].alt|default('') }}"{% else %}data-model="mediaMetadata.{{ uuid }}.alt"{% endif %}
                                               class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white {{ isReadonly ? 'bg-gray-50 dark:bg-gray-900 cursor-not-allowed' }}">
                                        <p class="mt-2 text-sm text-gray-500">Hier geben Sie an, was auf dem Bild zu sehen ist (Barrierefreiheit)</p>
                                    </div>
                                    <div>
                                        <label for="media-creator-{{ uuid }}" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Urheber:in</label>
                                        <input type="text"
                                               id="media-creator-{{ uuid }}"
                                               {% if isReadonly %}readonly disabled value="{{ mediaMetadata[uuid].creator|default('') }}"{% else %}data-model="mediaMetadata.{{ uuid }}.creator"{% endif %}
                                               class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white {{ isReadonly ? 'bg-gray-50 dark:bg-gray-900 cursor-not-allowed' }}">
                                        <p class="mt-2 text-sm text-gray-500">Hier geben Sie den Namen des/der Fotograf:in oder den Namen des/der Ersteller:in des Kunstwerkes (Urheberrecht)</p>
                                    </div>
                                </div>
                            </div>

                        </div>
                    {% endif %}
                </div>
            </div>
        {% else %}
            <div class="text-center py-12 bg-gray-50 rounded-lg border-2 border-dashed border-gray-200 dark:bg-gray-900 dark:border-gray-700 mt-10">
                <p class="text-gray-500 italic">Noch keine Bilder hinterlegt.</p>
            </div>
        {% endif %}
    </div>

    {% if mediaUnassigned %}
        <twig:Turbo:Stream:Prepend target="#notifications">
            <twig:Admin:Notification type="archived" title="Bild entfernt" message="Die Zuordnung des Bildes wurde aufgehoben."/>
        </twig:Turbo:Stream:Prepend>
    {% endif %}
    {% if mediaDeleted %}
        <twig:Turbo:Stream:Prepend target="#notifications">
            <twig:Admin:Notification type="deleted" title="Bild gelöscht" message="Das Bild wurde endgültig gelöscht."/>
        </twig:Turbo:Stream:Prepend>
    {% endif %}
    {% if mediaUnassignedAndNotDeleted %}
        <twig:Turbo:Stream:Prepend target="#notifications">
            <twig:Admin:Notification type="archived" title="Bild entfernt" message="Die Zuordnung des Bildes wurde aufgehoben. Es konnte jedoch nicht endgültig gelöscht werden, da es noch anderen Angeboten zugeordnet ist."/>
        </twig:Turbo:Stream:Prepend>
    {% endif %}
    {% if error %}
        <twig:Turbo:Stream:Prepend target="#notifications">
            <twig:Admin:Notification type="error" title="Ein Fehler ist aufgetreten" message="{{ error }}"/>
        </twig:Turbo:Stream:Prepend>
    {% endif %}
    {% if message|default %}
        <twig:Turbo:Stream:Prepend target="#notifications">
            <twig:Admin:Notification type="success" title="Daten gespeichert" :message="message" />
        </twig:Turbo:Stream:Prepend>
    {% endif %}
    {% if mediaAssigned %}
        <twig:Turbo:Stream:Update target="#modal"/>
        <twig:Turbo:Stream:Prepend target="#notifications">
            <twig:Admin:Notification type="success" title="Bild gespeichert" message="Das Angebot hat jetzt ein neues Bild."/>
        </twig:Turbo:Stream:Prepend>
    {% endif %}

    <twig:Admin:Edit:Footer :isDirty="true" :isReadonly="isReadonly" :sections="sections" :section="section" :params="{uuid: offer.uuid}" :useLiveAction="true" />
</div>
