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

{% block title %}Administration PayPal - AEF{% endblock %}

{% block body %}
<div class="container-fluid mt-4">
    <!-- En-tête -->
    <div class="card mb-4">
        <div class="card-header bg-info text-white">
            <div class="d-flex justify-content-between align-items-center">
                <h3 class="mb-0">
                    <i class="fab fa-paypal me-2"></i>
                    Administration PayPal
                </h3>
                <div>
                    <a href="{{ path('admin_dashboard') }}" class="btn btn-outline-light btn-sm me-2">
                        <i class="fas fa-arrow-left me-1"></i>Retour Dashboard
                    </a>
                    <a href="{{ path('admin_paypal_webhooks') }}" class="btn btn-outline-light btn-sm">
                        <i class="fas fa-webhook me-1"></i>Webhooks
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistiques -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card bg-success text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="card-title">{{ stats.total_payments }}</h4>
                            <p class="card-text">Paiements total</p>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-credit-card fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="card-title">{{ (stats.total_amount)|number_format(0, ',', ' ') }}€</h4>
                            <p class="card-text">Montant total</p>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-euro-sign fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-warning text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="card-title">{{ stats.pending_payments }}</h4>
                            <p class="card-text">En attente</p>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-clock fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-danger text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="card-title">{{ stats.failed_payments }}</h4>
                            <p class="card-text">Échoués</p>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-times-circle fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Revenus mensuels -->
    <div class="row mb-4">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-chart-line me-2"></i>
                        Évolution des revenus PayPal (12 derniers mois)
                    </h5>
                </div>
                <div class="card-body">
                    <canvas id="revenueChart" height="100"></canvas>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-chart-pie me-2"></i>
                        Répartition par statut
                    </h5>
                </div>
                <div class="card-body">
                    <canvas id="statusChart" height="200"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Filtres -->
    <div class="card mb-4">
        <div class="card-body">
            <form method="GET" class="row g-3">
                <div class="col-md-3">
                    <label class="form-label">Recherche</label>
                    <input type="text" class="form-control" name="search" value="{{ app.request.query.get('search') }}" placeholder="ID PayPal, email...">
                </div>
                <div class="col-md-2">
                    <label class="form-label">Statut</label>
                    <select class="form-select" name="status">
                        <option value="">Tous</option>
                        <option value="completed" {{ app.request.query.get('status') == 'completed' ? 'selected' : '' }}>Complété</option>
                        <option value="pending" {{ app.request.query.get('status') == 'pending' ? 'selected' : '' }}>En attente</option>
                        <option value="failed" {{ app.request.query.get('status') == 'failed' ? 'selected' : '' }}>Échoué</option>
                        <option value="cancelled" {{ app.request.query.get('status') == 'cancelled' ? 'selected' : '' }}>Annulé</option>
                        <option value="refunded" {{ app.request.query.get('status') == 'refunded' ? 'selected' : '' }}>Remboursé</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Montant min</label>
                    <input type="number" class="form-control" name="amount_min" value="{{ app.request.query.get('amount_min') }}" placeholder="0">
                </div>
                <div class="col-md-2">
                    <label class="form-label">Montant max</label>
                    <input type="number" class="form-control" name="amount_max" value="{{ app.request.query.get('amount_max') }}" placeholder="10000">
                </div>
                <div class="col-md-2">
                    <label class="form-label">Date début</label>
                    <input type="date" class="form-control" name="date_from" value="{{ app.request.query.get('date_from') }}">
                </div>
                <div class="col-md-1">
                    <label class="form-label">&nbsp;</label>
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Liste des paiements -->
    <div class="card">
        <div class="card-header">
            <div class="d-flex justify-content-between align-items-center">
                <h5 class="mb-0">
                    <i class="fas fa-list me-2"></i>
                    Paiements PayPal ({{ payments|length }})
                </h5>
                <div>
                    <button type="button" class="btn btn-outline-primary btn-sm" onclick="exportData()">
                        <i class="fas fa-download me-1"></i>Exporter
                    </button>
                    <button type="button" class="btn btn-outline-success btn-sm" onclick="refreshPayments()">
                        <i class="fas fa-sync me-1"></i>Actualiser
                    </button>
                </div>
            </div>
        </div>
        <div class="card-body">
            {% if payments|length > 0 %}
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>ID PayPal</th>
                                <th>Objet</th>
                                <th>Acheteur</th>
                                <th>Vendeur</th>
                                <th>Montant</th>
                                <th>Statut</th>
                                <th>Date</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for payment in payments %}
                                <tr>
                                    <td>
                                        <div class="font-monospace small">{{ payment.paypalPaymentId }}</div>
                                        {% if payment.paypalOrderId %}
                                            <div class="text-muted small">Commande: {{ payment.paypalOrderId }}</div>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if payment.item %}
                                            <div class="d-flex align-items-center">
                                                {% if payment.item.images|length > 0 %}
                                                    <img src="{{ payment.item.images[0].imagePath }}" alt="{{ payment.item.title }}" 
                                                         class="rounded me-2" style="width: 40px; height: 40px; object-fit: cover;">
                                                {% endif %}
                                                <div>
                                                    <div class="fw-bold">{{ payment.item.title }}</div>
                                                    <small class="text-muted">{{ payment.item.category.name ?? 'Non classé' }}</small>
                                                </div>
                                            </div>
                                        {% else %}
                                            <span class="text-muted">Objet supprimé</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <div class="fw-bold">{{ payment.buyerName }}</div>
                                        <small class="text-muted">{{ payment.buyerEmail }}</small>
                                    </td>
                                    <td>
                                        {% if payment.seller %}
                                            <div class="fw-bold">{{ payment.seller.fullName }}</div>
                                            <small class="text-muted">{{ payment.seller.email }}</small>
                                        {% else %}
                                            <span class="text-muted">Vendeur supprimé</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <div class="fw-bold">{{ payment.amount|number_format(2, ',', ' ') }}€</div>
                                        {% if payment.fee %}
                                            <small class="text-muted">Frais: {{ payment.fee|number_format(2, ',', ' ') }}€</small>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% set status_class = {
                                            'completed': 'bg-success',
                                            'pending': 'bg-warning',
                                            'failed': 'bg-danger',
                                            'cancelled': 'bg-secondary',
                                            'refunded': 'bg-info'
                                        } %}
                                        <span class="badge {{ status_class[payment.status] ?? 'bg-light text-dark' }}">
                                            {{ payment.status|trans }}
                                        </span>
                                        {% if payment.failureReason %}
                                            <div class="text-danger small mt-1">{{ payment.failureReason }}</div>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <div class="small">{{ payment.createdAt|date('d/m/Y H:i') }}</div>
                                        {% if payment.completedAt %}
                                            <div class="text-success small">Complété: {{ payment.completedAt|date('d/m/Y H:i') }}</div>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <div class="btn-group btn-group-sm">
                                            <button type="button" class="btn btn-outline-info" 
                                                    onclick="showPaymentDetails({{ payment.id }})" title="Détails">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                            {% if payment.status == 'pending' %}
                                                <button type="button" class="btn btn-outline-warning" 
                                                        onclick="checkPaymentStatus({{ payment.id }})" title="Vérifier statut">
                                                    <i class="fas fa-sync"></i>
                                                </button>
                                            {% endif %}
                                            {% if payment.status == 'completed' %}
                                                <button type="button" class="btn btn-outline-danger" 
                                                        onclick="initiateRefund({{ payment.id }})" title="Rembourser">
                                                    <i class="fas fa-undo"></i>
                                                </button>
                                            {% endif %}
                                            <a href="{{ path('admin_paypal_payment_export', {id: payment.id}) }}" 
                                               class="btn btn-outline-secondary" title="Exporter">
                                                <i class="fas fa-download"></i>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                {% if pagination %}
                    <nav class="mt-3">
                        {{ knp_pagination_render(pagination) }}
                    </nav>
                {% endif %}
            {% else %}
                <div class="text-center py-5">
                    <i class="fab fa-paypal fa-4x text-muted mb-3"></i>
                    <h5 class="text-muted">Aucun paiement PayPal trouvé</h5>
                    <p class="text-muted">Les paiements PayPal apparaîtront ici une fois effectués.</p>
                </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- Modal détails du paiement -->
