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

{% block title %}Contrats{% endblock %}

{% block body %}
<div class="max-w-[1400px] 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: 'Contrats',
            subtitle: isAdmin ? 'Consultez et gérez l\'ensemble des contrats de la plateforme.' : 'Consultez les contrats de votre entreprise.',
            icon: 'file-text',
            backHref: path('app_dashboard'),
            backLabel: 'Retour au dashboard'
        } only %}

        {% if isAdmin %}
            <div class="self-start lg:self-auto">
                {% include '_atoms/button/button.html.twig' with {
                    label: 'Nouveau contrat',
                    variant: 'primary',
                    size: 'lg',
                    icon: 'plus',
                    attr: { onclick: "document.getElementById('modal-new-contract').classList.add('active');", type: 'button' }
                } only %}
            </div>
        {% endif %}
    </div>

    {# ================================================================
       STATISTIQUES
       ================================================================ #}
    <section class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6 mb-10">
        {% include '_molecules/stat-card/stat-card.html.twig' with {
            label: 'Total',
            value: stats.total,
            icon: 'file-text',
            variant: 'primary',
            size: 'sm',
            layout: 'horizontal'
        } only %}

        {% include '_molecules/stat-card/stat-card.html.twig' with {
            label: 'Actifs',
            value: stats.active,
            icon: 'check-circle',
            variant: 'success',
            size: 'sm',
            layout: 'horizontal'
        } only %}

        {% include '_molecules/stat-card/stat-card.html.twig' with {
            label: 'Expirent bientôt',
            value: stats.expiringSoon,
            icon: 'clock',
            variant: 'warning',
            size: 'sm',
            layout: 'horizontal'
        } only %}

        {% include '_molecules/stat-card/stat-card.html.twig' with {
            label: 'Expirés',
            value: stats.expired,
            icon: 'x',
            variant: 'error',
            size: 'sm',
            layout: 'horizontal'
        } only %}
    </section>

    {# ================================================================
       TABLEAU DES CONTRATS
       ================================================================ #}
    <section class="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden">
        {# Header avec filtres #}
        <div class="px-4 sm:px-6 py-4 border-b border-gray-100 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
            <h2 class="text-lg font-semibold text-gray-900 font-[Poppins]">
                Liste des contrats
                <span class="text-sm font-normal text-gray-400 ml-2">({{ pagination.totalItems }})</span>
            </h2>

            {# Filtres inline #}
            <form method="GET" action="{{ path('admin_contract_list') }}" class="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3" data-turbo-action="replace">
                {% if isAdmin %}
                    <select name="company" class="w-full sm:w-auto px-4 py-2 text-sm border border-gray-200 rounded-lg bg-white focus:ring-2 focus:ring-primary/20 focus:border-primary" onchange="this.form.requestSubmit()">
                        <option value="">Toutes les entreprises</option>
                        {% for company in companies %}
                            <option value="{{ company.uuid }}" {% if filters.company == company.uuid ~ '' %}selected{% endif %}>
                                {{ company.name }}
                            </option>
                        {% endfor %}
                    </select>
                {% endif %}

                <select name="status" class="w-full sm:w-auto px-4 py-2 text-sm border border-gray-200 rounded-lg bg-white focus:ring-2 focus:ring-primary/20 focus:border-primary" onchange="this.form.requestSubmit()">
                    <option value="">Tous les statuts</option>
                    <option value="active" {% if filters.status == 'active' %}selected{% endif %}>Actifs</option>
                    <option value="expired" {% if filters.status == 'expired' %}selected{% endif %}>Expirés</option>
                    <option value="upcoming" {% if filters.status == 'upcoming' %}selected{% endif %}>À venir</option>
                    <option value="inactive" {% if filters.status == 'inactive' %}selected{% endif %}>Désactivés</option>
                </select>

                {% if filters.company or filters.status %}
                    <a href="{{ path('admin_contract_list') }}" class="self-end sm:self-auto text-gray-400 hover:text-error transition-colors" data-tooltip="Réinitialiser">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'x', size: 'sm' } only %}
                    </a>
                {% endif %}
            </form>
        </div>

        {# Tableau #}
        {% if contracts|length > 0 %}
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-gray-50 border-b border-gray-100">
                        <tr>
                            <th class="px-4 sm:px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Contrat</th>
                            <th class="hidden sm:table-cell px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Entreprise</th>
                            <th class="hidden md:table-cell px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Période</th>
                            <th class="hidden lg:table-cell px-6 py-3 text-center text-xs font-semibold text-gray-500 uppercase tracking-wider">Utilisateurs</th>
                            <th class="hidden lg:table-cell px-6 py-3 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider">Tarif/licence</th>
                            <th class="hidden lg:table-cell px-6 py-3 text-center text-xs font-semibold text-gray-500 uppercase tracking-wider">Tokens/mois</th>
                            <th class="hidden xl:table-cell px-4 py-3 text-center text-xs font-semibold text-gray-500 uppercase tracking-wider">SAM</th>
                            <th class="px-4 sm:px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Statut</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                        {% for contract in contracts %}
                            <tr class="hover:bg-gray-50/50 transition-colors duration-150 cursor-pointer {{ contract.company is null ? 'bg-warning/5' : '' }}"
                                onclick="window.location='{% if contract.company %}{{ path('admin_contract_show', {companyUuid: contract.company.uuid, contractUuid: contract.uuid}) }}{% else %}{{ path('admin_contract_show_orphan', {contractUuid: contract.uuid}) }}{% endif %}'">
                                {# Nom du contrat #}
                                <td class="px-4 sm:px-6 py-3 sm:py-4">
                                    <span class="text-sm font-medium text-gray-900">{{ contract.name }}</span>
                                </td>

                                {# Entreprise #}
                                <td class="hidden sm:table-cell px-6 py-3 sm:py-4">
                                    {% if contract.company %}
                                        <span class="text-sm text-gray-700">{{ contract.company.name }}</span>
                                    {% else %}
                                        <span class="text-sm text-gray-300 italic">Non attribué</span>
                                    {% endif %}
                                </td>

                                {# Période #}
                                <td class="hidden md:table-cell px-6 py-4">
                                    <div class="flex flex-col">
                                        <span class="text-sm text-gray-900">{{ contract.startDate|date('d/m/Y') }} → {{ contract.endDate|date('d/m/Y') }}</span>
                                        {% if contract.isValid and contract.daysRemaining is defined and contract.daysRemaining <= 60 %}
                                            <span class="text-xs {{ contract.daysRemaining <= 30 ? 'text-warning' : 'text-gray-400' }}">
                                                {{ contract.daysRemaining }}j restants
                                            </span>
                                        {% endif %}
                                    </div>
                                </td>

                                {# Utilisateurs max #}
                                <td class="hidden lg:table-cell px-6 py-4 text-center">
                                    <span class="text-sm font-medium text-gray-900 tabular-nums">{{ contract.maxUsers }}</span>
                                </td>

                                {# Tarif #}
                                <td class="hidden lg:table-cell px-6 py-4 text-right">
                                    <div class="flex flex-col items-end">
                                        <span class="text-sm font-medium text-gray-900 tabular-nums">{{ contract.pricePerLicense|number_format(2, ',', ' ') }} €</span>
                                        <span class="text-xs text-gray-400">TTC/mois</span>
                                    </div>
                                </td>

                                {# Tokens mensuels #}
                                <td class="hidden lg:table-cell px-6 py-4 text-center">
                                    <span class="text-sm font-medium text-gray-900 tabular-nums">{{ contract.monthlyTokens|number_format(0, ',', ' ') }}</span>
                                </td>

                                {# SAM #}
                                <td class="hidden xl:table-cell px-4 py-4 text-center">
                                    {% set hasSam = contract.company is not null and contract.company.hasSamAccess %}
                                    <div class="flex justify-center {{ hasSam ? '' : 'grayscale opacity-35' }}" data-tooltip="SAM {{ hasSam ? 'activé' : 'désactivé' }}">
                                        {% include '_atoms/logo/logo.html.twig' with { variant: 'simple', size: 'sm', tint: 'cohorts' } only %}
                                    </div>
                                </td>

                                {# Statut #}
                                <td class="px-4 sm:px-6 py-3 sm:py-4">
                                    {% if not contract.isActive %}
                                        {% include '_atoms/badge/badge.html.twig' with {
                                            label: 'Désactivé',
                                            variant: 'neutral',
                                            size: 'sm'
                                        } only %}
                                    {% elseif contract.isExpired %}
                                        {% include '_atoms/badge/badge.html.twig' with {
                                            label: 'Expiré',
                                            variant: 'error',
                                            dot: true,
                                            size: 'sm'
                                        } only %}
                                    {% elseif contract.isUpcoming %}
                                        {% include '_atoms/badge/badge.html.twig' with {
                                            label: 'À venir',
                                            variant: 'info',
                                            dot: true,
                                            size: 'sm'
                                        } only %}
                                    {% elseif contract.isExpiringSoon(30) %}
                                        {% include '_atoms/badge/badge.html.twig' with {
                                            label: 'Expire bientôt',
                                            variant: 'warning',
                                            dot: true,
                                            size: 'sm'
                                        } only %}
                                    {% else %}
                                        {% include '_atoms/badge/badge.html.twig' with {
                                            label: 'Actif',
                                            variant: 'success',
                                            dot: true,
                                            size: 'sm'
                                        } only %}
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            {# Pagination #}
            {% if pagination.total > 1 %}
                <div class="px-6 py-4 border-t border-gray-100 flex items-center justify-between">
                    <span class="text-sm text-gray-500">
                        Page {{ pagination.current }} sur {{ pagination.total }}
                        <span class="text-gray-400 ml-1">({{ pagination.totalItems }} contrats)</span>
                    </span>
                    {% set paginationFilters = {} %}
                    {% if filters.company %}{% set paginationFilters = paginationFilters|merge({company: filters.company}) %}{% endif %}
                    {% if filters.status %}{% set paginationFilters = paginationFilters|merge({status: filters.status}) %}{% endif %}
                    {% include '_molecules/pagination/pagination.html.twig' with {
                        currentPage: pagination.current,
                        totalPages: pagination.total,
                        baseUrl: path('admin_contract_list', paginationFilters),
                        size: 'sm',
                        showInfo: false,
                        showFirstLast: true
                    } only %}
                </div>
            {% endif %}
        {% else %}
            <div class="p-8">
                {% include '_molecules/empty-state/empty-state.html.twig' with {
                    title: 'Aucun contrat trouvé',
                    description: 'Aucun contrat ne correspond aux critères sélectionnés.',
                    icon: 'file-text',
                    variant: 'minimal',
                    actions: (not filters.company and not filters.status) ? [{
                        label: 'Créer un contrat',
                        onclick: "document.getElementById('modal-new-contract').classList.add('active');",
                        variant: 'primary',
                        icon: 'plus'
                    }] : []
                } only %}
            </div>
        {% endif %}
    </section>
</div>

{% if isAdmin %}
{# ================================================================
   MODAL NOUVEAU CONTRAT (Admin uniquement)
   ================================================================ #}
<div id="modal-new-contract" class="fixed inset-0 z-50 hidden opacity-0 transition-opacity duration-300 [&.active]:flex [&.active]:opacity-100"
     onclick="if(event.target === this) this.classList.remove('active');">
    {# Overlay #}
    <div class="absolute inset-0 bg-black/50 backdrop-blur-sm"></div>

    {# Modal content #}
    <div class="relative m-auto w-full max-w-md bg-white rounded-2xl shadow-2xl transform scale-95 transition-transform duration-300 [.active_&]:scale-100">
        {# Header #}
        <div class="flex items-center justify-between p-6 border-b border-gray-100">
            <div class="flex items-center gap-3">
                {% include '_atoms/icon/icon.html.twig' with { name: 'file-text', size: 'lg', color: 'primary' } only %}
                <h3 class="text-lg font-semibold text-gray-900 font-[Poppins]">Nouveau contrat</h3>
            </div>
            {% include '_atoms/close-button/close-button.html.twig' with {
                attr: { onclick: "this.closest('.fixed').classList.remove('active');" }
            } only %}
        </div>

        {# Body #}
        <div class="p-6">
            <p class="text-sm text-gray-600 mb-4">Sélectionnez l'entreprise pour laquelle créer un contrat :</p>
            <select id="company-select"
                    class="w-full px-4 py-3 text-sm border border-gray-200 rounded-xl bg-white focus:ring-2 focus:ring-primary/20 focus:border-primary">
                <option value="">-- Choisir une entreprise --</option>
                {% for company in companies %}
                    <option value="{{ company.uuid }}">{{ company.name }}</option>
                {% endfor %}
            </select>
        </div>

        {# Footer #}
        <div class="flex items-center justify-between p-6 border-t border-gray-100">
            {% include '_atoms/button/button.html.twig' with {
                label: 'Annuler',
                variant: 'ghost',
                size: 'lg',
                attr: { onclick: "this.closest('.fixed').classList.remove('active');", type: 'button' }
            } only %}
            {% include '_atoms/button/button.html.twig' with {
                label: 'Créer',
                variant: 'primary',
                size: 'lg',
                disabled: true,
                attr: {
                    'id': 'btn-create-contract',
                    'onclick': 'createContract()',
                    'type': 'button'
                }
            } only %}
        </div>
    </div>
</div>

<script>
    document.getElementById('company-select').addEventListener('change', function() {
        const btn = document.getElementById('btn-create-contract');
        const isDisabled = !this.value;

        btn.disabled = isDisabled;

        // Synchroniser les classes CSS avec l'état disabled
        if (isDisabled) {
            btn.classList.add('opacity-50', 'cursor-not-allowed', 'pointer-events-none');
        } else {
            btn.classList.remove('opacity-50', 'cursor-not-allowed', 'pointer-events-none');
        }
    });

    function createContract() {
        const companyUuid = document.getElementById('company-select').value;
        if (companyUuid) {
            window.location.href = "{{ path('admin_contract_new', {companyUuid: 'COMPANY_UUID'}) }}".replace('COMPANY_UUID', companyUuid);
        }
    }
</script>
{% endif %}
{% endblock %}