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

{% block title %}{{ ticket.reference }} - Support Admin{% endblock %}

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

    {# Breadcrumb #}
    <div class="mb-5">
        {% include '_molecules/breadcrumb/breadcrumb.html.twig' with {
            homeHref: path('app_dashboard'),
            items: [
                { label: 'Support', href: path('admin_support_index') },
                { label: ticket.reference }
            ]
        } only %}
    </div>

    {# Header #}
    {% set statusVariant = ticket.status == 'open' ? 'warning' : (ticket.status == 'in_progress' ? 'info' : 'success') %}

    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm px-5 py-4 mb-4">
        <div class="flex items-start justify-between gap-4 flex-wrap">

            <div class="min-w-0 flex-1">
                <div class="flex items-center gap-2 flex-wrap mb-1">
                    <span class="text-xs font-mono font-semibold text-gray-400">{{ ticket.reference }}</span>
                    {% include '_atoms/badge/badge.html.twig' with { label: ticket.categoryLabel, variant: 'neutral', size: 'xs' } only %}
                    {% include '_atoms/badge/badge.html.twig' with { label: ticket.statusLabel, variant: statusVariant, size: 'xs', dot: true } only %}
                </div>
                <h1 class="text-base font-bold text-gray-900">{{ ticket.subject }}</h1>
                <p class="text-xs text-gray-400 mt-0.5">
                    {{ ticket.user.fullName ?: ticket.user.email }}
                    · <a href="mailto:{{ ticket.user.email }}" class="hover:text-primary transition-colors">{{ ticket.user.email }}</a>
                    · {{ ticket.createdAt|date('d/m/Y à H:i') }}
                </p>
            </div>

            <div class="flex items-center gap-2 flex-shrink-0 flex-wrap">
                {% include '_atoms/button/button.html.twig' with { label: 'Retour', variant: 'ghost', icon: 'arrow-left', size: 'sm', href: path('admin_support_index') } only %}

                {% if not ticket.isResolved %}
                    <form method="POST" action="{{ path('admin_support_status', {uuid: ticket.uuid}) }}">
                        <input type="hidden" name="_token" value="{{ csrf_token('admin_support_status_' ~ ticket.uuid) }}">
                        <input type="hidden" name="status" value="resolved">
                        {% include '_atoms/button/button.html.twig' with {
                            label: 'Marquer résolu',
                            variant: 'success',
                            icon: 'check',
                            size: 'sm',
                            type: 'submit'
                        } only %}
                    </form>
                {% endif %}
            </div>
        </div>
    </div>

    {# Chat #}
    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">

        {# Messages #}
        <div class="overflow-y-auto max-h-[480px] px-5 py-5 space-y-4 min-h-[200px]">
            {% for message in ticket.messages %}

                {% if message.isFromAdmin %}
                    {# Côté admin (droite) #}
                    <div class="flex justify-end">
                        <div class="max-w-[70%] flex flex-col items-end">
                            <p class="text-[11px] text-gray-400 mb-1">
                                <strong class="text-gray-600">{{ message.author.fullName ?: message.author.email }}</strong>
                                · Équipe Bubul
                            </p>
                            <div class="bg-primary text-white text-sm leading-relaxed px-4 py-2.5 rounded-2xl rounded-tr-sm whitespace-pre-wrap">{{ message.content }}</div>
                            <p class="text-[11px] text-gray-300 mt-1">{{ message.createdAt|date('H:i · d/m/Y') }}</p>
                        </div>
                    </div>

                {% else %}
                    {# Côté utilisateur (gauche) #}
                    <div class="flex">
                        <div class="max-w-[70%]">
                            <p class="text-[11px] text-gray-400 mb-1">{{ ticket.user.fullName ?: ticket.user.email }}</p>
                            <div class="bg-gray-100 text-gray-800 text-sm leading-relaxed px-4 py-2.5 rounded-2xl rounded-tl-sm whitespace-pre-wrap">{{ message.content }}</div>
                            <p class="text-[11px] text-gray-300 mt-1">{{ message.createdAt|date('H:i · d/m/Y') }}</p>
                        </div>
                    </div>
                {% endif %}

            {% endfor %}
        </div>

        {# Réponse admin #}
        <div class="border-t border-gray-100 p-4">
            <form method="POST" action="{{ path('admin_support_reply', {uuid: ticket.uuid}) }}">
                <input type="hidden" name="_token" value="{{ csrf_token('admin_support_reply_' ~ ticket.uuid) }}">
                <div class="flex gap-2 items-center">
                    <textarea name="content" rows="1" required
                              placeholder="Répondre à {{ ticket.user.firstName ?: ticket.user.email }}…"
                              class="flex-1 h-9 sm:h-10 px-3.5 py-0 rounded-xl border border-gray-200 bg-gray-50 text-sm text-gray-900
                                     placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-primary/20
                                     focus:border-primary focus:bg-white transition-all resize-none leading-9 sm:leading-10"></textarea>
                    {% include '_atoms/button/button.html.twig' with {
                        label: 'Répondre',
                        variant: 'primary',
                        icon: 'send',
                        type: 'submit',
                        size: 'md'
                    } only %}
                </div>
                <p class="text-[11px] text-gray-400 mt-2">
                    Envoyé par <strong>{{ app.user.fullName ?: app.user.email }}</strong> · Équipe Bubul
                </p>
            </form>
        </div>
    </div>

</div>
{% endblock %}