@extends('layouts.superadmin')
@section('title','المتواجدون على البرنامج')
@section('page-title','المتواجدون على البرنامج')

@section('content')
@php
  $search  = $search ?? request('search','');
  $type    = $type   ?? request('type');
  $status  = $status ?? request('status');
  $view    = $view   ?? request('view','table'); // table|cards
  if(!in_array($view,['table','cards'],true)) $view='table';

  $now = $now ?? now();

  $totalOnline  = $totalOnline ?? 0;
  $onlineActive = $onlineActive ?? 0;
  $onlineSusp   = $onlineSusp ?? 0;
  $byType       = $byType ?? [];

  // اختياري إذا بعتهم من الكنترول:
  $summaryDay   = $summaryDay   ?? ['users'=>0,'time_sec'=>null];
  $summaryWeek  = $summaryWeek  ?? ['users'=>0,'time_sec'=>null];
  $summaryMonth = $summaryMonth ?? ['users'=>0,'time_sec'=>null];

  $fmtTime = function($sec){
    if($sec === null) return '—';
    $sec=(int)$sec; if($sec<0) $sec=0;
    $h=intdiv($sec,3600);
    $m=intdiv($sec%3600,60);
    return $h>0 ? ($h.' س '.$m.' د') : ($m.' د');
  };

  $badge = [
    'active'    => ['t'=>'نشط','c'=>'border-emerald-400/30 bg-emerald-500/15 text-emerald-200'],
    'suspended' => ['t'=>'معلّق','c'=>'border-rose-400/30 bg-rose-500/15 text-rose-200'],
    ''          => ['t'=>'—','c'=>'border-slate-600/40 bg-white/5 text-slate-200'],
  ];
@endphp

