@php
        $numberFormat = fn ($value) => number_format((int) $value, 0, ',', ' ');

        $now = now();

        $userStats = [
            'total' => User::count(),
            'admins' => User::where('is_admin', true)->count(),
        ];
        $userStats['members'] = max($userStats['total'] - $userStats['admins'], 0);

        $companyStats = [
            'total' => Company::count(),
            'enriched' => Company::where('enrichment_status', 'completed')->count(),
            'running' => Company::where('enrichment_status', 'running')->count(),
            'failed' => Company::where('enrichment_status', 'failed')->count(),
            'with_users' => Company::has('users')->count(),
        ];
        $companyStats['pending'] = max($companyStats['total'] - ($companyStats['enriched'] + $companyStats['running'] + $companyStats['failed']), 0);

        $tenderStats = [
            'total' => Tender::count(),
            'active' => Tender::whereNotNull('deadline_at')->where('deadline_at', '>=', $now)->count(),
            'assessed' => Tender::whereNotNull('ai_category')->count(),
            'recent' => Tender::where('created_at', '>=', now()->subDays(7))->count(),
        ];

        $companyStatusRows = Company::selectRaw("COALESCE(NULLIF(enrichment_status, ''), 'Non démarré') as status, COUNT(*) as total")
            ->groupBy(DB::raw("COALESCE(NULLIF(enrichment_status, ''), 'Non démarré')"))
            ->orderByDesc('total')
            ->get();

        $companyStatusChart = $companyStatusRows->map(function ($row) {
            $label = match ($row->status) {
                'completed' => 'Profil prêt',
                'running' => 'Enrichissement en cours',
                'failed' => 'Enrichissement en échec',
                default => 'Non démarré',
            };
            return [
                'label' => $label,
                'value' => (int) $row->total,
            ];
        })->values();

        $tenderCategoryRows = Tender::selectRaw("COALESCE(NULLIF(ai_category, ''), 'Non catégorisé') as category, COUNT(*) as total")
            ->groupBy(DB::raw("COALESCE(NULLIF(ai_category, ''), 'Non catégorisé')"))
            ->orderByDesc('total')
            ->limit(6)
            ->get();

        $tenderFeasibilityRows = DB::table('tenders')
            ->selectRaw('CASE '
                ."WHEN ai_feasibility IS NULL THEN 'Non évalué' "
                ."WHEN ai_feasibility < 20 THEN '0-19' "
                ."WHEN ai_feasibility < 40 THEN '20-39' "
                ."WHEN ai_feasibility < 60 THEN '40-59' "
                ."WHEN ai_feasibility < 80 THEN '60-79' "
                ."ELSE '80-100' END as label, COUNT(*) as total")
            ->groupBy('label')
            ->get();

        $feasibilityOrder = collect(['0-19','20-39','40-59','60-79','80-100','Non évalué']);
        $feasibilityMap = $tenderFeasibilityRows->pluck('total', 'label');

        $timelineStart = now()->subDays(9)->startOfDay();
        $timelineRows = Tender::selectRaw('DATE(created_at) as day, COUNT(*) as total')
            ->where('created_at', '>=', $timelineStart)
            ->groupBy('day')
            ->orderBy('day')
            ->get()
            ->keyBy('day');

        $timelineLabels = [];
        $timelineValues = [];
        for ($i = 9; $i >= 0; $i--) {
            $day = now()->subDays($i);
            $key = $day->toDateString();
            $timelineLabels[] = $day->format('d/m');
            $timelineValues[] = isset($timelineRows[$key]) ? (int) $timelineRows[$key]->total : 0;
        }

        $chartData = [
            'userRoles' => [
                'labels' => ['Admins', 'Utilisateurs'],
                'values' => [$userStats['admins'], $userStats['members']],
            ],
            'companyStatuses' => [
                'labels' => $companyStatusChart->pluck('label')->all(),
                'values' => $companyStatusChart->pluck('value')->all(),
            ],
            'tenderCategories' => [
                'labels' => $tenderCategoryRows->pluck('category')->all(),
                'values' => $tenderCategoryRows->pluck('total')->map(fn ($v) => (int) $v)->all(),
            ],
            'tenderFeasibility' => [
                'labels' => $feasibilityOrder->all(),
                'values' => $feasibilityOrder->map(fn ($label) => (int) ($feasibilityMap[$label] ?? 0))->all(),
            ],
            'tenderTimeline' => [
                'labels' => $timelineLabels,
                'values' => $timelineValues,
            ],
        ];
    @endphp

    <div class="py-2">
        <div class="max-w-6xl mx-auto space-y-10">
            <div class="flex flex-col gap-2">
                <p class="text-sm uppercase tracking-wide text-indigo-600 font-semibold">Pilotage</p>
                <div class="flex flex-wrap items-end justify-between gap-4">
                    <h1 class="text-3xl font-semibold text-gray-800 dark:text-gray-100">Vue d’ensemble</h1>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Données temps réel sur les utilisateurs, entreprises et appels d’offres.</p>
                </div>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4">
                <div class="p-5 bg-white dark:bg-gray-900 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-800">
                    <p class="text-xs uppercase tracking-wider text-gray-500">Utilisateurs</p>
                    <p class="mt-2 text-3xl font-semibold">{{ $numberFormat($userStats['total']) }}</p>
                    <p class="text-sm text-gray-500 mt-1">{{ $numberFormat($userStats['admins']) }} admins – {{ $numberFormat($userStats['members']) }} membres</p>
                </div>
                <div class="p-5 bg-white dark:bg-gray-900 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-800">
                    <p class="text-xs uppercase tracking-wider text-gray-500">Entreprises suivies</p>
                    <p class="mt-2 text-3xl font-semibold">{{ $numberFormat($companyStats['total']) }}</p>
                    <p class="text-sm text-gray-500 mt-1">{{ $numberFormat($companyStats['with_users']) }} liées à un utilisateur</p>
                </div>
                <div class="p-5 bg-white dark:bg-gray-900 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-800">
                    <p class="text-xs uppercase tracking-wider text-gray-500">Profils enrichis</p>
                    <p class="mt-2 text-3xl font-semibold">{{ $numberFormat($companyStats['enriched']) }}</p>
                    <p class="text-sm text-gray-500 mt-1">{{ $numberFormat($companyStats['running']) }} en cours • {{ $numberFormat($companyStats['failed']) }} en échec</p>
                </div>
                <div class="p-5 bg-white dark:bg-gray-900 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-800">
                    <p class="text-xs uppercase tracking-wider text-gray-500">Appels d’offres</p>
                    <p class="mt-2 text-3xl font-semibold">{{ $numberFormat($tenderStats['total']) }}</p>
                    <p class="text-sm text-gray-500 mt-1">{{ $numberFormat($tenderStats['active']) }} actifs • {{ $numberFormat($tenderStats['recent']) }} nouveaux 7j</p>
                </div>
            </div>

            <div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
                <div class="xl:col-span-1 p-6 bg-white dark:bg-gray-900 rounded-2xl border border-gray-100 dark:border-gray-800">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm text-gray-500">Répartition des utilisateurs</p>
                            <p class="text-lg font-semibold">{{ $numberFormat($userStats['total']) }} comptes</p>
                        </div>
                    </div>
                    <canvas id="userRolesChart" class="mt-4" height="220"></canvas>
                </div>
                <div class="xl:col-span-1 p-6 bg-white dark:bg-gray-900 rounded-2xl border border-gray-100 dark:border-gray-800">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm text-gray-500">Statut d’enrichissement</p>
                            <p class="text-lg font-semibold">{{ $numberFormat($companyStats['total']) }} entreprises</p>
                        </div>
                    </div>
                    <canvas id="companyStatusChart" class="mt-4" height="220"></canvas>
                </div>
                <div class="xl:col-span-1 p-6 bg-white dark:bg-gray-900 rounded-2xl border border-gray-100 dark:border-gray-800">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm text-gray-500">Catégories d’AO les plus fréquentes</p>
                            <p class="text-lg font-semibold">{{ $numberFormat($tenderStats['assessed']) }} évaluées</p>
                        </div>
                    </div>
                    <canvas id="tenderCategoriesChart" class="mt-4" height="220"></canvas>
                </div>
            </div>

            <div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
                <div class="xl:col-span-2 p-6 bg-white dark:bg-gray-900 rounded-2xl border border-gray-100 dark:border-gray-800">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm text-gray-500">Volume d’AO importés</p>
                            <p class="text-lg font-semibold">Derniers 10 jours</p>
                        </div>
                    </div>
                    <canvas id="tenderTimelineChart" class="mt-4" height="260"></canvas>
                </div>
                <div class="xl:col-span-1 p-6 bg-white dark:bg-gray-900 rounded-2xl border border-gray-100 dark:border-gray-800">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm text-gray-500">Scores de faisabilité</p>
                            <p class="text-lg font-semibold">{{ $numberFormat($tenderStats['assessed']) }} AO scorées</p>
                        </div>
                    </div>
                    <canvas id="tenderFeasibilityChart" class="mt-4" height="220"></canvas>
                </div>
            </div>

            <div>
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Raccourcis d’administration</h2>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <a href="{{ url('/admin/users') }}" class="block p-6 bg-white dark:bg-gray-900 rounded-2xl border border-gray-100 dark:border-gray-800 hover:border-indigo-400 hover:shadow-lg transition">
                        <p class="text-sm text-gray-500">Utilisateurs & Admins</p>
                        <p class="mt-2 text-lg font-semibold text-gray-800 dark:text-gray-100">Gérer les accès</p>
                        <p class="text-sm text-gray-500 mt-2">Ajout, retrait et privilèges.</p>
                    </a>
                    <a href="{{ url('/admin/companies') }}" class="block p-6 bg-white dark:bg-gray-900 rounded-2xl border border-gray-100 dark:border-gray-800 hover:border-indigo-400 hover:shadow-lg transition">
                        <p class="text-sm text-gray-500">Entreprises</p>
                        <p class="mt-2 text-lg font-semibold text-gray-800 dark:text-gray-100">Fiches & associations</p>
                        <p class="text-sm text-gray-500 mt-2">Éditer les profils, lier des contacts.</p>
                    </a>
                    <a href="{{ url('/admin/companies/import') }}" class="block p-6 bg-white dark:bg-gray-900 rounded-2xl border border-gray-100 dark:border-gray-800 hover:border-indigo-400 hover:shadow-lg transition">
                        <p class="text-sm text-gray-500">Import INSEE</p>
                        <p class="mt-2 text-lg font-semibold text-gray-800 dark:text-gray-100">Nouvelles sociétés</p>
                        <p class="text-sm text-gray-500 mt-2">Piloter les jobs d’import.</p>
                    </a>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
        <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.6/dist/chart.umd.min.js" integrity="sha384-6LPfbwPb6ojzwvgm8FywRgdkJSCWexhv7k94fYWfGqtw+ThnGPgWqvfLcTwvSLpV" crossorigin="anonymous"></script>
        <script>
            const flowAdminCharts = () => {
                if (!window.Chart) return;
                const ctx = {
                    users: document.getElementById('userRolesChart'),
                    companies: document.getElementById('companyStatusChart'),
                    categories: document.getElementById('tenderCategoriesChart'),
                    timeline: document.getElementById('tenderTimelineChart'),
                    feasibility: document.getElementById('tenderFeasibilityChart'),
                };
                if (!ctx.users) return;

                if (window.__flowAdminCharts) {
                    window.__flowAdminCharts.forEach(chart => chart.destroy());
                }
                window.__flowAdminCharts = [];

                const palette = ['#4f46e5','#22c55e','#f97316','#0ea5e9','#f43f5e','#14b8a6','#a855f7','#facc15'];
                const chartData = @json($chartData, JSON_UNESCAPED_UNICODE);

                const doughnutConfig = (labels, values) => ({
                    type: 'doughnut',
                    data: {
                        labels,
                        datasets: [{
                            data: values,
                            backgroundColor: labels.map((_, idx) => palette[idx % palette.length]),
                            borderWidth: 2,
                        }],
                    },
                    options: {
                        cutout: '65%',
                        plugins: {
                            legend: { position: 'bottom' },
                            tooltip: { callbacks: { label: ctx => `${ctx.label}: ${ctx.parsed}` } },
                        },
                    },
                });

                window.__flowAdminCharts.push(new Chart(ctx.users, doughnutConfig(chartData.userRoles.labels, chartData.userRoles.values)));
                window.__flowAdminCharts.push(new Chart(ctx.companies, doughnutConfig(chartData.companyStatuses.labels, chartData.companyStatuses.values)));

                window.__flowAdminCharts.push(new Chart(ctx.categories, {
                    type: 'bar',
                    data: {
                        labels: chartData.tenderCategories.labels,
                        datasets: [{
                            data: chartData.tenderCategories.values,
                            borderRadius: 6,
                            backgroundColor: chartData.tenderCategories.labels.map((_, idx) => palette[idx % palette.length]),
                        }],
                    },
                    options: {
                        plugins: { legend: { display: false } },
                        scales: {
                            x: { ticks: { color: '#6b7280' } },
                            y: { beginAtZero: true, ticks: { stepSize: 1 } },
                        },
                    },
                }));

                window.__flowAdminCharts.push(new Chart(ctx.timeline, {
                    type: 'line',
                    data: {
                        labels: chartData.tenderTimeline.labels,
                        datasets: [{
                            data: chartData.tenderTimeline.values,
                            borderColor: '#4f46e5',
                            fill: true,
                            backgroundColor: 'rgba(79,70,229,0.1)',
                            tension: 0.3,
                            borderWidth: 3,
                        }],
                    },
                    options: {
                        plugins: { legend: { display: false } },
                        scales: {
                            x: { ticks: { color: '#6b7280' } },
                            y: { beginAtZero: true, ticks: { precision: 0 } },
                        },
                    },
                }));

                window.__flowAdminCharts.push(new Chart(ctx.feasibility, {
                    type: 'bar',
                    data: {
                        labels: chartData.tenderFeasibility.labels,
                        datasets: [{
                            data: chartData.tenderFeasibility.values,
                            backgroundColor: chartData.tenderFeasibility.labels.map((_, idx) => palette[(idx + 2) % palette.length]),
                            borderRadius: 6,
                        }],
                    },
                    options: {
                        plugins: { legend: { display: false } },
                        scales: {
                            x: { ticks: { color: '#6b7280' } },
                            y: { beginAtZero: true, ticks: { precision: 0 } },
                        },
                    },
                }));
            };

            document.addEventListener('DOMContentLoaded', flowAdminCharts);
            document.addEventListener('livewire:navigated', flowAdminCharts);
        </script>
    @endpush