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

{% block title %}Gestion des offres - Admin{% endblock %}

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

    {# Header #}
    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6 mb-8">
        {% include '_molecules/page-header/page-header.html.twig' with {
            title: 'Offres commerciales',
            subtitle: 'Gérez les offres affichées dans le tableau des tarifs sur la page d\'accueil.',
            icon: 'tag',
            backHref: path('app_dashboard'),
            backLabel: 'Retour au dashboard'
        } only %}

        <div class="flex items-center gap-3">
            {% include '_atoms/button/button.html.twig' with {
                label: 'Coûts réels',
                variant: 'ghost',
                size: 'lg',
                icon: 'bar-chart',
                href: path('admin_plan_tool_costs')
            } only %}
            {% include '_atoms/button/button.html.twig' with {
                label: 'Nouvelle offre',
                variant: 'primary',
                size: 'lg',
                icon: 'plus',
                href: path('admin_plan_new')
            } only %}
        </div>
    </div>

    {# Compteur #}
    <div class="flex items-center gap-3 mb-6">
        <span class="inline-flex items-center justify-center min-w-[32px] h-8 px-3 bg-primary text-white rounded-full text-sm font-bold">
            {{ plans|length }}
        </span>
        <span class="text-gray-500">offre{{ plans|length > 1 ? 's' : '' }} enregistrée{{ plans|length > 1 ? 's' : '' }}</span>
    </div>

    {# Tableau #}
    <div class="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden">
        <table class="w-full">
            <thead class="bg-gray-50 border-b border-gray-200">
                <tr>
                    <th class="px-5 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Ordre</th>
                    <th class="px-5 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Nom</th>
                    <th class="px-5 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Prix TTC</th>
                    <th class="px-5 py-3 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider">Tokens/mois</th>
                    <th class="px-5 py-3 text-center text-xs font-semibold text-gray-500 uppercase tracking-wider">Recommandé</th>
                    <th class="px-5 py-3 text-center text-xs font-semibold text-gray-500 uppercase tracking-wider">Statut</th>
                    <th class="px-5 py-3 text-center text-xs font-semibold text-gray-500 uppercase tracking-wider">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                {% for plan in plans %}
                    <tr class="hover:bg-gray-50 transition-colors">
                        <td class="px-5 py-4">
                            <span class="inline-flex items-center justify-center w-7 h-7 rounded-full bg-gray-100 text-xs font-bold text-gray-500">
                                {{ plan.sortOrder }}
                            </span>
                        </td>
                        <td class="px-5 py-4">
                            <div class="flex items-center gap-3">
                                <div>
                                    <p class="font-semibold text-gray-900">{{ plan.name }}</p>
                                    {% if plan.tagline %}
                                        <p class="text-xs text-gray-400 mt-0.5 max-w-xs truncate">{{ plan.tagline }}</p>
                                    {% endif %}
                                </div>
                            </div>
                        </td>
                        <td class="px-5 py-4">
                            {% if plan.priceAnnual %}
                                <span class="font-semibold text-gray-900">{{ plan.priceAnnual }}€</span>
                                <span class="text-xs text-gray-400">/mois TTC</span>
                            {% else %}
                                <span class="text-gray-400 italic text-sm">Sur mesure</span>
                            {% endif %}
                        </td>
                        <td class="px-5 py-4 text-right">
                            <span class="font-mono text-sm text-gray-700">{{ plan.tokensLabel ?? (plan.monthlyTokens|number_format(0, ',', ' ')) }}</span>
                        </td>
                        <td class="px-5 py-4 text-center">
                            {% if plan.isRecommended %}
                                {% include '_atoms/badge/badge.html.twig' with { label: 'Oui', variant: 'success', size: 'sm' } only %}
                            {% else %}
                                <span class="text-gray-300">—</span>
                            {% endif %}
                        </td>
                        <td class="px-5 py-4 text-center">
                            {% if plan.isActive %}
                                {% include '_atoms/badge/badge.html.twig' with { label: 'Active', variant: 'success', size: 'sm' } only %}
                            {% else %}
                                {% include '_atoms/badge/badge.html.twig' with { label: 'Masquée', variant: 'gray', size: 'sm' } only %}
                            {% endif %}
                        </td>
                        <td class="px-5 py-4 text-center">
                            <div class="flex items-center justify-center gap-2">
                                {% include '_atoms/button/button.html.twig' with {
                                    variant: 'ghost',
                                    size: 'sm',
                                    icon: 'edit',
                                    href: path('admin_plan_edit', {id: plan.id}),
                                    attr: { title: 'Modifier' }
                                } only %}

                                <form method="POST" action="{{ path('admin_plan_delete', {id: plan.id}) }}"
                                      onsubmit="return confirm('Supprimer l\'offre « {{ plan.name }} » ?')"
                                      data-turbo="false">
                                    <input type="hidden" name="_token" value="{{ csrf_token('delete-plan-' ~ plan.id) }}">
                                    {% include '_atoms/button/button.html.twig' with {
                                        variant: 'ghost',
                                        size: 'sm',
                                        icon: 'trash',
                                        type: 'submit',
                                        attr: { title: 'Supprimer', class: 'text-error hover:text-error' }
                                    } only %}
                                </form>
                            </div>
                        </td>
                    </tr>
                {% else %}
                    <tr>
                        <td colspan="7" class="px-4 py-12 text-center">
                            {% include '_molecules/empty-state/empty-state.html.twig' with {
                                title: 'Aucune offre enregistrée',
                                description: 'Créez la première offre pour qu\'elle apparaisse dans le tableau des tarifs.',
                                icon: 'tag',
                                variant: 'minimal',
                                actions: [{
                                    label: 'Créer une offre',
                                    href: path('admin_plan_new'),
                                    variant: 'primary',
                                    icon: 'plus'
                                }]
                            } only %}
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

</div>
{% endblock %}