{% extends 'admin/_layout.html.twig' %}

{% block title %}{{ seo.pageLabel }} — SEO — Admin{% endblock %}
{% block page_title %}{{ seo.pageLabel }}{% endblock %}
{% block page_subtitle %}Fiche SEO{% endblock %}

{% block admin_body %}
<nav class="adm-breadcrumb">
    <svg viewBox="0 0 24 24"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
    <a href="{{ path('app_admin') }}">Dashboard</a>
    <span class="adm-bc-sep">›</span>
    <a href="{{ path('app_admin_seo_index') }}">SEO</a>
    <span class="adm-bc-sep">›</span>
    <span class="adm-bc-current">{{ seo.pageLabel }}</span>
</nav>

<div style="display:flex;flex-wrap:wrap;gap:16px">

    {# ── Infos ── #}
    <div class="adm-card" style="padding:24px;position:relative;z-index:1;flex:1;min-width:320px">
        <h3 style="font-family:'Cormorant Garamond',serif;font-size:1.15rem;font-weight:400;color:var(--text);margin-bottom:16px">Informations</h3>

        <div style="display:flex;flex-direction:column;gap:14px">
            <div class="adm-show-field">
                <span class="adm-show-label">Route</span>
                <code style="font-size:.82rem;background:rgba(124,158,255,.08);padding:2px 6px;border-radius:4px">{{ seo.routeName }}</code>
            </div>
            <div class="adm-show-field">
                <span class="adm-show-label">Catégorie</span>
                {% if seo.pageCategory == 'public' %}
                    <span class="adm-pill adm-pill-active">Public</span>
                {% elseif seo.pageCategory == 'auth' %}
                    <span class="adm-pill adm-pill-paused">Auth</span>
                {% else %}
                    <span class="adm-pill adm-pill-trial">Legal</span>
                {% endif %}
            </div>
            <div class="adm-show-field">
                <span class="adm-show-label">Title</span>
                <span class="adm-show-value">{{ seo.title ?? '—' }}</span>
            </div>
            {% if seo.pageCategory != 'auth' %}
            <div class="adm-show-field">
                <span class="adm-show-label">Meta description</span>
                <span class="adm-show-value" style="font-size:.82rem;color:var(--muted)">{{ seo.metaDescription ?? '—' }}</span>
            </div>
            <div class="adm-show-field">
                <span class="adm-show-label">Robots</span>
                <span class="adm-show-value">{{ seo.robots }}</span>
            </div>
            <div class="adm-show-field">
                <span class="adm-show-label">URL canonique</span>
                <span class="adm-show-value" style="font-size:.82rem">{{ preview.canonicalUrl ?? 'Auto' }}</span>
            </div>
            {% endif %}
            <div class="adm-show-field">
                <span class="adm-show-label">Sitemap</span>
                <span class="adm-show-value">
                    {% if seo.sitemapInclude %}
                        <span style="color:var(--green)">Inclus</span> — priorité {{ seo.sitemapPriority }}, {{ seo.sitemapChangefreq }}
                    {% else %}
                        Exclu
                    {% endif %}
                </span>
            </div>
            <div class="adm-show-field">
                <span class="adm-show-label">Mis à jour</span>
                <span class="adm-show-value">{{ seo.updatedAt ? seo.updatedAt|date('d/m/Y à H:i') : '—' }}</span>
            </div>
        </div>

        <div style="display:flex;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid rgba(180,190,220,.2)">
            <a href="{{ path('app_admin_seo_edit', {uuid: seo.uuid}) }}" class="adm-btn adm-btn-p adm-btn-sm">
                <svg viewBox="0 0 24 24" style="margin-right:4px"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                Modifier
            </a>
            <a href="{{ path('app_admin_seo_index') }}" class="adm-btn adm-btn-g adm-btn-sm">Retour</a>
        </div>
    </div>

    {# ── Previews ── #}
    <div style="flex:1;min-width:320px;display:flex;flex-direction:column;gap:16px">

        {# Google preview #}
        <div class="adm-card" style="padding:24px;position:relative;z-index:1">
            <h3 style="font-family:'Cormorant Garamond',serif;font-size:1.05rem;font-weight:400;color:var(--text);margin-bottom:14px">
                <svg viewBox="0 0 24 24" style="width:16px;height:16px;vertical-align:-2px;margin-right:6px;fill:none;stroke:var(--accent);stroke-width:1.8"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
                Aperçu Google
            </h3>
            <div style="background:rgba(255,255,255,.5);border:1px solid rgba(200,210,240,.4);border-radius:10px;padding:16px;font-family:Arial,sans-serif">
                <div style="font-size:.82rem;color:#1a0dab;font-weight:400;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
                    {{ preview.title ?? seo.pageLabel }}
                </div>
                <div style="font-size:.72rem;color:#006621;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
                    {{ preview.canonicalUrl ?? '...' }}
                </div>
                <div style="font-size:.72rem;color:#545454;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden">
                    {{ preview.metaDescription ?? 'Aucune description définie.' }}
                </div>
            </div>
        </div>

        {% if seo.pageCategory == 'public' %}
        {# OG / Social preview #}
        <div class="adm-card" style="padding:24px;position:relative;z-index:1">
            <h3 style="font-family:'Cormorant Garamond',serif;font-size:1.05rem;font-weight:400;color:var(--text);margin-bottom:14px">
                <svg viewBox="0 0 24 24" style="width:16px;height:16px;vertical-align:-2px;margin-right:6px;fill:none;stroke:var(--accent);stroke-width:1.8"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
                Aperçu réseaux sociaux
            </h3>
            <div style="background:rgba(255,255,255,.5);border:1px solid rgba(200,210,240,.4);border-radius:10px;overflow:hidden;max-width:400px">
                {% set ogImg = preview.ogImageUrl %}
                {% if ogImg %}
                    {% set ogImgSrc = ogImg starts with 'http' ? ogImg : asset(ogImg) %}
                    <div style="height:200px;background:url('{{ ogImgSrc }}') center/cover no-repeat;border-bottom:1px solid rgba(200,210,240,.3)"></div>
                {% else %}
                    <div style="height:120px;background:linear-gradient(135deg,rgba(124,158,255,.15),rgba(195,184,248,.15));display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.78rem;border-bottom:1px solid rgba(200,210,240,.3)">Pas d'image OG</div>
                {% endif %}
                <div style="padding:14px">
                    <div style="font-size:.7rem;color:var(--muted);text-transform:uppercase;margin-bottom:4px">{{ preview.canonicalUrl|split('//')|last|split('/')|first }}</div>
                    <div style="font-size:.88rem;font-weight:600;color:var(--text);margin-bottom:4px">{{ preview.ogTitle ?? preview.title ?? seo.pageLabel }}</div>
                    <div style="font-size:.78rem;color:var(--muted);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden">{{ preview.ogDescription ?? preview.metaDescription ?? '' }}</div>
                </div>
            </div>
        </div>

        {# Twitter Card preview #}
        <div class="adm-card" style="padding:24px;position:relative;z-index:1">
            <h3 style="font-family:'Cormorant Garamond',serif;font-size:1.05rem;font-weight:400;color:var(--text);margin-bottom:14px">
                Aperçu Twitter Card
            </h3>
            {% set twImg = preview.twImageUrl %}
            {% if twImg %}
                {% set twImgSrc = twImg starts with 'http' ? twImg : asset(twImg) %}
            {% else %}
                {% set twImgSrc = null %}
            {% endif %}
            <div style="background:rgba(255,255,255,.5);border:1px solid rgba(200,210,240,.4);border-radius:14px;overflow:hidden;max-width:400px;margin-bottom:14px">
                {% if twImgSrc %}
                    <div style="height:180px;background:url('{{ twImgSrc }}') center/cover no-repeat;border-bottom:1px solid rgba(200,210,240,.3)"></div>
                {% else %}
                    <div style="height:100px;background:linear-gradient(135deg,rgba(124,158,255,.1),rgba(195,184,248,.1));display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.75rem;border-bottom:1px solid rgba(200,210,240,.3)">Pas d'image Twitter</div>
                {% endif %}
                <div style="padding:12px">
                    <div style="font-size:.85rem;font-weight:600;color:var(--text);margin-bottom:3px">{{ preview.twTitle ?? preview.ogTitle ?? seo.pageLabel }}</div>
                    <div style="font-size:.75rem;color:var(--muted);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden">{{ preview.twDescription ?? preview.ogDescription ?? '' }}</div>
                    {% if seo.twSite %}<div style="font-size:.7rem;color:var(--muted);margin-top:4px">{{ seo.twSite }}</div>{% endif %}
                </div>
            </div>
            <div style="display:flex;flex-direction:column;gap:6px">
                <div class="adm-show-field">
                    <span class="adm-show-label">Card type</span>
                    <span class="adm-show-value">{{ seo.twCard }}</span>
                </div>
                <div class="adm-show-field">
                    <span class="adm-show-label">@site</span>
                    <span class="adm-show-value">{{ seo.twSite ?? '—' }}</span>
                </div>
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}