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

{% block title %}Gestion Avancée des Membres - Admin{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        .stats-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 10px;
            padding: 1.5rem;
            margin-bottom: 1rem;
        }
        .stats-card h3 {
            margin: 0;
            font-size: 2rem;
            font-weight: bold;
        }
        .stats-card p {
            margin: 0.5rem 0 0 0;
            opacity: 0.9;
        }
        .search-form {
            background: #f8f9fa;
            padding: 2rem;
            border-radius: 10px;
            margin-bottom: 2rem;
        }
        .member-card {
            border: 1px solid #dee2e6;
            border-radius: 8px;
            padding: 1.5rem;
            margin-bottom: 1rem;
            transition: all 0.3s ease;
        }
        .member-card:hover {
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            transform: translateY(-2px);
        }
        .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; }
        .quick-actions {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
        }
        .quick-actions .btn {
            padding: 0.25rem 0.75rem;
            font-size: 0.875rem;
        }
    </style>
{% endblock %}

{% block body %}
<div class="container-fluid py-4">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1><i class="fas fa-users-cog"></i> Gestion Avancée des Membres</h1>
                <div>
                    <a href="{{ path('admin_members_advanced_critical_actions') }}" class="btn btn-warning">
                        <i class="fas fa-exclamation-triangle"></i> Actions Critiques
                    </a>
                    <a href="{{ path('admin_members_advanced_audit_stats') }}" class="btn btn-info">
                        <i class="fas fa-chart-bar"></i> Statistiques Audit
                    </a>
                </div>
            </div>

            <!-- Statistiques Générales -->
            <div class="row mb-4">
                <div class="col-md-2">
                    <div class="stats-card">
                        <h3>{{ stats.total_members }}</h3>
                        <p>Total Membres</p>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="stats-card">
                        <h3>{{ stats.active_members }}</h3>
                        <p>Actifs</p>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="stats-card">
                        <h3>{{ stats.premium_members }}</h3>
                        <p>Premium</p>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="stats-card">
                        <h3>{{ stats.suspended_members }}</h3>
                        <p>Suspendus</p>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="stats-card">
                        <h3>{{ stats.recent_registrations }}</h3>
                        <p>Nouveaux (30j)</p>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="stats-card">
                        <h3>{{ ((stats.premium_members / stats.total_members) * 100)|round(1) }}%</h3>
                        <p>Taux Premium</p>
                    </div>
                </div>
            </div>

            <!-- Formulaire de Recherche Avancée -->
            <div class="search-form">
                <h4><i class="fas fa-search"></i> Recherche Avancée</h4>
                <form method="GET" action="{{ path('admin_members_advanced_index') }}">
                    <div class="row">
                        <div class="col-md-3">
                            <label for="email" class="form-label">Email</label>
                            <input type="email" class="form-control" id="email" name="email" 
                                   value="{{ criteria.email }}" placeholder="Rechercher par email...">
                        </div>
                        <div class="col-md-3">
                            <label for="name" class="form-label">Nom/Prénom/Société</label>
                            <input type="text" class="form-control" id="name" name="name" 
                                   value="{{ criteria.name }}" placeholder="Rechercher par nom...">
                        </div>
                        <div class="col-md-2">
                            <label for="status" class="form-label">Statut</label>
                            <select class="form-select" id="status" name="status">
                                <option value="">Tous les statuts</option>
                                {% for status in member_statuses %}
                                    <option value="{{ status.value }}" 
                                            {% if criteria.status == status.value %}selected{% endif %}>
                                        {{ status.value|title }}
                                    </option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label for="plan" class="form-label">Plan</label>
                            <select class="form-select" id="plan" name="plan">
                                <option value="">Tous les plans</option>
                                {% for plan in subscription_plans %}
                                    <option value="{{ plan.value }}" 
                                            {% if criteria.plan == plan.value %}selected{% endif %}>
                                        {{ plan.value|title }}
                                    </option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">&nbsp;</label>
                            <div class="d-grid">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-search"></i> Rechercher
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row mt-3">
                        <div class="col-md-3">
                            <label for="created_after" class="form-label">Créé après</label>
                            <input type="date" class="form-control" id="created_after" name="created_after" 
                                   value="{{ criteria.created_after ? criteria.created_after|date('Y-m-d') : '' }}">
                        </div>
                        <div class="col-md-3">
                            <label for="created_before" class="form-label">Créé avant</label>
                            <input type="date" class="form-control" id="created_before" name="created_before" 
                                   value="{{ criteria.created_before ? criteria.created_before|date('Y-m-d') : '' }}">
                        </div>
                        <div class="col-md-3">
                            <div class="form-check mt-4">
                                <input class="form-check-input" type="checkbox" id="has_active_subscription" 
                                       name="has_active_subscription" value="1" 
                                       {% if criteria.has_active_subscription %}checked{% endif %}>
                                <label class="form-check-label" for="has_active_subscription">
                                    Avec abonnement actif
                                </label>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-check mt-4">
                                <input class="form-check-input" type="checkbox" id="has_payment_failures" 
                                       name="has_payment_failures" value="1" 
                                       {% if criteria.has_payment_failures %}checked{% endif %}>
                                <label class="form-check-label" for="has_payment_failures">
                                    Avec échecs de paiement
                                </label>
                            </div>
                        </div>
                    </div>
                </form>
            </div>

            <!-- Résultats de Recherche -->
            {% if members is not empty %}
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h4><i class="fas fa-list"></i> Résultats ({{ members|length }})</h4>
                    <a href="{{ path('admin_members_advanced_index') }}" class="btn btn-outline-secondary">
                        <i class="fas fa-times"></i> Effacer la recherche
                    </a>
                </div>

                {% for member in members %}
                    <div class="member-card">
                        <div class="row align-items-center">
                            <div class="col-md-3">
                                <h5 class="mb-1">{{ member.fullName }}</h5>
                                <p class="text-muted mb-0">{{ member.email }}</p>
                                {% if member.companyName %}
                                    <small class="text-info">{{ member.companyName }}</small>
                                {% endif %}
                            </div>
                            <div class="col-md-2">
                                <span class="status-badge status-{{ member.status.value }}">
                                    {{ member.status.value|title }}
                                </span>
                            </div>
                            <div class="col-md-2">
                                <span class="plan-badge plan-{{ member.subscriptionPlan.value }}">
                                    {{ member.subscriptionPlan.value|title }}
                                </span>
                            </div>
                            <div class="col-md-2">
                                <small class="text-muted">
                                    Inscrit le<br>
                                    {{ member.createdAt|date('d/m/Y') }}
                                </small>
                            </div>
                            <div class="col-md-3">
                                <div class="quick-actions">
                                    <a href="{{ path('admin_members_advanced_detail', {id: member.id}) }}" 
                                       class="btn btn-sm btn-primary">
                                        <i class="fas fa-eye"></i> Détails
                                    </a>
                                    <a href="{{ path('admin_members_advanced_edit', {id: member.id}) }}" 
                                       class="btn btn-sm btn-warning">
                                        <i class="fas fa-edit"></i> Modifier
                                    </a>
                                    {% if member.status.value == 'active' %}
                                        <button class="btn btn-sm btn-danger" 
                                                onclick="suspendMember({{ member.id }})">
                                            <i class="fas fa-ban"></i> Suspendre
                                        </button>
                                    {% elseif member.status.value == 'suspended' %}
                                        <button class="btn btn-sm btn-success" 
                                                onclick="reactivateMember({{ member.id }})">
                                            <i class="fas fa-check"></i> Réactiver
                                        </button>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            {% else %}
                <div class="text-center py-5">
                    <i class="fas fa-search fa-3x text-muted mb-3"></i>
                    <h4>Aucun résultat</h4>
                    <p class="text-muted">
                        {% if criteria is not empty %}
                            Aucun membre ne correspond à vos critères de recherche.
                        {% else %}
                            Utilisez le formulaire de recherche ci-dessus pour trouver des membres.
                        {% endif %}
                    </p>
                </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- Modales pour Actions Rapides -->
