{{-- resources/views/superadmin/falcon-room/performance.blade.php --}}
@extends('layouts.superadmin')

@section('content')
@php
  use Illuminate\Support\Str;

  // مترجم بسيط يعتمد ملف config/page_names.php
  $pageMap = config('page_names', []);
  $toArabic = function($raw) use ($pageMap) {
      $key = Str::of((string)$raw)->lower()
            ->replace([' ','.','/'],'-')
            ->replaceMatches('/-+/', '-')
            ->trim('-')
            ->value();
      return $pageMap[$key] ?? Str::of($key)->replace('-', ' ')->title();
  };

  $fmtMs = function($ms){
      $ms = (int)round((float)$ms);
      if ($ms >= 1000) return number_format($ms/1000, 2).' ث';
      return $ms.' ms';
  };

  $pct = function($x){
      $x = (float)$x;
      return number_format($x, 1).'%';
  };

  // بيانات قد تكون غير موجودة — نعمل fallbacks
  $stats = $stats ?? [];
  $slowestPages = $slowestPages ?? collect();
  $devicePerformance = $devicePerformance ?? collect();
  $browserPerformance = $browserPerformance ?? collect();
  $dailyActivity = $dailyActivity ?? [];
  $hourlyActivity = $hourlyActivity ?? []; // [{hour:0,count:..,avg_time:..},...]
  $statusCodes = $statusCodes ?? []; // [{code:200,count:..},...]
  $topErrors = $topErrors ?? []; // [{route:'',count:..,last_at:''},...]
  $perfNotes = $perfNotes ?? []; // نصائح/ملاحظات من الكنترولر (اختياري)

  // مؤشرات إضافية لو توفرها بالكنترولر
  $p95 = $stats['p95_today'] ?? null;
  $p99 = $stats['p99_today'] ?? null;
  $errorRate = $stats['error_rate_today'] ?? null;          // نسبة %
  $slowRate  = $stats['slow_rate_today'] ?? null;           // نسبة % (مثلاً >1.5s)
  $avgToday  = (float)($stats['avg_load_today'] ?? 0);
  $peakHour  = $stats['peak_hour'] ?? 0;
  $totalReq  = (int)($stats['total_requests_today'] ?? 0);
  $uniqueU   = (int)($stats['unique_users_today'] ?? 0);

  // SLA تقديري (تقدر تغيّره حسب سياستك)
  $SLA_OK_MS    = 800;    // ممتاز
  $SLA_WARN_MS  = 1500;   // تحذير
  $slaLabel = function($avg) use ($SLA_OK_MS,$SLA_WARN_MS){
      $avg = (float)$avg;
      if ($avg >= $SLA_WARN_MS) return ['حرج','bg-rose-500/15 text-rose-200 ring-rose-400/30'];
      if ($avg >= $SLA_OK_MS)   return ['تحذير','bg-amber-500/15 text-amber-200 ring-amber-400/30'];
      return ['ممتاز','bg-emerald-500/15 text-emerald-200 ring-emerald-400/30'];
  };
@endphp

