@extends('layouts.admin')

@section('title', 'Monetization')
@section('heading', 'تحليلات الربح والاستخدام')
@section('subheading', 'مؤشرات الاشتراك، استخدام AI، والنقاط')

@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">إجمالي المستخدمين</p>
            <p class="mt-2 text-3xl font-bold text-madar-950">{{ number_format($totalUsers) }}</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">مقدّر Free (غير مدفوع)</p>
            <p class="mt-2 text-3xl font-bold text-zinc-800">{{ number_format($freeUsersApprox) }}</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">مشتركون (خطة غير Free)</p>
            <p class="mt-2 text-3xl font-bold text-teal-700">{{ number_format($paidUsers) }}</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">رسائل AI اليوم</p>
            <p class="mt-2 text-3xl font-bold text-madar-950">{{ number_format($messagesToday) }}</p>
        </div>
    </div>

    <div class="mb-6 grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
        <div class="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm">
            <p class="text-sm font-medium text-zinc-500">طلبات AI (إجمالي)</p>
            <p class="mt-2 text-2xl font-bold">{{ number_format($aiRequestsTotal) }}</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">Tokens هذا الشهر</p>
            <p class="mt-2 text-2xl font-bold">{{ number_format($tokensMonth) }}</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">DAU تقريبي (حدّث اليوم)</p>
            <p class="mt-2 text-2xl font-bold">{{ number_format($dauApprox) }}</p>
        </div>
    </div>

    <div class="mb-8 rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm">
        <h2 class="mb-3 font-bold text-zinc-900">أرصدة المحافظ (مجمّع)</h2>
        <p class="text-2xl font-mono text-teal-800">{{ number_format((float) $walletTotal, 2) }}</p>
        <p class="mt-2 text-xs text-zinc-500">Revenue الفعلي يتطلب ربط بوابات الدفع — انظر config/monetization.php</p>
    </div>

    <div class="grid gap-8 lg:grid-cols-2">
        <div class="rounded-2xl border border-zinc-200 bg-white shadow-sm">
            <div class="border-b border-zinc-100 px-5 py-4">
                <h2 class="font-bold text-zinc-900">توزيع الخطط (اشتراكات نشطة)</h2>
            </div>
            <ul class="divide-y divide-zinc-100">
                @forelse ($topPlans as $row)
                    <li class="flex justify-between px-5 py-3 text-sm">
                        <span class="font-medium">{{ $row['plan'] }} <span class="text-zinc-400">({{ $row['slug'] }})</span></span>
                        <span class="font-mono">{{ number_format($row['count']) }}</span>
                    </li>
                @empty
                    <li class="px-5 py-6 text-sm text-zinc-500">لا بيانات بعد.</li>
                @endforelse
            </ul>
        </div>

        <div class="rounded-2xl border border-zinc-200 bg-white shadow-sm">
            <div class="border-b border-zinc-100 px-5 py-4">
                <h2 class="font-bold text-zinc-900">آخر طلبات AI</h2>
            </div>
            <ul class="divide-y divide-zinc-100">
                @forelse ($recentAi as $r)
                    <li class="px-5 py-3 text-xs">
                        <span class="font-mono text-zinc-600">#{{ $r->id }}</span>
                        <span class="text-zinc-400">· {{ $r->status }} · {{ $r->tokens_used }} tok</span>
                    </li>
                @empty
                    <li class="px-5 py-6 text-sm text-zinc-500">لا طلبات.</li>
                @endforelse
            </ul>
        </div>
    </div>
@endsection