{% extends 'admin/base_admin.html.twig' %}

{% block title %}{{ user.fullName ?: user.email }}{% endblock %}

{% block content %}
<div class="page-header">
    <h1 class="page-title">
        <div class="user-info">
            <div class="user-avatar user-avatar-lg">
                {{ user.initiales }}
            </div>
            <span>{{ user.fullName ?: user.email }}</span>
        </div>
    </h1>
    <p class="page-subtitle">
        Inscrit le {{ user.createdAt|date('d/m/Y') }}
        {% if 'ROLE_ADMIN' in user.roles %}
            <span class="admin-badge" style="margin-left: 12px;">Administrateur</span>
        {% endif %}
    </p>
</div>

<a href="{{ path('app_admin_users') }}" class="btn btn-secondary btn-sm mb-3">
    ← Retour aux utilisateurs
</a>

<div class="admin-grid-1-1">
    <!-- INFORMATIONS -->
    <div class="card">
        <div class="card-title">👤 Informations</div>
        
        <div class="detail-item">
            <div class="detail-label">Email</div>
            <div class="detail-value">
                <a href="mailto:{{ user.email }}" class="link">{{ user.email }}</a>
            </div>
        </div>
        <div class="detail-item">
            <div class="detail-label">Nom complet</div>
            <div class="detail-value">{{ user.fullName ?: 'Non renseigné' }}</div>
        </div>
        <div class="detail-item">
            <div class="detail-label">Téléphone</div>
            <div class="detail-value">{{ user.telephone ?: 'Non renseigné' }}</div>
        </div>
        <div class="detail-item">
            <div class="detail-label">Entreprise</div>
            <div class="detail-value">{{ user.entreprise ?: 'Non renseigné' }}</div>
        </div>
        <div class="detail-item">
            <div class="detail-label">Adresse</div>
            <div class="detail-value">{{ user.adresse ?: 'Non renseigné' }}</div>
        </div>

        {# ── Bouton SAV : modifier les infos personnelles du compte ── #}
        <div style="margin-top: 16px;">
            <a href="{{ path('app_admin_user_edit', {id: user.id}) }}"
               class="btn btn-primary btn-sm" style="width: 100%;">
                ✏️ Modifier les informations du compte
            </a>
        </div>
    </div>

    <!-- STATISTIQUES & ACTIONS -->
    <div>
        <div class="card">
            <div class="card-title">📊 Statistiques</div>
            
            <div class="detail-item">
                <div class="detail-label">Inscription</div>
                <div class="detail-value">{{ user.createdAt|date('d/m/Y à H:i') }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Dernière connexion</div>
                <div class="detail-value">{{ user.lastLoginAt ? user.lastLoginAt|date('d/m/Y à H:i') : 'Jamais' }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Email vérifié</div>
                <div class="detail-value">
                    {% if user.isVerified %}
                        <span class="text-success">✅ Oui</span>
                    {% else %}
                        <span class="text-error">❌ Non</span>
                    {% endif %}
                </div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Nombre de commandes</div>
                <div class="detail-value">{{ commandes|length }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Total dépensé</div>
                <div class="detail-value text-primary" style="font-size: 20px;">
                    {% set totalSpent = 0 %}
                    {% for commande in commandes %}
                        {% if commande.isPaid %}
                            {% set totalSpent = totalSpent + commande.totalTTC %}
                        {% endif %}
                    {% endfor %}
                    {{ totalSpent|number_format(2, ',', ' ') }} €
                </div>
            </div>
        </div>

        <!-- ACTIONS -->
        <div class="card">
            <div class="card-title">⚙️ Actions</div>

            <button onclick="document.getElementById('modal-email').style.display='flex'"
                    class="btn btn-secondary mb-2" style="width: 100%;">
                ✉️ Envoyer un email
            </button>

            {% if user.id != app.user.id %}
                {% if user.vendeurProfil is null %}
                    <a href="{{ path('admin_vendeur_attribuer', {userId: user.id}) }}"
                       class="btn btn-primary mt-2" style="width: 100%;">
                        🤝 Attribuer un statut 
                    </a>
                {% else %}
                    <a href="{{ path('admin_vendeur_modifier', {id: user.vendeurProfil.id}) }}"
                       class="btn btn-primary mt-2" style="width: 100%;">
                        ✏️ Modifier le statut 
                    </a>
                {% endif %}
            {% else %}
                <p class="text-muted mt-2" style="text-align: center;">
                    Vous ne pouvez pas modifier vos propres droits.
                </p>
            {% endif %}
        </div>
    </div>
</div>

{% if user.vendeurProfil is not null %}
{% set profil = user.vendeurProfil %}
<div class="card mt-3">
    <div class="card-title">🤝 Statut Vendeur / Partenaire</div>
    <div class="admin-grid-1-1" style="margin-bottom: 16px;">
        <div>
            <div class="detail-item">
                <div class="detail-label">Statut</div>
                <div class="detail-value">
                    <span class="status-badge status-completed">{{ profil.statutLabel }}</span>
                </div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Code promo</div>
                <div class="detail-value">
                    {% if profil.codePromo %}
                        <span style="font-family:monospace;font-size:18px;font-weight:700;background:#f0f4ff;padding:4px 12px;border-radius:8px;color:#1971c2;letter-spacing:.05em;">
                            {{ profil.codePromo }}
                        </span>
                    {% else %}
                        <span class="text-muted">Aucun (client gratuit)</span>
                    {% endif %}
                </div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Taux commission</div>
                <div class="detail-value text-primary" style="font-size:18px;font-weight:700;">{{ profil.tauxCommission }}%</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">État</div>
                <div class="detail-value">
                    {% if profil.actif %}<span class="text-success">✅ Actif</span>{% else %}<span class="text-error">❌ Inactif</span>{% endif %}
                </div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Attribué le</div>
                <div class="detail-value text-muted">{{ profil.createdAt|date('d/m/Y') }}</div>
            </div>
            {% if profil.notesAdmin %}
            <div class="detail-item">
                <div class="detail-label">Notes internes</div>
                <div class="detail-value text-muted" style="font-size:13px;">{{ profil.notesAdmin }}</div>
            </div>
            {% endif %}
        </div>
        <div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;">
                <div style="background:#f5f5f7;border-radius:10px;padding:14px;text-align:center;">
                    <div style="font-size:24px;font-weight:700;color:#1971c2;">{{ profil.nbVentes }}</div>
                    <div style="font-size:12px;color:#86868b;">Ventes réalisées</div>
                </div>
                <div style="background:#f5f5f7;border-radius:10px;padding:14px;text-align:center;">
                    <div style="font-size:18px;font-weight:700;color:#e67700;">{{ profil.montantCommissionsNonFacturees|number_format(2, ',', ' ') }} €</div>
                    <div style="font-size:12px;color:#86868b;">Commission en attente</div>
                </div>
            </div>
            <a href="{{ path('admin_vendeur_show', {id: profil.id}) }}" class="btn btn-secondary btn-sm mb-2" style="width:100%;">
                📊 Voir ventes & factures
            </a>
            {% if profil.isVendeur %}
            <div style="background:#f0f4ff;border-radius:10px;padding:14px;margin-top:8px;">
                <div style="font-size:13px;font-weight:600;color:#1971c2;margin-bottom:10px;">📄 Générer la facture du mois</div>
                <form method="post" action="{{ path('admin_vendeur_facture_generer', {id: profil.id}) }}">
                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px;">
                        <select name="mois" style="padding:8px;border:1px solid #ddd;border-radius:8px;font-size:13px;">
                            {% for m in 1..12 %}
                            <option value="{{ m }}">{{ ("2024-#{m}-01")|date("MMMM") }}</option>
                            {% endfor %}
                        </select>
                        <select name="annee" style="padding:8px;border:1px solid #ddd;border-radius:8px;font-size:13px;">
                            {% for y in (("now"|date("Y") - 1).."now"|date("Y")) %}
                            <option value="{{ y }}" {{ y == "now"|date("Y") ? 'selected' : '' }}>{{ y }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary btn-sm" style="width:100%;">➕ Générer la facture</button>
                </form>
            </div>
            {% endif %}
        </div>
    </div>
    {% if profil.factures|length > 0 %}
    <div class="table-container">
        <table class="admin-table">
            <thead><tr><th>Référence</th><th>Période</th><th class="text-right">Montant HT</th><th>Statut</th><th></th></tr></thead>
            <tbody>
                {% for facture in profil.factures|slice(0, 5) %}
                <tr>
                    <td><strong style="font-family:monospace;">{{ facture.reference }}</strong></td>
                    <td class="text-muted">{{ facture.periodeDebut|date('F Y') }}</td>
                    <td class="text-right"><strong>{{ facture.montantTotalHT|number_format(2, ',', ' ') }} €</strong></td>
                    <td>
                        {% if facture.regle %}<span class="status-badge status-completed">✅ Réglé</span>
                        {% else %}<span class="status-badge status-processing">⏳ À régler</span>{% endif %}
                    </td>
                    <td>
                        {% if not facture.regle %}
                        <form method="post" action="{{ path('admin_vendeur_facture_regler', {id: facture.id}) }}"
                              onsubmit="return confirm('Marquer comme réglée ?')">
                            <button type="submit" class="btn btn-secondary btn-sm">✔ Réglée</button>
                        </form>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% endif %}
</div>
{% endif %}

<!-- COMMANDES DE L'UTILISATEUR -->
<div class="card mt-3">
    <div class="card-title">📦 Commandes de cet utilisateur</div>
    
    {% if commandes is empty %}
        <div class="empty-state">
            <div class="empty-state-icon">📭</div>
            <div class="empty-state-title">Aucune commande</div>
            <p>Cet utilisateur n'a pas encore passé de commande.</p>
        </div>
    {% else %}
        <div class="table-container">
            <table class="admin-table">
                <thead>
                    <tr>
                        <th>Référence</th>
                        <th>Date</th>
                        <th>Pack</th>
                        <th class="text-center">Cartes</th>
                        <th class="text-right">Montant TTC</th>
                        <th>Statut</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    {% for commande in commandes %}
                    <tr>
                        <td><strong>{{ commande.reference }}</strong></td>
                        <td class="text-muted">{{ commande.createdAt|date('d/m/Y H:i') }}</td>
                        <td>{{ commande.packLabel }}</td>
                        <td class="text-center">{{ commande.beneficiaires|length }}</td>
                        <td class="text-right"><strong>{{ commande.totalTTC|number_format(2, ',', ' ') }} €</strong></td>
                        <td>
                            <span class="status-badge status-{{ commande.status }}">{{ commande.statusLabel }}</span>
                        </td>
                        <td class="text-right">
                            <a href="{{ path('app_admin_commande_show', {id: commande.id}) }}" class="btn btn-secondary btn-sm">
                                Gérer
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% endif %}
</div>

{# ══════════════════════════════════════════════════════════════════════
   SAV — CARTES DES BÉNÉFICIAIRES (modification admin gratuite)
══════════════════════════════════════════════════════════════════════ #}
{% set hasBeneficiaires = false %}
{% for commande in commandes %}
    {% if commande.beneficiaires|length > 0 %}
        {% set hasBeneficiaires = true %}
    {% endif %}
{% endfor %}

{# ══════════════════════════════════════════════════════════════════════
   HISTORIQUE DES EMAILS ENVOYÉS
══════════════════════════════════════════════════════════════════════ #}
{% if emailLogs is not empty %}
<div class="card mt-3">
    <div class="card-title">
        📬 Historique des emails envoyés
        <span style="font-size:12px;font-weight:400;color:#86868b;margin-left:8px;">
            Corps conservé 12 mois — log conservé 36 mois (RGPD)
        </span>
    </div>
    <div class="table-container">
        <table class="admin-table">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Sujet</th>
                    <th>Envoyé par</th>
                    <th>Statut</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                {% for log in emailLogs %}
                <tr>
                    <td class="text-muted">{{ log.sentAt|date('d/m/Y à H:i') }}</td>
                    <td><strong>{{ log.sujet }}</strong></td>
                    <td>{{ log.senderName }}</td>
                    <td>
                        {% if log.status == 'sent' %}
                            <span class="status-badge status-completed">✅ Envoyé</span>
                        {% else %}
                            <span class="status-badge status-cancelled">❌ Échoué</span>
                        {% endif %}
                    </td>
                    <td>
                        {% if log.bodyPurged %}
                            <span style="font-size:12px;color:#aaa;font-style:italic;">Corps purgé (RGPD)</span>
                        {% elseif log.corps %}
                            <button onclick="toggleEmailBody({{ log.id }})"
                                    style="background:none;border:none;color:#667eea;cursor:pointer;font-size:12px;font-weight:600;">
                                👁 Voir le message
                            </button>
                            <div id="email-body-{{ log.id }}"
                                 style="display:none;margin-top:10px;padding:12px;background:#f8f9ff;border-radius:8px;font-size:13px;white-space:pre-wrap;border:1px solid #e0e7ff;">{{ log.corps }}</div>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endif %}

{# ══════════════════════════════════════════════════════════════════════
   MODALE — ENVOI EMAIL INTERNE
══════════════════════════════════════════════════════════════════════ #}
<div id="modal-email" style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:1000; align-items:center; justify-content:center; padding:16px;">
    <div style="background:#fff; border-radius:16px; padding:32px; max-width:560px; width:100%; box-shadow:0 20px 60px rgba(0,0,0,0.2); position:relative;">

        <button onclick="document.getElementById('modal-email').style.display='none'"
                style="position:absolute; top:16px; right:16px; background:none; border:none; font-size:20px; cursor:pointer; color:#888; line-height:1;">✕</button>

        <h2 style="margin:0 0 6px; font-size:18px; font-weight:700; color:#1a1a1a;">✉️ Envoyer un email</h2>
        <p style="margin:0 0 24px; font-size:13px; color:#888;">
            À : <strong>{{ user.fullName ?: user.email }}</strong> — <span style="color:#667eea;">{{ user.email }}</span><br>
            De : <strong>noreply@num-ecard.com</strong>
        </p>

        <form method="POST" action="{{ path('app_admin_user_send_email', {id: user.id}) }}" enctype="multipart/form-data">
            <input type="hidden" name="_token" value="{{ csrf_token('send_email_' ~ user.id) }}">

            <div style="margin-bottom:16px;">
                <label style="display:block; font-size:13px; font-weight:600; color:#333; margin-bottom:6px;">Sujet *</label>
                <input type="text" name="sujet" required
                       placeholder="Ex: Votre compte NUM-ECARD"
                       style="width:100%; padding:10px 14px; border:1px solid #ddd; border-radius:10px; font-size:14px; box-sizing:border-box; outline:none;"
                       onfocus="this.style.borderColor='#667eea'" onblur="this.style.borderColor='#ddd'">
            </div>

            <div style="margin-bottom:16px;">
                <label style="display:block; font-size:13px; font-weight:600; color:#333; margin-bottom:6px;">Message *</label>
                <textarea name="corps" required rows="6"
                          placeholder="Bonjour,&#10;&#10;Votre message ici..."
                          style="width:100%; padding:10px 14px; border:1px solid #ddd; border-radius:10px; font-size:14px; box-sizing:border-box; resize:vertical; outline:none; font-family:inherit;"
                          onfocus="this.style.borderColor='#667eea'" onblur="this.style.borderColor='#ddd'"></textarea>
                <p style="font-size:11px; color:#aaa; margin:4px 0 0;">L'objet sera préfixé automatiquement de "[NUM-ECARD]".</p>
            </div>

            <div style="margin-bottom:20px;">
                <label style="display:block; font-size:13px; font-weight:600; color:#333; margin-bottom:6px;">
                    📎 Pièce jointe <span style="font-weight:400;color:#aaa;">(facultatif — PDF, image, Word — max 5 Mo)</span>
                </label>
                <div id="dropzone"
                     style="border:2px dashed #ddd; border-radius:10px; padding:16px 20px; text-align:center; cursor:pointer; transition:border-color .2s;"
                     ondragover="event.preventDefault();this.style.borderColor='#667eea'"
                     ondragleave="this.style.borderColor='#ddd'"
                     ondrop="handleDrop(event)"
                     onclick="document.getElementById('attachment').click()">
                    <div id="dropzone-label" style="font-size:13px;color:#888;">
                        Glisser-déposer ou <span style="color:#667eea;font-weight:600;">parcourir</span>
                    </div>
                </div>
                <input type="file" id="attachment" name="attachment"
                       accept=".pdf,.doc,.docx,.xls,.xlsx,.png,.jpg,.jpeg,.gif,.webp,.zip"
                       style="display:none;"
                       onchange="updateDropzoneLabel(this)">
            </div>

            <div style="display:flex; gap:10px; justify-content:flex-end;">
                <button type="button"
                        onclick="document.getElementById('modal-email').style.display='none'"
                        style="padding:10px 20px; border:1px solid #ddd; background:#f5f5f7; border-radius:10px; font-size:14px; cursor:pointer; font-weight:500;">
                    Annuler
                </button>
                <button type="submit"
                        style="padding:10px 24px; background:linear-gradient(135deg,#667eea,#764ba2); color:#fff; border:none; border-radius:10px; font-size:14px; cursor:pointer; font-weight:600;">
                    📨 Envoyer
                </button>
            </div>
        </form>
    </div>
</div>

<script>
document.getElementById('modal-email').addEventListener('click', function(e) {
    if (e.target === this) this.style.display = 'none';
});
function toggleEmailBody(id) {
    var el = document.getElementById('email-body-' + id);
    el.style.display = el.style.display === 'none' ? 'block' : 'none';
}
function updateDropzoneLabel(input) {
    var label = document.getElementById('dropzone-label');
    if (input.files && input.files[0]) {
        var file = input.files[0];
        var size = (file.size / 1024 / 1024).toFixed(2);
        label.innerHTML = '📎 <strong>' + file.name + '</strong> (' + size + ' Mo) — <span style="color:#dc2626;cursor:pointer;" onclick="clearFile()">Supprimer</span>';
        document.getElementById('dropzone').style.borderColor = '#667eea';
        document.getElementById('dropzone').style.background = '#f0f4ff';
    }
}
function handleDrop(event) {
    event.preventDefault();
    var input = document.getElementById('attachment');
    input.files = event.dataTransfer.files;
    updateDropzoneLabel(input);
    document.getElementById('dropzone').style.borderColor = '#ddd';
}
function clearFile() {
    document.getElementById('attachment').value = '';
    document.getElementById('dropzone-label').innerHTML = 'Glisser-déposer ou <span style="color:#667eea;font-weight:600;">parcourir</span>';
    document.getElementById('dropzone').style.borderColor = '#ddd';
    document.getElementById('dropzone').style.background = 'transparent';
}
</script>

{# ══════════════════════════════════════════════════════════════════════
   SAV — CARTES DES BÉNÉFICIAIRES (modification admin gratuite)
══════════════════════════════════════════════════════════════════════ #}
{% set hasBeneficiaires = false %}
{% for commande in commandes %}
    {% if commande.beneficiaires|length > 0 %}
        {% set hasBeneficiaires = true %}
    {% endif %}
{% endfor %}

{% if hasBeneficiaires %}
<div class="card mt-3">
    <div class="card-title">
        🃏 Cartes numériques
        <span style="font-size: 12px; font-weight: 400; color: #86868b; margin-left: 8px;">
            SAV — modification gratuite admin, sans impacter le quota du client
        </span>
    </div>

    {% for commande in commandes %}
        {% if commande.beneficiaires|length > 0 %}
        <div style="margin-bottom: 24px;">

            {# En-tête de la commande #}
            <div style="display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: #f5f5f7; border-radius: 10px; margin-bottom: 12px;">
                <div>
                    <strong>{{ commande.reference }}</strong>
                    <span style="margin-left: 10px; font-size: 13px; color: #86868b;">{{ commande.packLabel }}</span>
                </div>
                <div style="display: flex; align-items: center; gap: 10px;">
                    <span class="status-badge status-{{ commande.status }}">{{ commande.statusLabel }}</span>
                    <a href="{{ path('app_admin_commande_show', {id: commande.id}) }}"
                       style="font-size: 12px; color: #1971c2; text-decoration: none;">
                        Voir la commande →
                    </a>
                </div>
            </div>

            {# Liste des bénéficiaires avec bouton modifier #}
            <div class="table-container">
                <table class="admin-table">
                    <thead>
                        <tr>
                            <th>Bénéficiaire</th>
                            <th>Fonction</th>
                            <th>Email carte</th>
                            <th class="text-center">Modifications</th>
                            <th class="text-center">Statut carte</th>
                            <th class="text-center">SAV</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for benef in commande.beneficiaires %}
                        <tr>
                            <td>
                                <strong>{{ benef.fullName }}</strong>
                                {% if benef.entreprise %}
                                    <div style="font-size: 12px; color: #86868b;">{{ benef.entreprise }}</div>
                                {% endif %}
                            </td>
                            <td class="text-muted">{{ benef.fonction ?: '—' }}</td>
                            <td class="text-muted">{{ benef.email ?: '—' }}</td>
                            <td class="text-center">
                                {% if benef.modificationCount == 0 %}
                                    <span style="color: #2f9e44; font-size: 13px; font-weight: 600;">
                                        1 gratuite disponible
                                    </span>
                                {% else %}
                                    <span style="color: #e67700; font-size: 13px;">
                                        {{ benef.modificationCount }} effectuée(s)
                                    </span>
                                {% endif %}
                            </td>
                            <td class="text-center">
                                {% if benef.isNeedsRegeneration %}
                                    <span style="color: #e67700; font-size: 12px; font-weight: 600;">⏳ À générer</span>
                                {% else %}
                                    <span style="color: #2f9e44; font-size: 12px;">✅ À jour</span>
                                {% endif %}
                            </td>
                            <td class="text-center">
                                <a href="{{ path('app_card_edit', {id: benef.id}) }}"
                                   class="btn btn-primary btn-sm"
                                   title="Modifier la carte de {{ benef.fullName }} (SAV - gratuit, sans impacter le quota)">
                                    ✏️ Modifier
                                </a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
        {% endif %}
    {% endfor %}
</div>
{% endif %}

{% endblock %}