@extends('layouts.superadmin')

@section('title', 'خريطة التأثير (EES)')
@section('page-title', 'خريطة التأثير (Influence Mapping)')

@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">

        {{-- Header --}}
        <div class="mb-6">
            <div class="flex items-center justify-between gap-3">
                <div class="flex items-center gap-3">
                    <div class="h-11 w-11 rounded-2xl bg-slate-800 flex items-center justify-center
                                ring-2 ring-violet-500/60 shadow-lg shadow-violet-500/30">
                        <i class="fa-solid fa-people-arrows text-violet-300 text-xl"></i>
                    </div>
                    <div>
                        <h1 class="text-xl sm:text-2xl font-bold">خريطة التأثير</h1>
                        <p class="text-sm text-slate-300/80">
                            بنحسب “التأثير” عبر صفحات مشتركة: نفس اليوم، نفس الصفحة، أكثر من شخص من الإدارة.
                        </p>
                    </div>
                </div>

                {{-- View Toggle --}}
                <div class="flex items-center gap-2">
                    @php $isCards = request('view','table') === 'cards'; @endphp
                    <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 --}}
        <div class="grid grid-cols-1 sm:grid-cols-4 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['total_staff'] ?? 0) }}</div>
            </div>
            <div class="rounded-2xl border border-violet-500/20 bg-violet-500/5 p-4">
                <div class="text-[11px] text-violet-200/80">متوسط Influence</div>
                <div class="text-xl font-bold text-violet-100 mt-1">{{ (int)($summary['avg_score'] ?? 0) }}</div>
                <div class="text-[11px] text-violet-200/70 mt-1">Score = Reach×2 + UniquePages×3 + Time/60</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">متوسط Reach</div>
                <div class="text-xl font-bold text-emerald-100 mt-1">{{ (int)($summary['avg_reach'] ?? 0) }}</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">متوسط صفحات مشتركة</div>
                <div class="text-xl font-bold text-amber-100 mt-1">{{ (int)($summary['avg_pages'] ?? 0) }}</div>
            </div>
        </div>

        {{-- Filters --}}
        <form method="GET" action="{{ route('superadmin.falcon-room.ees.influence-mapping') }}"
              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 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-violet-500 focus:border-violet-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-violet-500 focus:border-violet-500">
                </div>

                <div class="flex flex-col gap-1">
                    <label class="text-xs text-slate-300 mb-1">شريحة الإدارة</label>
                    <select name="segment"
                            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-violet-500 focus:border-violet-500">
                        <option value="staff" {{ $segment==='staff'?'selected':'' }}>الكل (إدارة)</option>
                        <option value="moderators" {{ $segment==='moderators'?'selected':'' }}>Moderators</option>
                        <option value="advisors" {{ $segment==='advisors'?'selected':'' }}>Advisors</option>
                        <option value="super-admin" {{ $segment==='super-admin'?'selected':'' }}>Super Admin</option>
                    </select>
                </div>

                <div class="flex flex-col gap-1">
                    <label class="text-xs text-slate-300 mb-1">Min Users / page-day</label>
                    <input type="number" min="2" 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-violet-500 focus:border-violet-500">
                    <span class="text-[11px] text-slate-400">مثلاً 3: بدنا 3 أشخاص لنعتبر الصفحة “مشتركة”.</span>
                </div>

                <div class="flex flex-col gap-1">
                    <label class="text-xs text-slate-300 mb-1">Min Shared Events</label>
                    <input type="number" min="1" name="min_shared" value="{{ $minShared }}"
                           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-violet-500 focus:border-violet-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="اسم / يوزر / إيميل"
                           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-violet-500 focus:border-violet-500">
                </div>

                <input type="hidden" name="view" value="{{ $view }}">
            </div>

            <div class="mt-3 flex flex-wrap items-center gap-2">
                <button class="inline-flex items-center justify-center rounded-xl bg-violet-500 px-4 py-2 text-sm font-semibold
                               text-slate-950 hover:bg-violet-400 transition">
                    <i class="fa-solid fa-filter ml-2 text-xs"></i>
                    تطبيق
                </button>
                <a href="{{ route('superadmin.falcon-room.ees.influence-mapping') }}"
                   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">
                    الفكرة: نفس اليوم + نفس الصفحة + أكثر من شخص ⇒ “نقطة تأثير”.
                </span>
            </div>
        </form>

        @php $isCards = request('view','table') === 'cards'; @endphp

        {{-- MAIN TABLE / CARDS --}}
        @if($isCards)
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
                @forelse($rows as $row)
                    @php
                        $mins = (int) floor(((int)$row->shared_time)/60);
                        $score = (int) round($row->influence_score ?? 0);
                    @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">{{ $row->name ?? ('#'.$row->id) }}</div>
                                <div class="text-[11px] text-slate-400 truncate">{{ $row->username }} • {{ $row->membership_status }}</div>
                            </div>
                            <div class="px-2 py-1 rounded-lg border border-violet-500/30 bg-violet-500/15 text-[11px] font-semibold text-violet-200">
                                {{ $score }}
                            </div>
                        </div>

                        <div class="grid grid-cols-3 gap-2 mt-3">
                            <div class="rounded-xl border border-slate-800 bg-slate-950/40 p-2">
                                <div class="text-[10px] text-slate-400">Reach</div>
                                <div class="text-sm font-bold text-slate-100">{{ (int)$row->shared_reach }}</div>
                            </div>
                            <div class="rounded-xl border border-slate-800 bg-slate-950/40 p-2">
                                <div class="text-[10px] text-slate-400">صفحات</div>
                                <div class="text-sm font-bold text-slate-100">{{ (int)$row->unique_shared_pages }}</div>
                            </div>
                            <div class="rounded-xl border border-slate-800 bg-slate-950/40 p-2">
                                <div class="text-[10px] text-slate-400">وقت</div>
                                <div class="text-sm font-bold text-slate-100">{{ $mins }}m</div>
                            </div>
                        </div>

                        <div class="text-[11px] text-slate-400 mt-3">
                            آخر يوم تأثير: {{ $row->last_day ?? '—' }}
                        </div>
                    </div>
                @empty
                    <div class="rounded-2xl border border-slate-800 bg-slate-900/60 p-6 text-center text-slate-400">
                        لا يوجد نتائج ضمن الفلاتر.
                    </div>
                @endforelse
            </div>

            <div class="mt-4">
                {{ $rows->links() }}
            </div>
        @else
            <div class="rounded-2xl border border-slate-700/80 bg-slate-900/90 shadow-xl overflow-hidden mb-6">
                <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">الترتيب حسب Influence Score.</p>
                    </div>
                    <span class="text-[11px] text-slate-400">عدد النتائج: {{ $rows->total() }}</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">الرتبة</th>
                                <th class="px-3 py-2 text-right">Score</th>
                                <th class="px-3 py-2 text-right">Reach</th>
                                <th class="px-3 py-2 text-right">صفحات مشتركة</th>
                                <th class="px-3 py-2 text-right">Hits</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 $mins = (int) floor(((int)$row->shared_time)/60); @endphp
                                <tr class="hover:bg-slate-800/50">
                                    <td class="px-3 py-2 align-top">
                                        <div class="flex flex-col">
                                            <span class="font-semibold text-slate-100">{{ $row->name ?? ('#'.$row->id) }}</span>
                                            <span class="text-[11px] text-slate-400">{{ $row->username }}</span>
                                        </div>
                                    </td>
                                    <td class="px-3 py-2 align-top text-[11px] text-slate-300">{{ $row->membership_status }}</td>
                                    <td class="px-3 py-2 align-top font-semibold text-violet-200">{{ (int) round($row->influence_score ?? 0) }}</td>
                                    <td class="px-3 py-2 align-top text-slate-100">{{ (int)$row->shared_reach }}</td>
                                    <td class="px-3 py-2 align-top text-slate-100">{{ (int)$row->unique_shared_pages }}</td>
                                    <td class="px-3 py-2 align-top text-slate-100">{{ (int)$row->shared_hits }}</td>
                                    <td class="px-3 py-2 align-top text-slate-100">{{ $mins }}</td>
                                    <td class="px-3 py-2 align-top text-[11px] text-slate-300">{{ $row->last_day ?? '—' }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="8" class="px-4 py-8 text-center text-slate-400">
                                        لا يوجد نتائج ضمن الفلاتر.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

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

        {{-- Hot Pages --}}
        <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">
                <h3 class="text-sm sm:text-base font-semibold">Hot Pages (الأكثر تجميعًا للإدارة)</h3>
                <p class="text-[11px] text-slate-400">أكثر صفحات عملت “تقاطعات” بين عدة أشخاص إداريين.</p>
            </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">Page</th>
                            <th class="px-3 py-2 text-right">Days</th>
                            <th class="px-3 py-2 text-right">Reach Sum</th>
                            <th class="px-3 py-2 text-right">Rows</th>
                            <th class="px-3 py-2 text-right">Time (m)</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-800">
                        @forelse($topPages as $p)
                            @php $mins = (int) floor(((int)$p->time_sec)/60); @endphp
                            <tr class="hover:bg-slate-800/50">
                                <td class="px-3 py-2 align-top text-slate-100 break-all">{{ $p->page_url }}</td>
                                <td class="px-3 py-2 align-top text-slate-100">{{ (int)$p->days_count }}</td>
                                <td class="px-3 py-2 align-top font-semibold text-emerald-200">{{ (int)$p->reach_sum }}</td>
                                <td class="px-3 py-2 align-top text-slate-100">{{ (int)$p->user_day_rows }}</td>
                                <td class="px-3 py-2 align-top text-slate-100">{{ $mins }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="px-4 py-6 text-center text-slate-400">لا يوجد بيانات كافية.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <div class="mt-5 text-[11px] text-slate-500 text-center">
            هذا مش “مين أشهر” — هذا “مين بيخلق تقاطع” على نفس الصفحات ضمن نفس اليوم.
        </div>

    </div>
</div>
@endsection