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

{% block title %}{{ member.fullName }} - Détail Membre - Admin{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        .member-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 10px;
            padding: 2rem;
            margin-bottom: 2rem;
        }
        .info-card {
            border: 1px solid #dee2e6;
            border-radius: 8px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            background: white;
        }
        .info-card h5 {
            color: #495057;
            border-bottom: 2px solid #e9ecef;
            padding-bottom: 0.5rem;
            margin-bottom: 1rem;
        }
        .stat-item {
            display: flex;
            justify-content: space-between;
            padding: 0.5rem 0;
            border-bottom: 1px solid #f8f9fa;
        }
        .stat-item:last-child {
            border-bottom: none;
        }
        .status-badge {
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.875rem;
            font-weight: 500;
        }
        .status-active { background: #d4edda; color: #155724; }
        .status-suspended { background: #f8d7da; color: #721c24; }
        .status-pending { background: #fff3cd; color: #856404; }
        .plan-badge {
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.875rem;
            font-weight: 500;
        }
        .plan-premium { background: #ffd700; color: #333; }
        .plan-free { background: #e9ecef; color: #495057; }
        .timeline {
            position: relative;
            padding-left: 2rem;
        }
        .timeline::before {
            content: '';
            position: absolute;
            left: 0.75rem;
            top: 0;
            bottom: 0;
            width: 2px;
            background: #dee2e6;
        }
        .timeline-item {
            position: relative;
            margin-bottom: 1.5rem;
            background: white;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            padding: 1rem;
        }
        .timeline-item::before {
            content: '';
            position: absolute;
            left: -1.25rem;
            top: 1rem;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #007bff;
            border: 2px solid white;
        }
        .timeline-item.critical::before { background: #dc3545; }
        .timeline-item.warning::before { background: #ffc107; }
        .timeline-item.info::before { background: #17a2b8; }
        .action-buttons {
            position: sticky;
            top: 20px;
            z-index: 100;
        }
        .quick-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
            margin-bottom: 2rem;
        }
        .quick-stat {
            background: white;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            padding: 1rem;
            text-align: center;
        }
        .quick-stat h4 {
            margin: 0;
            color: #007bff;
            font-size: 1.5rem;
        }
        .quick-stat p {
            margin: 0.5rem 0 0 0;
            color: #6c757d;
            font-size: 0.875rem;
        }
    </style>
{% endblock %}

{% block body %}
<div class="container-fluid py-4">
    <div class="row">
        <!-- Informations principales -->
        <div class="col-lg-8">
            <!-- En-tête membre -->
            <div class="member-header">
                <div class="row align-items-center">
                    <div class="col-md-8">
                        <h1><i class="fas fa-user"></i> {{ member.fullName }}</h1>
                        <p class="mb-2"><i class="fas fa-envelope"></i> {{ member.email }}</p>
                        {% if member.companyName %}
                            <p class="mb-2"><i class="fas fa-building"></i> {{ member.companyName }}</p>
                        {% endif %}
                        {% if member.phone %}
                            <p class="mb-0"><i class="fas fa-phone"></i> {{ member.phone }}</p>
                        {% endif %}
                    </div>
                    <div class="col-md-4 text-end">
                        <div class="mb-2">
                            <span class="status-badge status-{{ member.status.value }}">
                                {{ member.status.value|title }}
                            </span>
                        </div>
                        <div>
                            <span class="plan-badge plan-{{ member.subscriptionPlan.value }}">
                                {{ member.subscriptionPlan.value|title }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Statistiques rapides -->
            <div class="quick-stats">
                <div class="quick-stat">
                    <h4>{{ history.stats.account_age_days }}</h4>
                    <p>Jours d'ancienneté</p>
                </div>
                <div class="quick-stat">
                    <h4>{{ history.stats.total_subscriptions }}</h4>
                    <p>Abonnements</p>
                </div>
                <div class="quick-stat">
                    <h4>{{ history.stats.total_items }}</h4>
                    <p>Objets créés</p>
                </div>
                <div class="quick-stat">
                    <h4>{{ history.stats.total_revenue }}€</h4>
                    <p>Revenus générés</p>
                </div>
                <div class="quick-stat">
                    <h4>{{ history.stats.total_payment_failures }}</h4>
                    <p>Échecs paiement</p>
                </div>
            </div>

            <!-- Onglets de contenu -->
            <ul class="nav nav-tabs" id="memberTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="subscriptions-tab" data-bs-toggle="tab" 
                            data-bs-target="#subscriptions" type="button" role="tab">
                        <i class="fas fa-credit-card"></i> Abonnements ({{ history.subscriptions|length }})
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="trials-tab" data-bs-toggle="tab" 
                            data-bs-target="#trials" type="button" role="tab">
                        <i class="fas fa-clock"></i> Essais ({{ history.trials|length }})
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="failures-tab" data-bs-toggle="tab" 
                            data-bs-target="#failures" type="button" role="tab">
                        <i class="fas fa-exclamation-triangle"></i> Échecs ({{ history.payment_failures|length }})
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="audit-tab" data-bs-toggle="tab" 
                            data-bs-target="#audit" type="button" role="tab">
                        <i class="fas fa-history"></i> Audit ({{ history.audit_logs|length }})
                    </button>
                </li>
            </ul>

            <div class="tab-content" id="memberTabsContent">
                <!-- Onglet Abonnements -->
                <div class="tab-pane fade show active" id="subscriptions" role="tabpanel">
                    <div class="info-card">
                        <h5><i class="fas fa-credit-card"></i> Historique des Abonnements</h5>
                        {% if history.subscriptions is empty %}
                            <p class="text-muted">Aucun abonnement trouvé.</p>
                        {% else %}
                            {% for subscription in history.subscriptions %}
                                <div class="timeline-item">
                                    <div class="d-flex justify-content-between align-items-start">
                                        <div>
                                            <h6>{{ subscription.plan.value|title }} - {{ subscription.billingCycle.value|title }}</h6>
                                            <p class="text-muted mb-1">
                                                Créé le {{ subscription.createdAt|date('d/m/Y H:i') }}
                                            </p>
                                            {% if subscription.stripeSubscriptionId %}
                                                <small class="text-info">Stripe ID: {{ subscription.stripeSubscriptionId }}</small>
                                            {% endif %}
                                        </div>
                                        <div class="text-end">
                                            <span class="badge bg-{{ subscription.status == 'active' ? 'success' : 'secondary' }}">
                                                {{ subscription.status|title }}
                                            </span>
                                            {% if subscription.amount %}
                                                <div class="text-muted">{{ (subscription.amount / 100)|number_format(2) }}€</div>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                        {% endif %}
                    </div>
                </div>

                <!-- Onglet Essais -->
                <div class="tab-pane fade" id="trials" role="tabpanel">
                    <div class="info-card">
                        <h5><i class="fas fa-clock"></i> Périodes d'Essai</h5>
                        {% if history.trials is empty %}
                            <p class="text-muted">Aucune période d'essai trouvée.</p>
                        {% else %}
                            {% for trial in history.trials %}
                                <div class="timeline-item">
                                    <div class="d-flex justify-content-between align-items-start">
                                        <div>
                                            <h6>Essai {{ trial.plan.value|title }}</h6>
                                            <p class="text-muted mb-1">
                                                Du {{ trial.startDate|date('d/m/Y') }} au {{ trial.endDate|date('d/m/Y') }}
                                            </p>
                                            <small class="text-info">
                                                Durée: {{ trial.startDate.diff(trial.endDate).days }} jours
                                            </small>
                                        </div>
                                        <div class="text-end">
                                            <span class="badge bg-{{ trial.status == 'converted' ? 'success' : (trial.status == 'expired' ? 'danger' : 'warning') }}">
                                                {{ trial.status|title }}
                                            </span>
                                            {% if trial.convertedAt %}
                                                <div class="text-success small">
                                                    Converti le {{ trial.convertedAt|date('d/m/Y') }}
                                                </div>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                        {% endif %}
                    </div>
                </div>

                <!-- Onglet Échecs de Paiement -->
                <div class="tab-pane fade" id="failures" role="tabpanel">
                    <div class="info-card">
                        <h5><i class="fas fa-exclamation-triangle"></i> Échecs de Paiement</h5>
                        {% if history.payment_failures is empty %}
                            <p class="text-muted">Aucun échec de paiement.</p>
                        {% else %}
                            {% for failure in history.payment_failures %}
                                <div class="timeline-item {{ failure.status == 'suspended' ? 'critical' : 'warning' }}">
                                    <div class="d-flex justify-content-between align-items-start">
                                        <div>
                                            <h6>Échec #{{ failure.attemptCount }}</h6>
                                            <p class="text-muted mb-1">
                                                {{ failure.failureDate|date('d/m/Y H:i') }}
                                            </p>
                                            {% if failure.errorMessage %}
                                                <small class="text-danger">{{ failure.errorMessage }}</small>
                                            {% endif %}
                                        </div>
                                        <div class="text-end">
                                            <span class="badge bg-{{ failure.status == 'resolved' ? 'success' : 'danger' }}">
                                                {{ failure.status|title }}
                                            </span>
                                            {% if failure.nextRetryAt %}
                                                <div class="text-warning small">
                                                    Prochain essai: {{ failure.nextRetryAt|date('d/m/Y H:i') }}
                                                </div>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                        {% endif %}
                    </div>
                </div>

                <!-- Onglet Audit -->
                <div class="tab-pane fade" id="audit" role="tabpanel">
                    <div class="info-card">
                        <h5><i class="fas fa-history"></i> Journal d'Audit</h5>
                        {% if history.audit_logs is empty %}
                            <p class="text-muted">Aucune entrée d'audit.</p>
                        {% else %}
                            <div class="timeline">
                                {% for log in history.audit_logs %}
                                    <div class="timeline-item {{ log.severity }}">
                                        <div class="d-flex justify-content-between align-items-start">
                                            <div>
                                                <h6>{{ log.description }}</h6>
                                                <p class="text-muted mb-1">
                                                    {{ log.createdAt|date('d/m/Y H:i:s') }} par {{ log.adminUser }}
                                                </p>
                                                {% if log.notes %}
                                                    <small class="text-info">{{ log.notes }}</small>
                                                {% endif %}
                                            </div>
                                            <div class="text-end">
                                                <span class="badge bg-{{ log.severity == 'critical' ? 'danger' : (log.severity == 'warning' ? 'warning' : 'info') }}">
                                                    {{ log.actionType }}
                                                </span>
                                            </div>
                                        </div>
                                        {% if log.oldData or log.newData %}
                                            <div class="mt-2">
                                                <button class="btn btn-sm btn-outline-secondary" type="button" 
                                                        data-bs-toggle="collapse" data-bs-target="#changes-{{ log.id }}">
                                                    <i class="fas fa-eye"></i> Voir les changements
                                                </button>
                                                <div class="collapse mt-2" id="changes-{{ log.id }}">
                                                    <div class="bg-light p-2 rounded">
                                                        {% if log.oldData %}
                                                            <strong>Avant:</strong> {{ log.oldData|json_encode }}<br>
                                                        {% endif %}
                                                        {% if log.newData %}
                                                            <strong>Après:</strong> {{ log.newData|json_encode }}
                                                        {% endif %}
                                                    </div>
                                                </div>
                                            </div>
                                        {% endif %}
                                    </div>
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <!-- Actions rapides -->
        <div class="col-lg-4">
            <div class="action-buttons">
                <div class="info-card">
                    <h5><i class="fas fa-tools"></i> Actions Rapides</h5>
                    
                    <div class="d-grid gap-2">
                        <a href="{{ path('admin_members_advanced_edit', {id: member.id}) }}" 
                           class="btn btn-primary">
                            <i class="fas fa-edit"></i> Modifier les Informations
                        </a>
                        
                        <button class="btn btn-warning" onclick="changePlan()">
                            <i class="fas fa-exchange-alt"></i> Changer le Plan
                        </button>
                        
                        {% if member.status.value == 'active' %}
                            <button class="btn btn-danger" onclick="suspendMember()">
                                <i class="fas fa-ban"></i> Suspendre le Membre
                            </button>
                        {% elseif member.status.value == 'suspended' %}
                            <button class="btn btn-success" onclick="reactivateMember()">
                                <i class="fas fa-check"></i> Réactiver le Membre
                            </button>
                        {% endif %}
                        
                        <button class="btn btn-info" onclick="processRefund()">
                            <i class="fas fa-undo"></i> Traiter un Remboursement
                        </button>
                        
                        <hr>
                        
                        <a href="{{ path('admin_members_advanced_export_data', {id: member.id}) }}" 
                           class="btn btn-outline-secondary">
                            <i class="fas fa-download"></i> Exporter les Données (RGPD)
                        </a>
                        
                        <a href="{{ path('admin_members_advanced_audit_history', {id: member.id}) }}" 
                           class="btn btn-outline-info">
                            <i class="fas fa-history"></i> Historique Complet
                        </a>
                    </div>
                </div>

                <!-- Informations système -->
                <div class="info-card">
                    <h5><i class="fas fa-info-circle"></i> Informations Système</h5>
                    <div class="stat-item">
                        <span>ID Membre:</span>
                        <strong>{{ member.id }}</strong>
                    </div>
                    <div class="stat-item">
                        <span>Créé le:</span>
                        <span>{{ member.createdAt|date('d/m/Y H:i') }}</span>
                    </div>
                    {% if member.lastLoginAt %}
                        <div class="stat-item">
                            <span>Dernière connexion:</span>
                            <span>{{ member.lastLoginAt|date('d/m/Y H:i') }}</span>
                        </div>
                    {% endif %}
                    {% if member.emailVerifiedAt %}
                        <div class="stat-item">
                            <span>Email vérifié:</span>
                            <span class="text-success">
                                <i class="fas fa-check"></i> {{ member.emailVerifiedAt|date('d/m/Y') }}
                            </span>
                        </div>
                    {% else %}
                        <div class="stat-item">
                            <span>Email vérifié:</span>
                            <span class="text-danger">
                                <i class="fas fa-times"></i> Non vérifié
                            </span>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modales pour Actions -->
<!-- Modal Changement de Plan -->
<div class="modal fade" id="changePlanModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Changer le Plan d'Abonnement</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="changePlanForm">
                    <div class="mb-3">
                        <label for="new_plan" class="form-label">Nouveau Plan *</label>
                        <select class="form-select" id="new_plan" name="plan" required>
                            <option value="FREE" {% if member.subscriptionPlan.value == 'FREE' %}selected{% endif %}>Gratuit</option>
                            <option value="PREMIUM" {% if member.subscriptionPlan.value == 'PREMIUM' %}selected{% endif %}>Premium</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="change_reason" class="form-label">Raison du changement *</label>
                        <textarea class="form-control" id="change_reason" name="reason" rows="3" required></textarea>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="prorate" name="prorate">
                        <label class="form-check-label" for="prorate">
                            Proratiser la facturation
                        </label>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <button type="button" class="btn btn-warning" onclick="confirmChangePlan()">Changer le Plan</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Remboursement -->
<div class="modal fade" id="refundModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Traiter un Remboursement</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="refundForm">
                    <div class="mb-3">
                        <label for="refund_amount" class="form-label">Montant à rembourser (€) *</label>
                        <input type="number" class="form-control" id="refund_amount" name="amount" 
                               step="0.01" min="0.01" required>
                    </div>
                    <div class="mb-3">
                        <label for="refund_currency" class="form-label">Devise</label>
                        <select class="form-select" id="refund_currency" name="currency">
                            <option value="EUR">EUR</option>
                            <option value="USD">USD</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="stripe_payment_intent_id" class="form-label">ID Payment Intent Stripe (optionnel)</label>
                        <input type="text" class="form-control" id="stripe_payment_intent_id" name="stripe_payment_intent_id">
                    </div>
                    <div class="mb-3">
                        <label for="refund_reason" class="form-label">Raison du remboursement *</label>
                        <textarea class="form-control" id="refund_reason" name="reason" rows="3" required></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <button type="button" class="btn btn-info" onclick="confirmRefund()">Traiter le Remboursement</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        function changePlan() {
            new bootstrap.Modal(document.getElementById('changePlanModal')).show();
        }

        function suspendMember() {
            if (confirm('Êtes-vous sûr de vouloir suspendre ce membre ?')) {
                const reason = prompt('Raison de la suspension:');
                if (reason) {
                    const formData = new FormData();
                    formData.append('reason', reason);
                    
                    fetch(`/admin/members/advanced/{{ member.id }}/suspend`, {
                        method: 'POST',
                        body: formData
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            location.reload();
                        } else {
                            alert('Erreur: ' + data.message);
                        }
                    });
                }
            }
        }

        function reactivateMember() {
            if (confirm('Êtes-vous sûr de vouloir réactiver ce membre ?')) {
                const reason = prompt('Raison de la réactivation:');
                if (reason) {
                    const formData = new FormData();
                    formData.append('reason', reason);
                    
                    fetch(`/admin/members/advanced/{{ member.id }}/reactivate`, {
                        method: 'POST',
                        body: formData
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            location.reload();
                        } else {
                            alert('Erreur: ' + data.message);
                        }
                    });
                }
            }
        }

        function processRefund() {
            new bootstrap.Modal(document.getElementById('refundModal')).show();
        }

        function confirmChangePlan() {
            const form = document.getElementById('changePlanForm');
            const formData = new FormData(form);

            fetch(`/admin/members/advanced/{{ member.id }}/change-plan`, {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    location.reload();
                } else {
                    alert('Erreur: ' + data.message);
                }
            });
        }

        function confirmRefund() {
            const form = document.getElementById('refundForm');
            const formData = new FormData(form);

            fetch(`/admin/members/advanced/{{ member.id }}/refund`, {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('Remboursement traité avec succès. ID: ' + data.refund_id);
                    location.reload();
                } else {
                    alert('Erreur: ' + data.message);
                }
            });
        }
    </script>
{% endblock %}