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

{% block title %}{{ company.name }} - Admin{% endblock %}

{% block body %}
<div class="max-w-[1400px] mx-auto px-4 sm:px-6 min-h-[calc(100vh-120px)]">

    {# =========================================================================
       BREADCRUMB
       ========================================================================= #}
    <div class="mb-6">
        {% include '_molecules/breadcrumb/breadcrumb.html.twig' with {
            homeHref: path('app_dashboard'),
            items: isAdmin
                ? [
                    { label: 'Entreprises', href: path('admin_company_list') },
                    { label: company.name }
                ]
                : [
                    { label: company.name }
                ]
        } only %}
    </div>

    {# =========================================================================
       HEADER ENTREPRISE
       ========================================================================= #}
    <div class="bg-white border border-gray-200 rounded-2xl shadow-sm p-6 mb-6">
        <div class="flex flex-col md:flex-row md:justify-between md:items-start gap-6">
            {# Partie gauche: Avatar + Infos #}
            <div class="flex items-start gap-5">
                {# Avatar entreprise #}
                {% include '_atoms/avatar/avatar.html.twig' with {
                    initials: company.name|slice(0, 2)|upper,
                    size: '2xl',
                    rounded: 'xl',
                    variant: company.isActive ? 'primary' : 'gray'
                } only %}

                <div class="flex-1 min-w-0">
                    {# Nom + Badge statut #}
                    <div class="flex items-center gap-3 mb-1 flex-wrap">
                        <h1 class="text-2xl font-bold font-secondary text-gray-900">{{ company.name }}</h1>
                        {% include '_atoms/badge/badge.html.twig' with {
                            preset: company.isActive ? 'company-active' : 'company-inactive',
                            size: 'md'
                        } only %}
                    </div>

                    {# Description #}
                    {% if company.description %}
                        <p class="text-gray-500 leading-relaxed mb-2">{{ company.description }}</p>
                    {% endif %}

                    {# Meta infos (ville, email) #}
                    <div class="flex items-center gap-5 flex-wrap">
                        {% if company.city %}
                            <span class="inline-flex items-center gap-1.5 text-sm text-gray-500">
                                {% include '_atoms/icon/icon.html.twig' with { name: 'home', size: 'sm', color: 'gray' } only %}
                                {{ company.city }}
                            </span>
                        {% endif %}
                        {% if company.email %}
                            <span class="inline-flex items-center gap-1.5 text-sm text-gray-500">
                                {% include '_atoms/icon/icon.html.twig' with { name: 'mail', size: 'sm', color: 'gray' } only %}
                                {{ company.email }}
                            </span>
                        {% endif %}
                    </div>
                </div>
            </div>

            {# Partie droite: Boutons d'action #}
            {% if isAdmin %}
                <div class="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3">
                    {% include '_atoms/button/button.html.twig' with {
                        label: 'Retour',
                        variant: 'ghost',
                        icon: 'arrow-left',
                        size: 'md',
                        href: path('admin_company_list')
                    } only %}
                    <div class="w-full sm:w-auto">
                        {% include '_atoms/button/button.html.twig' with {
                            label: 'Modifier',
                            variant: 'primary',
                            icon: 'edit',
                            size: 'md',
                            width: 'full',
                            href: path('admin_company_edit', {uuid: company.uuid})
                        } only %}
                    </div>
                </div>
            {% endif %}
        </div>
    </div>

    {# =========================================================================
       LAYOUT 2 COLONNES
       ========================================================================= #}
    <div class="grid grid-cols-1 lg:grid-cols-[1fr_360px] gap-6"
         data-controller="admin--company-users-height">

        {# =================================================================
           COLONNE PRINCIPALE
           ================================================================= #}
        <div class="flex flex-col gap-6 min-h-0">

            {# ----- Section Contrats ----- #}
            <div class="bg-white border border-gray-200 rounded-2xl shadow-sm overflow-hidden">
                {# Header custom avec titre + count à gauche, bouton à droite #}
                <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">
                    <div class="flex items-center gap-4">
                        <div class="w-11 h-11 rounded-xl bg-primary/10 flex items-center justify-center shrink-0">
                            {% include '_atoms/icon/icon.html.twig' with { name: 'file-text', size: 'md', color: 'primary' } only %}
                        </div>
                        <div class="flex items-center gap-2.5">
                            <h3 class="text-lg font-semibold text-gray-900">Contrats</h3>
                            <span class="inline-flex items-center justify-center min-w-[26px] h-6 px-2 bg-primary text-white rounded-full text-xs font-bold shadow-sm">
                                {{ allContracts|length }}
                            </span>
                        </div>
                    </div>
                    {% if isAdmin %}
                        <div class="w-full sm:w-auto">
                            {% include '_atoms/button/button.html.twig' with {
                                label: 'Nouveau',
                                variant: 'primary',
                                icon: 'plus',
                                size: 'md',
                                width: 'full',
                                href: path('admin_contract_new', {companyUuid: company.uuid})
                            } only %}
                        </div>
                    {% endif %}
                </div>

                {# Body #}
                {% if allContracts|length > 0 %}
                    <div class="flex flex-col gap-1 p-4 max-h-[680px] overflow-y-auto">
                        {% for contract in allContracts %}
                            {% set contractStatus = contract.status %}
                            {% include '_molecules/contract-row/contract-row.html.twig' with {
                                name: contract.name,
                                startDate: contract.startDate,
                                endDate: contract.endDate,
                                tokens: contract.monthlyTokens,
                                maxUsers: contract.maxUsers,
                                status: contractStatus,
                                daysRemaining: contract.daysRemaining,
                                isExpiringSoon: contract.isExpiringSoon(30),
                                isActive: contractStatus != 'expired' and contractStatus != 'disabled',
                                hasSamAccess: company.hasSamAccess,
                                href: path('admin_contract_show', {companyUuid: company.uuid, contractUuid: contract.uuid})
                            } only %}
                        {% endfor %}
                    </div>
                {% else %}
                    {% include '_molecules/empty-state/empty-state.html.twig' with {
                        title: 'Aucun contrat',
                        icon: 'file-text',
                        size: 'sm',
                        actionText: isAdmin ? 'Créer un contrat' : null,
                        actionHref: isAdmin ? path('admin_contract_new', {companyUuid: company.uuid}) : null,
                        actionIcon: 'plus'
                    } only %}
                {% endif %}
            </div>

            {# ----- Section Utilisateurs ----- #}
            <div class="bg-white border border-gray-200 rounded-2xl shadow-sm overflow-hidden flex-1 flex flex-col min-h-0">
                {# Header custom avec titre + count à gauche, boutons à droite #}
                <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">
                    <div class="flex items-center gap-4">
                        <div class="w-11 h-11 rounded-xl bg-primary/10 flex items-center justify-center shrink-0">
                            {% include '_atoms/icon/icon.html.twig' with { name: 'users', size: 'md', color: 'primary' } only %}
                        </div>
                        <div class="flex items-center gap-2.5">
                            <h3 class="text-lg font-semibold text-gray-900">Utilisateurs</h3>
                            <span class="inline-flex items-center justify-center min-w-[26px] h-6 px-2 bg-primary text-white rounded-full text-xs font-bold shadow-sm">
                                {{ stats.total }}
                            </span>
                        </div>
                    </div>
                    <div class="flex flex-col sm:flex-row sm:items-center gap-2">
                        {% if isAdmin %}
                        <div class="w-full sm:w-auto">
                            {% include '_atoms/button/button.html.twig' with {
                                label: 'Associer',
                                variant: 'outline',
                                icon: 'user-add',
                                size: 'md',
                                width: 'full',
                                attr: { onclick: "openModal('modal-associate-user')" }
                            } only %}
                        </div>
                        {% endif %}
                        {% if isAdmin or app.user.isActive %}
                            <div class="w-full sm:w-auto">
                                {% include '_atoms/button/button.html.twig' with {
                                    label: 'Ajouter',
                                    variant: 'primary',
                                    icon: 'plus',
                                    size: 'md',
                                    width: 'full',
                                    href: path('admin_user_new')
                                } only %}
                            </div>
                        {% endif %}
                    </div>
                </div>

                {# Body — chargé en Turbo Frame (évite le rendu en boucle de N templates) #}
                <div class="p-0" data-admin--company-users-height-target="body">
                    <turbo-frame id="company-users-list"
                                 src="{{ path('admin_company_users', {uuid: company.uuid}) }}"
                                 loading="lazy">
                        {# Skeleton de chargement #}
                        <div class="flex flex-col">
                            {% for i in 1..3 %}
                                <div class="flex items-center gap-4 px-5 py-3.5 border-b border-gray-100">
                                    <div class="w-10 h-10 rounded-full bg-gray-100 animate-pulse shrink-0"></div>
                                    <div class="flex-1 space-y-2">
                                        <div class="h-3.5 bg-gray-100 rounded-full animate-pulse w-1/3"></div>
                                        <div class="h-3 bg-gray-100 rounded-full animate-pulse w-1/2"></div>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </turbo-frame>
                </div>
            </div>

        </div>

        {# =================================================================
           SIDEBAR (Colonne droite)
           ================================================================= #}
        <div class="flex flex-col gap-4" data-admin--company-users-height-target="sidebar">

            {# ----- Carte Informations ----- #}
            {% embed '_molecules/card/card.html.twig' with {
                title: 'Informations',
                padding: 'none'
            } %}
                {% block body %}
                    <div class="flex flex-col gap-0.5 px-6 py-4">
                        {% include '_molecules/data-row/data-row.html.twig' with {
                            label: 'SIRET',
                            value: company.siret ? company.siret : null,
                            class: 'py-2'
                        } only %}
                        {% include '_molecules/data-row/data-row.html.twig' with {
                            label: 'Adresse',
                            value: company.address|default(null),
                            class: 'py-2'
                        } only %}
                        {% include '_molecules/data-row/data-row.html.twig' with {
                            label: 'Ville',
                            value: (company.postalCode or company.city) ? ((company.postalCode ?? '') ~ ' ' ~ (company.city ?? ''))|trim : null,
                            class: 'py-2'
                        } only %}
                        {% include '_molecules/data-row/data-row.html.twig' with {
                            label: 'Téléphone',
                            value: company.phone|default(null),
                            class: 'py-2'
                        } only %}
                        {% include '_molecules/data-row/data-row.html.twig' with {
                            label: 'Site web',
                            value: company.website ? company.website|replace({'http://': 'https://'}) : null,
                            class: 'py-2'
                        } only %}
                    </div>
                    {% if isAdmin %}
                        <div class="px-6 py-3 border-t border-gray-100">
                            <span class="text-xs text-gray-400">
                                Créé le {{ company.createdAt|date('d/m/Y') }}
                                {% if company.createdBy %}par {{ company.createdBy.fullName }}{% endif %}
                            </span>
                        </div>
                    {% endif %}
                {% endblock %}
            {% endembed %}

            {# ----- Carte Configuration Moodle ----- #}
            {% embed '_molecules/card/card.html.twig' with {
                title: 'Configuration Moodle',
                padding: 'none'
            } %}
                {% block body %}
                    <div class="flex flex-col gap-0.5 px-6 py-4"
                         data-controller="sam--moodle-status"
                         data-sam--moodle-status-company-uuid-value="{{ company.uuid }}"
                         data-sam--moodle-status-check-url-value="{{ path('api_moodlev5_moodle_status') }}?company={{ company.uuid }}">

                        {% include '_molecules/data-row/data-row.html.twig' with {
                            label: 'URL Moodle',
                            value: company.moodleUrl|default(null),
                            class: 'py-2'
                        } only %}

                        <div class="flex items-center justify-between gap-2 py-2">
                            <span class="text-sm text-gray-500 font-medium">Token API</span>
                            {% if company.moodleToken %}
                                <code class="text-xs font-mono bg-gray-100 px-2 py-1 rounded">{{ maskedMoodleToken|default('••••••••••••') }}</code>
                            {% else %}
                                <span class="text-gray-400 italic text-sm">Non configuré</span>
                            {% endif %}
                        </div>

                        <div class="flex items-center justify-between gap-2 py-2">
                            <span class="text-sm text-gray-500 font-medium">Statut</span>
                            <span data-sam--moodle-status-target="status">
                                {% if company.moodleUrl and company.moodleToken %}
                                    <span class="inline-flex items-center gap-1.5 text-sm text-gray-500 animate-pulse">
                                        {% include '_atoms/icon/icon.html.twig' with { name: 'refresh', size: 'sm', color: 'gray' } only %}
                                        Vérification...
                                    </span>
                                {% else %}
                                    <span class="inline-flex items-center gap-1.5 text-sm text-gray-400 italic">
                                        {% include '_atoms/icon/icon.html.twig' with { name: 'warning', size: 'sm', color: 'gray' } only %}
                                        Non configuré
                                    </span>
                                {% endif %}
                            </span>
                        </div>
                    </div>

                    {% if isAdmin %}
                        <div class="px-6 pb-5">
                            {% include '_atoms/button/button.html.twig' with {
                                label: 'Configurer Moodle',
                                variant: 'ghost',
                                icon: 'settings',
                                size: 'md',
                                width: 'full',
                                href: path('admin_company_edit', {uuid: company.uuid})
                            } only %}
                        </div>
                    {% endif %}
                {% endblock %}
            {% endembed %}

            {# ----- Carte Tokens ----- #}
            {% embed '_molecules/card/card.html.twig' with {
                title: 'Tokens',
                padding: 'none'
            } %}
                {% block body %}
                    <div class="flex flex-col gap-0.5 px-6 py-4">
                        {% include '_molecules/data-row/data-row.html.twig' with {
                            label: 'Budget mensuel',
                            value: contractLimits.monthlyTokens|default(0)|number_format(0, ',', ' '),
                            valueColor: 'primary',
                            class: 'py-2'
                        } only %}
                        {% include '_molecules/data-row/data-row.html.twig' with {
                            label: 'Déjà alloués',
                            value: distributionStats.totalAllocated|default(0)|number_format(0, ',', ' '),
                            class: 'py-2'
                        } only %}
                        {% include '_molecules/data-row/data-row.html.twig' with {
                            label: 'Restants à distribuer',
                            value: distributionStats.remainingBudget|default(0)|number_format(0, ',', ' '),
                            valueColor: distributionStats.remainingBudget|default(0) < 0 ? 'error' : 'success',
                            class: 'py-2'
                        } only %}
                        {% include '_molecules/data-row/data-row.html.twig' with {
                            label: 'Plafond stockage',
                            value: tokenStats.maxStorage|default(0)|number_format(0, ',', ' '),
                            class: 'py-2'
                        } only %}
                    </div>

                    <div class="px-6 pb-5">
                        {% include '_atoms/button/button.html.twig' with {
                            label: 'Gérer la distribution',
                            variant: 'primary',
                            icon: 'token',
                            size: 'md',
                            width: 'full',
                            href: path('admin_company_tokens', {uuid: company.uuid})
                        } only %}
                    </div>
                {% endblock %}
            {% endembed %}

        </div>
    </div>

    {# ----- Historique des actions (pleine largeur, sous la grille) ----- #}
    {% if isAdmin %}
        {% include '_organisms/activity-log/activity-log-section.html.twig' with { logs: logs ?? [] } only %}
    {% endif %}

    {# =========================================================================
       SECTION: GESTION DE L'ENTREPRISE (en bas de page)
       ========================================================================= #}
    {% if isAdmin %}
        <section class="mb-20">
            {% include '_molecules/section-divider/section-divider.html.twig' with {
                title: "Gestion de l'entreprise",
                icon: 'settings',
                iconColor: 'error'
            } only %}

            <div class="flex flex-col gap-6">
                {# Zone Statut #}
                {% include '_molecules/status-zone/status-zone.html.twig' with {
                    title: 'Statut de l\'entreprise',
                    description: company.isActive
                        ? 'Cette entreprise est actuellement <strong>active</strong>. Les utilisateurs peuvent accéder aux services.'
                        : 'Cette entreprise est actuellement <strong>inactive</strong>. L\'accès aux services est bloqué.',
                    icon: 'power',
                    variant: company.isActive ? 'success' : 'warning',
                    buttonLabel: company.isActive ? 'Désactiver' : 'Activer',
                    buttonIcon: 'power',
                    buttonVariant: company.isActive ? 'warning' : 'success',
                    modalId: 'modal-toggle-status'
                } only %}

                {# Zone Danger #}
                {% include '_molecules/status-zone/status-zone.html.twig' with {
                    title: 'Zone danger',
                    description: 'La suppression d\'une entreprise est <strong>définitive</strong> et supprimera également tous les contrats associés.',
                    icon: 'trash',
                    variant: 'error',
                    buttonLabel: 'Supprimer',
                    buttonIcon: 'trash',
                    buttonVariant: 'error',
                    modalId: 'modal-delete-company'
                } only %}
            </div>
        </section>

        {# Modal de changement de statut #}
        {% include 'admin/company/_modal_toggle.html.twig' with {company: company, modal_id: 'modal-toggle-status'} %}

        {# Modal de suppression #}
        {% include 'admin/company/_modal_delete.html.twig' with {company: company, modal_id: 'modal-delete-company'} %}
    {% endif %}

    {# Modal de dissociation #}
    {% include 'admin/company/_modal_dissociate_shared.html.twig' with {company: company} %}

    {# Modal d'association (admin uniquement) #}
    {% if isAdmin %}
        {% include 'admin/company/_modal_associate_user.html.twig' with {company: company} %}
    {% endif %}
</div>
{% endblock %}