@extends('layouts.admin')

@section('title', 'AI Studio')
@section('heading', 'Madar AI Studio')
@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($imagesTotal) }}</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-teal-700">{{ number_format($imagesMonth) }}</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-madar-950">{{ number_format($filesTotal) }}</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($filesMonth) }}</p>
        </div>
    </div>

    <div class="mb-6 grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        <div class="rounded-2xl border border-violet-200 bg-violet-50 p-5 shadow-sm">
            <p class="text-sm font-medium text-violet-700">تحليل النص (إجمالي)</p>
            <p class="mt-2 text-3xl font-bold text-violet-900">{{ number_format($textAnalysisTotal) }}</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">{{ number_format($textAnalysisMonth) }}</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">{{ $textAnalysisAvgAiScore }}%</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">{{ number_format($textAnalysisTokens) }}</p>
        </div>
    </div>

    @if ($textAnalysisTopUsers->isNotEmpty())
        <div class="mb-8 rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm">
            <h2 class="mb-4 font-bold text-zinc-900">أكثر المستخدمين — تحليل النص</h2>
            <ul class="space-y-2 text-sm">
                @foreach ($textAnalysisTopUsers as $row)
                    <li class="flex justify-between border-b border-zinc-100 py-2">
                        <span>{{ $row->user?->full_name ?? $row->user?->username ?? 'مستخدم #'.$row->user_id }}</span>
                        <span class="font-mono text-zinc-600">{{ $row->total }} طلب</span>
                    </li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="mb-8 grid gap-4 sm:grid-cols-2">
        <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-2xl font-bold">{{ number_format($subsActive) }}</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-2xl font-bold">{{ number_format($aiRequestsMonth) }}</p>
        </div>
    </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>
            <div class="overflow-x-auto">
                <table class="min-w-full text-sm">
                    <thead class="bg-zinc-50 text-left text-xs uppercase text-zinc-500">
                    <tr>
                        <th class="px-4 py-2">#</th>
                        <th class="px-4 py-2">مستخدم</th>
                        <th class="px-4 py-2">الحالة</th>
                        <th class="px-4 py-2">تاريخ</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach ($recentImages as $img)
                        <tr class="border-t border-zinc-100">
                            <td class="px-4 py-2 font-mono">{{ $img->id }}</td>
                            <td class="px-4 py-2">{{ $img->user?->email ?? $img->user?->username ?? '—' }}</td>
                            <td class="px-4 py-2">{{ $img->status }}</td>
                            <td class="px-4 py-2 text-zinc-500">{{ $img->created_at?->format('Y-m-d H:i') }}</td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </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">آخر الملفات</h2>
            </div>
            <div class="overflow-x-auto">
                <table class="min-w-full text-sm">
                    <thead class="bg-zinc-50 text-left text-xs uppercase text-zinc-500">
                    <tr>
                        <th class="px-4 py-2">#</th>
                        <th class="px-4 py-2">مستخدم</th>
                        <th class="px-4 py-2">الملف</th>
                        <th class="px-4 py-2">الحالة</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach ($recentFiles as $f)
                        <tr class="border-t border-zinc-100">
                            <td class="px-4 py-2 font-mono">{{ $f->id }}</td>
                            <td class="px-4 py-2">{{ $f->user?->email ?? $f->user?->username ?? '—' }}</td>
                            <td class="px-4 py-2 max-w-xs truncate">{{ $f->original_name }}</td>
                            <td class="px-4 py-2">{{ $f->status }}</td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection