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

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

{% block body %}
<div class="max-w-[1300px] mx-auto">
    <div class="flex flex-col lg:flex-row gap-6 lg:gap-10">

        {% include '_molecules/settings-nav/settings-nav.html.twig' with { user: user, activePage: 'support' } only %}

        <div class="flex-1 min-w-0">

            {# Breadcrumb #}
            <div class="mb-4">
                {% include '_molecules/breadcrumb/breadcrumb.html.twig' with {
                    homeHref: path('app_dashboard'),
                    items: [
                        { label: 'Paramètres', href: path('app_settings') },
                        { label: 'Support', href: path('app_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 flex items-start justify-between gap-4 flex-wrap">
                <div class="min-w-0">
                    <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">Créé le {{ ticket.createdAt|date('d/m/Y à H:i') }}</p>
                </div>
                {% include '_atoms/button/button.html.twig' with { label: 'Retour', variant: 'ghost', icon: 'arrow-left', size: 'sm', href: path('app_support_index') } only %}
            </div>

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

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

                        {% if message.isFromAdmin %}
                            {# Message admin — gauche #}
                            <div class="flex">
                                <div class="max-w-[70%]">
                                    <p class="text-[11px] text-gray-400 mb-1">
                                        <strong class="text-gray-600">{{ message.author.fullName ?: 'Équipe Bubul' }}</strong>
                                        · Équipe Bubul
                                    </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>

                        {% else %}
                            {# Message utilisateur — droite #}
                            <div class="flex justify-end">
                                <div class="max-w-[70%] flex flex-col items-end">
                                    <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>
                        {% endif %}

                    {% endfor %}
                </div>

                {# Zone de réponse #}
                <div class="border-t border-gray-100">
                    {% if not ticket.isResolved %}
                        <form method="POST" action="{{ path('app_support_reply', {uuid: ticket.uuid}) }}" class="p-4">
                            <input type="hidden" name="_token" value="{{ csrf_token('support_reply_' ~ ticket.uuid) }}">
                            <div class="flex gap-2 items-center">
                                <textarea name="content" rows="1" required
                                          placeholder="Écrire un message…"
                                          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: 'Envoyer',
                                    variant: 'primary',
                                    icon: 'send',
                                    type: 'submit',
                                    size: 'md'
                                } only %}
                            </div>
                        </form>
                        {# Bouton résolu — séparé du formulaire de réponse #}
                        <div class="px-4 pb-3 flex justify-end">
                            <form method="POST" action="{{ path('app_support_resolve', {uuid: ticket.uuid}) }}">
                                <input type="hidden" name="_token" value="{{ csrf_token('support_resolve_' ~ ticket.uuid) }}">
                                {% include '_atoms/button/button.html.twig' with {
                                    label: 'Marquer comme résolu',
                                    variant: 'ghost',
                                    icon: 'check',
                                    size: 'sm',
                                    type: 'submit'
                                } only %}
                            </form>
                        </div>
                    {% else %}
                        <div class="px-5 py-3.5 bg-success/5 flex items-center justify-between gap-4">
                            <div class="flex items-center gap-2">
                                {% include '_atoms/icon/icon.html.twig' with { name: 'check-circle', size: 'sm', color: 'success' } only %}
                                <p class="text-sm text-success font-medium">Ticket résolu</p>
                            </div>
                            <form method="POST" action="{{ path('app_support_reply', {uuid: ticket.uuid}) }}">
                                <input type="hidden" name="_token" value="{{ csrf_token('support_reply_' ~ ticket.uuid) }}">
                                <input type="hidden" name="content" value="Bonjour, j'ai besoin d'aide supplémentaire sur ce sujet.">
                                {% include '_atoms/button/button.html.twig' with { label: 'Rouvrir', variant: 'ghost', size: 'sm', type: 'submit' } only %}
                            </form>
                        </div>
                    {% endif %}
                </div>
            </div>

        </div>
    </div>
</div>
{% endblock %}