@extends('layouts.superadmin')
@section('title','نظام زُهرة — الإحصائيات')

@section('content')
<div class="min-h-screen rtl py-6 sm:py-8 bg-gradient-to-b from-slate-950 via-rose-950/40 to-black">
  <div class="max-w-7xl mx-auto px-3 sm:px-4 lg:px-6 space-y-6">

    {{-- TOP BAR --}}
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
      <nav class="flex items-center gap-2 text-[12px] text-slate-200/70">
        <a href="{{ route('superadmin.zuhra.dashboard') }}"
           class="inline-flex items-center gap-2 px-3 py-2 rounded-2xl bg-black/30 border border-white/10 hover:bg-white/5 transition">
          <i class="fa-solid fa-seedling text-rose-200"></i>
          <span>زُهرة</span>
        </a>

        <svg class="w-4 h-4 text-white/30 rotate-180" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
        </svg>

        <span class="inline-flex items-center gap-2 px-3 py-2 rounded-2xl bg-black/40 border border-rose-300/20 text-white font-bold">
          الإحصائيات
        </span>
      </nav>

      <div class="flex items-center gap-2">
        <a href="{{ route('superadmin.zuhra.monitor.index') }}"
           class="inline-flex items-center justify-center px-4 py-2 rounded-2xl bg-white/10 border border-white/15 text-white/90 text-xs hover:bg-white/15 transition">
          <i class="fa-solid fa-shield-heart ms-2 text-[11px]"></i>
          المراقبة
        </a>

        <a href="{{ route('superadmin.zuhra.meetings.index') }}"
           class="inline-flex items-center justify-center px-4 py-2 rounded-2xl bg-white/10 border border-white/15 text-white/90 text-xs hover:bg-white/15 transition">
          <i class="fa-solid fa-calendar-days ms-2 text-[11px]"></i>
          الاجتماعات
        </a>
      </div>
    </div>

    {{-- HERO FILTER --}}
    <div class="rounded-3xl bg-black/25 border border-white/10 p-5 shadow-xl">
      <div class="flex items-center justify-between gap-3">
        <div>
          <div class="text-[11px] text-white/60">Analytics</div>
          <div class="font-extrabold text-white">مخططات “עוגות ותרשימים” + تحليلات AI</div>
          <div class="text-[12px] text-white/60 mt-1">{{ $range['fromDate'] }} → {{ $range['toDate'] }}</div>
        </div>

        <form method="get" class="grid grid-cols-2 gap-2">
          <div>
            <label class="text-[10px] text-white/60">من</label>
            <input type="date" name="from" value="{{ $range['fromDate'] }}"
                   class="w-full mt-1 rounded-2xl bg-black/40 border border-white/15 text-sm text-white px-3 py-2 focus:outline-none focus:ring-2 focus:ring-rose-500/40">
          </div>
          <div>
            <label class="text-[10px] text-white/60">إلى</label>
            <input type="date" name="to" value="{{ $range['toDate'] }}"
                   class="w-full mt-1 rounded-2xl bg-black/40 border border-white/15 text-sm text-white px-3 py-2 focus:outline-none focus:ring-2 focus:ring-fuchsia-500/40">
          </div>

          <button class="col-span-2 inline-flex items-center justify-center px-4 py-2 rounded-2xl text-xs font-bold text-slate-900
                  bg-gradient-to-r from-rose-200 via-fuchsia-200 to-cyan-200 shadow-lg shadow-rose-500/25 hover:scale-[1.01] active:scale-100 transition">
            <i class="fa-solid fa-rotate ms-2 text-[11px]"></i>
            تحديث
          </button>
        </form>
      </div>
    </div>

    @php
      $scheduled = $statusCounts['scheduled'] ?? 0;
      $ongoing = $statusCounts['ongoing'] ?? 0;
      $completed = $statusCounts['completed'] ?? 0;
      $cancelled = $statusCounts['cancelled'] ?? 0;

      $attended = $attendanceCounts['attended'] ?? 0;
      $invited = $attendanceCounts['invited'] ?? 0;
      $excused = $attendanceCounts['absent_excused'] ?? 0;
      $unexcused = $attendanceCounts['absent_unexcused'] ?? 0;
    @endphp

    {{-- DONUTS --}}
    <div class="grid gap-4 lg:grid-cols-3">
      <div class="rounded-3xl bg-black/25 border border-white/10 p-5">
        <div class="font-extrabold text-white mb-3">حالات الاجتماعات</div>
        <div class="flex items-center gap-4">
          @include('superadmin.zuhra.partials.donut', [
            'segments' => [
              ['value'=>$completed, 'stroke'=>'stroke-emerald-300'],
              ['value'=>$scheduled, 'stroke'=>'stroke-rose-300'],
              ['value'=>$ongoing, 'stroke'=>'stroke-cyan-300'],
              ['value'=>$cancelled, 'stroke'=>'stroke-amber-300'],
            ],
            'center' => $totalMeetings,
            'label' => 'اجتماع',
            'size' => 140
          ])
          <div class="text-[12px] text-white/80 space-y-1">
            <div>مكتمل: <b class="text-white">{{ $completed }}</b></div>
            <div>مجدول: <b class="text-white">{{ $scheduled }}</b></div>
            <div>جارٍ: <b class="text-white">{{ $ongoing }}</b></div>
            <div>ملغي: <b class="text-white">{{ $cancelled }}</b></div>
          </div>
        </div>
      </div>

      <div class="rounded-3xl bg-black/25 border border-white/10 p-5">
        <div class="font-extrabold text-white mb-3">تغطية المحاضر</div>
        <div class="flex items-center gap-4">
          @include('superadmin.zuhra.partials.donut', [
            'segments' => [
              ['value'=>$reportsCount, 'stroke'=>'stroke-fuchsia-300'],
              ['value'=>$missingReports, 'stroke'=>'stroke-amber-300'],
            ],
            'center' => $reportsCount,
            'label' => 'محضر',
            'size' => 140
          ])
          <div class="text-[12px] text-white/80 space-y-1">
            <div>محاضر: <b class="text-white">{{ $reportsCount }}</b></div>
            <div>بدون محضر: <b class="text-white">{{ $missingReports }}</b></div>
            <div class="mt-2 text-white/60">متوسط المدة: <b class="text-white">{{ $avgDuration ?: '—' }}</b> دقيقة</div>
          </div>
        </div>
      </div>

      <div class="rounded-3xl bg-black/25 border border-white/10 p-5">
        <div class="font-extrabold text-white mb-3">الحضور</div>
        <div class="flex items-center gap-4">
          @include('superadmin.zuhra.partials.donut', [
            'segments' => [
              ['value'=>$attended, 'stroke'=>'stroke-emerald-300'],
              ['value'=>$invited, 'stroke'=>'stroke-cyan-300'],
              ['value'=>$excused, 'stroke'=>'stroke-amber-300'],
              ['value'=>$unexcused, 'stroke'=>'stroke-rose-300'],
            ],
            'center' => ($attended + $invited + $excused + $unexcused),
            'label' => 'مشاركة',
            'size' => 140
          ])
          <div class="text-[12px] text-white/80 space-y-1">
            <div>حضر: <b class="text-white">{{ $attended }}</b></div>
            <div>مدعو: <b class="text-white">{{ $invited }}</b></div>
            <div>بعذر: <b class="text-white">{{ $excused }}</b></div>
            <div>بدون عذر: <b class="text-white">{{ $unexcused }}</b></div>
          </div>
        </div>
      </div>
    </div>

    {{-- TREND --}}
    <div class="rounded-3xl bg-black/25 border border-white/10 p-5">
      <div class="flex items-center justify-between mb-4">
        <div>
          <div class="text-[11px] text-white/60">Trend</div>
          <div class="font-extrabold text-white">عدد الاجتماعات يوميًا</div>
        </div>
        <span class="text-[11px] text-white/70 bg-white/5 border border-white/10 px-3 py-1 rounded-full">
          آخر {{ count($trend) }} يوم
        </span>
      </div>

      <div class="flex items-end gap-1 h-28">
        @foreach($trend as $d => $c)
          @php $h = (int) round(($c / $maxTrend) * 100); @endphp
          <div class="flex-1 group">
            <div class="rounded-t-lg bg-rose-200/10 border border-rose-300/10 group-hover:bg-rose-200/15 transition"
                 style="height: {{ max(4, $h) }}%;">
            </div>
          </div>
        @endforeach
      </div>

      <div class="mt-3 grid grid-cols-4 text-[10px] text-white/50">
        <span>{{ array_key_first($trend) }}</span>
        <span class="text-center">{{ \Carbon\Carbon::parse(array_key_first($trend))->addDays((int)(count($trend)*0.33))->toDateString() }}</span>
        <span class="text-center">{{ \Carbon\Carbon::parse(array_key_first($trend))->addDays((int)(count($trend)*0.66))->toDateString() }}</span>
        <span class="text-left">{{ array_key_last($trend) }}</span>
      </div>
    </div>

    {{-- AI INSIGHTS --}}
    <div class="grid gap-4 lg:grid-cols-2">
      <div class="rounded-3xl bg-black/25 border border-white/10 p-5">
        <div class="font-extrabold text-white mb-3">Zuhra AI — استنتاجات</div>
        <div class="space-y-2">
          @foreach($insights as $i)
            <div class="rounded-2xl bg-white/5 border border-white/10 p-4">
              <div class="font-extrabold text-rose-200 text-sm">{{ $i['title'] }}</div>
              <div class="text-[12px] text-white/80 mt-1">{{ $i['text'] }}</div>
            </div>
          @endforeach
        </div>
      </div>

      <div class="rounded-3xl bg-black/25 border border-white/10 p-5">
        <div class="font-extrabold text-white mb-3">الكلمات الأكثر تكرارًا</div>
        <div class="flex flex-wrap gap-2">
          @forelse($keywords as $k)
            <span class="text-[11px] px-3 py-1 rounded-full bg-fuchsia-200/10 border border-fuchsia-300/20 text-fuchsia-100">
              {{ $k['word'] }} <span class="opacity-60">({{ $k['count'] }})</span>
            </span>
          @empty
            <div class="text-white/60 text-sm">لا توجد كلمات كافية لاستخراجها.</div>
          @endforelse
        </div>

        <div class="mt-4 rounded-2xl bg-rose-200/10 border border-rose-300/20 p-4 text-[12px] text-rose-100/90">
          <span class="font-extrabold">معلومة:</span>
          لما تكتب القرارات والمهام كبنود، الكلمات المفتاحية تصبح أدق.
        </div>
      </div>
    </div>

  </div>
</div>
@endsection