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

{% block title %}Support - Administration{% endblock %}

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

    {# Header #}
    {% include '_molecules/page-header/page-header.html.twig' with {
        title: 'Support',
        subtitle: 'Gérez les demandes des utilisateurs',
        icon: 'message'
    } only %}

    {# Stats — atomic design stat-card #}
    <section class="grid grid-cols-2 xl:grid-cols-4 gap-4 mb-8">
        {% include '_molecules/stat-card/stat-card.html.twig' with {
            label: 'Non lus',
            value: stats.unread,
            icon: 'bell',
            variant: 'primary',
            detail: stats.unread > 0 ? 'À traiter en priorité' : 'Tout est à jour',
            size: 'sm',
            layout: 'horizontal'
        } only %}

        {% include '_molecules/stat-card/stat-card.html.twig' with {
            label: 'Ouverts',
            value: stats.open,
            icon: 'alert',
            variant: 'warning',
            detail: 'En attente de réponse',
            size: 'sm',
            layout: 'horizontal'
        } only %}

        {% include '_molecules/stat-card/stat-card.html.twig' with {
            label: 'En cours',
            value: stats.in_progress,
            icon: 'clock',
            variant: 'info',
            detail: 'En traitement',
            size: 'sm',
            layout: 'horizontal'
        } only %}

        {% include '_molecules/stat-card/stat-card.html.twig' with {
            label: 'Résolus',
            value: stats.resolved,
            icon: 'check-circle',
            variant: 'success',
            detail: 'Tickets fermés',
            size: 'sm',
            layout: 'horizontal'
        } only %}
    </section>

    {# ================================================================
       SECTION 1 : À TRAITER (ouverts + en cours)
       ================================================================ #}
    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden mb-6">

        <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-lg bg-warning/10 flex items-center justify-center">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'alert', size: 'md', color: 'warning' } only %}
                </div>
                <div>
                    <h2 class="font-semibold text-gray-900">À traiter</h2>
                    <p class="text-sm text-gray-400">
                        {{ pending|length }} ticket{{ pending|length > 1 ? 's' : '' }} en attente de réponse
                    </p>
                </div>
            </div>
            {% if stats.unread > 0 %}
                {% include '_atoms/badge/badge.html.twig' with {
                    label: stats.unread ~ ' non lu' ~ (stats.unread > 1 ? 's' : ''),
                    variant: 'primary',
                    dot: true,
                    pulse: true
                } only %}
            {% endif %}
        </div>

        {% if pending|length == 0 %}
            {% include '_molecules/empty-state/empty-state.html.twig' with {
                title: 'Aucun ticket en attente',
                subtitle: 'Tous les tickets ont été traités.',
                icon: 'check-circle',
                size: 'sm',
                variant: 'minimal'
            } only %}
        {% else %}
            <div class="divide-y divide-gray-50">
                {% for ticket in pending %}
                    {% set statusVariant = ticket.status == 'open' ? 'warning' : 'info' %}
                    {% set catIcon  = ticket.category == 'bug' ? 'alert' : (ticket.category == 'billing' ? 'wallet' : (ticket.category == 'suggestion' ? 'star' : (ticket.category == 'question' ? 'help' : 'message'))) %}
                    {% set catColor = ticket.category == 'bug' ? 'error' : (ticket.category == 'billing' ? 'success' : (ticket.category == 'suggestion' ? 'warning' : (ticket.category == 'question' ? 'info' : 'primary'))) %}
                    {% set catBg    = ticket.category == 'bug' ? 'bg-error/10' : (ticket.category == 'billing' ? 'bg-success/10' : (ticket.category == 'suggestion' ? 'bg-warning/10' : (ticket.category == 'question' ? 'bg-info/10' : 'bg-primary/10'))) %}
                    <a href="{{ path('admin_support_show', {uuid: ticket.uuid}) }}"
                       class="group flex items-center gap-4 px-6 py-4 hover:bg-gray-50/80 transition-colors duration-150
                              {{ ticket.hasUnreadForAdmin ? 'bg-primary/[0.02]' : '' }}">

                        {# Icône catégorie + point non-lu #}
                        <div class="relative flex-shrink-0">
                            <div class="w-9 h-9 rounded-xl {{ catBg }} flex items-center justify-center">
                                {% include '_atoms/icon/icon.html.twig' with {
                                    name: catIcon,
                                    size: 'sm',
                                    color: catColor
                                } only %}
                            </div>
                            {% if ticket.hasUnreadForAdmin %}
                                <span class="absolute -top-1 -right-1 w-3 h-3 bg-primary rounded-full ring-2 ring-white animate-pulse"></span>
                            {% endif %}
                        </div>

                        {# Infos ticket #}
                        <div class="flex-1 min-w-0">
                            <div class="flex items-center gap-2 flex-wrap mb-0.5">
                                <span class="text-xs font-mono font-bold text-gray-400">{{ ticket.reference }}</span>
                                {% include '_atoms/badge/badge.html.twig' with {
                                    label: ticket.categoryLabel,
                                    variant: 'neutral',
                                    size: 'xs'
                                } only %}
                                {% if ticket.hasUnreadForAdmin %}
                                    {% include '_atoms/badge/badge.html.twig' with {
                                        label: 'Nouveau message',
                                        variant: 'primary',
                                        size: 'xs',
                                        dot: true
                                    } only %}
                                {% endif %}
                            </div>
                            <p class="text-sm font-semibold text-gray-900 truncate">{{ ticket.subject }}</p>
                            <p class="text-xs text-gray-400">
                                <strong class="text-gray-600">{{ ticket.user.fullName ?: ticket.user.email }}</strong>
                                · {{ ticket.messages|length }} message{{ ticket.messages|length > 1 ? 's' : '' }}
                                · {{ ticket.lastMessageAt ? ticket.lastMessageAt|date('d/m/Y H:i') : ticket.createdAt|date('d/m/Y H:i') }}
                            </p>
                        </div>

                        {# Statut + flèche #}
                        <div class="flex items-center gap-3 flex-shrink-0">
                            {% include '_atoms/badge/badge.html.twig' with {
                                label: ticket.statusLabel,
                                variant: statusVariant,
                                dot: true,
                                size: 'sm'
                            } only %}
                            {% include '_atoms/icon/icon.html.twig' with {
                                name: 'arrow-right',
                                size: 'sm',
                                color: 'gray',
                                class: 'opacity-0 group-hover:opacity-100 transition-opacity'
                            } only %}
                        </div>
                    </a>
                {% endfor %}
            </div>
        {% endif %}
    </div>

    {# ================================================================
       SECTION 2 : RÉSOLUS (paginés)
       ================================================================ #}
    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">

        <div class="px-6 py-4 border-b border-gray-100 flex items-center gap-3">
            <div class="w-10 h-10 rounded-lg bg-success/10 flex items-center justify-center">
                {% include '_atoms/icon/icon.html.twig' with { name: 'check-circle', size: 'md', color: 'success' } only %}
            </div>
            <div>
                <h2 class="font-semibold text-gray-900">Résolus</h2>
                <p class="text-sm text-gray-400">{{ pagination.totalItems }} ticket{{ pagination.totalItems > 1 ? 's' : '' }} archivés</p>
            </div>
        </div>

        {% if resolved|length == 0 %}
            {% include '_molecules/empty-state/empty-state.html.twig' with {
                title: 'Aucun ticket résolu',
                icon: 'check-circle',
                size: 'sm',
                variant: 'minimal'
            } only %}
        {% else %}
            <div class="divide-y divide-gray-50">
                {% for ticket in resolved %}
                    {% set catIcon  = ticket.category == 'bug' ? 'alert' : (ticket.category == 'billing' ? 'wallet' : (ticket.category == 'suggestion' ? 'star' : (ticket.category == 'question' ? 'help' : 'message'))) %}
                    {% set catColor = ticket.category == 'bug' ? 'error' : (ticket.category == 'billing' ? 'success' : (ticket.category == 'suggestion' ? 'warning' : (ticket.category == 'question' ? 'info' : 'primary'))) %}
                    {% set catBg    = ticket.category == 'bug' ? 'bg-error/10' : (ticket.category == 'billing' ? 'bg-success/10' : (ticket.category == 'suggestion' ? 'bg-warning/10' : (ticket.category == 'question' ? 'bg-info/10' : 'bg-primary/10'))) %}
                    <a href="{{ path('admin_support_show', {uuid: ticket.uuid}) }}"
                       class="group flex items-center gap-4 px-6 py-4 hover:bg-gray-50/80 transition-colors duration-150 opacity-70 hover:opacity-100 transition-opacity">

                        <div class="w-9 h-9 rounded-xl {{ catBg }} flex items-center justify-center flex-shrink-0">
                            {% include '_atoms/icon/icon.html.twig' with { name: catIcon, size: 'sm', color: catColor } only %}
                        </div>

                        <div class="flex-1 min-w-0">
                            <div class="flex items-center gap-2 flex-wrap mb-0.5">
                                <span class="text-xs font-mono font-bold text-gray-400">{{ ticket.reference }}</span>
                                {% include '_atoms/badge/badge.html.twig' with {
                                    label: ticket.categoryLabel,
                                    variant: 'neutral',
                                    size: 'xs'
                                } only %}
                            </div>
                            <p class="text-sm font-medium text-gray-600 truncate">{{ ticket.subject }}</p>
                            <p class="text-xs text-gray-400">
                                {{ ticket.user.fullName ?: ticket.user.email }}
                                · {{ ticket.lastMessageAt ? ticket.lastMessageAt|date('d/m/Y H:i') : ticket.createdAt|date('d/m/Y H:i') }}
                            </p>
                        </div>

                        <div class="flex items-center gap-3 flex-shrink-0">
                            {% include '_atoms/badge/badge.html.twig' with {
                                label: 'Résolu',
                                variant: 'success',
                                dot: true,
                                size: 'sm'
                            } only %}
                            {% include '_atoms/icon/icon.html.twig' with {
                                name: 'arrow-right',
                                size: 'sm',
                                color: 'gray',
                                class: 'opacity-0 group-hover:opacity-100 transition-opacity'
                            } only %}
                        </div>
                    </a>
                {% endfor %}
            </div>

            {% if pagination.total > 1 %}
                <div class="px-6 py-4 border-t border-gray-100">
                    {% include '_molecules/pagination/pagination.html.twig' with {
                        currentPage: pagination.current,
                        totalPages: pagination.total,
                        routeName: 'admin_support_index'
                    } only %}
                </div>
            {% endif %}
        {% endif %}
    </div>

</div>
{% endblock %}