@extends('layouts.superadmin')

@section('title', 'Fraud / Multi-Account Radar')
@section('page-title', 'منظومة الذكاء (EES) - رادار الحسابات المكررة (Fraud Radar)')

@section('content')
<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">

        {{-- هيدر --}}
        <div class="mb-6">
            <div class="flex items-center gap-3 mb-4">
                <div class="h-11 w-11 rounded-2xl bg-slate-800 flex items-center justify-center
                            ring-2 ring-rose-500/70 shadow-lg shadow-rose-500/40">
                    <i class="fa-solid fa-radar text-rose-300 text-xl"></i>
                </div>
                <div class="text-center sm:text-right">
                    <h1 class="text-xl sm:text-2xl font-bold">رادار الحسابات المكررة (Fraud Radar)</h1>
                    <p class="text-sm text-slate-300/80">
                        كشف الأجهزة/الـ IPs التي تستخدم أكثر من حساب، ومعرفة أين يمكن أن توجد حسابات بديلة أو مشتركة.
                    </p>
                </div>
            </div>
        </div>

        {{-- كروت ملخّص --}}
        <div class="grid grid-cols-1 sm:grid-cols-5 gap-3 mb-5">
            <div class="rounded-2xl border border-slate-800 bg-slate-900/70 p-4">
                <div class="text-[11px] text-slate-400">إجمالي الأجهزة</div>
                <div class="text-xl font-bold text-white mt-1">{{ (int)($summary['devices'] ?? 0) }}</div>
            </div>

            <div class="rounded-2xl border border-amber-500/25 bg-amber-500/5 p-4">
                <div class="text-[11px] text-amber-100/80">أجهزة فيها أكثر من حساب</div>
                <div class="text-xl font-bold text-amber-100 mt-1">{{ (int)($summary['multi_devices'] ?? 0) }}</div>
            </div>

            <div class="rounded-2xl border border-rose-500/25 bg-rose-500/5 p-4">
                <div class="text-[11px] text-rose-100/80">IPs مشتركة بين أكثر من عضو</div>
                <div class="text-xl font-bold text-rose-100 mt-1">{{ (int)($summary['ip_multi'] ?? 0) }}</div>
            </div>

            <div class="rounded-2xl border border-rose-500/25 bg-rose-500/10 p-4">
                <div class="text-[11px] text-rose-100/80">مجموعات عالية الخطورة</div>
                <div class="text-xl font-bold text-rose-100 mt-1">{{ (int)($summary['high_risk'] ?? 0) }}</div>
            </div>

            <div class="rounded-2xl border border-amber-500/25 bg-amber-500/10 p-4">
                <div class="text-[11px] text-amber-100/80">مجموعات متوسطة الخطورة</div>
                <div class="text-xl font-bold text-amber-100 mt-1">{{ (int)($summary['medium_risk'] ?? 0) }}</div>
            </div>
        </div>

        {{-- فلاتر --}}
        <form method="GET" action="{{ route('superadmin.falcon-room.ees.fraud-radar') }}"
              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-4 grid-cols-1">
                <div class="flex flex-col gap-1">
                    <label class="text-xs text-slate-300 mb-1">من (حسب آخر نشاط للجلسة)</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-rose-500 focus:border-rose-500">
                </div>

                <div class="flex flex-col gap-1">
                    <label class="text-xs text-slate-300 mb-1">إلى</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-rose-500 focus:border-rose-500">
                </div>

                <div class="flex flex-col gap-1">
                    <label class="text-xs text-slate-300 mb-1">بحث</label>
                    <input type="text" name="q" value="{{ $q }}"
                           placeholder="IP / User Agent / اسم عضو"
                           class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm
                                  text-white placeholder:text-slate-500 focus:outline-none focus:ring-2
                                  focus:ring-rose-500 focus:border-rose-500">
                </div>

                <div class="flex flex-col gap-1">
                    <label class="text-xs text-slate-300 mb-1">تصنيف الخطر</label>
                    <select name="risk"
                            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-rose-500 focus:border-rose-500">
                        <option value="">الكل</option>
                        <option value="high"   @selected($risk === 'high')>عالي</option>
                        <option value="medium" @selected($risk === 'medium')>متوسط</option>
                        <option value="low"    @selected($risk === 'low')>منخفض</option>
                    </select>
                    <span class="text-[11px] text-slate-400">
                        مبني على عدد الحسابات لكل IP وعدد الجلسات.
                    </span>
                </div>
            </div>

            <div class="mt-3 grid grid-cols-1 md:grid-cols-2 gap-3">
                <div class="flex flex-col gap-1">
                    <label class="text-xs text-slate-300 mb-1">الحد الأدنى لعدد الحسابات على نفس الجهاز</label>
                    <input type="number" min="1" name="min_users" value="{{ $minUsers }}"
                           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-rose-500 focus:border-rose-500">
                    <span class="text-[11px] text-slate-400">
                        مثال: 2 = أظهر فقط الأجهزة التي استخدمت حسابين فأكثر.
                    </span>
                </div>

                <div class="flex items-end gap-2">
                    <button class="inline-flex items-center justify-center rounded-xl bg-rose-500 px-4 py-2 text-sm font-semibold
                                   text-slate-950 hover:bg-rose-400 transition">
                        <i class="fa-solid fa-filter ml-2 text-xs"></i>
                        تطبيق الفلاتر
                    </button>

                    <a href="{{ route('superadmin.falcon-room.ees.fraud-radar') }}"
                       class="inline-flex items-center justify-center 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 hidden md:inline-block">
                        أفضل استخدام: ركّز على High + أجهزة فيها 2+ أعضاء.
                    </span>
                </div>
            </div>
        </form>

        {{-- جدول الرادار --}}
        <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">مجموعات الأجهزة / الـ IPs المشبوهة</h2>
                    <p class="text-[11px] text-slate-400">
                        كل صف يمثل مزيج IP + User Agent يُستخدم من أكثر من حساب أو بعدد جلسات كبير.
                    </p>
                </div>
                <span class="text-[11px] text-slate-400">
                    المجموع: {{ method_exists($rows, 'total') ? $rows->total() : $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">IP</th>
                            <th class="px-3 py-2 text-right">المتصفح / الجهاز</th>
                            <th class="px-3 py-2 text-right">عدد الحسابات</th>
                            <th class="px-3 py-2 text-right">عدد الجلسات</th>
                            <th class="px-3 py-2 text-right">عدد الأعضاء على نفس الـ IP</th>
                            <th class="px-3 py-2 text-right">مستوى الخطر</th>
                            <th class="px-3 py-2 text-right">أسماء الأعضاء</th>
                            <th class="px-3 py-2 text-right">أول ظهور</th>
                            <th class="px-3 py-2 text-right">آخر ظهور</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-800">
                        @forelse($rows as $row)
                            @php
                                $ua   = $row->user_agent_short ?? '';
                                $namesStr = $row->user_names ?? '';
                                $names    = $namesStr !== '' ? explode(' | ', $namesStr) : [];
                                $namesLimited = array_slice($names, 0, 4);
                                $moreCount   = max(count($names) - count($namesLimited), 0);

                                $firstDt = $row->first_ts
                                    ? \Carbon\Carbon::createFromTimestamp($row->first_ts)->format('Y-m-d H:i')
                                    : '—';
                                $lastDt = $row->last_ts
                                    ? \Carbon\Carbon::createFromTimestamp($row->last_ts)->format('Y-m-d H:i')
                                    : '—';

                                $riskLevel = $row->risk_level ?? 'low';

                                $riskColor = match ($riskLevel) {
                                    'high'   => 'bg-rose-500/15 text-rose-200 border-rose-500/40',
                                    'medium' => 'bg-amber-500/15 text-amber-200 border-amber-500/40',
                                    default  => 'bg-emerald-500/15 text-emerald-200 border-emerald-500/40',
                                };

                                $riskLabel = match ($riskLevel) {
                                    'high'   => 'عالي',
                                    'medium' => 'متوسط',
                                    'low'    => 'منخفض',
                                    default  => $riskLevel,
                                };
                            @endphp
                            <tr class="hover:bg-slate-800/50">
                                <td class="px-3 py-2 align-top text-[11px] font-mono">
                                    {{ $row->ip_address }}
                                </td>

                                <td class="px-3 py-2 align-top">
                                    <div class="text-[11px] text-slate-200 break-words max-w-xs">
                                        {{ $ua ?: 'غير معروف' }}
                                    </div>
                                </td>

                                <td class="px-3 py-2 align-top text-center text-amber-200 font-semibold">
                                    {{ (int)($row->users_count ?? 0) }}
                                </td>

                                <td class="px-3 py-2 align-top text-center text-slate-100">
                                    {{ (int)($row->sessions_count ?? 0) }}
                                </td>

                                <td class="px-3 py-2 align-top text-center text-sky-200">
                                    {{ (int)($row->ip_distinct_users ?? 0) }}
                                </td>

                                <td class="px-3 py-2 align-top text-center">
                                    <span class="inline-flex items-center justify-center rounded-xl px-2 py-1 text-[11px]
                                                 {{ $riskColor }}">
                                        {{ $riskLabel }}
                                    </span>
                                </td>

                                <td class="px-3 py-2 align-top">
                                    @if(count($namesLimited))
                                        <div class="flex flex-col gap-0.5 text-[11px] text-slate-200">
                                            @foreach($namesLimited as $n)
                                                <span>• {{ $n }}</span>
                                            @endforeach
                                            @if($moreCount > 0)
                                                <span class="text-[10px] text-slate-400">
                                                    و {{ $moreCount }} عضو/أعضاء آخرين...
                                                </span>
                                            @endif
                                        </div>
                                    @else
                                        <span class="text-[11px] text-slate-500">لا يوجد أسماء معرّفة</span>
                                    @endif
                                </td>

                                <td class="px-3 py-2 align-top text-[11px] text-slate-300">
                                    {{ $firstDt }}
                                </td>

                                <td class="px-3 py-2 align-top text-[11px] text-slate-300">
                                    {{ $lastDt }}
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="9" class="px-4 py-8 text-center text-slate-400">
                                    لا يوجد بيانات مطابقة للفلاتر الحالية.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            @if(method_exists($rows, 'hasPages') && $rows->hasPages())
                <div class="px-4 py-3 border-t border-slate-800">
                    {{ $rows->links() }}
                </div>
            @endif
        </div>

        {{-- فوتر توضيحي --}}
        <div class="mt-5 text-[11px] text-slate-500 text-center">
            تذكير مهم: الرادار أداة مساعدة، مش حكم نهائي. أي حالة مشبوهة لازم يتم التحقق منها يدويًا قبل اتخاذ قرار.
        </div>

    </div>
</div>
@endsection