@extends('layouts.superadmin')

@section('content')
<style>
  .gauge-bg{
    background: conic-gradient(#ef4444 0deg 60deg, #f59e0b 60deg 120deg, #22c55e 120deg 180deg, rgba(0,0,0,0) 180deg 360deg);
  }
</style>

@php
  $fmt = fn(string $key, $val) => in_array($key, ['confirmed_hours','total_hours'], true)
      ? rtrim(rtrim(number_format((float)$val, 1, '.', ''), '0'), '.')
      : (int) $val;

  $cards = [
    'excuse' => [
      'title' => 'مؤشر اللايفات مع عذر',
      'desc'  => 'عدد اللايفات التي سُجّلت (مع عذر) خلال الشهر.',
      'icon'  => 'fa-user-shield',
    ],
    'no_excuse' => [
      'title' => 'مؤشر اللايفات بدون عذر',
      'desc'  => 'عدد اللايفات التي سُجّلت (بدون عذر) خلال الشهر.',
      'icon'  => 'fa-user-xmark',
    ],
    'confirmed_hours' => [
      'title' => 'ساعات اللايفات المؤكدة',
      'desc'  => 'إجمالي ساعات اللايفات التي تم تأكيدها فعلياً.',
      'icon'  => 'fa-circle-check',
    ],
    'total_hours' => [
      'title' => 'الساعات الكلية لكل اللايفات',
      'desc'  => 'كل ساعات اللايفات المجدولة (أي حالة) في هذا الشهر.',
      'icon'  => 'fa-clock',
    ],
  ];
@endphp

<div class="max-w-3xl mx-auto px-4 pb-14">
  <div class="mt-6">
    <h1 class="text-xl font-extrabold text-gray-900">مؤشر اللايفات</h1>
    <div class="text-sm text-gray-500 mt-1">
      {{ $stats['scope']['title'] }} • الشهر الحالي: {{ $stats['months']['current'] }} • السابق: {{ $stats['months']['previous'] }}
    </div>
  </div>

  {{-- اختيار العضو --}}
  <form class="mt-4 bg-white rounded-2xl p-4 shadow-sm border" method="GET">
    <div class="flex flex-col gap-3">
      <label class="text-sm font-semibold text-gray-700">اختر عضو</label>
      <select name="user_id" class="w-full rounded-xl border-gray-300 focus:border-indigo-500 focus:ring-indigo-500">
        <option value="all" {{ $selectedId === 'all' ? 'selected' : '' }}>جميع الأعضاء</option>
        @foreach($users as $u)
          <option value="{{ $u->id }}" {{ (string)$selectedId === (string)$u->id ? 'selected' : '' }}>
            {{ $u->name ?? $u->username }}
          </option>
        @endforeach
      </select>

      <button class="w-full rounded-xl bg-indigo-600 text-white py-2 font-semibold">
        عرض
      </button>
    </div>
  </form>

  {{-- مؤشر المرور + Gauge --}}
  <div class="mt-4 bg-white rounded-2xl p-4 shadow-sm border">
    <div class="flex items-center justify-between">
      <div>
        <div class="font-extrabold text-gray-900">إشارة المرور (مؤشر عام)</div>
        <div class="text-xs text-gray-500 mt-1">يعتمد على نمو ساعات المؤكدة + عقوبات العذر/بدون عذر.</div>
      </div>

      <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-bold {{ $stats['traffic']['class'] }}">
        <span class="w-2 h-2 rounded-full {{ $stats['traffic']['dot'] }}"></span>
        {{ $stats['traffic']['label'] }}
      </span>
    </div>

    <div class="mt-4 flex flex-col items-center">
      <div class="relative w-72 h-36 overflow-hidden">
        <div class="absolute left-0 top-0 w-72 h-72 rounded-full gauge-bg"></div>

        {{-- Needle --}}
        <div class="absolute left-1/2 bottom-0 w-[3px] h-28 bg-gray-900 origin-bottom"
             style="transform: translateX(-50%) rotate({{ $stats['angle'] }}deg); border-radius: 999px;"></div>
        <div class="absolute left-1/2 bottom-0 w-4 h-4 rounded-full bg-gray-900"
             style="transform: translateX(-50%);"></div>
      </div>

      <div class="-mt-2 text-4xl font-extrabold text-gray-900">{{ $stats['score'] }}</div>
      <div class="text-sm text-gray-600 mt-1">{{ $stats['score_label'] }}</div>
    </div>
  </div>

  {{-- الكروت --}}
  <div class="mt-4 space-y-3">
    @foreach($cards as $key => $meta)
      @php $m = $stats['metrics'][$key]; @endphp

      <div class="bg-white rounded-2xl p-4 shadow-sm border">
        <div class="flex items-start justify-between gap-3">
          <div>
            <div class="font-extrabold text-gray-900">{{ $meta['title'] }}</div>
            <div class="text-xs text-gray-500 mt-1">{{ $meta['desc'] }}</div>
          </div>
          <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-indigo-50">
            <i class="fa-solid {{ $meta['icon'] }} text-indigo-600 text-sm"></i>
          </span>
        </div>

        <div class="mt-3 flex justify-between">
          <div>
            <div class="text-xs text-gray-500">الشهر الحالي</div>
            <div class="text-2xl font-extrabold text-gray-900">{{ $fmt($key, $m['current']) }}</div>
          </div>
          <div class="text-left">
            <div class="text-xs text-gray-500">الشهر السابق</div>
            <div class="text-2xl font-extrabold text-gray-900">{{ $fmt($key, $m['prev']) }}</div>
          </div>
        </div>

        @php
          $badge = $m['is_good'] ? 'bg-green-50 text-green-700' : 'bg-red-50 text-red-700';
          $arrow = $m['dir'] === 'up' ? 'fa-arrow-up' : ($m['dir'] === 'down' ? 'fa-arrow-down' : 'fa-minus');
          $sign  = $m['delta'] > 0 ? '+' : '';
        @endphp

        <div class="mt-3 flex items-center justify-between">
          <span class="text-xs text-gray-500">
            {{ $m['delta'] == 0 ? 'ثبات' : ($m['is_good'] ? 'تحسّن' : 'تراجع') }}
          </span>

          <span class="inline-flex items-center gap-2 px-2 py-1 rounded-full text-xs font-bold {{ $badge }}">
            <i class="fa-solid {{ $arrow }} text-[10px]"></i>
            {{ $sign }}{{ rtrim(rtrim(number_format($m['percent'],1), '0'), '.') }}%
          </span>
        </div>
      </div>
    @endforeach
  </div>
</div>
@endsection