{% extends 'base.html.twig' %}

{% block title %}Détails Échec de Paiement #{{ payment_failure.id }} - Admin{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        .failure-status {
            padding: 0.5rem 1rem;
            border-radius: 0.375rem;
            font-weight: 600;
            display: inline-block;
        }
        .status-pending { background-color: #fef3c7; color: #92400e; }
        .status-retrying { background-color: #dbeafe; color: #1e40af; }
        .status-in_grace { background-color: #fed7d7; color: #c53030; }
        .status-suspended { background-color: #e2e8f0; color: #4a5568; }
        .status-resolved { background-color: #d1fae5; color: #047857; }
        .status-cancelled { background-color: #f3e8ff; color: #7c3aed; }
        
        .detail-card {
            background: white;
            border: 1px solid #e5e7eb;
            border-radius: 0.5rem;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }
        
        .detail-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1.5rem;
        }
        
        .detail-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.75rem 0;
            border-bottom: 1px solid #f3f4f6;
        }
        
        .detail-item:last-child {
            border-bottom: none;
        }
        
        .detail-label {
            font-weight: 600;
            color: #374151;
        }
        
        .detail-value {
            color: #6b7280;
            text-align: right;
        }
        
        .timeline {
            position: relative;
            padding-left: 2rem;
        }
        
        .timeline::before {
            content: '';
            position: absolute;
            left: 0.5rem;
            top: 0;
            bottom: 0;
            width: 2px;
            background: #e5e7eb;
        }
        
        .timeline-item {
            position: relative;
            margin-bottom: 1.5rem;
        }
        
        .timeline-item::before {
            content: '';
            position: absolute;
            left: -1.5rem;
            top: 0.5rem;
            width: 0.75rem;
            height: 0.75rem;
            border-radius: 50%;
            background: #3b82f6;
            border: 2px solid white;
            box-shadow: 0 0 0 2px #3b82f6;
        }
        
        .timeline-item.danger::before {
            background: #ef4444;
            box-shadow: 0 0 0 2px #ef4444;
        }
        
        .timeline-item.success::before {
            background: #10b981;
            box-shadow: 0 0 0 2px #10b981;
        }
        
        .timeline-item.warning::before {
            background: #f59e0b;
            box-shadow: 0 0 0 2px #f59e0b;
        }
        
        .btn {
            padding: 0.5rem 1rem;
            border-radius: 0.375rem;
            border: none;
            cursor: pointer;
            font-weight: 500;
            text-decoration: none;
            display: inline-block;
            margin: 0.25rem;
        }
        
        .btn-primary {
            background-color: #3b82f6;
            color: white;
        }
        
        .btn-success {
            background-color: #10b981;
            color: white;
        }
        
        .btn-secondary {
            background-color: #6b7280;
            color: white;
        }
        
        .btn-danger {
            background-color: #ef4444;
            color: white;
        }
        
        .alert {
            padding: 1rem;
            border-radius: 0.375rem;
            margin-bottom: 1rem;
        }
        
        .alert-warning {
            background-color: #fef3c7;
            color: #92400e;
            border: 1px solid #fcd34d;
        }
        
        .alert-danger {
            background-color: #fee2e2;
            color: #dc2626;
            border: 1px solid #fca5a5;
        }
        
        .alert-success {
            background-color: #d1fae5;
            color: #047857;
            border: 1px solid #a7f3d0;
        }
        
        .badge {
            padding: 0.25rem 0.5rem;
            border-radius: 0.25rem;
            font-size: 0.75rem;
            font-weight: 600;
        }
        
        .badge-danger {
            background-color: #fee2e2;
            color: #dc2626;
        }
        
        .badge-warning {
            background-color: #fef3c7;
            color: #92400e;
        }
        
        .badge-success {
            background-color: #d1fae5;
            color: #047857;
        }
    </style>
{% endblock %}

{% block body %}
<div class="container mx-auto px-4 py-8">
    <!-- En-tête -->
    <div class="flex justify-between items-center mb-6">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">
                Échec de Paiement #{{ payment_failure.id }}
            </h1>
            <p class="text-gray-600 mt-2">
                Membre : <strong>{{ payment_failure.member.email }}</strong>
            </p>
        </div>
        <div>
            <a href="{{ path('admin_payment_failures_index') }}" class="btn btn-secondary">
                ← Retour à la liste
            </a>
            {% if payment_failure.status not in ['resolved', 'cancelled'] %}
            <button onclick="resolveFailure({{ payment_failure.id }})" class="btn btn-success">
                Résoudre
            </button>
            {% endif %}
        </div>
    </div>

    <!-- Alertes contextuelles -->
    {% if payment_failure.status == 'in_grace' and payment_failure.graceRemainingDays <= 2 %}
    <div class="alert alert-danger">
        <strong>⚠️ Attention !</strong> 
        La période de grâce expire dans {{ payment_failure.graceRemainingDays }} jour(s).
        Le compte sera suspendu automatiquement si le problème n'est pas résolu.
    </div>
    {% elseif payment_failure.status == 'suspended' %}
    <div class="alert alert-danger">
        <strong>🚫 Compte Suspendu</strong> 
        Ce compte a été suspendu suite à l'expiration de la période de grâce.
    </div>
    {% elseif payment_failure.status == 'resolved' %}
    <div class="alert alert-success">
        <strong>✅ Résolu</strong> 
        Cet échec de paiement a été résolu le {{ payment_failure.resolvedAt|date('d/m/Y à H:i') }}.
    </div>
    {% endif %}

    <div class="detail-grid">
        <!-- Informations Générales -->
        <div class="detail-card">
            <h2 class="text-xl font-semibold mb-4">Informations Générales</h2>
            
            <div class="detail-item">
                <span class="detail-label">Statut</span>
                <span class="detail-value">
                    <span class="failure-status status-{{ payment_failure.status }}">
                        {{ payment_failure.status|trans }}
                    </span>
                </span>
            </div>
            
            <div class="detail-item">
                <span class="detail-label">Date de l'échec</span>
                <span class="detail-value">{{ payment_failure.failureDate|date('d/m/Y à H:i') }}</span>
            </div>
            
            <div class="detail-item">
                <span class="detail-label">Raison</span>
                <span class="detail-value">
                    <span class="badge badge-{{ payment_failure.failureReason in ['insufficient_funds', 'card_declined'] ? 'danger' : 'warning' }}">
                        {{ payment_failure.failureReason|trans }}
                    </span>
                </span>
            </div>
            
            <div class="detail-item">
                <span class="detail-label">Nombre de tentatives</span>
                <span class="detail-value">
                    <strong>{{ payment_failure.attemptCount }}</strong>
                    {% if payment_failure.attemptCount >= 5 %}
                        <span class="badge badge-danger">Critique</span>
                    {% elseif payment_failure.attemptCount >= 3 %}
                        <span class="badge badge-warning">Élevé</span>
                    {% endif %}
                </span>
            </div>
            
            {% if payment_failure.nextRetryDate %}
            <div class="detail-item">
                <span class="detail-label">Prochaine tentative</span>
                <span class="detail-value">{{ payment_failure.nextRetryDate|date('d/m/Y à H:i') }}</span>
            </div>
            {% endif %}
        </div>

        <!-- Informations Membre -->
        <div class="detail-card">
            <h2 class="text-xl font-semibold mb-4">Informations Membre</h2>
            
            <div class="detail-item">
                <span class="detail-label">Email</span>
                <span class="detail-value">
                    <a href="{{ path('admin_member_show', {id: payment_failure.member.id}) }}" 
                       class="text-blue-600 hover:underline">
                        {{ payment_failure.member.email }}
                    </a>
                </span>
            </div>
            
            <div class="detail-item">
                <span class="detail-label">Nom</span>
                <span class="detail-value">
                    {{ payment_failure.member.firstName ?? 'N/A' }} {{ payment_failure.member.lastName ?? 'N/A' }}
                </span>
            </div>
            
            <div class="detail-item">
                <span class="detail-label">Plan actuel</span>
                <span class="detail-value">
                    {% if payment_failure.member.subscriptionPlan %}
                        <span class="badge badge-{{ payment_failure.member.subscriptionPlan.name == 'PREMIUM' ? 'success' : 'warning' }}">
                            {{ payment_failure.member.subscriptionPlan.name }}
                        </span>
                    {% else %}
                        <span class="text-gray-500">Non défini</span>
                    {% endif %}
                </span>
            </div>
            
            <div class="detail-item">
                <span class="detail-label">Statut membre</span>
                <span class="detail-value">
                    <span class="badge badge-{{ payment_failure.member.status == 'active' ? 'success' : 'danger' }}">
                        {{ payment_failure.member.status|trans }}
                    </span>
                </span>
            </div>
        </div>
    </div>

    <!-- Période de Grâce -->
    {% if payment_failure.status == 'in_grace' or payment_failure.graceEndDate %}
    <div class="detail-card">
        <h2 class="text-xl font-semibold mb-4">Période de Grâce</h2>
        
        <div class="detail-grid">
            <div class="detail-item">
                <span class="detail-label">Date de début</span>
                <span class="detail-value">{{ payment_failure.graceStartDate|date('d/m/Y à H:i') }}</span>
            </div>
            
            <div class="detail-item">
                <span class="detail-label">Date de fin</span>
                <span class="detail-value">{{ payment_failure.graceEndDate|date('d/m/Y à H:i') }}</span>
            </div>
            
            <div class="detail-item">
                <span class="detail-label">Jours restants</span>
                <span class="detail-value">
                    {% set remaining = payment_failure.graceRemainingDays %}
                    <strong class="{% if remaining <= 2 %}text-red-600{% elseif remaining <= 7 %}text-orange-500{% else %}text-green-600{% endif %}">
                        {{ remaining }} jour{{ remaining > 1 ? 's' : '' }}
                    </strong>
                </span>
            </div>
            
            <div class="detail-item">
                <span class="detail-label">Objets masqués</span>
                <span class="detail-value">
                    {% if payment_failure.itemsMasked %}
                        <span class="text-red-600">✓ Oui</span>
                    {% else %}
                        <span class="text-gray-500">Non</span>
                    {% endif %}
                </span>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Informations Stripe -->
    {% if payment_failure.stripeInvoiceId or payment_failure.stripeCustomerId %}
    <div class="detail-card">
        <h2 class="text-xl font-semibold mb-4">Informations Stripe</h2>
        
        {% if payment_failure.stripeInvoiceId %}
        <div class="detail-item">
            <span class="detail-label">ID Facture Stripe</span>
            <span class="detail-value">
                <code>{{ payment_failure.stripeInvoiceId }}</code>
            </span>
        </div>
        {% endif %}
        
        {% if payment_failure.stripeCustomerId %}
        <div class="detail-item">
            <span class="detail-label">ID Client Stripe</span>
            <span class="detail-value">
                <code>{{ payment_failure.stripeCustomerId }}</code>
            </span>
        </div>
        {% endif %}
        
        {% if payment_failure.stripeErrorCode %}
        <div class="detail-item">
            <span class="detail-label">Code erreur Stripe</span>
            <span class="detail-value">
                <code class="text-red-600">{{ payment_failure.stripeErrorCode }}</code>
            </span>
        </div>
        {% endif %}
    </div>
    {% endif %}

    <!-- Timeline des Actions -->
    <div class="detail-card">
        <h2 class="text-xl font-semibold mb-4">Chronologie</h2>
        
        <div class="timeline">
            <div class="timeline-item danger">
                <div class="font-semibold">Échec de paiement initial</div>
                <div class="text-sm text-gray-600">{{ payment_failure.failureDate|date('d/m/Y à H:i') }}</div>
                <div class="text-sm text-gray-500">Raison : {{ payment_failure.failureReason|trans }}</div>
            </div>
            
            {% if payment_failure.attemptCount > 1 %}
            <div class="timeline-item warning">
                <div class="font-semibold">Tentatives de relance</div>
                <div class="text-sm text-gray-600">{{ payment_failure.attemptCount - 1 }} tentative(s) effectuée(s)</div>
            </div>
            {% endif %}
            
            {% if payment_failure.status == 'in_grace' %}
            <div class="timeline-item warning">
                <div class="font-semibold">Période de grâce démarrée</div>
                <div class="text-sm text-gray-600">{{ payment_failure.graceStartDate|date('d/m/Y à H:i') }}</div>
                <div class="text-sm text-gray-500">Fin prévue : {{ payment_failure.graceEndDate|date('d/m/Y à H:i') }}</div>
            </div>
            {% endif %}
            
            {% if payment_failure.itemsMasked %}
            <div class="timeline-item warning">
                <div class="font-semibold">Objets masqués</div>
                <div class="text-sm text-gray-600">Les objets du membre ont été masqués</div>
            </div>
            {% endif %}
            
            {% if payment_failure.status == 'suspended' %}
            <div class="timeline-item danger">
                <div class="font-semibold">Compte suspendu</div>
                <div class="text-sm text-gray-600">Suite à l'expiration de la période de grâce</div>
            </div>
            {% endif %}
            
            {% if payment_failure.status == 'resolved' %}
            <div class="timeline-item success">
                <div class="font-semibold">Problème résolu</div>
                <div class="text-sm text-gray-600">{{ payment_failure.resolvedAt|date('d/m/Y à H:i') }}</div>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- Actions Administrateur -->
    {% if payment_failure.status not in ['resolved', 'cancelled'] %}
    <div class="detail-card">
        <h2 class="text-xl font-semibold mb-4">Actions Administrateur</h2>
        
        <div class="flex flex-wrap gap-2">
            <button onclick="resolveFailure({{ payment_failure.id }})" class="btn btn-success">
                ✅ Résoudre l'échec
            </button>
            
            <a href="{{ path('admin_member_show', {id: payment_failure.member.id}) }}" class="btn btn-primary">
                👤 Voir le profil membre
            </a>
            
            {% if payment_failure.subscription %}
            <a href="{{ path('admin_subscription_show', {id: payment_failure.subscription.id}) }}" class="btn btn-primary">
                �� Voir l'abonnement
            </a>
            {% endif %}
        </div>
    </div>
    {% endif %}
</div>

<script>
function resolveFailure(failureId) {
    if (confirm('Êtes-vous sûr de vouloir résoudre cet échec de paiement ?')) {
        fetch(`{{ path('admin_payment_failures_resolve', {id: '__ID__'}) }}`.replace('__ID__', failureId), {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Échec de paiement résolu avec succès !');
                location.reload();
            } else {
                alert('Erreur : ' + data.message);
            }
        })
        .catch(error => {
            alert('Erreur de communication avec le serveur');
        });
    }
}
</script>
{% endblock %}