@extends('layouts.superadmin')

@section('title','تصنيف الأعضاء الذكي - ProMission')
@section('page-title','تصنيف الأعضاء الذكي (AI Roles) - ProMission')

@section('content')
@php
    $from = $from ?? request('from');
    $to   = $to   ?? request('to');

    $rows = collect($rows ?? []);
    $isCards = (request('view','cards') === 'cards');

    $roleBadge = function($role){
        $role = (string)$role;
        return match(true) {
            str_contains($role,'🔥') => 'bg-emerald-500/15 text-emerald-200 border-emerald-500/25',
            str_contains($role,'🧱') => 'bg-sky-500/15 text-sky-200 border-sky-500/25',
            str_contains($role,'🚀') => 'bg-purple-500/15 text-purple-200 border-purple-500/25',
            str_contains($role,'⚠️') => 'bg-amber-500/15 text-amber-200 border-amber-500/25',
            default                  => 'bg-slate-500/15 text-slate-200 border-slate-500/25',
        };
    };

    $roleText = function($role){
        $role = (string)$role;
        return match(true) {
            str_contains($role,'🔥') => 'محرّك (يقود التيم)',
            str_contains($role,'🧱') => 'ثابت (مستقر ومفيد)',
            str_contains($role,'🚀') => 'صاعد (تحسّن واضح)',
            str_contains($role,'⚠️') => 'متذبذب (يحتاج تثبيت)',
            default                  => 'خامد (يحتاج دفعة)',
        };
    };

    // Stats by role
    $counts = $rows->countBy('role')->all();
    $total  = $rows->count();

    $avgMix   = round((float)($rows->avg('mix_hours') ?? 0), 2);
    $avgSahra = round((float)($rows->avg('sahra_hours') ?? 0), 2);
    $maxStreak= (int)($rows->max('streak_days') ?? 0);

    // Top by total contribution
    $top = $rows->sortByDesc(fn($r)=> (float)$r['mix_hours'] + (float)$r['sahra_hours'])->take(8)->values();
@endphp

