@extends('layouts.admin')

@section('title', 'Analytics')
@section('heading', 'تحليلات Public Beta')
@section('subheading', 'DAU، أحداث، واشتراكات')

@section('content')
    <div class="mb-6 grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        <div class="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm">
            <p class="text-sm font-medium text-zinc-500">DAU اليوم</p>
            <p class="mt-2 text-3xl font-bold text-teal-700">{{ number_format($dauToday) }}</p>
        </div>
        <div class="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm">
            <p class="text-sm font-medium text-zinc-500">مستخدمون فريدون (7 أيام)</p>
            <p class="mt-2 text-3xl font-bold text-madar-950">{{ number_format($dauWeekUnique) }}</p>
        </div>
        <div class="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm">
            <p class="text-sm font-medium text-zinc-500">مستخدمون جدد (7 أيام)</p>
            <p class="mt-2 text-3xl font-bold text-violet-700">{{ number_format($newUsersWeek) }}</p>
        </div>
        <div class="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm">
            <p class="text-sm font-medium text-zinc-500">إجمالي المستخدمين</p>
            <p class="mt-2 text-3xl font-bold text-zinc-800">{{ number_format($usersTotal) }}</p>
        </div>
    </div>

    <div class="mb-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <div class="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm">
            <p class="text-sm text-zinc-500">طلبات AI (الشهر)</p>
            <p class="mt-2 text-2xl font-bold">{{ number_format($aiMonth) }}</p>
        </div>
        <div class="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm">
            <p class="text-sm text-zinc-500">توليد صور (الشهر)</p>
            <p class="mt-2 text-2xl font-bold">{{ number_format($imagesMonth) }}</p>
        </div>
        <div class="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm">
            <p class="text-sm text-zinc-500">ملفات مرفوعة (إجمالي)</p>
            <p class="mt-2 text-2xl font-bold">{{ number_format($filesTotal) }}</p>
        </div>
        <div class="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm">
            <p class="text-sm text-zinc-500">اشتراكات نشطة</p>
            <p class="mt-2 text-2xl font-bold">{{ number_format($subsActive) }}</p>
        </div>
    </div>

    <div class="mb-6 rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm">
        <p class="text-sm font-medium text-zinc-500">ملاحظات مستخدمين (7 أيام)</p>
        <p class="mt-2 text-2xl font-bold">{{ number_format($feedbackWeek) }}</p>
    </div>

    <div class="rounded-2xl border border-zinc-200 bg-white p-6 shadow-sm">
        <h3 class="text-lg font-bold text-madar-950">أكثر الأحداث (14 يوماً)</h3>
        @php
            $labels = $topEvents->pluck('name')->map(fn ($n) => (string) $n)->values()->all();
            $values = $topEvents->pluck('c')->map(fn ($v) => (int) $v)->values()->all();
        @endphp
        @if(count($labels) > 0)
            <canvas id="evChart" height="120" class="mt-4 max-h-72"></canvas>
            <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
            <script>
                const ctx = document.getElementById('evChart');
                if (ctx) {
                    new Chart(ctx, {
                        type: 'bar',
                        data: {
                            labels: @json($labels),
                            datasets: [{
                                label: 'عدد الأحداث',
                                data: @json($values),
                                backgroundColor: 'rgba(20, 184, 166, 0.55)',
                                borderRadius: 8,
                            }]
                        },
                        options: {
                            responsive: true,
                            plugins: { legend: { display: false } },
                            scales: {
                                x: { ticks: { maxRotation: 45, minRotation: 0 } },
                                y: { beginAtZero: true }
                            }
                        }
                    });
                }
            </script>
        @else
            <p class="mt-4 text-sm text-zinc-500">لا توجد أحداث مسجّلة بعد — سيظهر الرسم عند بدء إرسال التطبيق لـ <code class="rounded bg-zinc-100 px-1">analytics/event</code>.</p>
        @endif
    </div>
@endsection