{% extends '@Commercial/commercial/layout.html.twig' %}

{% block commercial_title %}{{ client.nom }}{% endblock %}

{% block commercial_content %}
{% set principal = profile.principalContact %}
{% set resolved_client_logo = client_logo_path(client) %}
{% set website_label = client.siteWeb|default('')|replace({'https://': '', 'http://': ''})|trim('/') %}

<div class="clientsphere-page clientsphere-profile" data-controller="commercial-client-profile">
    <header class="clientsphere-profile-header">
        <div class="clientsphere-profile-identity">
            <div class="clientsphere-profile-logo">
                {% if resolved_client_logo %}
                    <img src="{{ resolved_client_logo }}" alt="Logo {{ client.nom }}">
                {% else %}
                    <i class="ti ti-building"></i>
                {% endif %}
            </div>
            <div>
                <div class="clientsphere-profile-titleline">
                    <h1 class="capsule-titre">{{ client.nom }}</h1>
                    <span class="clientsphere-profile-badge is-type">{{ client.type == 'ENTREPRISE' ? 'Entreprise' : 'Particulier' }}</span>
                    <span class="clientsphere-profile-badge {{ client.archive ? 'is-inactive' : 'is-active' }}"><i></i>{{ client.archive ? 'Archivé' : 'Actif' }}</span>
                    {% if client.categorie %}<span class="clientsphere-profile-badge is-type"><i class="ti ti-tag"></i>{{ client.categorie.nom }}</span>{% endif %}
                </div>
                <div class="capsule-profile-meta">
                    {% if profile.siret %}<span><i class="ti ti-id me-1"></i> SIRET {{ profile.siret }}</span>{% endif %}
                    {% if client.ville %}<span><i class="ti ti-map-pin me-1"></i> {{ client.ville }}</span>{% endif %}
                    {% if client.createdAt %}<span><i class="ti ti-calendar me-1"></i> Client depuis {{ client.createdAt|date('Y') }}</span>{% endif %}
                </div>
            </div>
        </div>
        <div class="clientsphere-profile-actions">
            {% if is_granted('CLIENT_EXPORT_BILLING', client) %}
                {% if can_export_financial %}<a href="{{ path('client_billing_payment_export', {id: client.id}) }}" class="capsule-button capsule-button--light" data-turbo="false"><i class="ti ti-file-spreadsheet"></i> Exporter ses factures &amp; paiements</a>{% endif %}
            {% endif %}
            <form method="post" action="{{ path('commercial_client_sirene_refresh', {id: client.id}) }}">
                <input type="hidden" name="_token" value="{{ csrf_token('commercial_client_sirene_refresh_' ~ client.id) }}">
                <button type="submit" class="capsule-button capsule-button--light"><i class="ti ti-refresh"></i> Actualiser avec SIRENE</button>
            </form>
            <a href="{{ path('commercial_client_edit', {id: client.id}) }}" class="capsule-button capsule-button--primary"><i class="ti ti-edit"></i> Modifier</a>
            <div class="clientsphere-profile-dropdown">
                <button type="button" class="capsule-button capsule-button--light" data-action="commercial-client-profile#toggleActions" aria-label="Afficher les actions">
                    <i class="ti ti-dots"></i>
                </button>
                <div class="clientsphere-profile-actions-menu" data-commercial-client-profile-target="actionsMenu" hidden>
                    <a href="{{ path('commercial_contact_new', {clientId: client.id}) }}" data-turbo-frame="frame_modal"><i class="ti ti-user-plus"></i> Ajouter un contact</a>
                    <a href="{{ path('projet_new', {clientId: client.id}) }}"><i class="ti ti-git-branch"></i> Créer un projet</a>
                    <a href="{{ path('billing_document_new', {type: 'invoice', clientId: client.id}) }}"><i class="ti ti-file-invoice"></i> Créer une facture</a>
                    <form method="post" action="{{ path('commercial_client_archive', {id: client.id}) }}">
                        <input type="hidden" name="_token" value="{{ csrf_token('commercial_client_archive_' ~ client.id) }}">
                        <button type="submit"><i class="ti ti-archive"></i> Archiver le client</button>
                    </form>
                </div>
            </div>
        </div>
    </header>

    <section class="clientsphere-profile-kpis" aria-label="Indicateurs client">
        <article><span class="is-brand"><i class="ti ti-address-book"></i></span><div><strong>{{ profile.contactCount }}</strong><small>Contacts</small></div></article>
        <article><span class="is-teal"><i class="ti ti-git-branch"></i></span><div><strong>{{ profile.activeProjectCount }}</strong><small>Projets actifs</small></div></article>
        {% if can_view_financial %}<article><span class="is-amber"><i class="ti ti-file-invoice"></i></span><div><strong>{{ profile.invoiceTotal|number_format(0, ',', ' ') }} €</strong><small>Factures</small></div></article>{% endif %}
        <article><span class="is-slate"><i class="ti ti-history"></i></span><div><strong class="is-date">{{ profile.lastActivity }}</strong><small>Dernière activité</small></div></article>
    </section>

    <nav class="clientsphere-profile-tabs" role="tablist" aria-label="Sections de la fiche client">
        {% for key, label in {
            overview: "Vue d'ensemble",
            contacts: 'Contacts',
            projects: 'Projets',
            billing: 'Facturation',
            history: 'Historique',
            notes: 'Notes'
        } %}
            <button type="button" role="tab" class="{{ loop.first ? 'is-active' : '' }}" data-tab="{{ key }}" data-commercial-client-profile-target="tab" data-action="commercial-client-profile#selectTab">{{ label }}</button>
        {% endfor %}
    </nav>

    <div data-pane="overview" data-commercial-client-profile-target="pane">
        <div class="clientsphere-profile-layout">
            <main class="clientsphere-profile-main">
                <section class="clientsphere-profile-card">
                    <header><i class="ti ti-scale"></i><h2>Informations légales</h2></header>
                    <div class="clientsphere-profile-details">
                        <div><small>Raison sociale</small><strong>{{ client.nom }}</strong></div>
                        <div><small>Forme juridique</small><span>{{ client.formeJuridique ? client.formeJuridique.nom : '—' }}</span></div>
                        <div><small>SIRET</small><span class="font-monospace">{{ profile.siret ?: '—' }}</span></div>
                        <div><small>SIREN</small><span class="font-monospace">{{ profile.siren ?: '—' }}</span></div>
                        <div><small>Code NAF</small><span>{{ client.codeNaf ?: '—' }}</span></div>
                        <div><small>Catégorie commerciale</small><span>{{ client.categorie ? client.categorie.nom : '—' }}</span></div>
                        <div><small>N° TVA</small><span class="font-monospace">{{ profile.vatNumber ?: '—' }}</span></div>
                    </div>
                </section>

                <section class="clientsphere-profile-card">
                    <header><i class="ti ti-map"></i><h2>Coordonnées</h2></header>
                    <div class="clientsphere-profile-details">
                        <div class="is-full"><small>Adresse</small><span>{{ client.adresse ?: '—' }}</span></div>
                        <div><small>Code postal</small><span>{{ client.codePostal ?: '—' }}</span></div>
                        <div><small>Ville</small><span>{{ client.ville ?: '—' }}</span></div>
                        <div><small>Département</small><span>{{ client.departement ?: '—' }}</span></div>
                        <div><small>Pays</small><span>{{ client.pays ?: 'France' }}</span></div>
                        <div>
                            <small>Email</small>
                            {% if client.email %}<a href="mailto:{{ client.email }}"><i class="ti ti-mail"></i> {{ client.email }}</a>{% else %}<span>—</span>{% endif %}
                        </div>
                        <div>
                            <small>Téléphone</small>
                            {% if profile.telephone %}<a href="tel:{{ profile.telephone|replace({' ': ''}) }}" class="is-neutral"><i class="ti ti-phone"></i> {{ profile.telephone }}</a>{% else %}<span>—</span>{% endif %}
                        </div>
                        <div>
                            <small>Site web</small>
                            {% if profile.websiteHref %}<a href="{{ profile.websiteHref }}" target="_blank" rel="noopener noreferrer"><i class="ti ti-world-www"></i> {{ website_label }}</a>{% else %}<span>—</span>{% endif %}
                        </div>
                    </div>
                </section>

                <section class="clientsphere-profile-card clientsphere-profile-contacts-card">
                    <header>
                        <div><i class="ti ti-users"></i><h2>Contacts</h2><span>{{ profile.contactCount }}</span></div>
                        <button type="button" data-tab="contacts" data-action="commercial-client-profile#selectTab">Voir tous <i class="ti ti-arrow-right"></i></button>
                    </header>
                    {% include '@Commercial/commercial/client/_contacts.html.twig' with {compact: true} %}
                </section>
            </main>

            <aside class="clientsphere-profile-aside">
                <section class="clientsphere-profile-card clientsphere-profile-contact-card">
                    <header><i class="ti ti-star"></i><h2>Contact principal</h2></header>
                    {% if principal %}
                        {% set principal_image = principal.image|default('') %}
                        <div class="clientsphere-principal-body">
                            <div class="clientsphere-principal-heading">
                                <span class="clientsphere-contact-avatar is-large">
                                    {% if principal_image %}<img src="{{ principal_image starts with 'http' or principal_image starts with '/' ? principal_image : asset(principal_image) }}" alt="{{ principal.prenom }} {{ principal.nom }}">{% else %}{{ principal.prenom|first }}{{ principal.nom|first }}{% endif %}
                                    <i></i>
                                </span>
                                <div><strong>{{ principal.prenom }} {{ principal.nom }}</strong><small>{{ principal.fonction ?: 'Contact client' }}</small></div>
                            </div>
                            <div class="clientsphere-principal-links">
                                {% if principal.email %}<a href="mailto:{{ principal.email }}"><i class="ti ti-mail"></i><span>{{ principal.email }}</span></a>{% endif %}
                                {% if profile.contactPhones[principal.id] %}<a href="tel:{{ profile.contactPhones[principal.id]|replace({' ': ''}) }}"><i class="ti ti-phone"></i><span>{{ profile.contactPhones[principal.id] }}</span></a>{% endif %}
                                {% if principal.linkedin %}<a href="{{ principal.linkedin starts with 'http' ? principal.linkedin : 'https://' ~ principal.linkedin }}" target="_blank" rel="noopener noreferrer"><i class="ti ti-brand-linkedin"></i><span>{{ principal.linkedin }}</span></a>{% endif %}
                            </div>
                            <a href="{{ path('commercial_contact_edit', {clientId: client.id, id: principal.id}) }}" class="clientsphere-profile-soft-button"><i class="ti ti-eye"></i> Voir la fiche contact</a>
                        </div>
                    {% else %}
                        <div class="clientsphere-profile-empty"><i class="ti ti-user-question"></i><p>Aucun contact principal.</p><a href="{{ path('commercial_contact_new', {clientId: client.id}) }}" data-turbo-frame="frame_modal">Ajouter un contact</a></div>
                    {% endif %}
                </section>

                <section class="clientsphere-profile-card clientsphere-profile-notes-card">
                    <header><div><i class="ti ti-note"></i><h2>Notes commerciales</h2></div><a href="{{ path('commercial_client_edit', {id: client.id}) }}">Modifier</a></header>
                    <div>
                        {% if client.notesCommerciales %}<p>{{ client.notesCommerciales|nl2br }}</p>{% else %}<p class="is-empty">Aucune note commerciale enregistrée.</p>{% endif %}
                    </div>
                </section>

                <section class="clientsphere-profile-card clientsphere-profile-quick">
                    <header><i class="ti ti-bolt"></i><h2>Actions rapides</h2></header>
                    <div>
                        <a href="{{ path('commercial_contact_new', {clientId: client.id}) }}" data-turbo-frame="frame_modal"><i class="ti ti-user-plus is-violet"></i> Ajouter un contact</a>
                        <a href="{{ path('projet_new', {clientId: client.id}) }}"><i class="ti ti-git-branch is-teal"></i> Créer un projet</a>
                        <a href="{{ path('billing_document_new', {type: 'invoice', clientId: client.id}) }}"><i class="ti ti-file-invoice is-amber"></i> Créer une facture</a>
                    </div>
                </section>

                <section class="clientsphere-profile-card clientsphere-profile-activity">
                    <header><i class="ti ti-timeline"></i><h2>Activité récente</h2></header>
                    <div>
                        {% for item in profile.activity|slice(0, 3) %}
                            {% if item.route %}<a href="{{ path(item.route, item.routeParams) }}">{% else %}<span>{% endif %}
                                <i class="ti {{ item.icon }} is-{{ item.tone }}"></i>
                                <span><strong>{{ item.title }}</strong><small>{{ item.relativeDate }}</small></span>
                            {% if item.route %}</a>{% else %}</span>{% endif %}
                        {% else %}
                            <p>Aucune activité récente.</p>
                        {% endfor %}
                    </div>
                </section>
            </aside>
        </div>
    </div>

    <div data-pane="contacts" data-commercial-client-profile-target="pane" hidden>
        <section class="clientsphere-profile-card clientsphere-profile-tab-card">
            <header><i class="ti ti-users"></i><h2>Tous les contacts</h2><a href="{{ path('commercial_contact_new', {clientId: client.id}) }}" data-turbo-frame="frame_modal">Ajouter un contact</a></header>
            {% include '@Commercial/commercial/client/_contacts.html.twig' with {compact: false} %}
        </section>
    </div>

    <div data-pane="projects" data-commercial-client-profile-target="pane" hidden>
        <section class="clientsphere-profile-card clientsphere-profile-tab-card">
            <header><i class="ti ti-git-branch"></i><h2>Projets</h2><a href="{{ path('projet_new', {clientId: client.id}) }}">Créer un projet</a></header>
            <div class="clientsphere-profile-list">
                {% for project in profile.projects %}
                    <a href="{{ path('projet_show', {id: project.id}) }}"><span><strong>{{ project.titre }}</strong><small>{{ project.type }}</small></span><em>{{ project.statut }}</em><i class="ti ti-chevron-right link"></i></a>
                {% else %}<div class="clientsphere-profile-empty"><i class="ti ti-git-branch-deleted"></i><p>Aucun projet rattaché à ce client.</p></div>{% endfor %}
            </div>
        </section>
    </div>

    <div data-pane="billing" data-commercial-client-profile-target="pane" hidden>
        <section class="clientsphere-profile-card clientsphere-profile-tab-card">
            {% if can_view_financial %}<header><i class="ti ti-file-invoice"></i><h2>Facturation</h2><a href="{{ path('billing_document_new', {type: 'invoice', clientId: client.id}) }}">Créer une facture</a></header>
            <div class="clientsphere-profile-list">
                {% for invoice in profile.invoices %}
                    <a href="{{ path('billing_document_show', {idtoken: invoice.idtoken}) }}"><span><strong>{{ invoice.number ?: 'Facture en brouillon' }}</strong><small>{{ invoice.issueDate ? invoice.issueDate|date('d/m/Y') : 'Sans date' }}</small></span><em>{{ invoice.totalTtc|number_format(2, ',', ' ') }} € · {{ invoice_status_labels[invoice.status]|default(invoice.status) }}</em><i class="ti ti-chevron-right link"></i></a>
                {% else %}<div class="clientsphere-profile-empty"><i class="ti ti-file-off"></i><p>Aucune facture rattachée à ce client.</p></div>{% endfor %}
            </div>
            {% endif %}
        </section>
    </div>

    <div data-pane="history" data-commercial-client-profile-target="pane" hidden>
        <section class="clientsphere-profile-card clientsphere-profile-tab-card">
            <header><i class="ti ti-history"></i><h2>Historique</h2></header>
            <div class="clientsphere-profile-timeline">
                {% for item in profile.activity %}
                    <div><i class="ti {{ item.icon }} is-{{ item.tone }}"></i><span><strong>{{ item.title }}</strong><small>{{ item.date|date('d/m/Y à H:i') }} · {{ item.relativeDate }}</small></span></div>
                {% endfor %}
            </div>
        </section>
    </div>

    <div data-pane="notes" data-commercial-client-profile-target="pane" hidden>
        <section class="clientsphere-profile-card clientsphere-profile-tab-card clientsphere-profile-notes-pane">
            <header><i class="ti ti-note"></i><h2>Notes commerciales</h2><a href="{{ path('commercial_client_edit', {id: client.id}) }}">Modifier</a></header>
            <div><p>{{ client.notesCommerciales ? client.notesCommerciales|nl2br : 'Aucune note commerciale enregistrée.' }}</p></div>
        </section>
    </div>
</div>
{% endblock %}