@extends('layouts.superadmin')
@section('title', 'تحليلات اقرأني')

@section('content')
<div class="container mx-auto px-4 py-6 rtl space-y-6">

    {{-- Hero --}}
    <div class="bg-gradient-to-l from-sky-500/90 via-indigo-500/90 to-emerald-500/90 rounded-2xl p-5 shadow-md text-white">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <div class="flex items-center gap-3">
                <div class="h-12 w-12 rounded-2xl bg-white/10 grid place-items-center shadow">
                    <i class="fa-solid fa-chart-column text-xl"></i>
                </div>
                <div>
                    <h1 class="text-xl md:text-2xl font-bold">تحليلات مقالات اقرأني</h1>
                    <p class="text-sm md:text-base text-white/80">
                        من قرأ، من لم يقرأ، نسب الالتزام، وتحليل النظام لكل مقال تم نشره داخل الفريق.
                    </p>
                </div>
            </div>
            @if($overall['articles_count'] > 0)
                <div class="grid grid-cols-2 gap-3 text-xs md:text-sm">
                    <div class="bg-white/10 rounded-xl px-3 py-2">
                        <div class="text-white/70 mb-1">عدد المقالات</div>
                        <div class="font-bold text-lg">{{ $overall['articles_count'] }}</div>
                    </div>
                    <div class="bg-white/10 rounded-xl px-3 py-2">
                        <div class="text-white/70 mb-1">متوسط نسبة القراءة</div>
                        <div class="font-bold text-lg">{{ $overall['avg_percentage'] }}%</div>
                    </div>
                    <div class="bg-white/10 rounded-xl px-3 py-2">
                        <div class="text-white/70 mb-1">إجمالي القراءات المسجّلة</div>
                        <div class="font-bold text-lg">{{ $overall['total_reads'] }}</div>
                    </div>
                    <div class="bg-white/10 rounded-xl px-3 py-2">
                        <div class="text-white/70 mb-1">عدد الأعضاء المستهدفين</div>
                        <div class="font-bold text-lg">{{ $overall['target_users'] }}</div>
                    </div>
                </div>
            @endif
        </div>
    </div>

    {{-- Tabs للفلاتر --}}
    <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-200 dark:border-gray-700">
        <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
            <div class="flex gap-2 text-xs md:text-sm">
                @php
                    $baseUrl = route('superadmin.daily-reading-analytics.index');
                @endphp
                <a href="{{ $baseUrl }}?filter=all"
                   class="px-3 py-1.5 rounded-full {{ $filter === 'all' ? 'bg-sky-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600' }}">
                    كل المقالات
                </a>
                <a href="{{ $baseUrl }}?filter=active"
                   class="px-3 py-1.5 rounded-full {{ $filter === 'active' ? 'bg-emerald-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600' }}">
                    المقالات الفعّالة
                </a>
                <a href="{{ $baseUrl }}?filter=expired"
                   class="px-3 py-1.5 rounded-full {{ $filter === 'expired' ? 'bg-rose-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600' }}">
                    المقالات المنتهية
                </a>
            </div>
            <div class="text-xs text-gray-500 dark:text-gray-400">
                إجمالي: {{ $readings->total() }} مقال
            </div>
        </div>

        {{-- قائمة المقالات --}}
        <div class="p-4 space-y-3">
            @forelse($readings as $reading)
                @php
                    $s = $perReadingStats[$reading->id] ?? null;
                    $statusText = $reading->is_active ? 'فعّال' : 'غير فعّال';
                    $statusColor = $reading->is_active ? 'bg-emerald-100 text-emerald-700' : 'bg-gray-100 text-gray-700';
                    if ($reading->expires_at && $reading->expires_at->isPast()) {
                        $statusText = 'منتهي';
                        $statusColor = 'bg-rose-100 text-rose-700';
                    }
                @endphp

                <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-700 p-3 md:p-4 flex flex-col gap-3">
                    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-2">
                        <div class="flex items-start gap-3">
                            <div class="h-9 w-9 rounded-xl bg-gradient-to-br from-emerald-500 to-sky-500 text-white grid place-items-center">
                                <i class="fa-solid fa-book-open text-xs"></i>
                            </div>
                            <div>
                                <h2 class="text-sm md:text-base font-semibold text-gray-900 dark:text-white">
                                    {{ $reading->title }}
                                </h2>
                                <p class="text-[11px] md:text-xs text-gray-500 dark:text-gray-400 mt-0.5">
                                    {{ optional($reading->starts_at)->format('Y/m/d H:i') ?? $reading->created_at->format('Y/m/d H:i') }}
                                </p>
                            </div>
                        </div>
                        <div class="flex items-center gap-2">
                            <span class="inline-flex px-2 py-0.5 rounded-full text-[11px] {{ $statusColor }}">
                                {{ $statusText }}
                            </span>
                            @if($s)
                                <span class="inline-flex px-2 py-0.5 rounded-full text-[11px] bg-blue-50 text-blue-700 dark:bg-blue-900/40 dark:text-blue-200">
                                    نسبة القراءة: {{ $s['percentage'] }}%
                                </span>
                            @endif
                        </div>
                    </div>

                    @if($s)
                        <div class="grid grid-cols-2 md:grid-cols-4 gap-2 text-[11px] md:text-xs">
                            <div class="bg-gray-50 dark:bg-gray-800 rounded-lg px-2 py-1.5">
                                <div class="text-gray-500 dark:text-gray-400">إجمالي المستهدفين</div>
                                <div class="font-semibold text-gray-900 dark:text-white">{{ $s['total_users'] }}</div>
                            </div>
                            <div class="bg-green-50 dark:bg-green-900/30 rounded-lg px-2 py-1.5">
                                <div class="text-gray-600 dark:text-gray-300">من قرأ</div>
                                <div class="font-semibold text-green-700 dark:text-green-300">{{ $s['read_count'] }}</div>
                            </div>
                            <div class="bg-rose-50 dark:bg-rose-900/30 rounded-lg px-2 py-1.5">
                                <div class="text-gray-600 dark:text-gray-300">لم يقرأوا</div>
                                <div class="font-semibold text-rose-700 dark:text-rose-300">{{ $s['not_read_count'] }}</div>
                            </div>
                            <div class="bg-blue-50 dark:bg-blue-900/30 rounded-lg px-2 py-1.5">
                                <div class="text-gray-600 dark:text-gray-300">نسبة القراءة</div>
                                <div class="font-semibold text-blue-700 dark:text-blue-300">{{ $s['percentage'] }}%</div>
                            </div>
                        </div>

                        {{-- شريط نسبة القراءة --}}
                        <div class="mt-2">
                            <div class="h-2 rounded-full bg-gray-200 dark:bg-gray-800 overflow-hidden">
                                <div class="h-full bg-gradient-to-l from-emerald-500 to-sky-500"
                                     style="width: {{ min($s['percentage'], 100) }}%"></div>
                            </div>
                        </div>
                    @endif

                    <div class="flex justify-end">
                        <a href="{{ route('superadmin.daily-reading-analytics.show', $reading) }}"
                           class="inline-flex items-center text-xs md:text-sm px-3 py-1.5 rounded-lg
                                  bg-sky-600 hover:bg-sky-700 text-white">
                            <i class="fa-solid fa-arrow-left ml-2 text-[10px]"></i>
                            عرض التفاصيل
                        </a>
                    </div>
                </div>
            @empty
                <p class="text-sm text-gray-500 dark:text-gray-400">
                    لا توجد مقالات لعرض تحليلاتها حالياً.
                </p>
            @endforelse
        </div>

        <div class="px-4 py-3 border-t border-gray-200 dark:border-gray-700">
            {{ $readings->withQueryString()->links() }}
        </div>
    </div>
</div>
@endsection