@extends('layouts.superadmin')
@section('title', 'تحليل مقال: ' . $reading->title)

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

    {{-- رجوع --}}
    <div>
        <a href="{{ route('superadmin.daily-reading-analytics.index') }}"
           class="inline-flex items-center text-xs text-gray-600 hover:text-blue-600">
            <i class="fa-solid fa-arrow-right ml-1 text-[10px]"></i>
            العودة إلى تحليلات اقرأني
        </a>
    </div>

    {{-- هيدر المقال --}}
    <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-200 dark:border-gray-700 p-5">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <div>
                <h1 class="text-lg md:text-2xl font-bold text-gray-900 dark:text-white mb-1">
                    تحليل مقال: {{ $reading->title }}
                </h1>
                <p class="text-xs md:text-sm text-gray-500 dark:text-gray-400">
                    نُشر بتاريخ:
                    {{ optional($reading->starts_at)->format('Y/m/d H:i') ?? $reading->created_at->format('Y/m/d H:i') }}
                </p>
            </div>
            <div class="grid grid-cols-2 gap-2 text-xs md:text-sm">
                <div class="bg-emerald-50 dark:bg-emerald-900/30 rounded-xl px-3 py-2 text-center">
                    <div class="text-gray-600 dark:text-gray-200 mb-1">نسبة القراءة</div>
                    <div class="text-xl font-bold text-emerald-700 dark:text-emerald-300">
                        {{ $stats['percentage'] }}%
                    </div>
                </div>
                <div class="bg-blue-50 dark:bg-blue-900/30 rounded-xl px-3 py-2 text-center">
                    <div class="text-gray-600 dark:text-gray-200 mb-1">عدد الكلمات</div>
                    <div class="text-xl font-bold text-blue-700 dark:text-blue-300">
                        {{ $stats['word_count'] }} ({{ $stats['length_label'] }})
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- تحليل النظام + الكروت --}}
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="md:col-span-2 bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-200 dark:border-gray-700 p-4 space-y-4">
            <h2 class="text-sm font-semibold text-gray-900 dark:text-white mb-2 flex items-center">
                <i class="fa-solid fa-brain ml-2 text-emerald-500"></i>
                تحليل النظام لهذا المقال
            </h2>
            <div class="bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-200 dark:border-emerald-800 rounded-xl p-3 text-xs md:text-sm text-gray-800 dark:text-emerald-50 leading-relaxed">
                {{ $stats['analysis_summary'] }}
            </div>

            <h3 class="text-sm font-semibold text-gray-900 dark:text-white mt-4 mb-2">
                معاينة نص المقال
            </h3>
            <div class="prose prose-sm max-w-none rtl text-gray-800 dark:text-gray-100 bg-gray-50 dark:bg-gray-900/40 rounded-xl p-3 border border-gray-200 dark:border-gray-700">
                {!! $reading->body_html !!}
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-200 dark:border-gray-700 p-4 space-y-3">
            <h2 class="text-sm font-semibold text-gray-900 dark:text-white mb-2">أرقام سريعة</h2>
            <div class="space-y-2 text-xs md:text-sm">
                <div class="flex justify-between">
                    <span class="text-gray-600 dark:text-gray-300">إجمالي الأعضاء المستهدفين</span>
                    <span class="font-semibold text-gray-900 dark:text-white">{{ $stats['total_users'] }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-600 dark:text-gray-300">من قرأ المقال</span>
                    <span class="font-semibold text-emerald-600 dark:text-emerald-300">{{ $stats['read_count'] }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-600 dark:text-gray-300">لم يقرأوا بعد</span>
                    <span class="font-semibold text-rose-600 dark:text-rose-300">{{ $stats['not_read_count'] }}</span>
                </div>
            </div>

            <div class="mt-3">
                <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($stats['percentage'], 100) }}%"></div>
                </div>
                <p class="mt-1 text-[11px] text-gray-500 dark:text-gray-400">
                    شريط يمثل نسبة من قرأ هذا المقال من إجمالي الأعضاء المطلوب منهم القراءة.
                </p>
            </div>
        </div>
    </div>

    {{-- من قرأ / من لم يقرأ --}}
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-200 dark:border-gray-700 p-4">
            <h2 class="text-sm font-semibold text-gray-900 dark:text-white mb-2">
                ✅ الأعضاء الذين قرأوا المقال ({{ $readUsers->count() }})
            </h2>
            <div class="max-h-72 overflow-y-auto rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/40">
                @if($readUsers->count() > 0)
                    <ul class="divide-y divide-gray-200 dark:divide-gray-700 text-xs md:text-sm">
                        @foreach($readUsers as $user)
                            <li class="px-3 py-2 flex items-center justify-between">
                                <span class="truncate">
                                    {{ $user->name }}
                                    @if(isset($user->username))
                                        <span class="text-[11px] text-gray-500">({{ $user->username }})</span>
                                    @endif
                                </span>
                                <span class="text-[11px] text-gray-500">
                                    {{ optional($user->pivot->read_at)->format('Y/m/d H:i') }}
                                </span>
                            </li>
                        @endforeach
                    </ul>
                @else
                    <p class="px-3 py-3 text-xs text-gray-500 dark:text-gray-400">
                        لا يوجد أي عضو سجّل أنه قرأ هذا المقال حتى الآن.
                    </p>
                @endif
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-200 dark:border-gray-700 p-4">
            <h2 class="text-sm font-semibold text-gray-900 dark:text-white mb-2">
                ⚠️ الأعضاء الذين لم يقرأوا بعد ({{ $notReadUsers->count() }})
            </h2>
            <div class="max-h-72 overflow-y-auto rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/40">
                @if($notReadUsers->count() > 0)
                    <ul class="divide-y divide-gray-200 dark:divide-gray-700 text-xs md:text-sm">
                        @foreach($notReadUsers as $user)
                            <li class="px-3 py-2 flex items-center justify-between">
                                <span class="truncate">
                                    {{ $user->name }}
                                    @if(isset($user->username))
                                        <span class="text-[11px] text-gray-500">({{ $user->username }})</span>
                                    @endif
                                </span>
                                <span class="text-[11px] text-gray-500">
                                    لم يقرأ بعد
                                </span>
                            </li>
                        @endforeach
                    </ul>
                @else
                    <p class="px-3 py-3 text-xs text-gray-500 dark:text-gray-400">
                        جميع الأعضاء المستهدفين قرأوا هذا المقال 🎉
                    </p>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection