{% extends '@EasyAdmin/crud/edit.html.twig' %}

{% block main %}
    {% set visuel = entity.instance ?? null %}
    {% set public_base = supabase_public_url|default('')|trim('/') %}
    {% set bucket = supabase_storage_bucket|default('')|trim('/') %}

    {% if visuel %}
        {% set raw_path = visuel.storagePath|default('')|trim('/') %}
        {% set image_url = '' %}

        {% if public_base and bucket and raw_path %}
            {% set segments = raw_path|split('/') %}
            {% set encoded_segments = [] %}
            {% for segment in segments %}
                {% set encoded_segments = encoded_segments|merge([segment|url_encode]) %}
            {% endfor %}
            {% set image_url = public_base ~ '/storage/v1/object/public/' ~ bucket ~ '/' ~ encoded_segments|join('/') %}
        {% endif %}

        {% set jante_label = visuel.jante is not null ? (visuel.jante.reference|default('Jante') ~ ' — ' ~ (visuel.jante.marque|default(''))) : 'Jante inconnue' %}
        {% set dimensions_label = (visuel.largeurImage is not null and visuel.hauteurImage is not null) ? visuel.largeurImage ~ ' × ' ~ visuel.hauteurImage ~ ' px' : 'Dimensions indisponibles' %}
        {% set alt_text = 'Visuel 2D de ' ~ (visuel.jante.reference|default('Jante')) %}

        <section style="margin-bottom: 1.5rem; background: #fff; border: 1px solid rgba(0,0,0,0.12); border-radius: 10px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.04);">
            <div style="display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1rem; background: #f8f9fa; border-bottom: 1px solid rgba(0,0,0,0.08);">
                <div>
                    <div style="font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: #6c757d; font-weight: 600;">Aperçu du visuel 2D</div>
                    <h2 style="margin: 0.35rem 0 0; font-size: 1.2rem;">{{ jante_label }}</h2>
                </div>
                <span class="badge {{ visuel.actif ? 'bg-success' : 'bg-secondary' }}" style="font-size: 0.75rem; padding: 0.45rem 0.75rem;">{{ visuel.actif ? 'Actif' : 'Inactif' }}</span>
            </div>

            <div style="padding: 1rem; background: #f8f9fa; text-align: center;">
                {% if image_url %}
                    <div style="display: inline-flex; align-items: center; justify-content: center; width: min(100%, 520px); max-width: 520px; min-height: 280px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.10); background-color: #f4f5f7; background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.04) 25%, transparent 25%), linear-gradient(-45deg, rgba(0, 0, 0, 0.04) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.04) 75%), linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.04) 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0;">
                        <img
                            src="{{ image_url }}"
                            alt="{{ alt_text|e('html_attr') }}"
                            style="display: block; max-width: 100%; max-height: 520px; width: auto; height: auto; object-fit: contain; background: transparent;"
                            onerror="this.style.display='none'; this.nextElementSibling.style.display='block';"
                        >
                        <div style="display: none; padding: 2rem 1rem; color: #6c757d; font-weight: 600;">Aperçu indisponible</div>
                    </div>
                {% else %}
                    <div style="display: inline-flex; align-items: center; justify-content: center; width: min(100%, 520px); max-width: 520px; min-height: 280px; padding: 2rem 1rem; color: #6c757d; font-weight: 600; border: 1px dashed rgba(0,0,0,0.2); border-radius: 10px; background: #fff;">Aperçu indisponible</div>
                {% endif %}

                <div style="margin-top: 0.9rem; font-size: 0.9rem; color: #495057;">
                    <strong>Dimensions :</strong> {{ dimensions_label }}
                </div>
                <div style="margin-top: 0.3rem; font-size: 0.85rem; color: #6c757d;">PNG transparent utilisé par le visualiseur 2D</div>
            </div>
        </section>
    {% endif %}

    {{ parent() }}
{% endblock %}