{% extends '@App/partials/base.html.twig' %}

{% block title %}Dashboard mécène{% endblock %}

{% block styles %}
  {{ parent() }}
  <style>
    .mecene-card{background:#fff;border:1px solid #e5e7eb;border-radius:14px}
    .kpi-value{font-size:40px;font-weight:800;line-height:1}
    .status-pill{padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700}
    .status-success{background:#dcfce7;color:#15803d}
    .status-info{background:#dbeafe;color:#1d4ed8}
    .status-warning{background:#ffedd5;color:#c2410c}
    .status-neutral{background:#f3f4f6;color:#374151}
    .engagement-row{border:1px solid #e5e7eb;border-radius:10px;padding:16px 18px}
    .mini-title{font-size:14px;color:#6b7280}
    .impact-box{background:#f8fafc;border:1px solid #e5e7eb;border-radius:10px;padding:18px}
  </style>
{% endblock %}

{% block content %}
<div class="body-wrapper">
  <div class="container-fluid py-4">
<div data-controller="mecene-dashboard">

  <div class="mecene-card p-4 mb-4">
    <div class="d-flex align-items-start justify-content-between flex-wrap gap-3">
      <div>
        <h1 class="fw-bold mb-1">Bonjour {{ app.user.prenom }}</h1>
        <div class="text-muted">Voici un aperçu de vos engagements de mécénat et sponsoring</div>
      </div>
      <span class="status-pill status-success">Tout est conforme</span>
    </div>
  </div>

  <div class="row g-3 mb-4">
    <div class="col-12 col-md-6 col-xl-3">
      <div class="mecene-card p-3">
        <div class="mini-title">Montant total engagé</div>
        <div class="kpi-value mt-2">{{ data.kpis.montant_total|default(0)|separate_thousands }} €</div>
      </div>
    </div>
    <div class="col-12 col-md-6 col-xl-3">
      <div class="mecene-card p-3">
        <div class="mini-title">Projets soutenus</div>
        <div class="kpi-value mt-2">{{ data.kpis.projets|default(0) }}</div>
      </div>
    </div>
    <div class="col-12 col-md-6 col-xl-3">
      <div class="mecene-card p-3">
        <div class="mini-title">Organisations</div>
        <div class="kpi-value mt-2">{{ data.kpis.organisations|default(0) }}</div>
      </div>
    </div>
    <div class="col-12 col-md-6 col-xl-3">
      <div class="mecene-card p-3">
        <div class="mini-title">Documents</div>
        <div class="kpi-value mt-2 text-success">{{ data.documents.total|default(0) }}</div>
      </div>
    </div>
  </div>

  <div class="row g-3 mb-4">
    <div class="col-xl-8">
      <div class="mecene-card p-3 h-100">
        <div class="d-flex justify-content-between align-items-center mb-3">
          <h4 class="fw-bold mb-0">Mes engagements</h4>
          <a href="{{ path('portailclient_app') }}" class="text-success fw-semibold text-decoration-none">Voir tous</a>
        </div>
        <div class="d-grid gap-3">
          {% for engagement in data.engagements %}
            <div class="engagement-row">
              <div class="d-flex justify-content-between gap-3 flex-wrap">
                <div>
                  <div class="fw-bold fs-5">{{ engagement.titre }}
                    <span class="status-pill {{ engagement.type == 'Mécénat' ? 'status-success' : 'status-info' }}">{{ engagement.type }}</span>
                  </div>
                  <div class="text-muted mb-2">{{ engagement.organisation }}</div>
                  <div class="small text-muted">{{ engagement.periode }}</div>
                </div>
                <div class="text-end">
                  <div class="fw-bold fs-8">{{ engagement.montant|separate_thousands }} €</div>
                  <div class="small text-muted">{{ engagement.statut }}</div>
                </div>
              </div>
            </div>
          {% else %}
            <div class="text-muted p-3">Aucun engagement actif.</div>
          {% endfor %}
        </div>
      </div>
    </div>
    <div class="col-xl-4">
      <div class="mecene-card p-3 h-100">
        <div class="d-flex justify-content-between align-items-center mb-3">
          <h4 class="fw-bold mb-0">Mes documents</h4>
          <button class="btn btn-success btn-sm" data-action="click->mecene-dashboard#downloadAll">Télécharger tout</button>
        </div>

        <div class="d-grid gap-2">
          <div class="p-3 rounded border" style="background:#f0fdf4; border-color:#bbf7d0 !important;">
            <div class="d-flex justify-content-between"><strong>Reçus fiscaux</strong><span class="status-pill status-success">{{ data.documents.recus|default(0) }}</span></div>
            <a href="{{ path('portailclient_app') }}" class="text-success text-decoration-none" data-mecene-dashboard-target="downloadLink">Télécharger les reçus</a>
          </div>
          <div class="p-3 rounded border" style="background:#eff6ff; border-color:#bfdbfe !important;">
            <div class="d-flex justify-content-between"><strong>Factures</strong><span class="status-pill status-info">{{ data.documents.factures|default(0) }}</span></div>
            <a href="{{ path('portailclient_app') }}" class="text-primary text-decoration-none" data-mecene-dashboard-target="downloadLink">Télécharger les factures</a>
          </div>
          <div class="p-3 rounded border">
            <div class="d-flex justify-content-between"><strong>Conventions</strong><span class="status-pill status-neutral">{{ data.documents.conventions|default(0) }}</span></div>
            <a href="{{ path('portailclient_app') }}" class="text-dark text-decoration-none" data-mecene-dashboard-target="downloadLink">Voir les conventions</a>
          </div>
          <div class="p-3 rounded border" style="background:#ecfdf3; border-color:#bbf7d0 !important;">
            <strong class="text-success">Conformité assurée</strong>
            <div class="small text-success">Tous vos documents sont disponibles et conformes.</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row g-3 mb-4">
    <div class="col-xl-6">
      <div class="mecene-card p-3 h-100">
        <h4 class="fw-bold mb-3">Votre impact</h4>
        <div class="impact-box mb-3 text-center">
          <div class="fw-bold fs-8">{{ data.impact.projects|default(0) }} projets soutenus</div>
        </div>
        <div class="row g-2">
          <div class="col-6"><div class="impact-box text-center"><div class="fw-bold fs-7 text-success">{{ data.impact.mecenatAmount|default(0)|separate_thousands }} €</div><div class="small text-muted">Mécénat</div></div></div>
          <div class="col-6"><div class="impact-box text-center"><div class="fw-bold fs-7 text-primary">{{ data.impact.sponsoringAmount|default(0)|separate_thousands }} €</div><div class="small text-muted">Parrainage</div></div></div>
        </div>
      </div>
    </div>
    <div class="col-xl-6">
      <div class="mecene-card p-3 h-100">
        <div class="d-flex justify-content-between align-items-center mb-3">
          <h4 class="fw-bold mb-0">Contreparties parrainant</h4>
          <span class="small text-muted">Suivi automatique</span>
        </div>
        <div class="d-grid gap-2">
          {% for item in data.contreparties %}
            <div class="engagement-row">
              <div class="d-flex justify-content-between align-items-start gap-2">
                <div>
                  <div class="fw-semibold">{{ item.nom }}</div>
                  <div class="small text-muted">{{ item.projet }}</div>
                  <div class="small text-muted">{{ item.date }}</div>
                </div>
                {% set badgeClass = item.statut == 'livré' ? 'status-success' : (item.statut == 'en cours' ? 'status-info' : 'status-warning') %}
                <span class="status-pill {{ badgeClass }}">{{ item.statut|capitalize }}</span>
              </div>
            </div>
          {% else %}
            <div class="text-muted">Aucune contrepartie enregistrée.</div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>

  <div class="mecene-card p-3">
    <div class="d-flex justify-content-between align-items-center mb-3">
      <h4 class="fw-bold mb-0">Activité récente</h4>
      <a href="{{ path('portailclient_app') }}" class="text-success fw-semibold text-decoration-none">Voir tout</a>
    </div>
    <div class="row g-2">
      {% for act in data.activites %}
        <div class="col-md-4">
          <div class="engagement-row h-100">
            <div class="fw-semibold">{{ act.titre }}</div>
            <div class="small text-muted">{{ act.projet }}</div>
            <div class="small text-muted">{{ act.date }}</div>
          </div>
        </div>
      {% else %}
        <div class="col-12 text-muted">Aucune activité récente.</div>
      {% endfor %}
    </div>
  </div>
</div>
 </div>
</div>
{% endblock %}