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

{% block title %}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">

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

        {# Contenu principal #}
        <div class="flex-1 min-w-0">

            {# ── Header mobile : icône + titre + bouton sur une ligne, description en dessous ── #}
            <div class="sm:hidden mb-6">
                <div class="flex items-center gap-2.5 mb-1.5">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'message', size: 'lg', color: 'primary' } only %}
                    <h1 class="text-xl font-bold text-gray-900 flex-1 min-w-0">Support</h1>
                    {% include '_atoms/button/button.html.twig' with {
                        label: 'Nouveau ticket',
                        variant: 'primary',
                        icon: 'plus',
                        href: path('app_support_new'),
                        iconOnly: true,
                        size: 'sm'
                    } only %}
                </div>
                <p class="text-sm text-gray-500 ml-10">Suivez vos demandes et échangez avec notre équipe</p>
            </div>

            {# ── Header desktop ── #}
            <div class="hidden sm:flex items-start justify-between gap-4 mb-6">
                {% include '_molecules/page-header/page-header.html.twig' with {
                    title: 'Support',
                    subtitle: 'Suivez vos demandes et échangez avec notre équipe',
                    icon: 'message',
                    variant: 'default',
                    class: 'pt-0 mb-0'
                } only %}
                {% include '_atoms/button/button.html.twig' with {
                    label: 'Nouveau ticket',
                    variant: 'primary',
                    icon: 'plus',
                    href: path('app_support_new')
                } only %}
            </div>

            {# Tickets #}
            {% if tickets|length == 0 %}
                <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
                    {% include '_molecules/empty-state/empty-state.html.twig' with {
                        title: 'Aucune demande de support',
                        subtitle: 'Créez votre premier ticket si vous avez une question ou un problème.',
                        icon: 'message',
                        action: { label: 'Créer un ticket', href: path('app_support_new'), variant: 'primary' }
                    } only %}
                </div>
            {% else %}
                <div class="space-y-3">
                    {% for ticket in tickets %}
                        {% set statusVariant = ticket.status == 'open' ? 'warning' : (ticket.status == 'in_progress' ? 'info' : 'success') %}
                        {% set categoryIcon = ticket.category == 'bug' ? 'alert' : (ticket.category == 'billing' ? 'wallet' : 'message') %}

                        <a href="{{ path('app_support_show', {uuid: ticket.uuid}) }}"
                           class="group flex items-center gap-4 bg-white rounded-2xl border border-gray-100 shadow-sm px-5 py-4
                                  hover:border-primary/20 hover:shadow-md transition-all duration-200">

                            {# Indicateur non-lu #}
                            <div class="relative flex-shrink-0">
                                <div class="w-10 h-10 rounded-xl bg-gray-50 flex items-center justify-center">
                                    {% include '_atoms/icon/icon.html.twig' with { name: categoryIcon, size: 'md', color: 'gray' } only %}
                                </div>
                                {% if ticket.hasUnreadForUser %}
                                    <span class="absolute -top-1 -right-1 w-3 h-3 bg-primary rounded-full ring-2 ring-white"></span>
                                {% endif %}
                            </div>

                            {# Infos #}
                            <div class="flex-1 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 %}
                                    {% if ticket.hasUnreadForUser %}
                                        {% include '_atoms/badge/badge.html.twig' with {
                                            label: 'Nouveau message',
                                            variant: 'primary',
                                            size: 'xs',
                                            dot: true,
                                            pulse: true
                                        } only %}
                                    {% endif %}
                                </div>
                                <p class="text-sm font-semibold text-gray-900 truncate">{{ ticket.subject }}</p>
                                <p class="text-xs text-gray-400 mt-0.5">
                                    {{ ticket.messages|length }} message{{ ticket.messages|length > 1 ? 's' : '' }}
                                    · Dernière activité {{ ticket.lastMessageAt ? ticket.lastMessageAt|date('d/m/Y à H:i') : ticket.createdAt|date('d/m/Y à H:i') }}
                                </p>
                            </div>

                            {# Statut #}
                            <div class="flex items-center gap-3 flex-shrink-0">
                                {% include '_atoms/badge/badge.html.twig' with {
                                    label: ticket.statusLabel,
                                    variant: statusVariant,
                                    dot: true
                                } 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="mt-4 flex justify-center">
                        {% include '_molecules/pagination/pagination.html.twig' with {
                            currentPage: pagination.current,
                            totalPages: pagination.total,
                            routeName: 'app_support_index'
                        } only %}
                    </div>
                {% endif %}
            {% endif %}

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