<div class="modal fade" id="paymentDetailsModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Détails du paiement PayPal</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="paymentDetailsContent">
                <div class="text-center">
                    <div class="spinner-border" role="status"></div>
                    <p class="mt-2">Chargement des détails...</p>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Graphique des revenus
const revenueCtx = document.getElementById('revenueChart').getContext('2d');
const revenueChart = new Chart(revenueCtx, {
    type: 'line',
    data: {
        labels: {{ chart_data.months|json_encode|raw }},
        datasets: [{
            label: 'Revenus PayPal (€)',
            data: {{ chart_data.revenues|json_encode|raw }},
            borderColor: 'rgb(0, 123, 255)',
            backgroundColor: 'rgba(0, 123, 255, 0.1)',
            tension: 0.1
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                display: false
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    callback: function(value) {
                        return value + '€';
                    }
                }
            }
        }
    }
});

// Graphique des statuts
const statusCtx = document.getElementById('statusChart').getContext('2d');
const statusChart = new Chart(statusCtx, {
    type: 'doughnut',
    data: {
        labels: {{ chart_data.status_labels|json_encode|raw }},
        datasets: [{
            data: {{ chart_data.status_values|json_encode|raw }},
            backgroundColor: [
                '#28a745', // completed
                '#ffc107', // pending
                '#dc3545', // failed
                '#6c757d', // cancelled
                '#17a2b8'  // refunded
            ]
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false
    }
});

// Fonctions d'interaction
function showPaymentDetails(paymentId) {
    const modal = new bootstrap.Modal(document.getElementById('paymentDetailsModal'));
    modal.show();
    
    fetch(`{{ path('admin_paypal_payment_details', {id: '__ID__'}) }}`.replace('__ID__', paymentId))
        .then(response => response.text())
        .then(html => {
            document.getElementById('paymentDetailsContent').innerHTML = html;
        })
        .catch(error => {
            document.getElementById('paymentDetailsContent').innerHTML = 
                '<div class="alert alert-danger">Erreur lors du chargement des détails.</div>';
        });
}

function checkPaymentStatus(paymentId) {
    if (confirm('Vérifier le statut de ce paiement auprès de PayPal ?')) {
        fetch(`{{ path('admin_paypal_check_status', {id: '__ID__'}) }}`.replace('__ID__', paymentId), {
            method: 'POST',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('Erreur: ' + data.message);
            }
        });
    }
}

function initiateRefund(paymentId) {
    if (confirm('Êtes-vous sûr de vouloir rembourser ce paiement ? Cette action est irréversible.')) {
        const amount = prompt('Montant à rembourser (laissez vide pour un remboursement complet):');
        if (amount !== null) {
            fetch(`{{ path('admin_paypal_refund', {id: '__ID__'}) }}`.replace('__ID__', paymentId), {
                method: 'POST',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    amount: amount || null
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('Remboursement initié avec succès.');
                    location.reload();
                } else {
                    alert('Erreur: ' + data.message);
                }
            });
        }
    }
}

function exportData() {
    const params = new URLSearchParams(window.location.search);
    params.set('export', 'csv');
    window.location.href = '{{ path('admin_paypal_index') }}?' + params.toString();
}

function refreshPayments() {
    location.reload();
}
</script>
{% endblock %}