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

{% block title %}Dashboard Super Admin - Supervision globale{% endblock %}
{% block breadcrumb %}Super Admin / Dashboard global{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <!-- DataTables CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.bootstrap5.min.css">

    <style>
    /* Styles personnalisés pour DataTables */
    .dataTables_wrapper .dataTables_filter input {
        margin-left: 0.5em;
        border-radius: 6px;
    }

    .dataTables_wrapper .dataTables_length select {
        margin: 0 0.5em;
        border-radius: 6px;
    }

    .dataTables_wrapper .dataTables_info {
        padding-top: 1rem;
        font-size: 0.875rem;
        color: #6c757d;
    }

    .dataTables_wrapper .dataTables_paginate {
        padding-top: 1rem;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 0.375rem 0.75rem;
        margin: 0 2px;
        border-radius: 6px;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.current {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white !important;
        border: none;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        background: rgba(102, 126, 234, 0.1);
        color: #667eea !important;
        border: none;
    }

    table.dataTable thead th {
        border-bottom: 2px solid #dee2e6;
        font-weight: 600;
        color: #495057;
        padding: 1rem 0.75rem;
    }

    table.dataTable tbody td {
        padding: 0.75rem;
        vertical-align: middle;
    }
    </style>
{% endblock %}

{% block body %}
<div class="content-header" data-aos="fade-down">
    <h1 class="content-title">
        <i class="fas fa-crown text-warning me-2"></i>
        Dashboard Super Administrateur
    </h1>
    <p class="content-subtitle">Supervision de tous les sites Izibrick</p>
</div>

<!-- Messages flash -->
{% for message in app.flashes('success') %}
    <div class="alert alert-success alert-dismissible fade show" role="alert" data-aos="fade-up">
        <i class="fas fa-check-circle me-2"></i>
        {{ message }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
{% endfor %}

{% for message in app.flashes('error') %}
    <div class="alert alert-danger alert-dismissible fade show" role="alert" data-aos="fade-up">
        <i class="fas fa-exclamation-circle me-2"></i>
        {{ message }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
{% endfor %}

<!-- Stats Cards Globales -->
<div class="row g-4 mb-4">
    <div class="col-md-6 col-xl-3" data-aos="fade-up" data-aos-delay="100">
        <div class="modern-card">
            <div class="d-flex justify-content-between align-items-start mb-3">
                <div>
                    <p class="text-muted mb-1 small text-uppercase fw-semibold">Total Sites</p>
                    <h3 class="fw-bold mb-0">{{ stats.totalSites }}</h3>
                </div>
                <div class="rounded-circle p-3" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                    <i class="fas fa-globe text-white"></i>
                </div>
            </div>
            <p class="text-muted small mb-0">
                <i class="fas fa-check-circle text-success me-1"></i>
                {{ stats.activeSites }} actifs
            </p>
        </div>
    </div>

    <div class="col-md-6 col-xl-3" data-aos="fade-up" data-aos-delay="200">
        <div class="modern-card">
            <div class="d-flex justify-content-between align-items-start mb-3">
                <div>
                    <p class="text-muted mb-1 small text-uppercase fw-semibold">Nouveaux ce mois</p>
                    <h3 class="fw-bold mb-0">{{ stats.sitesThisMonth }}</h3>
                </div>
                <div class="rounded-circle p-3" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
                    <i class="fas fa-plus-circle text-white"></i>
                </div>
            </div>
            <p class="text-muted small mb-0">
                <i class="fas fa-calendar text-info me-1"></i>
                Sites créés en {{ "now"|date('F Y') }}
            </p>
        </div>
    </div>

    <div class="col-md-6 col-xl-3" data-aos="fade-up" data-aos-delay="300">
        <div class="modern-card">
            <div class="d-flex justify-content-between align-items-start mb-3">
                <div>
                    <p class="text-muted mb-1 small text-uppercase fw-semibold">Total Pages</p>
                    <h3 class="fw-bold mb-0">{{ stats.totalPages }}</h3>
                </div>
                <div class="rounded-circle p-3" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
                    <i class="fas fa-file-alt text-white"></i>
                </div>
            </div>
            <p class="text-muted small mb-0">
                <i class="fas fa-blog text-primary me-1"></i>
                {{ stats.totalPosts }} articles
            </p>
        </div>
    </div>

    <div class="col-md-6 col-xl-3" data-aos="fade-up" data-aos-delay="400">
        <div class="modern-card">
            <div class="d-flex justify-content-between align-items-start mb-3">
                <div>
                    <p class="text-muted mb-1 small text-uppercase fw-semibold">Utilisateurs</p>
                    <h3 class="fw-bold mb-0">{{ stats.totalUsers }}</h3>
                </div>
                <div class="rounded-circle p-3" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
                    <i class="fas fa-users text-white"></i>
                </div>
            </div>
            <p class="text-muted small mb-0">
                <i class="fas fa-link text-success me-1"></i>
                {{ stats.sitesWithDomain }} domaines
            </p>
        </div>
    </div>
</div>

<!-- Graphique évolution (optionnel - à implémenter avec Chart.js) -->
<div class="row g-4 mb-4">
    <div class="col-lg-12" data-aos="fade-up" data-aos-delay="500">
        <div class="modern-card">
            <h5 class="fw-bold mb-4">
                <i class="fas fa-chart-line me-2"></i>
                Évolution des créations de sites (12 derniers mois)
            </h5>
            <div id="sitesCreationChart" style="height: 300px;">
                <!-- Graphique Chart.js ici -->
                <canvas id="monthlyStatsChart"></canvas>
            </div>
        </div>
    </div>
</div>

<!-- Tableau des sites -->
<div class="row">
    <div class="col-12">
        <div class="modern-card" data-aos="fade-up" data-aos-delay="600">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h5 class="fw-bold mb-1">Liste des sites</h5>
                    <p class="text-muted small mb-0">Vue détaillée de tous les sites Izibrick</p>
                </div>
                <a href="{{ path('super_admin_export') }}" class="btn btn-sm btn-outline-success">
                    <i class="fas fa-download me-1"></i> Exporter en CSV
                </a>
            </div>

            <div class="table-responsive">
                <table id="sitesTable" class="table modern-table" style="width:100%">
                    <thead>
                        <tr>
                            <th>Site</th>
                            <th>Propriétaire</th>
                            <th class="text-center">Création</th>
                            <th class="text-center">Statut</th>
                            <th class="text-center">Pages</th>
                            <th class="text-center">Articles</th>
                            <th class="text-center">Utilisateurs</th>
                            <th class="text-center">Contacts</th>
                            <th class="text-center">Domaine</th>
                            <th class="text-center">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% if sites is empty %}
                        <tr>
                            <td colspan="10" class="text-center text-muted py-5">
                                <i class="fas fa-inbox fs-3 mb-3 d-block"></i>
                                Aucun site trouvé avec ces critères
                            </td>
                        </tr>
                        {% else %}
                            {% for site in sites %}
                            <tr>
                                <td>
                                    <div>
                                        <span class="fw-semibold d-block">{{ site.name }}</span>
                                        <small class="text-muted">{{ site.internalName }}</small>
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <span class="d-block">{{ site.owner }}</span>
                                        <small class="text-muted">{{ site.ownerEmail }}</small>
                                    </div>
                                </td>
                                <td class="text-center">
                                    <small>{{ site.createdAt|date('d/m/Y') }}</small>
                                </td>
                                <td class="text-center">
                                    {% if site.status == 'actif' %}
                                        <span class="badge bg-success">
                                            <i class="fas fa-check-circle me-1"></i>Actif
                                        </span>
                                    {% else %}
                                        <span class="badge bg-secondary">
                                            <i class="fas fa-pause-circle me-1"></i>{{ site.status|capitalize }}
                                        </span>
                                    {% endif %}
                                </td>
                                <td class="text-center">
                                    <span class="badge" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                                        {{ site.pagesCount }}
                                    </span>
                                </td>
                                <td class="text-center">
                                    <span class="badge" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
                                        {{ site.postsCount }}
                                    </span>
                                </td>
                                <td class="text-center">
                                    <span class="badge" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
                                        {{ site.usersCount }}
                                    </span>
                                </td>
                                <td class="text-center">
                                    <span class="badge bg-info">
                                        {{ site.contactsCount }}
                                    </span>
                                </td>
                                <td class="text-center">
                                    {% if site.domain and site.domainActif %}
                                        <i class="fas fa-check-circle text-success" title="{{ site.domain }}"></i>
                                    {% else %}
                                        <i class="fas fa-times-circle text-muted" title="Pas de domaine"></i>
                                    {% endif %}
                                </td>
                                <td class="text-center">
                                    <div class="btn-group" role="group">
                                        <a href="{{ path('super_admin_access_site', {id: site.id}) }}"
                                           class="btn btn-sm btn-gradient"
                                           style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none;"
                                           title="Accéder au dashboard du site">
                                            <i class="fas fa-sign-in-alt"></i>
                                        </a>
                                        <a href="{% if site.domainActif and site.domain %}{{ site.domain }}{% else %}{{ app.request.scheme }}://{{ app.request.httpHost }}/site/{{ site.internalName }}{% endif %}"
                                           target="_blank"
                                           class="btn btn-sm btn-outline-primary"
                                           title="Voir le site">
                                            <i class="fas fa-external-link-alt"></i>
                                        </a>
                                        <button type="button"
                                           class="btn btn-sm btn-outline-danger"
                                           data-bs-toggle="modal"
                                           data-bs-target="#deleteSiteModal{{ site.id }}"
                                           title="Supprimer le site">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        {% endif %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Modales de confirmation de suppression pour chaque site -->
{% for site in sites %}
    <div class="modal fade" id="deleteSiteModal{{ site.id }}" tabindex="-1" aria-labelledby="deleteSiteModalLabel{{ site.id }}" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-danger text-white">
                    <h5 class="modal-title" id="deleteSiteModalLabel{{ site.id }}">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        Confirmer la suppression du site
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-danger" role="alert">
                        <i class="fas fa-exclamation-circle me-2"></i>
                        <strong>Attention !</strong> Cette action est irréversible.
                    </div>

                    <p class="mb-3">Êtes-vous sûr de vouloir supprimer le site suivant ?</p>

                    <div class="card mb-3">
                        <div class="card-body">
                            <h6 class="card-title fw-bold">{{ site.name }}</h6>
                            <ul class="list-unstyled mb-0 small">
                                <li><i class="fas fa-user text-muted me-2"></i><strong>Propriétaire :</strong> {{ site.owner }} ({{ site.ownerEmail }})</li>
                                <li><i class="fas fa-calendar text-muted me-2"></i><strong>Créé le :</strong> {{ site.createdAt|date('d/m/Y') }}</li>
                                <li><i class="fas fa-file text-muted me-2"></i><strong>Pages :</strong> {{ site.pagesCount }}</li>
                                <li><i class="fas fa-newspaper text-muted me-2"></i><strong>Articles :</strong> {{ site.postsCount }}</li>
                                <li><i class="fas fa-users text-muted me-2"></i><strong>Utilisateurs :</strong> {{ site.usersCount }}</li>
                            </ul>
                        </div>
                    </div>

                    <p class="text-muted small mb-0">
                        <i class="fas fa-info-circle me-1"></i>
                        Le site sera désactivé, l'abonnement Stripe sera annulé automatiquement.
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-1"></i> Annuler
                    </button>
                    <form action="{{ path('super_admin_delete_site', {id: site.id}) }}" method="POST" style="display: inline;">
                        <button type="submit" class="btn btn-danger">
                            <i class="fas fa-trash me-1"></i> Supprimer définitivement
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endfor %}

{% endblock %}

{% block javascripts %}
    {{ parent() }}

    <!-- jQuery (si pas déjà chargé) -->
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>

    <!-- DataTables -->
    <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.5.0/js/responsive.bootstrap5.min.js"></script>

    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <script>
document.addEventListener('DOMContentLoaded', function() {
    // Graphique Chart.js
    const ctx = document.getElementById('monthlyStatsChart');
    if (ctx) {
        const monthlyData = {{ monthlyStats|json_encode|raw }};

        // Préparer les labels et données
        const labels = Object.keys(monthlyData).map(month => {
            const [year, monthNum] = month.split('-');
            const date = new Date(year, monthNum - 1);
            return date.toLocaleDateString('fr-FR', { month: 'short', year: 'numeric' });
        });

        const data = Object.values(monthlyData);

        new Chart(ctx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Sites créés',
                    data: data,
                    borderColor: '#667eea',
                    backgroundColor: 'rgba(102, 126, 234, 0.1)',
                    tension: 0.4,
                    fill: true,
                    pointBackgroundColor: '#667eea',
                    pointBorderColor: '#fff',
                    pointBorderWidth: 2,
                    pointRadius: 5,
                    pointHoverRadius: 7
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        backgroundColor: '#fff',
                        titleColor: '#333',
                        bodyColor: '#666',
                        borderColor: '#667eea',
                        borderWidth: 1,
                        padding: 12,
                        displayColors: false
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            precision: 0
                        },
                        grid: {
                            color: 'rgba(0, 0, 0, 0.05)'
                        }
                    },
                    x: {
                        grid: {
                            display: false
                        }
                    }
                }
            }
        });
    }

    // DataTables
    $('#sitesTable').DataTable({
        responsive: true,
        language: {
            url: '//cdn.datatables.net/plug-ins/1.13.7/i18n/fr-FR.json'
        },
        order: [[2, 'desc']], // Tri par date de création (desc) par défaut
        pageLength: 25,
        lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "Tous"]],
        dom: '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>rtip',
        columnDefs: [
            {
                targets: [3, 4, 5, 6, 7, 8, 9], // Colonnes numériques et actions
                orderable: true
            },
            {
                targets: 9, // Colonne Actions
                orderable: false,
                searchable: false
            }
        ],
        initComplete: function() {
            // Style personnalisé pour la recherche
            $('.dataTables_filter input').addClass('form-control form-control-sm');
            $('.dataTables_length select').addClass('form-select form-select-sm');
        }
    });
});
</script>
{% endblock %}