{% extends '@Compta/layout.html.twig' %}

{% block compta_title %}Dashboard financier{% endblock %}

{% block compta_content %}
  {% set d = dashboard %}
  <script src="{{ asset('vendor/matdash/libs/apexcharts/dist/apexcharts.min.js') }}" defer></script>

  <main
    class="financial-dashboard"
    data-controller="financial-dashboard"
    data-financial-dashboard-annual-value="{{ d.annualChart|json_encode|e('html_attr') }}"
    data-financial-dashboard-revenue-value="{{ d.revenueProjection|json_encode|e('html_attr') }}"
    data-financial-dashboard-treasury-value="{{ d.treasuryProjection|json_encode|e('html_attr') }}"
    data-financial-dashboard-expenses-value="{{ d.expenseBreakdown|json_encode|e('html_attr') }}"
  >
    <header class="financial-dashboard__header capsule-heading">
      <div>
        <h1 class="capsule-heading-title">{{ d.header.title }}</h1>
        <p class="capsule-heading-subtitle">{{ d.header.subtitle }}</p>
      </div>
      <div class="financial-dashboard__header-actions">
        <label class="visually-hidden" for="financial-year">Année</label>
        <select id="financial-year" data-action="change->financial-dashboard#changeYear">
          {% for yearOption in availableYears %}
            <option value="{{ yearOption }}" {{ yearOption == selectedYear ? 'selected' : '' }}>{{ yearOption }}</option>
          {% endfor %}
        </select>
        <a class="financial-dashboard__icon-button" href="{{ path('ecriturecomptable_index') }}" title="Voir les écritures">
          <i class="ti ti-bell"></i>
        </a>
      </div>
    </header>

    <nav class="financial-dashboard__toolbar" aria-label="Période du tableau de bord">
      <div class="financial-dashboard__periods">
        <a class="{{ selectedPeriod == 'month' ? 'is-active' : '' }}" href="{{ path('compta_dashboard_financier', {year: selectedYear, period: 'month'}) }}">Mois en cours</a>
        <a class="{{ selectedPeriod == 'year' ? 'is-active' : '' }}" href="{{ path('compta_dashboard_financier', {year: selectedYear, period: 'year'}) }}">Année</a>
        <a class="{{ selectedPeriod == 'previous_year' ? 'is-active' : '' }}" href="{{ path('compta_dashboard_financier', {year: selectedYear, period: 'previous_year'}) }}">Année précédente</a>
      </div>
      <div class="financial-dashboard__toolbar-actions">
        <span>Tous les comptes</span>
        <a href="{{ path('exportcomptable_index', {year: d.year}) }}" title="Exporter"><i class="ti ti-download"></i></a>
      </div>
    </nav>

    <section class="financial-dashboard__kpis" aria-label="Indicateurs principaux">
      {% set primaryMetrics = [
        {label: "Chiffre d'affaires facturé", value: d.topMetrics.billedRevenue, note: selectedPeriod == 'month' ? 'sur le mois courant' : 'sur la période sélectionnée', trend: d.topMetrics.trends.billedRevenue},
        {label: 'Montant encaissé', value: d.topMetrics.collectedAmount, note: selectedPeriod == 'month' ? 'encaissements du mois' : 'encaissements de la période', trend: d.topMetrics.trends.collectedAmount},
        {label: 'Dépenses totales', value: d.topMetrics.totalExpenses, note: 'hors salaires & charges', trend: d.topMetrics.trends.totalExpenses}
      ] %}
      {% for metric in primaryMetrics %}
        <article class="financial-card financial-kpi">
          <span class="financial-trend financial-trend--{{ metric.trend.tone }}">{{ metric.trend.label }}</span>
          <span class="financial-label">{{ metric.label }}</span>
          <strong>{{ metric.value|number_format(0, ',', ' ') }} €</strong>
          <small>{{ metric.note }}</small>
        </article>
      {% endfor %}
      <article class="financial-card financial-kpi financial-kpi--highlight bg-primary">
        <span class="financial-trend financial-trend--{{ d.topMetrics.trends.availableCash.tone }}">{{ d.topMetrics.trends.availableCash.label }}</span>
        <span class="financial-label">Argent disponible</span>
        <strong>{{ d.topMetrics.availableCash|number_format(0, ',', ' ') }} €</strong>
        <small>{{ d.topMetrics.availableCashNote }}</small>
      </article>
    </section>

    <section class="financial-dashboard__mini-kpis" aria-label="Ratios financiers">
      {% set miniMetrics = [
        {label: 'Taux de recouvrement', value: d.topMetrics.collectionRate|number_format(1, ',', ' ') ~ '%'},
        {label: 'Délai moyen paiement', value: d.topMetrics.averagePaymentDelay|number_format(0, ',', ' ') ~ ' jours'},
        {label: 'Marge nette', value: d.topMetrics.netMargin|number_format(1, ',', ' ') ~ '%'},
        {label: 'Factures impayées', value: d.topMetrics.unpaidInvoicesCount},
        {label: 'Projection fin année', value: d.topMetrics.projectionYearEnd|number_format(0, ',', ' ') ~ ' €'},
        {label: 'Salaire', value: d.topMetrics.salaryAmount|number_format(0, ',', ' ') ~ ' €'},
        {label: 'Résultat', value: d.topMetrics.operatingResult|number_format(0, ',', ' ') ~ ' €'}
      ] %}
      {% for metric in miniMetrics %}
        <article class="financial-card financial-mini-kpi">
          <span class="financial-label">{{ metric.label }}</span>
          <strong>{{ metric.value }}</strong>
        </article>
      {% endfor %}
    </section>

    <section class="financial-card financial-card--chart">
      <div class="financial-card__heading">
        <div>
          <h2>Vue financière annuelle</h2>
          <p>Évolution mensuelle du chiffre d’affaires, des dépenses et des salaires</p>
        </div>
      </div>
      <div class="financial-chart financial-chart--large" data-financial-dashboard-target="annualChart"></div>
    </section>

    <div class="financial-dashboard__two-columns">
      <section class="financial-card">
        <div class="financial-card__heading">
          <div><h2>Projection de revenus</h2><p>Prévision sur 6 mois</p></div>
          <a href="{{ path('billing_quote_index') }}">Détails <i class="ti ti-arrow-right"></i></a>
        </div>
        <div class="financial-chart" data-financial-dashboard-target="revenueChart"></div>
        <div class="financial-dashboard__three-stats">
          <div><strong>{{ d.revenueProjection.totalPotential|number_format(0, ',', ' ') }} €</strong><span>Revenu projeté</span></div>
          <div><strong>{{ d.revenueProjection.toCollect|number_format(0, ',', ' ') }} €</strong><span>À encaisser</span></div>
          <div><strong>{{ d.revenueProjection.growth is not null ? (d.revenueProjection.growth > 0 ? '+' : '') ~ d.revenueProjection.growth|number_format(1, ',', ' ') ~ '%' : 'n/a' }}</strong><span>Croissance projetée</span></div>
        </div>
      </section>

      <section class="financial-card">
        <div class="financial-card__heading">
          <div><h2>Projection de trésorerie</h2><p>Solde réel puis estimation jusqu’à la fin de l’année</p></div>
          <a href="{{ path('rapprochement_bancaire_index') }}">Détails <i class="ti ti-arrow-right"></i></a>
        </div>
        <div class="financial-chart" data-financial-dashboard-target="treasuryChart"></div>
        <div class="financial-dashboard__three-stats">
          <div><strong>{{ d.treasuryProjection.current|number_format(0, ',', ' ') }} €</strong><span>Disponible</span></div>
          <div><strong>{{ d.treasuryProjection.yearEndProjection|number_format(0, ',', ' ') }} €</strong><span>Fin d’année</span></div>
          <div><strong>{{ d.treasuryProjection.variation > 0 ? '+' : '' }}{{ d.treasuryProjection.variation|number_format(0, ',', ' ') }} €</strong><span>Variation</span></div>
        </div>
      </section>
    </div>

    <section class="financial-card">
      <div class="financial-card__heading">
        <div><h2>Créances et encaissements</h2><p>Suivi des paiements et du risque client</p></div>
        <a href="{{ path('billing_invoice_index') }}">Toutes les factures <i class="ti ti-arrow-right"></i></a>
      </div>
      <div class="financial-dashboard__receivables">
        <article class="is-danger"><span>En retard</span><strong>{{ d.receivables.overdueAmount|number_format(0, ',', ' ') }} €</strong><small>{{ d.receivables.overdueCount }} facture(s) de plus de 30 jours</small></article>
        <article class="is-warning"><span>À échéance proche</span><strong>{{ d.receivables.upcomingAmount|number_format(0, ',', ' ') }} €</strong><small>{{ d.receivables.upcomingCount }} facture(s) à surveiller</small></article>
        <article class="is-success"><span>Encaissements du mois</span><strong>{{ d.receivables.collectedMonthAmount|number_format(0, ',', ' ') }} €</strong><small>Paiements comptabilisés</small></article>
      </div>
      <div class="table-responsive">
        <table class="financial-table">
          <thead><tr><th>N° facture</th><th>Client</th><th>Émission</th><th>Échéance</th><th>Montant</th><th>Statut</th></tr></thead>
          <tbody>
          {% for row in d.receivables.rows %}
            <tr>
              <td><strong>{{ row.displayId }}</strong></td>
              <td>{{ row.clientName }}</td>
              <td>{{ row.dateFacturation ? row.dateFacturation|date('d/m/Y') : '—' }}</td>
              <td>{{ row.dateEcheance ? row.dateEcheance|date('d/m/Y') : '—' }}</td>
              <td><strong>{{ row.amount|number_format(0, ',', ' ') }} €</strong></td>
              <td><span class="financial-status financial-status--{{ row.statusTone }}">{{ row.statusLabel }}</span></td>
            </tr>
          {% else %}
            <tr><td colspan="6" class="financial-table__empty">Aucune créance pour cette période.</td></tr>
          {% endfor %}
          </tbody>
        </table>
      </div>
    </section>

    <div class="financial-dashboard__two-columns">
      <section class="financial-card">
        <div class="financial-card__heading"><div><h2>Répartition des dépenses</h2><p>Analyse par catégorie</p></div></div>
        <div class="financial-expense-layout">
          <div class="financial-chart financial-chart--donut" data-financial-dashboard-target="expenseChart"></div>
          <div class="financial-list">
            {% for item in d.expenseBreakdown %}
              <div class="financial-list__row">
                <span><i class="financial-dot" style="--dot-color: {{ item.color }}"></i>{{ item.label }}</span>
                <strong>{{ item.amount|number_format(0, ',', ' ') }} €</strong>
              </div>
            {% endfor %}
          </div>
        </div>
      </section>

      <div class="financial-dashboard__stack">
        <section class="financial-card">
          <div class="financial-card__heading"><div><h2>Salaires & charges</h2><p>Masse salariale de la période</p></div><span class="financial-dashboard__round-icon"><i class="ti ti-users"></i></span></div>
          <strong class="financial-card__total">{{ d.salary.total|number_format(0, ',', ' ') }} €</strong>
          <p class="financial-card__note">Moyenne des trois derniers mois : {{ d.salary.averageLastThreeMonths|number_format(0, ',', ' ') }} €</p>
          <div class="financial-dashboard__two-stats">
            <div><strong>{{ d.salary.base|number_format(0, ',', ' ') }} €</strong><span>Salaires de base</span></div>
            <div><strong>{{ d.salary.charges|number_format(0, ',', ' ') }} €</strong><span>Charges sociales</span></div>
          </div>
        </section>
        <section class="financial-card financial-card--highlight bg-primary">
          <div class="financial-card__heading"><div><h2>Résultat financier</h2><p>Synthèse de la période</p></div><span class="financial-dashboard__round-icon"><i class="ti ti-report-money"></i></span></div>
          <strong class="financial-card__total">{{ d.financialResult.value > 0 ? '+' : '' }}{{ d.financialResult.value|number_format(0, ',', ' ') }} €</strong>
          <p class="financial-card__note">{{ d.financialResult.growth is not null ? (d.financialResult.growth > 0 ? '+' : '') ~ d.financialResult.growth|number_format(1, ',', ' ') ~ '% vs période précédente' : 'Comparatif indisponible' }}</p>
          <div class="financial-dashboard__two-stats">
            <div><strong>{{ d.financialResult.netMargin|number_format(1, ',', ' ') }}%</strong><span class="text-white">Marge nette</span></div>
            <div><strong>{{ d.financialResult.profitability|number_format(1, ',', ' ') }}%</strong><span class="text-white">Rentabilité</span></div>
          </div>
        </section>
      </div>
    </div>

    <section class="financial-card">
      <div class="financial-card__heading">
        <div><h2>Alertes financières</h2><p>Points d’attention et recommandations</p></div>
        <span class="financial-status financial-status--danger">{{ d.alerts|length }} alertes actives</span>
      </div>
      <div class="financial-dashboard__alerts">
        {% for alert in d.alerts %}
          <article class="financial-alert financial-alert--{{ alert.tone }}">
            <span>{{ alert.tone == 'danger' ? 'Urgent' : (alert.tone == 'warning' ? 'Attention' : 'Information') }}</span>
            <h3>{{ alert.title }}</h3>
            <p>{{ alert.description }}</p>
            <a href="{{ path(alert.route) }}">{{ alert.button }}</a>
          </article>
        {% endfor %}
      </div>
    </section>

    <div class="financial-dashboard__two-columns">
      <section class="financial-card">
        <div class="financial-card__heading"><div><h2>Top clients</h2><p>Par chiffre d’affaires annuel</p></div><a href="{{ path('commercial_client_index') }}">Voir tout <i class="ti ti-arrow-right"></i></a></div>
        <div class="financial-list">
          {% for row in d.topClients %}
            <div class="financial-list__row financial-list__row--client">
              <span><i class="financial-avatar">{{ (row.client.nom|default('CL'))|slice(0, 2)|upper }}</i><span><strong>{{ row.client.nom|default('Client') }}</strong><small>{{ row.projectTitle }}</small></span></span>
              <span class="text-end"><strong>{{ row.revenue|number_format(0, ',', ' ') }} €</strong><small>{{ row.statusLabel }}</small></span>
            </div>
          {% else %}
            <p class="financial-empty">Aucun chiffre d’affaires client sur cette période.</p>
          {% endfor %}
        </div>
      </section>
      <section class="financial-card">
        <div class="financial-card__heading"><div><h2>Principales dépenses</h2><p>Sur la période sélectionnée</p></div><a href="{{ path('exportcomptable_index') }}">Voir tout <i class="ti ti-arrow-right"></i></a></div>
        <div class="financial-list">
          {% for item in d.mainExpenses %}
            <div class="financial-list__row financial-list__row--client">
              <span><i class="financial-expense-icon ti ti-{{ item.icon }}"></i><span><strong>{{ item.label }}</strong><small>{{ item.description }}</small></span></span>
              <strong>{{ item.amount|number_format(0, ',', ' ') }} €</strong>
            </div>
          {% endfor %}
        </div>
      </section>
    </div>

    <section class="financial-card">
      <div class="financial-card__heading"><div><h2>Actions rapides</h2><p>Accès direct aux fonctions principales</p></div></div>
      <div class="financial-dashboard__quick-actions">
        <a class="is-teal" href="{{ path('billing_document_new', {type: 'invoice'}) }}"><i class="ti ti-plus"></i><span>Nouvelle facture</span></a>
        <a class="is-navy" href="{{ path('rapprochement_paiement_client_index') }}"><i class="ti ti-cash"></i><span>Ajouter un paiement</span></a>
        <a class="is-orange" href="{{ path('exportcomptable_index') }}"><i class="ti ti-receipt"></i><span>Ajouter une dépense</span></a>
        <a class="is-red" href="{{ path('billing_invoice_index', {overdue: 1}) }}"><i class="ti ti-alert-circle"></i><span>Factures impayées</span></a>
        <a class="is-purple" href="{{ path('rapprochement_bancaire_index') }}"><i class="ti ti-building-bank"></i><span>Rapprochement</span></a>
        <a class="is-gray" href="{{ path('exportcomptable_index', {year: d.year}) }}"><i class="ti ti-file-export"></i><span>Exporter les données</span></a>
      </div>
    </section>
  </main>
{% endblock %}