{# @tailwind-safelist
   bg-primary/5 bg-cohorts/5 bg-warning/5 bg-error/5 bg-success/5 bg-info/5 bg-pink/5
   text-primary text-cohorts text-warning text-error text-success text-info text-pink
#}
{# ============================================================================
   Carte de contrat avec statut coloré
   Utilise Tailwind CSS et les atomes/molécules Atomic Design
   ============================================================================ #}

{% set status = contract.status %}

{# Configuration centralisée via extension Twig #}
{% set config = contract_status_config(status) %}

<div class="group relative bg-white rounded-2xl border {{ config.borderCard }} shadow-sm hover:shadow-md transition-all duration-300 cursor-pointer overflow-hidden"
     onclick="window.location='{{ path('admin_contract_show', {companyUuid: company.uuid, contractUuid: contract.uuid}) }}'">

    {# Indicateur de statut (barre latérale) #}
    <div class="absolute left-0 top-0 bottom-0 w-1 {{ config.indicator }}"></div>

    {# Header #}
    <div class="px-5 py-4 border-b border-gray-100 flex items-start justify-between gap-4">
        <div class="min-w-0 flex-1">
            <h3 class="text-base font-semibold text-gray-900 truncate group-hover:text-primary transition-colors">
                {{ contract.name }}
            </h3>
            <div class="flex items-center gap-1.5 mt-1 text-sm text-gray-500">
                {% include '_atoms/icon/icon.html.twig' with { name: 'calendar', size: 'xs', color: 'gray' } only %}
                <span>{{ contract.startDate|date('d/m/Y') }} → {{ contract.endDate|date('d/m/Y') }}</span>
            </div>
        </div>

        {# Actions #}
        <div class="flex items-center gap-1" onclick="event.stopPropagation();">
            <a href="{{ path('admin_contract_edit', {companyUuid: company.uuid, contractUuid: contract.uuid}) }}"
               class="w-8 h-8 rounded-lg flex items-center justify-center text-gray-400 hover:text-primary hover:bg-primary/10 transition-colors"
               data-tooltip="Modifier">
                {% include '_atoms/icon/icon.html.twig' with { name: 'edit', size: 'sm' } only %}
            </a>
            <button type="button"
                    class="w-8 h-8 rounded-lg flex items-center justify-center transition-colors {{ contract.isActive ? 'text-gray-400 hover:text-warning hover:bg-warning/10' : 'text-gray-400 hover:text-success hover:bg-success/10' }}"
                    data-tooltip="{{ contract.isActive ? 'Désactiver' : 'Réactiver' }}"
                    onclick="event.stopPropagation(); document.getElementById('modal-toggle-{{ contract.uuid }}').classList.remove('hidden');">
                {% include '_atoms/icon/icon.html.twig' with { name: 'power', size: 'sm', color: contract.isActive ? 'warning-dark' : 'success-dark', opacitySecondary: '1' } only %}
            </button>
        </div>
    </div>

    {# Body #}
    <div class="px-5 py-4 space-y-4">
        {# Badges de statut #}
        <div class="flex items-center gap-2 flex-wrap">
            {% include '_atoms/badge/badge.html.twig' with {
                preset: 'contract-' ~ status,
                size: 'sm'
            } only %}

            {% if status == 'active' and contract.isExpiringSoon(30) %}
                {% include '_atoms/badge/badge.html.twig' with {
                    label: 'Expire dans ' ~ contract.daysRemaining ~ ' j',
                    variant: 'warning',
                    dot: true,
                    size: 'sm'
                } only %}
            {% endif %}
        </div>

        {# Stats #}
        <div class="grid grid-cols-2 gap-3">
            <div class="flex items-center gap-2 text-sm text-gray-600">
                {% include '_atoms/icon/icon.html.twig' with { name: 'users', size: 'sm', color: 'gray' } only %}
                <span>{{ contract.maxUsers }} utilisateurs</span>
            </div>
            <div class="flex items-center gap-2 text-sm text-gray-600">
                {% include '_atoms/icon/icon.html.twig' with { name: 'token', size: 'sm', color: 'gray' } only %}
                <span>{{ contract.monthlyTokens|number_format(0, ',', ' ') }} /mois</span>
            </div>
        </div>

        {# Outils #}
        <div class="flex items-center gap-1.5 flex-wrap">
            {% for tool in contract.tools %}
                {% set tlc = tool_colors[tool.code] ?? 'primary' %}
                {% set tlhex = (tool_color_details[tool.code] ?? {}).primary ?? null %}
                {% set tlhexSecondary = (tool_color_details[tool.code] ?? {}).secondary ?? null %}
                <span class="inline-flex items-center gap-1 px-2 py-1 rounded-md text-xs font-medium {{ tlhex ? '' : 'bg-' ~ tlc ~ '/5 text-' ~ tlc }}"
                      {% if tlhex %}style="background: {{ tlhex }}0D; color: {{ tlhex }};"{% endif %}>
                    {% include '_atoms/icon/icon.html.twig' with { name: 'bubul-' ~ tool.code, size: 'xs', color: tlc, colorPrimary: tlhex, colorSecondary: tlhexSecondary } only %}
                    {{ tool.name }}
                </span>
            {% else %}
                <span class="text-xs text-gray-400 italic">Aucun outil</span>
            {% endfor %}
        </div>
    </div>
</div>

{# ================================================================
   MODAL DE CONFIRMATION TOGGLE
   ================================================================ #}
<div id="modal-toggle-{{ contract.uuid }}"
     class="fixed inset-0 z-50 hidden"
     role="dialog"
     aria-modal="true"
     onclick="if(event.target === this) this.classList.add('hidden');">
    {# Backdrop #}
    <div class="fixed inset-0 bg-black/50 backdrop-blur-sm transition-opacity"></div>

    {# Modal container #}
    <div class="fixed inset-0 overflow-y-auto">
        <div class="flex min-h-full items-center justify-center p-4">
            <div class="w-full max-w-sm bg-white rounded-xl shadow-xl overflow-hidden">
                {# Header #}
                <div class="px-6 py-4 border-b {{ contract.isActive ? 'border-warning/20' : 'border-success/20' }} flex items-start justify-between gap-4">
                    <div class="flex items-start gap-3">
                        <div class="w-10 h-10 rounded-lg {{ contract.isActive ? 'bg-warning/10' : 'bg-success/10' }} flex items-center justify-center flex-shrink-0">
                            {% include '_atoms/icon/icon.html.twig' with {
                                name: 'power',
                                size: 'md',
                                color: contract.isActive ? 'warning-dark' : 'success-dark',
                                opacitySecondary: '1'
                            } only %}
                        </div>
                        <div>
                            <h2 class="text-lg font-semibold text-gray-900">
                                {{ contract.isActive ? 'Désactiver' : 'Réactiver' }} ce contrat ?
                            </h2>
                        </div>
                    </div>
                    {% include '_atoms/close-button/close-button.html.twig' with {
                        attr: { onclick: "document.getElementById('modal-toggle-" ~ contract.uuid ~ "').classList.add('hidden');" }
                    } only %}
                </div>

                {# Body #}
                <div class="px-6 py-4">
                    <p class="text-gray-600">
                        {% if contract.isActive %}
                            Le contrat "<strong>{{ contract.name }}</strong>" sera désactivé. Les utilisateurs perdront les droits associés.
                        {% else %}
                            Le contrat "<strong>{{ contract.name }}</strong>" sera réactivé et ses droits seront de nouveau actifs.
                        {% endif %}
                    </p>
                </div>

                {# Footer #}
                <div class="px-6 py-4 border-t border-gray-100 bg-gray-50 flex items-center justify-between">
                    {% include '_atoms/button/button.html.twig' with {
                        label: 'Annuler',
                        variant: 'ghost',
                        size: 'lg',
                        attr: {
                            'onclick': "document.getElementById('modal-toggle-" ~ contract.uuid ~ "').classList.add('hidden');",
                            'type': 'button'
                        }
                    } only %}
                    <form action="{{ path('admin_contract_toggle', {companyUuid: company.uuid, contractUuid: contract.uuid}) }}" method="POST">
                        <input type="hidden" name="_token" value="{{ csrf_token('toggle-contract-' ~ contract.uuid) }}">
                        {% include '_atoms/button/button.html.twig' with {
                            label: contract.isActive ? 'Désactiver' : 'Réactiver',
                            variant: contract.isActive ? 'warning' : 'success',
                            size: 'lg',
                            icon: 'power',
                            type: 'submit'
                        } only %}
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>