<div class="px-4 sm:px-6 lg:px-8 py-6 space-y-6">

  {{-- HERO (Socratic / Falcon Room) --}}
  <div class="relative overflow-hidden rounded-3xl border border-cyan-500/25 bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950
              shadow-[0_25px_80px_rgba(2,6,23,0.55)]">
    <div class="absolute inset-0 pointer-events-none">
      <div class="absolute -top-24 -right-16 h-72 w-72 rounded-full blur-3xl bg-cyan-500/18"></div>
      <div class="absolute -bottom-24 -left-16 h-80 w-80 rounded-full blur-3xl bg-fuchsia-500/12"></div>
      <div class="absolute inset-0 bg-white/5 backdrop-blur-2xl"></div>
    </div>

    <div class="relative p-5 sm:p-7 flex flex-col gap-4">
      <div class="flex items-start justify-between gap-3">
        <div class="space-y-1">
          <h1 class="text-xl sm:text-2xl font-extrabold text-white flex items-center gap-2">
            <span class="inline-flex items-center justify-center w-9 h-9 rounded-2xl bg-cyan-500/15 border border-cyan-400/25 text-cyan-200">
              <i class="fa-solid fa-gauge-high text-sm"></i>
            </span>
            إحصائيات الأداء والتحميل — سقراط
          </h1>
          <p class="text-white/70 text-[12px] sm:text-[13px]">
            أسئلة سقراط: أين يضيع الوقت؟ من المتضرر؟ ما الأكثر تأثيرًا على تجربة العضو؟
          </p>
        </div>

        <div class="text-right">
          <div class="text-[11px] text-white/55">آخر تحديث</div>
          <div class="text-[12px] font-bold text-white">{{ now()->format('H:i:s') }}</div>
        </div>
      </div>

      {{-- شريط “لماذا هذا مهم؟” --}}
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-3">
        <div class="rounded-2xl border border-white/10 bg-white/5 p-4">
          <div class="text-[12px] text-white/60">لماذا مهم؟</div>
          <div class="text-[13px] font-semibold text-white mt-1">الأداء = ثقة المستخدم</div>
          <div class="text-[11px] text-white/55 mt-1">كل 1 ثانية تأخير تقلل التفاعل وتزيد الأخطاء والشكاوى.</div>
        </div>
        <div class="rounded-2xl border border-white/10 bg-white/5 p-4">
          <div class="text-[12px] text-white/60">هدف اليوم</div>
          <div class="text-[13px] font-semibold text-white mt-1">خفض الصفحات البطيئة</div>
          <div class="text-[11px] text-white/55 mt-1">نركّز على الصفحات ذات زيارات أعلى + وقت أعلى.</div>
        </div>
        <div class="rounded-2xl border border-white/10 bg-white/5 p-4">
          <div class="text-[12px] text-white/60">مؤشر صحة سريع</div>
          @php [$slaText,$slaCls] = $slaLabel($avgToday); @endphp
          <div class="flex items-center justify-between mt-1">
            <div class="text-[13px] font-extrabold text-white">{{ $fmtMs($avgToday) }}</div>
            <span class="inline-flex items-center justify-center px-2 py-0.5 rounded-full text-[10px] font-bold ring-1 {{ $slaCls }}">
              {{ $slaText }}
            </span>
          </div>
          <div class="text-[11px] text-white/55 mt-1">متوسط زمن التحميل اليوم (AVG).</div>
        </div>
      </div>
    </div>
  </div>

  {{-- KPI Cards (Socratic Stats) --}}
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-6 gap-3">

    {{-- AVG --}}
    <div class="rounded-2xl border border-cyan-500/20 bg-gradient-to-br from-slate-950 to-slate-900 p-4 shadow-lg">
      <div class="text-[11px] text-white/60">AVG اليوم</div>
      <div class="text-2xl font-extrabold text-white mt-1">{{ $fmtMs($avgToday) }}</div>
      <div class="text-[10px] text-white/50 mt-1">مؤشر عام — ممتاز للمقارنة اليومية</div>
    </div>

    {{-- P95 --}}
    <div class="rounded-2xl border border-indigo-500/20 bg-gradient-to-br from-slate-950 to-slate-900 p-4 shadow-lg">
      <div class="text-[11px] text-white/60">P95 اليوم</div>
      <div class="text-2xl font-extrabold text-white mt-1">
        {{ $p95 !== null ? $fmtMs($p95) : '—' }}
      </div>
      <div class="text-[10px] text-white/50 mt-1">الواقع الحقيقي للمستخدمين (أفضل من AVG)</div>
    </div>

    {{-- P99 --}}
    <div class="rounded-2xl border border-fuchsia-500/20 bg-gradient-to-br from-slate-950 to-slate-900 p-4 shadow-lg">
      <div class="text-[11px] text-white/60">P99 اليوم</div>
      <div class="text-2xl font-extrabold text-white mt-1">
        {{ $p99 !== null ? $fmtMs($p99) : '—' }}
      </div>
      <div class="text-[10px] text-white/50 mt-1">يكشف حالات “التهنيج” النادرة</div>
    </div>

    {{-- Requests --}}
    <div class="rounded-2xl border border-white/10 bg-gradient-to-br from-slate-950 to-slate-900 p-4 shadow-lg">
      <div class="text-[11px] text-white/60">طلبات اليوم</div>
      <div class="text-2xl font-extrabold text-white mt-1">{{ number_format($totalReq) }}</div>
      <div class="text-[10px] text-white/50 mt-1">حجم الضغط على النظام</div>
    </div>

    {{-- Unique Users --}}
    <div class="rounded-2xl border border-emerald-500/20 bg-gradient-to-br from-slate-950 to-slate-900 p-4 shadow-lg">
      <div class="text-[11px] text-white/60">مستخدمون فريدون</div>
      <div class="text-2xl font-extrabold text-white mt-1">{{ number_format($uniqueU) }}</div>
      <div class="text-[10px] text-white/50 mt-1">يربط الأداء بتجربة عدد أكبر</div>
    </div>

    {{-- Peak hour --}}
    <div class="rounded-2xl border border-amber-500/20 bg-gradient-to-br from-slate-950 to-slate-900 p-4 shadow-lg">
      <div class="text-[11px] text-white/60">ساعة الذروة</div>
      <div class="text-2xl font-extrabold text-white mt-1">{{ (int)$peakHour }}:00</div>
      <div class="text-[10px] text-white/50 mt-1">ركّز التحسين قبل الذروة</div>
    </div>

  </div>

  {{-- Socratic Health Row (Error/Slow) --}}
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">

    <div class="rounded-2xl border border-white/10 bg-white/70 dark:bg-slate-900/70 backdrop-blur-xl p-4 shadow-lg">
      <div class="flex items-center justify-between">
        <h3 class="font-extrabold text-slate-800 dark:text-white">🧠 سؤال سقراط</h3>
        <span class="text-[11px] text-slate-500 dark:text-white/50">Health</span>
      </div>
      <div class="mt-2 text-[13px] text-slate-700 dark:text-white/70">
        ما الذي يؤثر أكثر على العضو: “الصفحات البطيئة” أم “الأخطاء”؟
      </div>

      <div class="mt-3 grid grid-cols-2 gap-3">
        <div class="rounded-xl border border-slate-200/70 dark:border-white/10 bg-white/80 dark:bg-white/5 p-3">
          <div class="text-[11px] text-slate-500 dark:text-white/50">معدل الأخطاء</div>
          <div class="text-lg font-extrabold text-slate-900 dark:text-white mt-1">
            {{ $errorRate !== null ? $pct($errorRate) : '—' }}
          </div>
          <div class="text-[10px] text-slate-500 dark:text-white/50 mt-1">كل 1% خطأ = نزف ثقة</div>
        </div>

        <div class="rounded-xl border border-slate-200/70 dark:border-white/10 bg-white/80 dark:bg-white/5 p-3">
          <div class="text-[11px] text-slate-500 dark:text-white/50">نسبة البطيء</div>
          <div class="text-lg font-extrabold text-slate-900 dark:text-white mt-1">
            {{ $slowRate !== null ? $pct($slowRate) : '—' }}
          </div>
          <div class="text-[10px] text-slate-500 dark:text-white/50 mt-1">> 1.5s (مثال) حسب تعريفك</div>
        </div>
      </div>

      @if(!empty($perfNotes))
        <div class="mt-3 rounded-xl border border-amber-400/25 bg-amber-50/80 dark:bg-amber-900/15 p-3">
          <div class="text-[11px] font-bold text-amber-800 dark:text-amber-200">ملاحظة تشغيلية</div>
          <ul class="mt-1 text-[11px] text-amber-800/80 dark:text-amber-100/70 space-y-1 list-disc pr-4">
            @foreach($perfNotes as $n)
              <li>{{ $n }}</li>
            @endforeach
          </ul>
        </div>
      @endif
    </div>

    {{-- Status code chart --}}
    <div class="rounded-2xl border border-white/10 bg-white/70 dark:bg-slate-900/70 backdrop-blur-xl p-4 shadow-lg">
      <div class="flex items-center justify-between">
        <h3 class="font-extrabold text-slate-800 dark:text-white">📦 توزيع الاستجابات</h3>
        <span class="text-[11px] text-slate-500 dark:text-white/50">Status Codes</span>
      </div>
      <div class="mt-3 h-[240px]">
        @if(!empty($statusCodes))
          <canvas id="statusChart"></canvas>
        @else
          <div class="h-full grid place-items-center text-[12px] text-slate-500 dark:text-white/50">
            لا توجد بيانات لتوزيع الأكواد.
          </div>
        @endif
      </div>
      <div class="mt-2 text-[11px] text-slate-600 dark:text-white/55">
        لماذا مهم؟ ارتفاع 4xx/5xx يعني مشاكل تجربة أو سيرفر — غالبًا أكثر إلحاحًا من البطء.
      </div>
    </div>

    {{-- Hourly chart --}}
    <div class="rounded-2xl border border-white/10 bg-white/70 dark:bg-slate-900/70 backdrop-blur-xl p-4 shadow-lg">
      <div class="flex items-center justify-between">
        <h3 class="font-extrabold text-slate-800 dark:text-white">⏱️ نبض الساعات</h3>
        <span class="text-[11px] text-slate-500 dark:text-white/50">Hourly</span>
      </div>
      <div class="mt-3 h-[240px]">
        @if(!empty($hourlyActivity))
          <canvas id="hourlyChart"></canvas>
        @else
          <div class="h-full grid place-items-center text-[12px] text-slate-500 dark:text-white/50">
            لا توجد بيانات للساعات.
          </div>
        @endif
      </div>
      <div class="mt-2 text-[11px] text-slate-600 dark:text-white/55">
        أين الذروة؟ هذه اللوحة تساعدك تعرف هل البطء مرتبط بالضغط أو صفحة محددة.
      </div>
    </div>

  </div>

  {{-- Slowest Pages (SLA badges + focus) --}}
  <div class="rounded-2xl border border-white/10 bg-white/70 dark:bg-slate-900/70 backdrop-blur-xl shadow-lg overflow-hidden">
    <div class="p-4 sm:p-5 flex items-center justify-between">
      <div>
        <h3 class="font-extrabold text-slate-800 dark:text-white">🐌 أبطأ الصفحات تحميلًا</h3>
        <p class="text-[12px] text-slate-500 dark:text-white/55 mt-1">
          سقراط: هل هذه الصفحة “مهمة كثيرًا” أم “بطيئة بلا فائدة”؟ رتّب حسب (زيارات × وقت).
        </p>
      </div>
      <span class="text-[11px] text-slate-500 dark:text-white/50">Top Slow Pages</span>
    </div>

    <div class="overflow-x-auto">
      <table class="min-w-[900px] w-full text-sm">
        <thead class="bg-slate-50/80 dark:bg-white/5">
          <tr class="text-right text-slate-600 dark:text-white/70">
            <th class="p-3">الصفحة (عربي)</th>
            <th class="p-3">المفتاح</th>
            <th class="p-3">AVG</th>
            <th class="p-3">MAX</th>
            <th class="p-3">الزيارات</th>
            <th class="p-3">SLA</th>
          </tr>
        </thead>
        <tbody>
          @forelse($slowestPages as $p)
            @php
              $avg = (float)($p->avg_time ?? 0);
              $max = (float)($p->max_time ?? 0);
              $avgClass = $avg > 1500 ? 'text-rose-600 font-extrabold'
                        : ($avg > 800 ? 'text-amber-700 font-bold' : 'text-emerald-700 font-bold');
              [$slaText,$slaCls] = $slaLabel($avg);
            @endphp
            <tr class="border-t border-slate-200/60 dark:border-white/10 hover:bg-slate-50/70 dark:hover:bg-white/5">
              <td class="p-3">
                <span class="inline-flex items-center gap-2 px-2 py-1 rounded-xl bg-slate-100/80 dark:bg-white/5 text-slate-700 dark:text-white/80">
                  <i class="fa-solid fa-link text-[11px] opacity-70"></i>
                  {{ $toArabic($p->page_title) }}
                </span>
              </td>
              <td class="p-3 text-[11px] text-slate-500 dark:text-white/50">{{ $p->page_title ?? '—' }}</td>
              <td class="p-3"><span class="{{ $avgClass }}">{{ $fmtMs($avg) }}</span></td>
              <td class="p-3 text-slate-700 dark:text-white/70">{{ $fmtMs($max) }}</td>
              <td class="p-3 text-slate-700 dark:text-white/70">{{ number_format($p->visits ?? 0) }}</td>
              <td class="p-3">
                <span class="inline-flex items-center justify-center px-2 py-0.5 rounded-full text-[10px] font-bold ring-1 {{ $slaCls }}">
                  {{ $slaText }}
                </span>
              </td>
            </tr>
          @empty
            <tr>
              <td colspan="6" class="p-5 text-center text-slate-500 dark:text-white/50">لا توجد بيانات.</td>
            </tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </div>

  {{-- Device + Browser (Charts + list fallback) --}}
  <div class="grid grid-cols-1 xl:grid-cols-2 gap-4">

    <div class="rounded-2xl border border-white/10 bg-white/70 dark:bg-slate-900/70 backdrop-blur-xl p-4 shadow-lg">
      <div class="flex items-center justify-between">
        <h3 class="font-extrabold text-slate-800 dark:text-white">📱 الأداء حسب نوع الجهاز</h3>
        <span class="text-[11px] text-slate-500 dark:text-white/50">Devices</span>
      </div>

      <div class="mt-3 h-[240px]">
        @if($devicePerformance->count())
          <canvas id="deviceChart"></canvas>
        @else
          <div class="h-full grid place-items-center text-[12px] text-slate-500 dark:text-white/50">لا توجد بيانات.</div>
        @endif
      </div>

      <div class="mt-3 space-y-2">
        @foreach($devicePerformance as $d)
          <div class="flex items-center justify-between p-3 rounded-xl bg-slate-50/80 dark:bg-white/5 border border-slate-200/60 dark:border-white/10">
            <div class="font-bold text-slate-700 dark:text-white/80">{{ $d->device_type ?? 'غير محدد' }}</div>
            <div class="text-right">
              <div class="font-extrabold text-slate-900 dark:text-white">{{ $fmtMs($d->avg_time ?? 0) }}</div>
              <div class="text-[11px] text-slate-500 dark:text-white/50">{{ number_format($d->requests ?? 0) }} طلب</div>
            </div>
          </div>
        @endforeach
      </div>
    </div>

    <div class="rounded-2xl border border-white/10 bg-white/70 dark:bg-slate-900/70 backdrop-blur-xl p-4 shadow-lg">
      <div class="flex items-center justify-between">
        <h3 class="font-extrabold text-slate-800 dark:text-white">🌐 الأداء حسب المتصفح</h3>
        <span class="text-[11px] text-slate-500 dark:text-white/50">Browsers</span>
      </div>

      <div class="mt-3 h-[240px]">
        @if($browserPerformance->count())
          <canvas id="browserChart"></canvas>
        @else
          <div class="h-full grid place-items-center text-[12px] text-slate-500 dark:text-white/50">لا توجد بيانات.</div>
        @endif
      </div>

      <div class="mt-3 space-y-2">
        @foreach($browserPerformance as $b)
          <div class="flex items-center justify-between p-3 rounded-xl bg-slate-50/80 dark:bg-white/5 border border-slate-200/60 dark:border-white/10">
            <div class="font-bold text-slate-700 dark:text-white/80">{{ $b->browser ?? 'غير محدد' }}</div>
            <div class="text-right">
              <div class="font-extrabold text-slate-900 dark:text-white">{{ $fmtMs($b->avg_time ?? 0) }}</div>
              <div class="text-[11px] text-slate-500 dark:text-white/50">{{ number_format($b->requests ?? 0) }} طلب</div>
            </div>
          </div>
        @endforeach
      </div>
    </div>

  </div>

  {{-- Daily chart (30 days) --}}
  <div class="rounded-2xl border border-white/10 bg-white/70 dark:bg-slate-900/70 backdrop-blur-xl shadow-lg p-4">
    <div class="flex items-center justify-between">
      <h3 class="font-extrabold text-slate-800 dark:text-white">📊 النشاط اليومي (آخر 30 يوم)</h3>
      <span class="text-[11px] text-slate-500 dark:text-white/50">Daily</span>
    </div>
    <p class="text-[12px] text-slate-500 dark:text-white/55 mt-1">
      سقراط: هل التحسن مستمر أم مجرد يوم واحد؟ تابع trend وليس رقم لحظي.
    </p>

    <div class="overflow-x-auto mt-3">
      <div style="min-width: 920px; height: 340px;">
        <canvas id="dailyChart"></canvas>
      </div>
    </div>
  </div>

