{# @tailwind-safelist
   bg-primary/10 bg-cohorts/10 bg-warning/10 bg-error/10 bg-success/10 bg-info/10 bg-pink/10
#}
{% extends 'base.html.twig' %}

{% block title %}{{ contract.name }} - {{ isAdmin ? 'Admin' : 'Contrat' }}{% endblock %}

{% block body %}
{% set status = contract.status %}

{# ================================================================
   BREADCRUMB
   ================================================================ #}
<div class="max-w-[1400px] mx-auto mb-6">
    {% if isAdmin and company %}
        {# Admin : Entreprises > Entreprise > Contrat #}
        {% include '_molecules/breadcrumb/breadcrumb.html.twig' with {
            homeHref: path('app_dashboard'),
            items: [
                { label: 'Entreprises', href: path('admin_company_list') },
                { label: company.name, href: path('admin_company_show', {uuid: company.uuid}) },
                { label: contract.name }
            ]
        } only %}
    {% else %}
        {# Manager ou contrat orphelin : Contrats > Contrat #}
        {% include '_molecules/breadcrumb/breadcrumb.html.twig' with {
            homeHref: path('app_dashboard'),
            items: [
                { label: 'Contrats', href: path('admin_contract_list') },
                { label: contract.name }
            ]
        } only %}
    {% endif %}
</div>

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

<div class="max-w-[1400px] mx-auto">

    {# ================================================================
       HEADER DU CONTRAT
       ================================================================ #}
    <div class="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden mb-8">
        <div class="px-6 py-5 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
            {# Info principale #}
            <div class="flex items-start gap-4">
                {# Badge statut #}
                <div class="w-12 h-12 rounded-xl {{ config.bg }} flex items-center justify-center flex-shrink-0">
                    {% include '_atoms/icon/icon.html.twig' with {
                        name: config.icon,
                        size: 'lg',
                        color: status == 'active' ? 'success' : (status == 'expired' ? 'error' : (status == 'upcoming' ? 'info' : 'gray'))
                    } only %}
                </div>

                <div class="min-w-0">
                    <div class="flex items-center gap-3 flex-wrap">
                        <h1 class="text-2xl font-bold text-gray-900 font-[Poppins]">{{ contract.name }}</h1>
                        {% include '_atoms/badge/badge.html.twig' with { preset: 'contract-' ~ status, size: 'sm' } only %}
                    </div>

                    <div class="flex items-center gap-4 mt-2 text-sm text-gray-500 flex-wrap">
                        {% if company %}
                            <a href="{{ path('admin_company_show', {uuid: company.uuid}) }}"
                               class="inline-flex items-center gap-1.5 hover:text-primary transition-colors">
                                {% include '_atoms/icon/icon.html.twig' with { name: 'buildings', size: 'sm' } only %}
                                {{ company.name }}
                            </a>
                        {% else %}
                            <span class="text-gray-400">Entreprise non attribuée</span>
                        {% endif %}

                        <span class="inline-flex items-center gap-1.5">
                            {% include '_atoms/icon/icon.html.twig' with { name: 'calendar', size: 'sm' } only %}
                            {{ contract.startDate|date('d/m/Y') }} → {{ contract.endDate|date('d/m/Y') }}
                        </span>

                        {% if status == 'active' and contract.isExpiringSoon(30) %}
                            <span class="inline-flex items-center gap-1.5 text-warning font-medium">
                                {% include '_atoms/icon/icon.html.twig' with { name: 'warning', size: 'sm', color: 'warning' } only %}
                                Expire dans {{ contract.daysRemaining }} jour{{ contract.daysRemaining > 1 ? 's' : '' }}
                            </span>
                        {% endif %}
                    </div>
                </div>
            </div>

            {# Actions #}
            <div class="flex items-center gap-3 self-start lg:self-auto">
                {% include '_atoms/button/button.html.twig' with {
                    label: 'Retour',
                    variant: 'ghost',
                    size: 'lg',
                    icon: 'arrow-left',
                    href: isAdmin and company ? path('admin_company_show', {uuid: company.uuid}) : path('admin_contract_list')
                } only %}

                {% if isAdmin and company %}
                    {% include '_atoms/button/button.html.twig' with {
                        label: 'Modifier',
                        variant: 'primary',
                        size: 'lg',
                        icon: 'edit',
                        href: path('admin_contract_edit', {companyUuid: company.uuid, contractUuid: contract.uuid})
                    } only %}
                {% endif %}
            </div>
        </div>
    </div>

    {# ================================================================
       STATISTIQUES
       ================================================================ #}
    <section class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6 mb-8">
        {% include '_molecules/stat-card/stat-card.html.twig' with {
            label: 'Utilisateurs max',
            value: contract.maxUsers,
            icon: 'users',
            variant: 'info',
            size: 'sm',
            layout: 'horizontal'
        } only %}

        {% include '_molecules/stat-card/stat-card.html.twig' with {
            label: 'Prix par licence',
            value: contract.pricePerLicense ? (contract.pricePerLicense|number_format(2, ',', ' ') ~ ' €') : '-',
            subtitle: 'TTC / mois',
            icon: 'wallet',
            variant: 'primary',
            size: 'sm',
            layout: 'horizontal'
        } only %}

        {% include '_molecules/stat-card/stat-card.html.twig' with {
            label: 'Tokens mensuels',
            value: contract.monthlyTokens|number_format(0, ',', ' '),
            icon: 'token',
            variant: 'success',
            size: 'sm',
            layout: 'horizontal'
        } only %}

        {% include '_molecules/stat-card/stat-card.html.twig' with {
            label: 'Jours restants',
            value: contract.daysRemaining > 0 ? contract.daysRemaining : 0,
            icon: 'clock',
            variant: contract.daysRemaining > 30 ? 'info' : (contract.daysRemaining > 0 ? 'warning' : 'error'),
            size: 'sm',
            layout: 'horizontal'
        } only %}
    </section>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {# Colonne principale (2/3) #}
        <div class="lg:col-span-2 space-y-6">

            {# ================================================================
               ACCÈS SAM
               ================================================================ #}
            {% set hasSam = contract.company is defined and contract.company is not null and contract.company.hasSamAccess %}
            <div class="bg-white rounded-2xl border border-gray-200 shadow-sm px-6 py-4 flex items-center justify-between gap-4">
                {% include '_atoms/logo/logo-with-text.html.twig' with {
                    variant: 'sam',
                    subtitle: 'Suivi Apprenants Moodle',
                    showBadge: false,
                    size: 'md',
                    disabled: not hasSam
                } %}
                {% include '_atoms/badge/badge.html.twig' with {
                    label: hasSam ? 'Activé' : 'Désactivé',
                    variant: hasSam ? 'success' : 'neutral'
                } only %}
            </div>

            {# Historique des actions (admin uniquement) #}
            {% if isAdmin %}
                {% include '_organisms/activity-log/activity-log-section.html.twig' with { logs: logs ?? [] } only %}
            {% endif %}

        </div>

        {# Colonne latérale (1/3) #}
        <div class="space-y-6">

            {# ================================================================
               INFORMATIONS COMPLÉMENTAIRES
               ================================================================ #}
            <div class="bg-white rounded-2xl border border-gray-200 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-info/10 flex items-center justify-center">
                        {% include '_atoms/icon/icon.html.twig' with {
                            name: 'info',
                            size: 'md',
                            color: 'info'
                        } only %}
                    </div>
                    <div>
                        <h3 class="font-semibold text-gray-900">Informations</h3>
                    </div>
                </div>
                <div class="p-6 space-y-3">
                    {% include '_molecules/data-row/data-row.html.twig' with {
                        label: 'Créé le',
                        value: contract.createdAt|date('d/m/Y'),
                        size: 'sm'
                    } only %}

                    {% if contract.updatedAt %}
                        {% include '_molecules/data-row/data-row.html.twig' with {
                            label: 'Modifié le',
                            value: contract.updatedAt|date('d/m/Y H:i'),
                            size: 'sm'
                        } only %}
                    {% endif %}

                    {% set duration = date(contract.endDate).diff(date(contract.startDate)) %}
                    {% include '_molecules/data-row/data-row.html.twig' with {
                        label: 'Durée totale',
                        value: duration.days ~ ' jours',
                        size: 'sm'
                    } only %}

                    {% include '_molecules/data-row/data-row.html.twig' with {
                        label: 'Valeur mensuelle',
                        value: contract.pricePerLicense ? ((contract.pricePerLicense * contract.maxUsers)|number_format(2, ',', ' ') ~ ' € TTC/mois') : null,
                        size: 'sm'
                    } only %}

                    {% include '_atoms/divider/divider.html.twig' with { spacing: 'sm', color: 'light' } only %}

                    {% include '_molecules/data-row/data-row.html.twig' with {
                        label: 'Contact support',
                        action: { label: 'contact@bubul.app', href: 'mailto:contact@bubul.app' },
                        size: 'sm'
                    } only %}
                </div>
            </div>

            {# ================================================================
               NOTES INTERNES (Admin uniquement)
               ================================================================ #}
            {% if isAdmin %}
                <div class="bg-white rounded-2xl border border-gray-200 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-warning/10 flex items-center justify-center">
                            {% include '_atoms/icon/icon.html.twig' with {
                                name: 'file-text',
                                size: 'md',
                                color: 'warning'
                            } only %}
                        </div>
                        <div>
                            <h3 class="font-semibold text-gray-900">Notes internes</h3>
                            <p class="text-sm text-gray-500">Visibles uniquement par les administrateurs</p>
                        </div>
                    </div>
                    <div class="p-6">
                        {% if contract.notes %}
                            <div class="prose prose-sm max-w-none text-gray-600">
                                {{ contract.notes|nl2br }}
                            </div>
                        {% else %}
                            {% include '_molecules/empty-state/empty-state.html.twig' with {
                                title: 'Aucune note interne',
                                icon: 'file-text',
                                size: 'sm',
                                variant: 'minimal'
                            } only %}
                        {% endif %}
                    </div>
                </div>
            {% endif %}

            {# ================================================================
               STATUT DU CONTRAT
               ================================================================ #}
            {% if company %}
                {% if status == 'expired' %}
                    {# Contrat expiré - affichage simple en rouge #}
                    <div class="rounded-2xl border border-error/20 bg-error/5 shadow-sm overflow-hidden p-5">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-lg bg-error/10 flex items-center justify-center flex-shrink-0">
                                {% include '_atoms/icon/icon.html.twig' with {
                                    name: 'x',
                                    size: 'md',
                                    color: 'error'
                                } only %}
                            </div>
                            <div>
                                <h3 class="font-semibold text-error">Contrat expiré</h3>
                                <p class="text-sm text-error/70">Ce contrat a expiré le {{ contract.endDate|date('d/m/Y') }}</p>
                            </div>
                        </div>
                    </div>
                {% else %}
                    {# Contrat actif ou désactivé - avec bouton d'action #}
                    <div class="rounded-2xl border {{ contract.isActive ? 'border-success/20' : 'border-gray-200' }} {{ contract.isActive ? 'bg-success/5' : 'bg-gray-50' }} shadow-sm overflow-hidden p-5">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-lg {{ contract.isActive ? 'bg-success/10' : 'bg-gray-200' }} flex items-center justify-center flex-shrink-0">
                                {% include '_atoms/icon/icon.html.twig' with {
                                    name: 'power',
                                    size: 'md',
                                    color: contract.isActive ? 'success-dark' : 'gray',
                                    opacitySecondary: '1'
                                } only %}
                            </div>
                            <div class="flex-1">
                                <h3 class="font-semibold {{ contract.isActive ? 'text-success' : 'text-gray-700' }}">
                                    {{ contract.isActive ? 'Contrat actif' : 'Contrat désactivé' }}
                                </h3>
                                <p class="text-sm {{ contract.isActive ? 'text-success/70' : 'text-gray-500' }}">
                                    {% if contract.isActive %}
                                        Les droits sont comptabilisés
                                    {% else %}
                                        Les droits ne sont plus comptabilisés
                                    {% endif %}
                                </p>
                            </div>
                            {% if isAdmin %}
                                <button type="button"
                                        onclick="document.getElementById('modal-toggle-status').classList.remove('hidden');"
                                        class="w-10 h-10 rounded-lg flex items-center justify-center transition-colors {{ contract.isActive ? 'bg-warning/10 text-warning hover:bg-warning/20' : 'bg-success/10 text-success hover:bg-success/20' }}"
                                        data-tooltip="{{ contract.isActive ? 'Désactiver le contrat' : 'Réactiver le contrat' }}">
                                    {% include '_atoms/icon/icon.html.twig' with {
                                        name: 'power',
                                        size: 'md',
                                        color: contract.isActive ? 'warning-dark' : 'success-dark',
                                        opacitySecondary: '1'
                                    } only %}
                                </button>
                            {% endif %}
                        </div>
                    </div>
                {% endif %}
            {% endif %}

        </div>
    </div>

</div>

{# ================================================================
   MODAL DE CONFIRMATION TOGGLE STATUS
   ================================================================ #}
{% if isAdmin and company %}
<div id="modal-toggle-status"
     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-md 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' : 'success'
                            } only %}
                        </div>
                        <div>
                            <h2 class="text-lg font-semibold text-gray-900">
                                {{ contract.isActive ? 'Désactiver' : 'Réactiver' }} ce contrat ?
                            </h2>
                            <p class="text-sm text-gray-500 mt-0.5">Cette action est réversible</p>
                        </div>
                    </div>
                    {% include '_atoms/close-button/close-button.html.twig' with {
                        attr: { onclick: "document.getElementById('modal-toggle-status').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é. L'accès aux outils sera retiré aux utilisateurs de l'entreprise.
                        {% 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-status').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>
{% endif %}

{% endblock %}