{% extends 'account/base_account.html.twig' %}

{% block title %}Mon compte{% endblock %}

{% block content %}
<div class="page-header">
    <h1 class="page-title">👋 Bienvenue , {{ user.nom ?? user.nom }} {{ user.prenom ?? user.prenom }} </h1>
    <p class="page-subtitle">Votre espace personnel NUM-ECARD</p>
</div>

<!-- STATISTIQUES -->
<div class="stats-grid">
    <div class="stat-card highlight">
        <div class="stat-icon">💰</div>
        <div class="stat-value">{{ stats.total_depense|number_format(2, ',', ' ') }} €</div>
        <div class="stat-label">Total dépensé</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon">📦</div>
        <div class="stat-value">{{ stats.total_commandes }}</div>
        <div class="stat-label">Commandes totales</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon">✅</div>
        <div class="stat-value">{{ stats.commandes_payees }}</div>
        <div class="stat-label">Commandes payées</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon">⏳</div>
        <div class="stat-value">{{ stats.commandes_en_cours }}</div>
        <div class="stat-label">En cours</div>
    </div>
</div>

<!-- BOUTON PARTAGER MA CARTE (desktop uniquement) -->
{% set has_paid_cards = false %}
{% for commande in app.user.commandes %}
    {% if commande.isPaid %}{% set has_paid_cards = true %}{% endif %}
{% endfor %}

{% if has_paid_cards %}
<div class="desktop-share-btn-wrap">
    <button onclick="document.getElementById('qrModal').classList.add('open')" class="btn btn-primary">
        📲 Partager ma carte
    </button>
</div>
{% endif %}

<!-- MES CARTES & HÉBERGEMENT -->
{% if beneficiaires is not empty %}
<div class="card" style="margin-top:1.5rem">
    <div class="card-title">🃏 Mes cartes &amp; hébergement</div>
    {% for b in beneficiaires %}
    <div style="display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid #f0f0f0">
        <div>
            <strong>{{ b.prenom }} {{ b.nom }}</strong>
            {% if b.packType is defined and b.packType %}
            <span style="font-size:12px;color:#86868b;margin-left:8px;background:#f5f5f7;padding:2px 8px;border-radius:10px">{{ b.packType }}</span>
            {% endif %}
            {% if b.isActive is defined %}
            {% if b.isActive %}
            <span style="font-size:11px;color:#1a7a42;background:#e8f8ee;padding:2px 8px;border-radius:10px;margin-left:6px">✅ Active</span>
            {% else %}
            <span style="font-size:11px;color:#991b1b;background:#fee2e2;padding:2px 8px;border-radius:10px;margin-left:6px">⚠️ Expirée</span>
            {% endif %}
            {% endif %}
        </div>
        <a href="{{ path('app_hebergement_show', {id: b.id}) }}" class="btn btn-secondary btn-sm">
            🏠 Hébergement
        </a>
    </div>
    {% endfor %}
</div>
{% endif %}

<!-- DERNIÈRES COMMANDES -->
<div class="card" style="margin-top:1.5rem">
    <div class="card-title flex justify-between items-center">
        <span>🆕 Mes dernières commandes</span>
        <a href="{{ path('app_account_commandes') }}" class="btn btn-secondary btn-sm">Voir tout</a>
    </div>

    {% if commandes is empty %}
    <p class="text-muted" style="text-align: center; padding: 40px;">Vous n'avez pas encore de commande.</p>
    {% else %}
    <div class="table-responsive">
        <table class="data-table">
            <thead>
                <tr>
                    <th>Référence</th>
                    <th>Pack</th>
                    <th>Montant</th>
                    <th>Statut</th>
                    <th>Date</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                {% for commande in commandes %}
                <tr>
                    <td>
                        <a href="{{ path('app_account_commande_show', {id: commande.id}) }}" class="action-link">
                            <strong class="text-primary">{{ commande.reference }}</strong>
                        </a>
                    </td>
                    <td>{{ commande.packType|capitalize }}</td>
                    <td><strong>{{ commande.totalTTC|number_format(2, ',', ' ') }} €</strong></td>
                    <td>
                        {% if commande.status == 'paid' %}
                        <span class="badge badge-success">Payée</span>
                        {% elseif commande.status == 'pending' %}
                        <span class="badge badge-warning">En attente</span>
                        {% elseif commande.status == 'processing' %}
                        <span class="badge badge-info">En cours</span>
                        {% elseif commande.status == 'completed' %}
                        <span class="badge badge-success">Terminée</span>
                        {% elseif commande.status == 'cancelled' %}
                        <span class="badge badge-danger">Annulée</span>
                        {% else %}
                        <span class="badge">{{ commande.status }}</span>
                        {% endif %}
                    </td>
                    <td><span class="local-datetime" data-utc="{{ commande.createdAt|date('Y-m-d\\TH:i:s') }}Z">{{ commande.createdAt|date('d/m/Y H:i') }}</span></td>
                    <td>
                        <a href="{{ path('app_account_commande_show', {id: commande.id}) }}" class="action-link">
                            Voir →
                        </a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% endif %}
