@extends('layouts.admin')

@section('title', 'Tableau de bord - MentoraMind Admin')
@section('description', 'Vue d\'ensemble de la plateforme MentoraMind')

@section('content')
<div class="page-header">
    <div>
        <h1>Tableau de bord</h1>
        <p>Vue d'ensemble de la plateforme</p>
    </div>
</div>

<!-- Stats Grid - 4 sur une ligne -->
<div class="row g-3 mb-4">
    <div class="col-lg-3 col-md-6">
        <div class="stat-card">
            <div class="stat-icon orange">
                <i class="bi bi-people-fill"></i>
            </div>
            <div class="stat-content">
                <div class="stat-label">Utilisateurs actifs</div>
                <div class="stat-value">{{ number_format($metrics->activeUsers) }}</div>
                <div class="stat-change {{ $metrics->activeUsersGrowth >= 0 ? 'positive' : 'negative' }}">
                    <i class="bi bi-arrow-{{ $metrics->activeUsersGrowth >= 0 ? 'up' : 'down' }}"></i>
                    {{ $metrics->activeUsersGrowth >= 0 ? '+' : '' }}{{ number_format($metrics->activeUsersGrowth, 1) }}% ce mois
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6">
        <div class="stat-card">
            <div class="stat-icon green">
                <i class="bi bi-clipboard-check-fill"></i>
            </div>
            <div class="stat-content">
                <div class="stat-label">Quiz complétés</div>
                <div class="stat-value">{{ number_format($metrics->completedQuizzes) }}</div>
                <div class="stat-change {{ $metrics->quizzesGrowth >= 0 ? 'positive' : 'negative' }}">
                    <i class="bi bi-arrow-{{ $metrics->quizzesGrowth >= 0 ? 'up' : 'down' }}"></i>
                    {{ $metrics->quizzesGrowth >= 0 ? '+' : '' }}{{ number_format($metrics->quizzesGrowth, 1) }}% ce mois
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6">
        <div class="stat-card">
            <div class="stat-icon blue">
                <i class="bi bi-star-fill"></i>
            </div>
            <div class="stat-content">
                <div class="stat-label">Abonnements actifs</div>
                <div class="stat-value">{{ number_format($metrics->activeSubscriptions) }}</div>
                <div class="stat-change {{ $metrics->subscriptionsGrowth >= 0 ? 'positive' : 'negative' }}">
                    <i class="bi bi-arrow-{{ $metrics->subscriptionsGrowth >= 0 ? 'up' : 'down' }}"></i>
                    {{ $metrics->subscriptionsGrowth >= 0 ? '+' : '' }}{{ number_format($metrics->subscriptionsGrowth, 1) }}% ce mois
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6">
        <div class="stat-card">
            <div class="stat-icon purple">
                <i class="bi bi-currency-dollar"></i>
            </div>
            <div class="stat-content">
                <div class="stat-label">Revenus mensuels</div>
                <div class="stat-value">{{ number_format($metrics->monthlyRevenue, 0, ',', ' ') }}</div>
                <div class="stat-change {{ $metrics->revenueGrowth >= 0 ? 'positive' : 'negative' }}">
                    <i class="bi bi-arrow-{{ $metrics->revenueGrowth >= 0 ? 'up' : 'down' }}"></i>
                    {{ $metrics->revenueGrowth >= 0 ? '+' : '' }}{{ number_format($metrics->revenueGrowth, 1) }}% ce mois
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Activités récentes</h5>
            </div>
            <div class="card-body">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs mb-3" id="activityTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="quiz-tab" data-bs-toggle="tab" data-bs-target="#quiz" type="button" role="tab" aria-controls="quiz" aria-selected="true">
                            <i class="bi bi-clipboard-check me-2"></i>Derniers Quiz
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="users-tab" data-bs-toggle="tab" data-bs-target="#users" type="button" role="tab" aria-controls="users" aria-selected="false">
                            <i class="bi bi-person-plus me-2"></i>Derniers Inscrits
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="subscriptions-tab" data-bs-toggle="tab" data-bs-target="#subscriptions" type="button" role="tab" aria-controls="subscriptions" aria-selected="false">
                            <i class="bi bi-star me-2"></i>Derniers Abonnements
                        </button>
                    </li>
                </ul>

                <!-- Tab content -->
                <div class="tab-content" id="activityTabsContent">
                    <!-- Derniers Quiz -->
                    <div class="tab-pane fade show active" id="quiz" role="tabpanel" aria-labelledby="quiz-tab">
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>Étudiant</th>
                                        <th>Quiz</th>
                                        <th>Score</th>
                                        <th>Date</th>
                                        <th>Statut</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($recentQuizzes as $quiz)
                                        <tr>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <div class="user-avatar me-2">{{ $quiz['user_initials'] }}</div>
                                                    <strong>{{ $quiz['user_name'] }}</strong>
                                                </div>
                                            </td>
                                            <td>{{ $quiz['quiz_name'] }}</td>
                                            <td><span class="fw-bold {{ $quiz['score_class'] }}">{{ $quiz['score'] }}</span></td>
                                            <td>{{ $quiz['time_ago'] }}</td>
                                            <td><span class="badge {{ $quiz['badge_class'] }}">{{ $quiz['status'] }}</span></td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="5" class="text-center text-muted">Aucun quiz récent</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                        <div class="text-center mt-3">
                            <a href="{{ route('admin.quizzes.generated') }}" class="btn btn-outline-primary w-100">
                                <i class="bi bi-eye me-2"></i>Voir tous les quiz
                            </a>
                        </div>
                    </div>

                    <!-- Derniers Inscrits -->
                    <div class="tab-pane fade" id="users" role="tabpanel" aria-labelledby="users-tab">
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>Utilisateur</th>
                                        <th>Email</th>
                                        <th>Date d'inscription</th>
                                        <th>Statut</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($recentUsers as $user)
                                        <tr>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <div class="user-avatar me-2">{{ $user['user_initials'] }}</div>
                                                    <strong>{{ $user['user_name'] }}</strong>
                                                </div>
                                            </td>
                                            <td>{{ $user['email'] }}</td>
                                            <td>{{ $user['time_ago'] }}</td>
                                            <td><span class="badge {{ $user['badge_class'] }}">{{ $user['status'] }}</span></td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="4" class="text-center text-muted">Aucun utilisateur récent</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                        <div class="text-center mt-3">
                            <a href="{{ route('admin.customers') }}" class="btn btn-outline-primary w-100">
                                <i class="bi bi-eye me-2"></i>Voir tous les utilisateurs
                            </a>
                        </div>
                    </div>

                    <!-- Derniers Abonnements -->
                    <div class="tab-pane fade" id="subscriptions" role="tabpanel" aria-labelledby="subscriptions-tab">
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>Utilisateur</th>
                                        <th>Plan</th>
                                        <th>Prix</th>
                                        <th>Date</th>
                                        <th>Statut</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($recentSubscriptions as $subscription)
                                        <tr>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <div class="user-avatar me-2">{{ $subscription['user_initials'] }}</div>
                                                    <strong>{{ $subscription['user_name'] }}</strong>
                                                </div>
                                            </td>
                                            <td><span class="badge {{ $subscription['plan_badge'] }}">{{ $subscription['plan_name'] }}</span></td>
                                            <td><strong>{{ $subscription['price'] }}</strong></td>
                                            <td>{{ $subscription['time_ago'] }}</td>
                                            <td><span class="badge {{ $subscription['badge_class'] }}">{{ $subscription['status'] }}</span></td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="5" class="text-center text-muted">Aucun abonnement récent</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                        <div class="text-center mt-3">
                            <a href="{{ route('admin.subscriptions') }}" class="btn btn-outline-primary w-100">
                                <i class="bi bi-eye me-2"></i>Voir tous les abonnements
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-lg-4">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Statistiques du jour</h5>
            </div>
            <div class="card-body">
                <div class="mb-3 pb-3" style="border-bottom: 1px solid #E5E7EB;">
                    <div class="d-flex justify-content-between align-items-center">
                        <span class="text-muted">Nouvelles inscriptions</span>
                        <span class="fw-bold text-success">+{{ number_format($dailyStats->newRegistrations) }}</span>
                    </div>
                </div>
                <div class="mb-3 pb-3" style="border-bottom: 1px solid #E5E7EB;">
                    <div class="d-flex justify-content-between align-items-center">
                        <span class="text-muted">Quiz complétés</span>
                        <span class="fw-bold text-primary">{{ number_format($dailyStats->completedQuizzes) }}</span>
                    </div>
                </div>
                <div class="mb-3 pb-3" style="border-bottom: 1px solid #E5E7EB;">
                    <div class="d-flex justify-content-between align-items-center">
                        <span class="text-muted">Nouveaux abonnements</span>
                        <span class="fw-bold text-warning">+{{ number_format($dailyStats->newSubscriptions) }}</span>
                    </div>
                </div>
                <div>
                    <div class="d-flex justify-content-between align-items-center">
                        <span class="text-muted">Revenus aujourd'hui</span>
                        <span class="fw-bold text-success">{{ number_format($dailyStats->todayRevenue, 0, ',', ' ') }}</span>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Actions rapides</h5>
            </div>
            <div class="card-body">
                <div class="d-grid gap-2">
                    <a href="{{ route('admin.questions.generate') }}" class="btn btn-primary">
                        <i class="bi bi-plus-circle me-2"></i>Générer des questions
                    </a>
                    <a href="{{ route('admin.customers') }}" class="btn btn-outline-primary">
                        <i class="bi bi-person-plus me-2"></i>Ajouter un étudiant
                    </a>
                    <a href="{{ route('admin.classes.management') }}" class="btn btn-outline-primary">
                        <i class="bi bi-book me-2"></i>Gérer les classes
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF6B35, #FF8A65);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 0.75rem;
}

.nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    color: #6c757d;
    padding: 0.75rem 1rem;
    margin-bottom: -1px;
}

.nav-tabs .nav-link:hover {
    border-color: transparent;
    background: rgba(255, 107, 53, 0.05);
    color: #FF6B35;
}

.nav-tabs .nav-link.active {
    border-bottom-color: #FF6B35;
    color: #FF6B35;
    background: none;
    font-weight: 600;
}

.nav-tabs {
    border-bottom: 1px solid #E5E7EB;
}

/* Assurer que toutes les cartes de stats ont la même hauteur */
.stat-card {
    height: 120px;
    display: flex;
    align-items: center;
}

/* Assurer que les titres restent sur une ligne */
.stat-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 20px;
}

.stat-value {
    min-height: 40px;
    display: flex;
    align-items: center;
}

.stat-change {
    min-height: 18px;
}

.stat-change.negative {
    color: #dc3545;
}

.stat-change.negative i {
    color: #dc3545;
}
</style>
@endpush