<div class="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-black py-6 rtl">
  <div class="max-w-7xl mx-auto px-3 sm:px-4 lg:px-6 space-y-6">

    {{-- HERO --}}
    <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-slate-900/95 via-slate-900/98 to-black/98 border border-cyan-400/25 shadow-2xl shadow-cyan-500/10">
      <div class="pointer-events-none absolute -top-20 -right-10 w-72 h-72 rounded-full bg-cyan-400/15 blur-3xl"></div>
      <div class="pointer-events-none absolute -bottom-24 -left-10 w-80 h-80 rounded-full bg-fuchsia-500/10 blur-3xl"></div>

      <div class="p-5 sm:p-6 lg:p-7">
        <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
          <div class="space-y-2">
            <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-2xl border border-white/10 bg-white/5 text-white/80">
              <i class="fa-solid fa-wifi text-cyan-200"></i>
              <span class="text-sm">Live Presence • Falcon Room</span>
            </div>
            <h1 class="text-xl sm:text-2xl lg:text-3xl font-extrabold text-white">
              المتواجدون على البرنامج الآن
            </h1>
            <p class="text-white/60 text-sm">
              تحديث تلقائي + تصفية حسب النوع/الحالة + عرض جدول/كروت
            </p>
          </div>

          <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
            <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
              <div class="text-white/60 text-xs">الآن</div>
              <div id="stat_total" class="text-white text-lg font-extrabold">{{ (int)$totalOnline }}</div>
            </div>
            <div class="rounded-2xl border border-emerald-400/20 bg-emerald-500/10 p-3">
              <div class="text-emerald-100/80 text-xs">نشط</div>
              <div id="stat_active" class="text-emerald-100 text-lg font-extrabold">{{ (int)$onlineActive }}</div>
            </div>
            <div class="rounded-2xl border border-rose-400/20 bg-rose-500/10 p-3">
              <div class="text-rose-100/80 text-xs">معلّق</div>
              <div id="stat_susp" class="text-rose-100 text-lg font-extrabold">{{ (int)$onlineSusp }}</div>
            </div>
            <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
              <div class="text-white/60 text-xs">آخر تحديث</div>
              <div id="stat_now" class="text-white text-[13px] font-semibold">{{ $now->format('H:i:s') }}</div>
            </div>
          </div>
        </div>

        {{-- Day / Week / Month summary --}}
        <div class="mt-5 grid grid-cols-1 sm:grid-cols-3 gap-3">
          <div class="rounded-2xl border border-white/10 bg-white/5 p-4 flex items-center justify-between">
            <div>
              <div class="text-white/60 text-xs">آخر 24 ساعة</div>
              <div class="text-white font-extrabold text-lg" id="sum_day_users">{{ (int)($summaryDay['users'] ?? 0) }}</div>
            </div>
            <div class="text-white/70 text-sm" id="sum_day_time">{{ $fmtTime($summaryDay['time_sec'] ?? null) }}</div>
          </div>
          <div class="rounded-2xl border border-white/10 bg-white/5 p-4 flex items-center justify-between">
            <div>
              <div class="text-white/60 text-xs">آخر أسبوع</div>
              <div class="text-white font-extrabold text-lg" id="sum_week_users">{{ (int)($summaryWeek['users'] ?? 0) }}</div>
            </div>
            <div class="text-white/70 text-sm" id="sum_week_time">{{ $fmtTime($summaryWeek['time_sec'] ?? null) }}</div>
          </div>
          <div class="rounded-2xl border border-white/10 bg-white/5 p-4 flex items-center justify-between">
            <div>
              <div class="text-white/60 text-xs">آخر شهر</div>
              <div class="text-white font-extrabold text-lg" id="sum_month_users">{{ (int)($summaryMonth['users'] ?? 0) }}</div>
            </div>
            <div class="text-white/70 text-sm" id="sum_month_time">{{ $fmtTime($summaryMonth['time_sec'] ?? null) }}</div>
          </div>
        </div>

      </div>
    </div>

    {{-- Filters --}}
    <div class="rounded-3xl border border-white/10 bg-white/5 p-4 sm:p-5">
      <form class="grid grid-cols-1 md:grid-cols-12 gap-3" method="get" action="{{ route('superadmin.iman_room.online_on_program') }}">
        <div class="md:col-span-5">
          <label class="text-white/70 text-xs">بحث (اسم/يوزر)</label>
          <input name="search" value="{{ $search }}" placeholder="ابحث..."
                 class="mt-1 w-full rounded-2xl bg-slate-950/60 border border-white/10 text-white px-4 py-3 outline-none focus:border-cyan-400/40">
        </div>

        <div class="md:col-span-3">
          <label class="text-white/70 text-xs">نوع العضوية</label>
          <select name="type" class="mt-1 w-full rounded-2xl bg-slate-950/60 border border-white/10 text-white px-4 py-3 outline-none focus:border-cyan-400/40">
            <option value="">الكل</option>
            <option value="official" @selected($type==='official')>Official</option>
            <option value="beta" @selected($type==='beta')>Beta</option>
            <option value="moderator" @selected($type==='moderator')>Moderator</option>
            <option value="advisor" @selected($type==='advisor')>Advisor</option>
            <option value="super-admin" @selected($type==='super-admin')>Super Admin</option>
          </select>
        </div>

        <div class="md:col-span-2">
          <label class="text-white/70 text-xs">حالة الحساب</label>
          <select name="status" class="mt-1 w-full rounded-2xl bg-slate-950/60 border border-white/10 text-white px-4 py-3 outline-none focus:border-cyan-400/40">
            <option value="">الكل</option>
            <option value="active" @selected($status==='active')>نشط</option>
            <option value="suspended" @selected($status==='suspended')>معلّق</option>
          </select>
        </div>

        <div class="md:col-span-2">
          <label class="text-white/70 text-xs">العرض</label>
          <select name="view" class="mt-1 w-full rounded-2xl bg-slate-950/60 border border-white/10 text-white px-4 py-3 outline-none focus:border-cyan-400/40">
            <option value="table" @selected($view==='table')>جدول</option>
            <option value="cards" @selected($view==='cards')>كروت</option>
          </select>
        </div>

        <div class="md:col-span-12 flex flex-wrap gap-2 justify-between items-center pt-1">
          <div class="text-white/60 text-xs">
            حسب النوع:
            <span id="byTypeWrap">
              @forelse($byType as $k=>$c)
                <span class="inline-flex items-center gap-1 px-2 py-1 rounded-xl border border-white/10 bg-white/5 mx-1">
                  <span class="text-white/80">{{ $k }}</span>
                  <span class="text-white font-bold">{{ (int)$c }}</span>
                </span>
              @empty
                <span class="text-white/50">—</span>
              @endforelse
            </span>
          </div>

          <div class="flex gap-2">
            <button type="submit" class="rounded-2xl px-4 py-2.5 bg-cyan-500/20 border border-cyan-400/30 text-cyan-100 hover:bg-cyan-500/25">
              <i class="fa-solid fa-filter me-1"></i> تطبيق
            </button>
            <a href="{{ route('superadmin.iman_room.online_on_program') }}" class="rounded-2xl px-4 py-2.5 bg-white/5 border border-white/10 text-white/80 hover:bg-white/10">
              <i class="fa-solid fa-rotate-left me-1"></i> تصفير
            </a>

            <button type="button" id="btnRefresh" class="rounded-2xl px-4 py-2.5 bg-white/5 border border-white/10 text-white/80 hover:bg-white/10">
              <i class="fa-solid fa-rotate me-1"></i> تحديث الآن
            </button>
          </div>
        </div>
      </form>
    </div>

    {{-- LIST --}}
    <div class="rounded-3xl border border-white/10 bg-white/5 overflow-hidden">
      <div class="px-5 py-4 flex items-center justify-between border-b border-white/10">
        <div class="text-white font-extrabold">
          <i class="fa-solid fa-users text-cyan-200 me-1"></i>
          قائمة المتواجدين
        </div>
        <div class="text-white/60 text-xs" id="autoInfo">تحديث تلقائي كل 10 ثواني</div>
      </div>

      @if($view === 'table')
        <div class="overflow-x-auto">
          <table class="min-w-full text-sm text-white/80">
            <thead class="bg-white/5 text-white/70">
              <tr>
                <th class="px-5 py-3 text-right">عضو</th>
                <th class="px-5 py-3 text-right">اليوزر</th>
                <th class="px-5 py-3 text-right">النوع</th>
                <th class="px-5 py-3 text-right">الحالة</th>
                <th class="px-5 py-3 text-right">المكان</th>
                <th class="px-5 py-3 text-right">آخر ظهور</th>
              </tr>
            </thead>
            <tbody id="onlineTbody" class="divide-y divide-white/5">
              @forelse(($onlineUsers ?? []) as $u)
                @php
                  $st = $badge[$u->account_status ?? ''] ?? $badge[''];
                  $avatar = $u->avatar_url ?? ($u->avatar ?? null);
                @endphp
                <tr class="hover:bg-white/5">
                  <td class="px-5 py-3">
                    <div class="flex items-center gap-3">
                      <div class="w-10 h-10 rounded-2xl bg-white/10 border border-white/10 overflow-hidden flex items-center justify-center">
                        @if($avatar)
                          <img src="{{ $avatar }}" class="w-full h-full object-cover" alt="">
                        @else
                          <i class="fa-solid fa-user text-white/40"></i>
                        @endif
                      </div>
                      <div class="flex flex-col">
                        <div class="text-white font-semibold">{{ $u->name }}</div>
                        <div class="text-white/50 text-xs">#{{ $u->id }}</div>
                      </div>
                    </div>
                  </td>
                  <td class="px-5 py-3 text-white/80">{{ $u->username }}</td>
                  <td class="px-5 py-3">
                    <span class="inline-flex px-2 py-1 rounded-xl border border-white/10 bg-white/5 text-white/80">
                      {{ $u->membership_status ?? '—' }}
                    </span>
                  </td>
                  <td class="px-5 py-3">
                    <span class="inline-flex px-2 py-1 rounded-xl border {{ $st['c'] }}">
                      {{ $st['t'] }}
                    </span>
                  </td>
                  <td class="px-5 py-3 text-white/70">{{ $u->current_place ?? '—' }}</td>
                  <td class="px-5 py-3 text-white/70">
                    {{ !empty($u->last_visit) ? \Carbon\Carbon::parse($u->last_visit)->format('Y-m-d H:i') : '—' }}
                  </td>
                </tr>
              @empty
                <tr>
                  <td class="px-5 py-10 text-center text-white/60" colspan="6">
                    لا يوجد متواجدون الآن.
                  </td>
                </tr>
              @endforelse
            </tbody>
          </table>
        </div>

        {{-- SAFE pagination --}}
        @if(isset($onlineUsers) && is_object($onlineUsers) && method_exists($onlineUsers,'links'))
          <div class="px-5 py-4 border-t border-white/10">
            {{ $onlineUsers->links() }}
          </div>
        @endif

      @else
        {{-- CARDS --}}
        <div id="onlineCards" class="p-5 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
          @forelse(($onlineUsers ?? []) as $u)
            @php
              $st = $badge[$u->account_status ?? ''] ?? $badge[''];
              $avatar = $u->avatar_url ?? ($u->avatar ?? null);
            @endphp
            <div class="rounded-3xl border border-white/10 bg-white/5 p-4 hover:bg-white/10 transition">
              <div class="flex items-center justify-between">
                <div class="flex items-center gap-3">
                  <div class="w-11 h-11 rounded-2xl bg-white/10 border border-white/10 overflow-hidden flex items-center justify-center">
                    @if($avatar)
                      <img src="{{ $avatar }}" class="w-full h-full object-cover" alt="">
                    @else
                      <i class="fa-solid fa-user text-white/40"></i>
                    @endif
                  </div>
                  <div>
                    <div class="text-white font-bold">{{ $u->name }}</div>
                    <div class="text-white/50 text-xs">{{ $u->username }} • #{{ $u->id }}</div>
                  </div>
                </div>
                <span class="inline-flex px-2 py-1 rounded-xl border {{ $st['c'] }}">{{ $st['t'] }}</span>
              </div>

              <div class="mt-3 flex flex-wrap gap-2">
                <span class="inline-flex px-2 py-1 rounded-xl border border-white/10 bg-white/5 text-white/80 text-xs">
                  {{ $u->membership_status ?? '—' }}
                </span>
                <span class="inline-flex px-2 py-1 rounded-xl border border-white/10 bg-white/5 text-white/80 text-xs">
                  {{ $u->current_place ?? '—' }}
                </span>
                <span class="inline-flex px-2 py-1 rounded-xl border border-white/10 bg-white/5 text-white/70 text-xs">
                  آخر ظهور:
                  {{ !empty($u->last_visit) ? \Carbon\Carbon::parse($u->last_visit)->format('H:i') : '—' }}
                </span>
              </div>
            </div>
          @empty
            <div class="col-span-full text-center text-white/60 py-10">
              لا يوجد متواجدون الآن.
            </div>
          @endforelse
        </div>
      @endif
    </div>

  </div>