</div>

{# ── MODALE QR CODE (desktop) ── #}
{% if has_paid_cards %}
<div id="qrModal" class="qr-modal-overlay" onclick="if(event.target===this)this.classList.remove('open')">
    <div class="qr-modal">
        <div class="qr-modal__header">
            <span class="qr-modal__title">📲 Partager ma carte</span>
            <button class="qr-modal__close" onclick="document.getElementById('qrModal').classList.remove('open')">✕</button>
        </div>
        <div class="qr-modal__body">
            {% for commande in app.user.commandes %}
                {% if commande.isPaid %}
                    {% for beneficiaire in commande.beneficiaires %}
                        {% set slug = (beneficiaire.prenom ~ '-' ~ beneficiaire.nom)|lower|replace({' ': '-', 'é': 'e', 'è': 'e', 'ê': 'e', 'à': 'a', 'â': 'a', 'ô': 'o', 'û': 'u', 'ù': 'u', 'î': 'i', 'ï': 'i', 'ç': 'c'}) %}
                        {% set carteUrl = 'https://' ~ slug ~ '.num-ecard.com' %}
                        <div class="qr-modal__card">
                            <p class="qr-modal__name">
                                {{ beneficiaire.prenom }} {{ beneficiaire.nom }}
                                <span class="qr-modal__pack">— {{ commande.packType }}</span>
                            </p>
                            <div id="qr-desktop-{{ beneficiaire.id }}" class="qr-modal__qr"></div>
                            <p class="qr-modal__url">{{ carteUrl }}</p>
                            <div class="qr-modal__actions">
                                <a href="{{ carteUrl }}" target="_blank" rel="noopener noreferrer" class="btn btn-secondary btn-sm">
                                    🔗 Ouvrir
                                </a>
                                <button onclick="if(navigator.share){navigator.share({title:'{{ beneficiaire.prenom }} {{ beneficiaire.nom }}',url:'{{ carteUrl }}'})}else{navigator.clipboard.writeText('{{ carteUrl }}');alert('Lien copié !')}"
                                        class="btn btn-primary btn-sm">
                                    📤 Partager
                                </button>
                            </div>
                        </div>
                        <script>
                        document.addEventListener('DOMContentLoaded', function() {
                            if (typeof QRCode !== 'undefined') {
                                new QRCode(document.getElementById('qr-desktop-{{ beneficiaire.id }}'), {
                                    text: '{{ carteUrl }}',
                                    width: 160, height: 160,
                                    colorDark: '#1a1a1a',
                                    colorLight: '#ffffff',
                                    correctLevel: QRCode.CorrectLevel.M
                                });
                            }
                        });
                        </script>
                    {% endfor %}
                {% endif %}
            {% endfor %}
        </div>
    </div>
</div>
{% endif %}

<style>
/* Bouton partager — desktop uniquement */
.desktop-share-btn-wrap {
    display: none;
    margin-top: 1.5rem;
}
@media (min-width: 769px) {
    .desktop-share-btn-wrap { display: block; }
}

/* Modale overlay */
.qr-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 500;
    align-items: center;
    justify-content: center;
}
.qr-modal-overlay.open {
    display: flex;
}

/* Modale boîte */
.qr-modal {
    background: #fff;
    border-radius: 20px;
    width: 100%;
    max-width: 520px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 60px rgba(0,0,0,0.2);
}

.qr-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid #f0f0f0;
}

.qr-modal__title {
    font-size: 17px;
    font-weight: 700;
    color: #1d1d1f;
}

.qr-modal__close {
    background: #f5f5f7;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 14px;
    cursor: pointer;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
}
.qr-modal__close:hover { background: #e8e8ed; }

.qr-modal__body {
    overflow-y: auto;
    padding: 16px 24px 24px;
}

.qr-modal__card {
    text-align: center;
    padding: 20px 0;
    border-bottom: 1px solid #f5f5f5;
}
.qr-modal__card:last-child { border-bottom: none; }

.qr-modal__name {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 16px;
}
.qr-modal__pack {
    font-size: 12px;
    font-weight: 400;
    color: #999;
}

.qr-modal__qr {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.qr-modal__url {
    font-size: 12px;
    color: #86868b;
    word-break: break-all;
    margin: 0 0 14px;
}

.qr-modal__actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}
</style>
{% endblock %}