<div class="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-slate-950 py-6">
<div class="max-w-6xl mx-auto px-4 rtl text-white">

    {{-- Header --}}
    <div class="mb-6">
        <div class="flex items-start justify-between gap-3">
            <div class="flex items-center gap-3">
                <div class="h-11 w-11 rounded-2xl bg-slate-800 grid place-items-center
                            ring-2 ring-indigo-500/60 shadow-lg shadow-indigo-500/30">
                    <i class="fa-solid fa-user-tag text-indigo-300 text-xl"></i>
                </div>
                <div>
                    <h1 class="text-xl sm:text-2xl font-bold">تصنيف الأعضاء الذكي (AI Roles)</h1>
                    <p class="text-sm text-slate-300/80">
                        تصنيف تلقائي مبني على: ساعات (لايف+قست) + ساعات السهرة + الاستمرارية (Streak).
                        الهدف: معرفة “مين محرّك” و“مين يحتاج دعم”.
                    </p>
                </div>
            </div>

            {{-- Toggle --}}
            <div class="flex items-center gap-2">
                <a href="{{ request()->fullUrlWithQuery(['view'=>'table','page'=>null]) }}"
                   class="h-9 px-3 rounded-xl text-xs font-semibold border
                          {{ !$isCards ? 'bg-white/15 border-white/20 text-white' : 'border-slate-700 text-slate-200 hover:bg-white/10' }}">
                    <i class="fa-solid fa-table ml-1"></i> جدول
                </a>
                <a href="{{ request()->fullUrlWithQuery(['view'=>'cards','page'=>null]) }}"
                   class="h-9 px-3 rounded-xl text-xs font-semibold border
                          {{ $isCards ? 'bg-white/15 border-white/20 text-white' : 'border-slate-700 text-slate-200 hover:bg-white/10' }}">
                    <i class="fa-solid fa-id-card ml-1"></i> كروت
                </a>
            </div>
        </div>
    </div>

    {{-- Summary cards --}}
    <div class="grid grid-cols-1 sm:grid-cols-5 gap-3 mb-6">
        <div class="rounded-2xl border border-slate-800 bg-slate-900/80 p-4">
            <div class="text-[11px] text-slate-400">عدد الأعضاء</div>
            <div class="text-2xl font-bold mt-1">{{ $total }}</div>
        </div>

        <div class="rounded-2xl border border-emerald-500/20 bg-emerald-500/5 p-4">
            <div class="text-[11px] text-emerald-200/80">متوسط (لايف+قست)</div>
            <div class="text-2xl font-bold text-emerald-100 mt-1">{{ $avgMix }}س</div>
        </div>

        <div class="rounded-2xl border border-purple-500/20 bg-purple-500/5 p-4">
            <div class="text-[11px] text-purple-200/80">متوسط السهرة</div>
            <div class="text-2xl font-bold text-purple-100 mt-1">{{ $avgSahra }}س</div>
        </div>

        <div class="rounded-2xl border border-amber-500/20 bg-amber-500/5 p-4">
            <div class="text-[11px] text-amber-200/80">أعلى Streak</div>
            <div class="text-2xl font-bold text-amber-100 mt-1">{{ $maxStreak }} يوم</div>
        </div>

        <div class="rounded-2xl border border-white/10 bg-white/5 p-4">
            <div class="text-[11px] text-slate-300">توزيع الأدوار</div>
            <div class="mt-1 text-[11px] leading-relaxed">
                @foreach($counts as $k => $v)
                    <div class="flex items-center justify-between gap-2">
                        <span class="truncate">{{ $k }}</span>
                        <span class="font-extrabold text-white">{{ $v }}</span>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    {{-- Filters --}}
    <form method="GET" action="{{ route('superadmin.promission.insights.roles') }}"
          class="mb-6 rounded-2xl border border-slate-700/80 bg-slate-900/90 p-4 sm:p-5 shadow-xl">
        <div class="grid gap-4 md:grid-cols-6 grid-cols-1">
            <div class="flex flex-col gap-1">
                <label class="text-xs text-slate-300">من</label>
                <input type="date" name="from" value="{{ $from }}"
                       class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm text-white
                              focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
            </div>

            <div class="flex flex-col gap-1">
                <label class="text-xs text-slate-300">إلى</label>
                <input type="date" name="to" value="{{ $to }}"
                       class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm text-white
                              focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
            </div>

            <div class="md:col-span-4 flex items-end gap-2">
                <input type="hidden" name="view" value="{{ request('view','cards') }}">
                <button class="rounded-xl bg-indigo-500 px-4 py-2 text-sm font-bold text-slate-950 hover:bg-indigo-400 transition">
                    <i class="fa-solid fa-filter ml-2 text-xs"></i> تطبيق
                </button>
                <a href="{{ route('superadmin.promission.insights.roles') }}"
                   class="rounded-xl border border-slate-600 px-4 py-2 text-sm font-medium text-slate-200 hover:bg-slate-800/80 transition">
                    إعادة ضبط
                </a>
                <span class="text-[11px] text-slate-400">
                    الذكاء هنا heuristics — سريع ومفيد للقيادة.
                </span>
            </div>
        </div>
    </form>

    {{-- Top contributors --}}
    <div class="mb-6 rounded-2xl border border-slate-800 bg-slate-900/80 p-4">
        <div class="flex items-center justify-between gap-2 mb-3">
            <div class="font-bold">أعلى مساهمين (Top 8)</div>
            <div class="text-[11px] text-slate-400">مجموع = (لايف+قست) + سهرة</div>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-2">
            @foreach($top as $r)
                @php
                    $totalH = round((float)$r['mix_hours'] + (float)$r['sahra_hours'], 2);
                @endphp
                <div class="rounded-2xl border border-slate-800 bg-slate-950/40 p-3">
                    <div class="font-semibold truncate">{{ $r['name'] }}</div>
                    <div class="text-[11px] text-slate-400 truncate">{{ $r['username'] ? '@'.$r['username'] : '' }}</div>

                    <div class="mt-2 flex items-center justify-between">
                        <span class="text-[11px] px-2 py-0.5 rounded-full border {{ $roleBadge($r['role']) }}">{{ $r['role'] }}</span>
                        <span class="text-sm font-extrabold text-emerald-200">{{ $totalH }}س</span>
                    </div>

                    <div class="mt-2 text-[11px] text-slate-300">
                        Mix: <b class="text-white">{{ $r['mix_hours'] }}س</b> • Sahra: <b class="text-white">{{ $r['sahra_hours'] }}س</b>
                    </div>
                    <div class="text-[11px] text-slate-400">
                        Streak: <b class="text-amber-200">{{ $r['streak_days'] }}</b>
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    {{-- Cards --}}
    @if($isCards)
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
            @forelse($rows as $r)
                @php
                    $role = (string)$r['role'];
                    $roleDesc = $roleText($role);
                    $totalH = round((float)$r['mix_hours'] + (float)$r['sahra_hours'], 2);
                @endphp

                <div class="rounded-2xl border border-slate-800 bg-slate-900/80 p-4">
                    <div class="flex items-start justify-between gap-2">
                        <div class="min-w-0">
                            <div class="font-semibold text-slate-100 truncate">{{ $r['name'] }}</div>
                            <div class="text-[11px] text-slate-400 truncate">{{ $r['username'] ? '@'.$r['username'] : '' }}</div>
                        </div>
                        <span class="text-[11px] font-bold px-2 py-0.5 rounded-full border {{ $roleBadge($role) }}">
                            {{ $role }}
                        </span>
                    </div>

                    <div class="mt-2 text-[11px] text-slate-300">
                        <span class="text-slate-400">الوصف:</span>
                        <span class="font-bold text-white">{{ $roleDesc }}</span>
                    </div>

                    <div class="mt-3 grid grid-cols-3 gap-2">
                        <div class="rounded-xl border border-slate-800 bg-slate-950/40 p-2">
                            <div class="text-[10px] text-slate-400">Mix</div>
                            <div class="text-sm font-extrabold text-emerald-100">{{ $r['mix_hours'] }}س</div>
                        </div>
                        <div class="rounded-xl border border-slate-800 bg-slate-950/40 p-2">
                            <div class="text-[10px] text-slate-400">Sahra</div>
                            <div class="text-sm font-extrabold text-purple-100">{{ $r['sahra_hours'] }}س</div>
                        </div>
                        <div class="rounded-xl border border-slate-800 bg-slate-950/40 p-2">
                            <div class="text-[10px] text-slate-400">Streak</div>
                            <div class="text-sm font-extrabold text-amber-100">{{ $r['streak_days'] }}ي</div>
                        </div>
                    </div>

                    <div class="mt-3 rounded-xl border border-slate-800 bg-slate-950/40 p-3">
                        <div class="text-[10px] text-slate-400">Total</div>
                        <div class="text-lg font-extrabold text-sky-100">{{ $totalH }}س</div>
                        <div class="h-2 rounded-full bg-slate-800 overflow-hidden mt-2">
                            @php $bar = max(0, min(100, $totalH * 2)); @endphp
                            <div class="h-full rounded-full bg-gradient-to-r from-rose-500 via-amber-400 to-emerald-400"
                                 style="width: {{ $bar }}%"></div>
                        </div>
                    </div>
                </div>
            @empty
                <div class="rounded-2xl border border-slate-800 bg-slate-900/60 p-6 text-center text-slate-400 lg:col-span-3">
                    لا يوجد بيانات ضمن الفلاتر الحالية.
                </div>
            @endforelse
        </div>

    {{-- Table --}}
    @else
        <div class="rounded-2xl border border-slate-700/80 bg-slate-900/90 shadow-xl overflow-hidden">
            <div class="border-b border-slate-800 px-4 py-3 flex items-center justify-between">
                <div>
                    <h2 class="text-sm sm:text-base font-semibold">جدول تصنيف الأعضاء</h2>
                    <p class="text-[11px] text-slate-400">Mix + Sahra + Streak → Role</p>
                </div>
                <span class="text-[11px] text-slate-400">صفوف: {{ $rows->count() }}</span>
            </div>

            <div class="overflow-x-auto">
                <table class="min-w-full text-xs sm:text-sm text-slate-200">
                    <thead class="bg-slate-900/90 border-b border-slate-800 text-[11px] uppercase tracking-wide">
                        <tr>
                            <th class="px-3 py-2 text-right">العضو</th>
                            <th class="px-3 py-2 text-right">Mix (س)</th>
                            <th class="px-3 py-2 text-right">Sahra (س)</th>
                            <th class="px-3 py-2 text-right">Streak</th>
                            <th class="px-3 py-2 text-right">Role</th>
                            <th class="px-3 py-2 text-right">وصف</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-800">
                        @forelse($rows as $r)
                            @php $role = (string)$r['role']; @endphp
                            <tr class="hover:bg-slate-800/50">
                                <td class="px-3 py-2">
                                    <div class="font-semibold text-slate-100">{{ $r['name'] }}</div>
                                    <div class="text-[11px] text-slate-400">{{ $r['username'] ? '@'.$r['username'] : '' }}</div>
                                </td>
                                <td class="px-3 py-2 text-emerald-100 font-bold">{{ $r['mix_hours'] }}</td>
                                <td class="px-3 py-2 text-purple-100 font-bold">{{ $r['sahra_hours'] }}</td>
                                <td class="px-3 py-2 text-amber-100 font-bold">{{ $r['streak_days'] }}</td>
                                <td class="px-3 py-2">
                                    <span class="text-[11px] font-bold px-2 py-0.5 rounded-full border {{ $roleBadge($role) }}">
                                        {{ $role }}
                                    </span>
                                </td>
                                <td class="px-3 py-2 text-slate-200">
                                    {{ $roleText($role) }}
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="6" class="px-4 py-8 text-center text-slate-400">لا يوجد بيانات.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    @endif

    <div class="mt-6 text-[11px] text-slate-500 text-center">
        هذا التصنيف يساعد الإدارة: من يُقود، من ثابت، ومن يحتاج تدخل سريع.
    </div>

</div>
</div>
@endsection