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

{% block content %}
    <div class="admin-page-stack">
        <section class="admin-hero admin-hero-platform">
            <div class="admin-hero-pattern" aria-hidden="true"></div>
            <div class="admin-hero-copy">
                <div class="admin-hero-breadcrumbs">SALSABIL / TABLEAU DE BORD</div>
                <h1 class="admin-hero-title">Vue d’ensemble</h1>
                <p class="admin-hero-text">
                    Bienvenue sur le portail de gestion centralisée. Supervisez vos institutions,
                    suivez les croissances académiques et gérez les flux financiers en temps réel.
                </p>
            </div>
            <a class="admin-hero-action" href="{{ path('platform_ecole_new') }}">
                <span class="material-symbols-outlined">add</span>
                <span>Ajouter une madrassa</span>
            </a>
        </section>

        <section class="admin-kpi-grid admin-kpi-grid-platform">
            {% for stat in stats %}
                {% set stat_icon = ['account_balance', 'group', 'fact_check', 'palette'][loop.index0] ?? 'insights' %}
                {% include 'components/admin/stat_card.html.twig' with {
                    icon: stat_icon,
                    label: stat.label,
                    value: stat.value,
                    trend: stat.trend,
                    accent: loop.index == 2 ? 'emerald' : 'gold'
                } only %}
            {% endfor %}
        </section>

        <section class="admin-grid admin-grid-platform">
            <div class="admin-card admin-table-card">
                <div class="admin-card-head">
                    <div>
                        <h2>Dernières madrassas inscrites</h2>
                    </div>
                    <a class="admin-text-link" href="{{ path('platform_ecole_index') }}">Voir tout</a>
                </div>

                <div class="table-responsive">
                    <table class="table admin-table align-middle mb-0">
                        <thead>
                        <tr>
                            <th>Nom de l’institution</th>
                            <th>Localisation</th>
                            <th>Étudiants</th>
                            <th>Statut</th>
                            <th>Date</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for school in schools %}
                            <tr>
                                <td>
                                    <div class="admin-entity">
                                        <span class="admin-entity-avatar">{{ school.name|slice(0, 2)|upper }}</span>
                                        <div>
                                            <strong>{{ school.name }}</strong>
                                            <small>{{ school.theme }}</small>
                                        </div>
                                    </div>
                                </td>
                                <td>{{ school.location }}</td>
                                <td>{{ school.students }}</td>
                                <td>
                                    {% set tone = school.status == 'Actif' ? 'success' : (school.status == 'Configuration' ? 'pending' : 'neutral') %}
                                    {% include 'components/admin/status_badge.html.twig' with {label: school.status, tone: tone} only %}
                                </td>
                                <td>{{ school.updatedAt }}</td>
                            </tr>
                        {% else %}
                            <tr>
                                <td colspan="5">
                                    <div class="admin-empty-state">
                                        <span class="material-symbols-outlined">account_balance</span>
                                        <strong>Aucune madrassa enregistrée</strong>
                                        <p>Ajoutez Madrassatoul Qamar et Daroul-Ilm depuis le module Madrassas.</p>
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>

            <aside class="admin-sidebar-column">
                <div class="admin-card admin-card-muted">
                    <div class="admin-card-head">
                        <h2>Actions prioritaires</h2>
                    </div>

                    <div class="admin-task-list">
                        {% for item in queue %}
                            <article class="admin-task-card {% if loop.first %}is-highlighted{% endif %}">
                                <div class="admin-task-meta">
                                    {% include 'components/admin/status_badge.html.twig' with {
                                        label: item.state,
                                        tone: loop.first ? 'pending' : 'neutral'
                                    } only %}
                                    <span>{% if loop.first %}Il y a 2h{% else %}Aujourd’hui{% endif %}</span>
                                </div>
                                <h3>{{ item.title }}</h3>
                                <p>{{ item.meta }}</p>
                                {% if loop.first %}
                                    <div class="admin-task-actions">
                                        <button class="btn admin-btn admin-btn-primary" type="button">Valider</button>
                                        <button class="btn admin-btn admin-btn-secondary" type="button">Détails</button>
                                    </div>
                                {% else %}
                                    <button class="btn admin-btn admin-btn-gold w-100" type="button">Lancer</button>
                                {% endif %}
                            </article>
                        {% endfor %}
                    </div>

                    <div class="admin-system-card">
                        <div class="admin-system-row">
                            <span>État du système</span>
                            <strong>Optimal</strong>
                        </div>
                        <div class="admin-progress">
                            <span style="width: 99.9%"></span>
                        </div>
                        <div class="admin-system-row">
                            <span>Serveur central</span>
                            <strong>99.9%</strong>
                        </div>
                        <div class="admin-system-row">
                            <span>Base étudiants</span>
                            <strong>Synchronisée</strong>
                        </div>
                    </div>
                </div>
            </aside>
        </section>

        <section class="admin-card admin-chart-card">
            <div class="admin-card-head">
                <div>
                    <h2>Évolution des inscriptions</h2>
                    <p>Évolution des inscriptions sur 6 mois</p>
                </div>
                <button class="admin-select-like" type="button">Dernier semestre</button>
            </div>

            <div class="admin-chart">
                <div class="admin-chart-grid"></div>
                <svg class="admin-chart-svg" viewBox="0 0 640 220" preserveAspectRatio="none" aria-hidden="true">
                    <polyline points="0,190 80,158 160,146 240,154 320,108 400,120 480,92 560,74 640,40"></polyline>
                </svg>
                <div class="admin-chart-months">
                    <span>Mai</span>
                    <span>Juin</span>
                    <span>Juil</span>
                    <span>Août</span>
                    <span>Sept</span>
                    <span>Oct</span>
                </div>
            </div>
        </section>
    </div>
{% endblock %}
