{% extends '@App/app.html.twig' %}

{% block page_header %}{% endblock %}

{% block content %}
    {% set stats = client_stats|default({active: clients|length, companies: 0, individuals: 0, archived: 0, total: clients|length}) %}
    {% set type_options = client_filter_options.types|default({}) %}
    {% set city_options = client_filter_options.cities|default([]) %}
    {% set category_options = client_filter_options.categories|default([]) %}
    {% set breakdown = client_type_breakdown|default([]) %}
    {% set current_filters = filters|default({q: '', type: '', status: 'active', city: '', perPage: 20}) %}
    {% set organization_name = company.nom|default(organization.nom|default('Nova Consulting SAS')) %}
    {% set visible_total = clients|length %}
    {% set page_size = current_filters.perPage|default(20) %}

    <section class="clientsphere-page"
             data-controller="commercial-client-table"
             data-action="click@window->commercial-client-table#closeColumnPicker keydown.esc@window->commercial-client-table#closeColumnPicker"
             data-commercial-client-table-page-size-value="{{ page_size }}"
             data-commercial-client-table-total-label-value="client{{ visible_total > 1 ? 's' : '' }}">
        <div class="clientsphere-heading">
            <div class="clientsphere-title">
                <div>
                    <h1>Clients</h1>
                    <p>Gérez les entreprises, particuliers et contacts commerciaux de la société active.</p>
                </div>
            </div>

            <div class="clientsphere-heading-actions">
                <button class="capsule-button capsule-button--secondary" type="button">
                    <i class="ti ti-login-2"></i>
                    <span>Importer</span>
                </button>
                <button class="capsule-button capsule-button--secondary" type="button">
                    <i class="ti ti-file-export"></i>
                    <span>Exporter</span>
                </button>
                <a class="capsule-button capsule-button--primary" href="{{ path('commercial_client_new') }}">
                    <i class="ti ti-plus"></i>
                    <span>Nouveau client</span>
                </a>
            </div>
        </div>

        <section class="data-kpis" aria-label="Indicateurs des projets">
            <article class="data-kpi data-kpi--indigo">
                <span class="data-kpi__icon"><i class="ti ti-users"></i></span>
                <div>
                    <span>Clients actifs</span>
                    <strong>{{ stats.active|default(0) }}</strong>
                </div>
            </article>
            <article class="data-kpi data-kpi--red">
                <span class="data-kpi__icon"><i class="ti ti-building"></i></span>
                <div>
                    <span>Entreprises</span>
                    <strong>{{ stats.companies|default(0) }}</strong>
                </div>
            </article>
            <article class="data-kpi data-kpi--green">
                <span class="data-kpi__icon"><i class="ti ti-user"></i></span>
                <div>
                    <span>Particuliers</span>
                    <strong>{{ stats.individuals|default(0) }}</strong>
                </div>
            </article>
            <article class="data-kpi data-kpi--violet">
                <span class="data-kpi__icon"><i class="ti ti-shield-check"></i></span>
                <div>
                    <span>Clients archivés</span>
                    <strong>{{ stats.archived|default(0) }}</strong>
                </div>
            </article>
        </section>

        <div class="clientsphere-grid">
            <div class="clientsphere-main">
                <form class="clientsphere-filter"
                      method="get"
                      action="{{ path('commercial_client_index') }}"
                      data-action="submit->commercial-client-table#submitFilters">
                    <label class="clientsphere-search">
                        <i class="ti ti-search"></i>
                        <input type="search"
                               name="q"
                               value="{{ current_filters.q|default('') }}"
                               placeholder="Rechercher par nom, SIRET, ville..."
                               data-commercial-client-table-target="search"
                               data-action="input->commercial-client-table#applyFilters">
                    </label>

                    <label class="clientsphere-select">
                        <select name="type"
                                data-commercial-client-table-target="type"
                                data-action="change->commercial-client-table#applyFilters">
                            <option value="">Tous les types</option>
                            {% for value, label in type_options %}
                                <option value="{{ value }}" {{ current_filters.type|default('') == value ? 'selected' : '' }}>{{ label }}</option>
                            {% endfor %}
                        </select>
                        <i class="ti ti-chevron-down"></i>
                    </label>

                    <label class="clientsphere-select">
                        <select name="category" data-commercial-client-table-target="category" data-action="change->commercial-client-table#applyFilters">
                            <option value="">Toutes les catégories</option>
                            {% for category in category_options %}<option value="{{ category.id }}" {{ current_filters.category|default(0) == category.id ? 'selected' }}>{{ category.nom }}</option>{% endfor %}
                        </select>
                        <i class="ti ti-chevron-down"></i>
                    </label>

                    <label class="clientsphere-select">
                        <select name="status"
                                data-commercial-client-table-target="status"
                                data-action="change->commercial-client-table#applyFilters">
                            <option value="active" {{ current_filters.status|default('active') == 'active' ? 'selected' : '' }}>Actifs</option>
                            <option value="archived" {{ current_filters.status|default('') == 'archived' ? 'selected' : '' }}>Archivés</option>
                            <option value="all" {{ current_filters.status|default('') == 'all' ? 'selected' : '' }}>Tous</option>
                        </select>
                        <i class="ti ti-chevron-down"></i>
                    </label>

                    <label class="clientsphere-select">
                        <select name="city"
                                data-commercial-client-table-target="city"
                                data-action="change->commercial-client-table#applyFilters">
                            <option value="">Toutes les villes</option>
                            {% for city in city_options %}
                                <option value="{{ city }}" {{ current_filters.city|default('') == city ? 'selected' : '' }}>{{ city }}</option>
                            {% endfor %}
                        </select>
                        <i class="ti ti-chevron-down"></i>
                    </label>

                    <input type="hidden" name="perPage" value="{{ page_size }}" data-commercial-client-table-target="perPageInput">

                    <button class="clientsphere-btn clientsphere-btn-primary" type="submit">
                        <i class="ti ti-filter-filled"></i>
                        <span>Filtrer</span>
                    </button>
                    <button class="clientsphere-reset" type="button" data-action="commercial-client-table#reset">
                        Réinitialiser
                    </button>

                    <p class="clientsphere-filter-note">
                        <i class="ti ti-info-circle-filled"></i>
                        Les clients sont filtrés par société active.
                        <strong>{{ organization_name }}</strong>
                    </p>
                </form>

                <div class="fu-data-table clientsphere-table-card">
                    <div class="fu-data-table-toolbar clientsphere-table-toolbar">
                        <label class="clientsphere-check-label">
                            <input type="checkbox" data-commercial-client-table-target="selectAll" data-action="change->commercial-client-table#toggleAll">
                            <span><strong data-commercial-client-table-target="visibleCount">{{ visible_total }}</strong> clients</span>
                        </label>
                        <div class="clientsphere-table-tools">
                            <button type="button" data-action="commercial-client-table#sortByName">
                                <i class="ti ti-arrows-sort"></i>
                                Trier
                            </button>
                            <div class="clientsphere-column-picker" data-commercial-client-table-target="columnPicker">
                                <button type="button"
                                        aria-expanded="false"
                                        aria-controls="clientsphere-column-picker-menu"
                                        data-commercial-client-table-target="columnPickerButton"
                                        data-action="commercial-client-table#toggleColumnPicker">
                                    <i class="ti ti-columns-3"></i>
                                    Colonnes
                                    <i class="ti ti-chevron-down"></i>
                                </button>
                                <div class="clientsphere-column-picker-menu"
                                     id="clientsphere-column-picker-menu"
                                     data-commercial-client-table-target="columnPickerMenu"
                                     hidden>
                                    <strong>Colonnes affichées</strong>
                                    {% for key, label in {
                                        client: 'Client',
                                        type: 'Type',
                                        category: 'Catégorie',
                                        city: 'Ville',
                                        contact: 'Contact principal',
                                        status: 'Statut',
                                        actions: 'Actions'
                                    } %}
                                        <label>
                                            <input type="checkbox"
                                                   value="{{ key }}"
                                                   checked
                                                   data-action="change->commercial-client-table#toggleColumn">
                                            <span>{{ label }}</span>
                                        </label>
                                    {% endfor %}
                                    <button class="clientsphere-column-picker-reset"
                                            type="button"
                                            data-action="commercial-client-table#resetColumns">
                                        Tout afficher
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="fu-data-table-scroll">
                        <table class="fu-data-table-table clientsphere-table">
                            <thead>
                                <tr>
                                    <th class="clientsphere-col-check text-center">
                                        <input type="checkbox" data-commercial-client-table-target="selectAllMirror" data-action="change->commercial-client-table#toggleAll">
                                    </th>
                                    <th data-column="client">Client</th>
                                    <th data-column="type">Type</th>
                                    <th data-column="category">Catégorie</th>
                                    <th data-column="city">Ville</th>
                                    <th data-column="contact">Contact principal</th>
                                    <th data-column="status">Statut</th>
                                    <th data-column="actions">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for client in clients %}
                                    {% set client_name = client.nom|default('Client') %}
                                    {% set client_type_key = client.type|default('AUTRE') %}
                                    {% set client_type_label = type_options[client_type_key]|default(client_type_key|title) %}
                                    {% set client_siret = client.fundupSocieteId|default(null) ? client.fundupSocieteId : '—' %}
                                    {% set client_city = client.ville|default('—') ?: '—' %}
                                    {% set contact = client.users|default([])|first %}
                                    {% set contact_name = contact ? ((contact.prenom|default('') ~ ' ' ~ contact.nom|default(''))|trim ?: contact.email|default(client_name)) : client_name %}
                                    {% set contact_initials = contact_name|split(' ')|map(part => part|first)|join|upper|slice(0, 2) ?: 'CL' %}
                                    {% set client_phone = client.telephone|default(null) ? client.telephone : '—' %}
                                    {% set client_status = client.archive|default(false) ? 'Archivé' : 'Actif' %}
                                    {% set created_at = client.createdAt|default(null) %}
                                    {% set activity = created_at ? created_at|date('d/m/Y') : '—' %}
                                    {% set resolved_client_logo = client_logo_path(client) %}
                                    {% set tone = client_type_key == 'ENTREPRISE' ? 'blue' : (client_type_key == 'PARTICULIER' ? 'violet' : (client_type_key == 'ASSOCIATION' ? 'amber' : (client_type_key == 'ADMINISTRATION' ? 'teal' : 'slate'))) %}
                                    {% set icon = client_type_key == 'PARTICULIER' ? 'ti ti-user-filled' : (client_type_key == 'ASSOCIATION' ? 'ti ti-users-group' : (client_type_key == 'ADMINISTRATION' ? 'ti ti-building-bank' : 'ti ti-building')) %}
                                    <tr data-commercial-client-table-target="row"
                                        data-name="{{ client_name|lower }}"
                                        data-type="{{ client_type_key }}"
                                        data-city="{{ client_city }}"
                                        data-status="{{ client.archive|default(false) ? 'archived' : 'active' }}"
                                        data-category="{{ client.categorie ? client.categorie.id : '' }}"
                                        data-search="{{ (client_name ~ ' ' ~ client_siret ~ ' ' ~ client_city ~ ' ' ~ contact_name ~ ' ' ~ client.email|default(''))|lower }}">
                                        <td class="clientsphere-col-check text-center">
                                            <input type="checkbox" data-commercial-client-table-target="rowCheckbox" data-action="change->commercial-client-table#updateSelection">
                                        </td>
                                        <td data-column="client">
                                            <a class="clientsphere-client" href="{{ path('commercial_client_show', {id: client.id}) }}">
                                                {% if resolved_client_logo %}
                                                    <span class="clientsphere-type-icon clientsphere-client-logo"><img src="{{ resolved_client_logo }}" alt="Logo {{ client_name }}"></span>
                                                {% else %}
                                                    <span class="clientsphere-type-icon is-slate"><i class="ti ti-building"></i></span>
                                                {% endif %}
                                                <strong>{{ client_name }}</strong>
                                            </a>
                                        </td>
                                        <td data-column="type"><span class="clientsphere-pill is-{{ tone }}">{{ client_type_label }}</span></td>
                                        <td data-column="category"><span class="clientsphere-pill is-violet">{{ client.categorie ? client.categorie.nom : '—' }}</span></td>
                                        <td data-column="city"><span class="clientsphere-city"><i class="ti ti-map-pin-filled"></i>{{ client_city }}</span></td>
                                        <td data-column="contact">
                                            <span class="clientsphere-contact">
                                                <span class="clientsphere-avatar is-{{ loop.index % 5 }}">{{ contact_initials }}</span>
                                                {{ contact_name }}
                                            </span>
                                        </td>
                                        <td data-column="status"><span class="clientsphere-status is-{{ client.archive|default(false) ? 'archived' : 'active' }}"><i></i>{{ client_status }}</span></td>
                                        <td data-column="actions">
                                            <div class="d-flex gap-2 justify-end">
                                                <a href="{{ path('commercial_client_show', {id: client.id}) }}" class="link"><i class="ti ti-eye fs-5"></i></a>
                                                <a href="{{ path('commercial_client_edit', {id: client.id}) }}" class="link"><i class="ti ti-edit fs-5"></i></a>
                                            </div>
                                        </td>
                                    </tr>
                                {% endfor %}
                                <tr class="clientsphere-empty-row" data-commercial-client-table-target="empty" hidden>
                                    <td colspan="10">Aucun client ne correspond aux filtres.</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="clientsphere-table-footer">
                        <span>Affichage de <strong data-commercial-client-table-target="range">0-0</strong> sur <strong data-commercial-client-table-target="footerCount">{{ visible_total }}</strong> clients</span>
                        <nav class="clientsphere-pagination" aria-label="Pagination clients" data-commercial-client-table-target="pagination"></nav>
                        <label class="clientsphere-page-size">
                            Par page :
                            <select data-commercial-client-table-target="pageSize" data-action="change->commercial-client-table#changePageSize">
                                {% for size in [10, 20, 50, 100] %}
                                    <option value="{{ size }}" {{ page_size == size ? 'selected' : '' }}>{{ size }}</option>
                                {% endfor %}
                            </select>
                        </label>
                    </div>
                </div>
            </div>

            <aside class="clientsphere-aside">
                <section class="clientsphere-side-card">
                    <h2><i class="ti ti-bolt"></i>Actions rapides</h2>
                    <a href="{{ path('commercial_client_new') }}">
                        <span class="clientsphere-type-icon is-blue"><i class="ti ti-building"></i></span>
                        <strong>Créer un client entreprise avec SIRET</strong>
                    </a>
                    <a href="{{ path('commercial_client_new') }}">
                        <span class="clientsphere-type-icon is-violet"><i class="ti ti-user-plus"></i></span>
                        <strong>Ajouter un contact</strong>
                    </a>
                    <a href="{{ path('commercial_client_index', {status: 'archived'}) }}">
                        <span class="clientsphere-type-icon is-slate"><i class="ti ti-archive"></i></span>
                        <strong>Voir les clients archivés</strong>
                    </a>
                </section>

                <section class="clientsphere-side-card clientsphere-distribution">
                    <h2><i class="ti ti-chart-pie-2"></i>Répartition</h2>
                    {% for item in breakdown %}
                        {% set tone = item.type == 'ENTREPRISE' ? 'blue' : (item.type == 'PARTICULIER' ? 'violet' : (item.type == 'ASSOCIATION' ? 'amber' : (item.type == 'ADMINISTRATION' ? 'teal' : 'slate'))) %}
                        <div class="clientsphere-distribution-row">
                            <div>
                                <span>{{ item.label }}</span>
                                <strong>{{ item.percent }}%</strong>
                            </div>
                            <span class="clientsphere-progress"><i class="is-{{ tone }}" style="width: {{ item.percent }}%"></i></span>
                        </div>
                    {% else %}
                        <div class="clientsphere-distribution-row">
                            <div><span>Aucune donnée</span><strong>0%</strong></div>
                            <span class="clientsphere-progress"><i class="is-slate" style="width: 0%"></i></span>
                        </div>
                    {% endfor %}
                </section>

                <section class="clientsphere-tip">
                    <h2><i class="ti ti-bulb"></i>Astuce</h2>
                    <p>Utilisez l'import CSV pour ajouter plusieurs clients en une seule fois. Le SIRET est validé automatiquement.</p>
                    <a href="{{ path('commercial_client_new') }}">En savoir plus <i class="ti ti-arrow-right"></i></a>
                </section>
            </aside>
        </div>
    </section>
{% endblock %}