</div>

<script>
(function(){
  const dataUrl = @json(route('superadmin.iman_room.online_on_program.data'));
  const view = @json($view);

  const params = () => {
    const sp = new URLSearchParams(window.location.search);
    return {
      search: sp.get('search') || '',
      type: sp.get('type') || '',
      status: sp.get('status') || ''
    };
  };

  function escapeHtml(s){
    return String(s ?? '').replace(/[&<>"']/g, m => ({
      '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#039;'
    }[m]));
  }

  function fmtIso(iso){
    if(!iso) return '—';
    const d = new Date(iso);
    if(isNaN(d.getTime())) return '—';
    const pad = n => String(n).padStart(2,'0');
    return d.getFullYear() + '-' + pad(d.getMonth()+1) + '-' + pad(d.getDate()) + ' ' + pad(d.getHours()) + ':' + pad(d.getMinutes());
  }

  function fmtTime(sec){
    if(sec === null || typeof sec === 'undefined') return '—';
    sec = parseInt(sec, 10);
    if(isNaN(sec) || sec < 0) sec = 0;
    const h = Math.floor(sec / 3600);
    const m = Math.floor((sec % 3600) / 60);
    return h > 0 ? (h + ' س ' + m + ' د') : (m + ' د');
  }

  function rowHtml(u){
    const avatar = u.avatar_url ? `<img src="${escapeHtml(u.avatar_url)}" class="w-full h-full object-cover" alt="">`
                               : `<i class="fa-solid fa-user text-white/40"></i>`;
    return `
      <tr class="hover:bg-white/5">
        <td class="px-5 py-3">
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-2xl bg-white/10 border border-white/10 overflow-hidden flex items-center justify-center">
              ${avatar}
            </div>
            <div class="flex flex-col">
              <div class="text-white font-semibold">${escapeHtml(u.name)}</div>
              <div class="text-white/50 text-xs">#${escapeHtml(u.id)}</div>
            </div>
          </div>
        </td>
        <td class="px-5 py-3 text-white/80">${escapeHtml(u.username)}</td>
        <td class="px-5 py-3"><span class="inline-flex px-2 py-1 rounded-xl border border-white/10 bg-white/5 text-white/80">${escapeHtml(u.membership_status || '—')}</span></td>
        <td class="px-5 py-3"><span class="inline-flex px-2 py-1 rounded-xl border border-white/10 bg-white/5 text-white/80">${escapeHtml(u.account_status || '—')}</span></td>
        <td class="px-5 py-3 text-white/70">${escapeHtml(u.current_place || '—')}</td>
        <td class="px-5 py-3 text-white/70">${fmtIso(u.last_visit_iso)}</td>
      </tr>
    `;
  }

  function cardHtml(u){
    const avatar = u.avatar_url ? `<img src="${escapeHtml(u.avatar_url)}" class="w-full h-full object-cover" alt="">`
                               : `<i class="fa-solid fa-user text-white/40"></i>`;
    return `
      <div class="rounded-3xl border border-white/10 bg-white/5 p-4 hover:bg-white/10 transition">
        <div class="flex items-center justify-between">
          <div class="flex items-center gap-3">
            <div class="w-11 h-11 rounded-2xl bg-white/10 border border-white/10 overflow-hidden flex items-center justify-center">
              ${avatar}
            </div>
            <div>
              <div class="text-white font-bold">${escapeHtml(u.name)}</div>
              <div class="text-white/50 text-xs">${escapeHtml(u.username)} • #${escapeHtml(u.id)}</div>
            </div>
          </div>
          <span class="inline-flex px-2 py-1 rounded-xl border border-white/10 bg-white/5 text-white/80">${escapeHtml(u.account_status || '—')}</span>
        </div>

        <div class="mt-3 flex flex-wrap gap-2">
          <span class="inline-flex px-2 py-1 rounded-xl border border-white/10 bg-white/5 text-white/80 text-xs">${escapeHtml(u.membership_status || '—')}</span>
          <span class="inline-flex px-2 py-1 rounded-xl border border-white/10 bg-white/5 text-white/80 text-xs">${escapeHtml(u.current_place || '—')}</span>
          <span class="inline-flex px-2 py-1 rounded-xl border border-white/10 bg-white/5 text-white/70 text-xs">آخر ظهور: ${fmtIso(u.last_visit_iso).slice(11)}</span>
        </div>
      </div>
    `;
  }

  function renderByType(byType){
    const wrap = document.getElementById('byTypeWrap');
    if(!wrap) return;
    const obj = byType && typeof byType === 'object' ? byType : {};
    const keys = Object.keys(obj);
    if(!keys.length){
      wrap.innerHTML = `<span class="text-white/50">—</span>`;
      return;
    }
    wrap.innerHTML = keys.map(k => {
      const c = obj[k] ?? 0;
      return `
        <span class="inline-flex items-center gap-1 px-2 py-1 rounded-xl border border-white/10 bg-white/5 mx-1">
          <span class="text-white/80">${escapeHtml(k)}</span>
          <span class="text-white font-bold">${escapeHtml(c)}</span>
        </span>
      `;
    }).join('');
  }

  function pickUsers(js){
    // ✅ مرونة: users ممكن تكون ROOT أو داخل online.users
    if(Array.isArray(js?.users)) return js.users;
    if(Array.isArray(js?.online?.users)) return js.online.users;
    return [];
  }

  async function refresh(){
    const p = params();
    const url = new URL(dataUrl, window.location.origin);
    Object.keys(p).forEach(k => url.searchParams.set(k, p[k]));

    try{
      const res = await fetch(url.toString(), {headers:{'Accept':'application/json'}});
      const js = await res.json();

      // time
      if(js?.now){
        const d = new Date(js.now);
        document.getElementById('stat_now').textContent = isNaN(d.getTime()) ? '' : d.toLocaleTimeString();
      }

      // counters (ROOT أو online.*)
      const total = (typeof js?.total_online !== 'undefined') ? js.total_online : (js?.online?.total ?? undefined);
      const act   = (typeof js?.online_active !== 'undefined') ? js.online_active : (js?.online?.active ?? undefined);
      const susp  = (typeof js?.online_susp !== 'undefined') ? js.online_susp : (js?.online?.susp ?? undefined);

      if(typeof total !== 'undefined') document.getElementById('stat_total').textContent = total;
      if(typeof act   !== 'undefined') document.getElementById('stat_active').textContent = act;
      if(typeof susp  !== 'undefined') document.getElementById('stat_susp').textContent = susp;

      // byType
      const byType = js?.by_type ?? js?.online?.by_type ?? null;
      if(byType) renderByType(byType);

      // summaries (ROOT أو presence.*)
      const sd = js?.summaryDay ?? null;
      const sw = js?.summaryWeek ?? null;
      const sm = js?.summaryMonth ?? null;

      if(sd){
        document.getElementById('sum_day_users').textContent = sd.users ?? 0;
        document.getElementById('sum_day_time').textContent  = fmtTime(sd.time_sec);
      }
      if(sw){
        document.getElementById('sum_week_users').textContent = sw.users ?? 0;
        document.getElementById('sum_week_time').textContent  = fmtTime(sw.time_sec);
      }
      if(sm){
        document.getElementById('sum_month_users').textContent = sm.users ?? 0;
        document.getElementById('sum_month_time').textContent  = fmtTime(sm.time_sec);
      }

      // list
      const users = pickUsers(js);

      if(view === 'table'){
        const tbody = document.getElementById('onlineTbody');
        if(tbody){
          tbody.innerHTML = users.length ? users.map(rowHtml).join('') : `
            <tr><td class="px-5 py-10 text-center text-white/60" colspan="6">لا يوجد متواجدون الآن.</td></tr>
          `;
        }
      }else{
        const wrap = document.getElementById('onlineCards');
        if(wrap){
          wrap.innerHTML = users.length ? users.map(cardHtml).join('') : `
            <div class="col-span-full text-center text-white/60 py-10">لا يوجد متواجدون الآن.</div>
          `;
        }
      }

    }catch(e){
      console.log('refresh error', e);
    }
  }

  document.getElementById('btnRefresh')?.addEventListener('click', refresh);

  refresh();
  setInterval(refresh, 10000);
})();
</script>
@endsection