</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
  const daily = @json($dailyActivity);
  const hourly = @json($hourlyActivity);
  const statusCodes = @json($statusCodes);

  const devicePerf = @json($devicePerformance->values());
  const browserPerf = @json($browserPerformance->values());

  // Daily chart
  const dailyCanvas = document.getElementById('dailyChart');
  if (dailyCanvas && Array.isArray(daily) && daily.length) {
    new Chart(dailyCanvas.getContext('2d'), {
      type: 'line',
      data: {
        labels: daily.map(d => d.date),
        datasets: [
          {
            label: 'عدد الطلبات',
            data: daily.map(d => Number(d.count || 0)),
            borderColor: 'rgb(59, 130, 246)',
            backgroundColor: 'rgba(59, 130, 246, 0.10)',
            tension: 0.25,
            yAxisID: 'y',
          },
          {
            label: 'متوسط السرعة (ms)',
            data: daily.map(d => Math.round(Number(d.avg_time || 0))),
            borderColor: 'rgb(239, 68, 68)',
            backgroundColor: 'rgba(239, 68, 68, 0.08)',
            tension: 0.25,
            yAxisID: 'y1',
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        interaction: { mode: 'index', intersect: false },
        plugins: {
          legend: { display: true, labels: { usePointStyle: true, boxWidth: 8 } },
          tooltip: {
            callbacks: {
              label: (ctx) => ctx.dataset.label.includes('السرعة')
                ? `${ctx.formattedValue} ms`
                : `${ctx.formattedValue} طلب`
            }
          }
        },
        scales: {
          y: { type: 'linear', position: 'left', title: { display: true, text: 'عدد الطلبات' } },
          y1: { type: 'linear', position: 'right', title: { display: true, text: 'السرعة (ms)' }, grid: { drawOnChartArea: false } }
        }
      }
    });
  }

  // Hourly chart
  const hourlyCanvas = document.getElementById('hourlyChart');
  if (hourlyCanvas && Array.isArray(hourly) && hourly.length) {
    new Chart(hourlyCanvas.getContext('2d'), {
      type: 'bar',
      data: {
        labels: hourly.map(x => String(x.hour).padStart(2,'0') + ':00'),
        datasets: [
          {
            label: 'عدد الطلبات',
            data: hourly.map(x => Number(x.count || 0)),
            backgroundColor: 'rgba(16, 185, 129, 0.25)',
            borderColor: 'rgb(16, 185, 129)',
            borderWidth: 1,
            yAxisID: 'y',
          },
          {
            label: 'متوسط السرعة (ms)',
            data: hourly.map(x => Math.round(Number(x.avg_time || 0))),
            backgroundColor: 'rgba(59, 130, 246, 0.18)',
            borderColor: 'rgb(59, 130, 246)',
            borderWidth: 1,
            yAxisID: 'y1',
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        interaction: { mode: 'index', intersect: false },
        plugins: { legend: { display: true, labels: { usePointStyle: true, boxWidth: 8 } } },
        scales: {
          y: { type: 'linear', position: 'left', title: { display: true, text: 'عدد الطلبات' } },
          y1: { type: 'linear', position: 'right', title: { display: true, text: 'السرعة (ms)' }, grid: { drawOnChartArea: false } }
        }
      }
    });
  }

  // Status codes pie
  const statusCanvas = document.getElementById('statusChart');
  if (statusCanvas && Array.isArray(statusCodes) && statusCodes.length) {
    new Chart(statusCanvas.getContext('2d'), {
      type: 'doughnut',
      data: {
        labels: statusCodes.map(s => String(s.code)),
        datasets: [{
          label: 'عدد',
          data: statusCodes.map(s => Number(s.count || 0)),
          backgroundColor: [
            'rgba(16, 185, 129, 0.35)',
            'rgba(59, 130, 246, 0.35)',
            'rgba(245, 158, 11, 0.35)',
            'rgba(239, 68, 68, 0.35)',
            'rgba(168, 85, 247, 0.35)',
            'rgba(236, 72, 153, 0.35)'
          ],
          borderColor: [
            'rgb(16, 185, 129)',
            'rgb(59, 130, 246)',
            'rgb(245, 158, 11)',
            'rgb(239, 68, 68)',
            'rgb(168, 85, 247)',
            'rgb(236, 72, 153)'
          ],
          borderWidth: 1
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: { position: 'bottom', labels: { usePointStyle: true, boxWidth: 8 } }
        }
      }
    });
  }

  // Device bar
  const deviceCanvas = document.getElementById('deviceChart');
  if (deviceCanvas && Array.isArray(devicePerf) && devicePerf.length) {
    new Chart(deviceCanvas.getContext('2d'), {
      type: 'bar',
      data: {
        labels: devicePerf.map(d => d.device_type || 'غير محدد'),
        datasets: [{
          label: 'متوسط السرعة (ms)',
          data: devicePerf.map(d => Math.round(Number(d.avg_time || 0))),
          backgroundColor: 'rgba(20, 184, 166, 0.25)',
          borderColor: 'rgb(20, 184, 166)',
          borderWidth: 1
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: { y: { title: { display: true, text: 'ms' } } }
      }
    });
  }

  // Browser bar
  const browserCanvas = document.getElementById('browserChart');
  if (browserCanvas && Array.isArray(browserPerf) && browserPerf.length) {
    new Chart(browserCanvas.getContext('2d'), {
      type: 'bar',
      data: {
        labels: browserPerf.map(b => b.browser || 'غير محدد'),
        datasets: [{
          label: 'متوسط السرعة (ms)',
          data: browserPerf.map(b => Math.round(Number(b.avg_time || 0))),
          backgroundColor: 'rgba(99, 102, 241, 0.25)',
          borderColor: 'rgb(99, 102, 241)',
          borderWidth: 1
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: { y: { title: { display: true, text: 'ms' } } }
      }
    });
  }
});
</script>
@endpush