@extends('layouts.superadmin')

@section('title','مركز الأداء الحي')
@section('page-title','🟢 مركز الأداء الحي — الإدارة')

@section('content')
<div class="space-y-6">

  {{-- HERO --}}
  <div class="bg-white dark:bg-gray-900 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 p-6 md:p-8">
    <div class="flex items-start justify-between gap-6">
      <div class="min-w-0">
        <h1 class="text-2xl md:text-3xl font-extrabold text-gray-900 dark:text-white">🟢 مركز الأداء الحي للإدارة</h1>
        <p class="text-gray-700 dark:text-gray-300 mt-2">
          متابعة فورية: الحضور الآن، متوسط السرعة، أكثر الصفحات زيارة، وأعلى الإداريين نشاطًا. يتم التحديث تلقائيًا كل 30 ثانية.
        </p>
      </div>
      <span id="lp-updated" class="shrink-0 inline-flex items-center gap-2 px-3 py-1.5 text-xs font-semibold rounded-full
                   bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-200 border border-emerald-200 dark:border-emerald-800">
        آخر تحديث: —
      </span>
    </div>
  </div>

  {{-- كروت الملخص --}}
  <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
    <div class="rounded-xl p-4 bg-gradient-to-br from-cyan-50 to-cyan-100 dark:from-cyan-900 dark:to-cyan-800 border-r-4 border-cyan-500">
      <div class="text-cyan-700 dark:text-cyan-200 text-sm">المتصلون الآن</div>
      <div id="lp-online" class="text-3xl font-extrabold text-cyan-900 dark:text-white mt-1">0</div>
    </div>
    <div class="rounded-xl p-4 bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900 dark:to-blue-800 border-r-4 border-blue-500">
      <div class="text-blue-700 dark:text-blue-200 text-sm">المشرفون الآن</div>
      <div id="lp-mods" class="text-3xl font-extrabold text-blue-900 dark:text-white mt-1">0</div>
    </div>
    <div class="rounded-xl p-4 bg-gradient-to-br from-rose-50 to-rose-100 dark:from-rose-900 dark:to-rose-800 border-r-4 border-rose-500">
      <div class="text-rose-700 dark:text-rose-200 text-sm">السوبر أدمن الآن</div>
      <div id="lp-admins" class="text-3xl font-extrabold text-rose-900 dark:text-white mt-1">0</div>
    </div>
    <div class="rounded-xl p-4 bg-gradient-to-br from-violet-50 to-violet-100 dark:from-violet-900 dark:to-violet-800 border-r-4 border-violet-500">
      <div class="text-violet-700 dark:text-violet-200 text-sm">متوسط السرعة (ms)</div>
      <div id="lp-avg" class="text-3xl font-extrabold text-violet-900 dark:text-white mt-1">0</div>
    </div>
  </div>

  {{-- الرسم البياني آخر 30 دقيقة --}}
  <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-4">
    <h3 class="font-bold mb-3">📈 المتصلون لكل دقيقة (آخر 30 دقيقة)</h3>
    <div style="height:300px"><canvas id="lp-chart"></canvas></div>
  </div>

  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    {{-- أعلى الصفحات زيارة --}}
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-4">
      <h3 class="font-bold mb-3">📄 أكثر الصفحات زيارة الآن (آخر 30 د)</h3>
      <div id="lp-pages" class="space-y-2 text-sm">
        <div class="text-gray-500">—</div>
      </div>
    </div>

    {{-- الإداريون الأكثر نشاطًا --}}
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-4">
      <h3 class="font-bold mb-3">🧑‍💻 الإداريون الأكثر نشاطًا الآن</h3>
      <div id="lp-active" class="space-y-2 text-sm">
        <div class="text-gray-500">—</div>
      </div>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
(function(){
  const feedUrl  = "{{ route('superadmin.falcon-room.live.feed') }}";
  const chartUrl = "{{ route('superadmin.falcon-room.live.chart') }}";

  const fmtPage = (s)=> s ? s.replace(/[-_.]/g,' ').trim() : '—';

  // الرسم
  let chart;
  async function loadChart(){
    const r = await fetch(chartUrl, {headers:{'Accept':'application/json'}});
    if(!r.ok) return;
    const d = await r.json();
    const labels = (d.series||[]).map(p=>p.time);
    const data   = (d.series||[]).map(p=>p.count);

    const ctx = document.getElementById('lp-chart').getContext('2d');
    if(chart) chart.destroy();
    chart = new Chart(ctx, {
      type:'line',
      data:{ labels, datasets:[{ label:'متصلون/دقيقة', data, borderColor:'#10b981', backgroundColor:'rgba(16,185,129,.1)', tension:.35 }]},
      options:{ responsive:true, maintainAspectRatio:false, scales:{ y:{ beginAtZero:true }}}
    });
  }

  // التلقيم
  async function loadFeed(){
    const r = await fetch(feedUrl, {headers:{'Accept':'application/json'}});
    if(!r.ok) return;
    const d = await r.json();

    document.getElementById('lp-updated').textContent  = 'آخر تحديث: ' + (d.updated_at||'—');
    document.getElementById('lp-online').textContent   = d.online_now ?? 0;
    document.getElementById('lp-mods').textContent     = d.by_role?.moderators ?? 0;
    document.getElementById('lp-admins').textContent   = d.by_role?.super_admin ?? 0;
    document.getElementById('lp-avg').textContent      = d.avg_load_ms ?? 0;

    const pagesEl  = document.getElementById('lp-pages');
    const activeEl = document.getElementById('lp-active');

    const pages = d.top_pages || [];
    pagesEl.innerHTML = pages.length
      ? pages.map(p=>`<div class="p-2 rounded bg-gray-50 dark:bg-gray-900/30 flex items-center justify-between">
          <span class="truncate">${fmtPage(p.page_title)}</span>
          <span class="font-bold text-blue-600">${p.hits}</span>
        </div>`).join('')
      : '<div class="text-gray-500">لا بيانات.</div>';

    const people = d.active || [];
    activeEl.innerHTML = people.length
      ? people.map(u=>`<div class="p-2 rounded bg-gray-50 dark:bg-gray-900/30 flex items-center justify-between">
          <span class="truncate">${u.name} <small class="text-gray-500">(${u.membership_status})</small></span>
          <span class="font-bold text-emerald-600">${(u.minutes||0).toFixed(1)} د</span>
        </div>`).join('')
      : '<div class="text-gray-500">لا أحد نشط الآن.</div>';
  }

  // أول تحميل + تحديث دوري
  loadFeed(); loadChart();
  setInterval(loadFeed, 30000);
  setInterval(loadChart, 60000);
})();
</script>
@endpush