<div class="modal fade" id="suspendModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Suspendre le Membre</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="suspendForm">
                    <div class="mb-3">
                        <label for="suspend_reason" class="form-label">Raison de la suspension *</label>
                        <textarea class="form-control" id="suspend_reason" name="reason" rows="3" required></textarea>
                    </div>
                    <div class="mb-3">
                        <label for="suspend_until" class="form-label">Suspension jusqu'au (optionnel)</label>
                        <input type="datetime-local" class="form-control" id="suspend_until" name="until">
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="hide_items" name="hide_items" checked>
                        <label class="form-check-label" for="hide_items">
                            Masquer les objets du membre
                        </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-danger" onclick="confirmSuspend()">Suspendre</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="reactivateModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Réactiver le Membre</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="reactivateForm">
                    <div class="mb-3">
                        <label for="reactivate_reason" class="form-label">Raison de la réactivation *</label>
                        <textarea class="form-control" id="reactivate_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-success" onclick="confirmReactivate()">Réactiver</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        let currentMemberId = null;

        function suspendMember(memberId) {
            currentMemberId = memberId;
            new bootstrap.Modal(document.getElementById('suspendModal')).show();
        }

        function reactivateMember(memberId) {
            currentMemberId = memberId;
            new bootstrap.Modal(document.getElementById('reactivateModal')).show();
        }

        function confirmSuspend() {
            const form = document.getElementById('suspendForm');
            const formData = new FormData(form);

            fetch(`/admin/members/advanced/${currentMemberId}/suspend`, {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    location.reload();
                } else {
                    alert('Erreur: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Une erreur est survenue');
            });
        }

        function confirmReactivate() {
            const form = document.getElementById('reactivateForm');
            const formData = new FormData(form);

            fetch(`/admin/members/advanced/${currentMemberId}/reactivate`, {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    location.reload();
                } else {
                    alert('Erreur: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Une erreur est survenue');
            });
        }

        // Auto-complétion pour la recherche
        document.getElementById('email').addEventListener('input', function(e) {
            if (e.target.value.length >= 2) {
                fetch(`/admin/members/advanced/api/search?q=${encodeURIComponent(e.target.value)}`)
                    .then(response => response.json())
                    .then(data => {
                        // Implémentation de l'auto-complétion si nécessaire
                        console.log('Search results:', data);
                    });
            }
        });
    </script>
{% endblock %}