@extends('layouts.superadmin')

@section('title','نظرة عامة ذكية - ProMission')
@section('page-title','ProMission Insights')

@section('content')
<div class="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-slate-950 py-6">
<div class="max-w-6xl mx-auto px-4 rtl text-white">

    {{-- Header --}}
    <div class="mb-6 flex items-start justify-between gap-3">
        <div class="flex items-center gap-3">
            <div class="h-11 w-11 rounded-2xl bg-slate-800 grid place-items-center
                        ring-2 ring-indigo-500/60 shadow-lg shadow-indigo-500/30">
                <i class="fa-solid fa-brain text-indigo-300 text-xl"></i>
            </div>
            <div>
                <h1 class="text-xl sm:text-2xl font-bold">النظرة الذكية (Insights)</h1>
                <p class="text-sm text-slate-300/80">
                    قراءة شاملة للأداء، الالتزام، والاستمرارية داخل التيم.
                </p>
            </div>
        </div>
    </div>

    {{-- KPIs --}}
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
        <div class="rounded-2xl bg-emerald-500/10 border border-emerald-500/30 p-4">
            <div class="text-[12px] text-emerald-200">أعلى Commitment</div>
            <div class="text-2xl font-extrabold text-emerald-100">
                {{ $top_commitment['name'] ?? '—' }}
            </div>
            <div class="text-[11px] text-emerald-200/80">
                {{ $top_commitment['value'] ?? 0 }}%
            </div>
        </div>

        <div class="rounded-2xl bg-sky-500/10 border border-sky-500/30 p-4">
            <div class="text-[12px] text-sky-200">أعلى Streak</div>
            <div class="text-2xl font-extrabold text-sky-100">
                {{ $top_streak['name'] ?? '—' }}
            </div>
            <div class="text-[11px] text-sky-200/80">
                {{ $top_streak['days'] ?? 0 }} يوم
            </div>
        </div>

        <div class="rounded-2xl bg-purple-500/10 border border-purple-500/30 p-4">
            <div class="text-[12px] text-purple-200">توزيع الأدوار الذكية</div>
            <div class="text-[11px] text-purple-100/80 mt-2 space-y-1">
                @foreach(($roles_counts ?? []) as $role => $count)
                    <div>• {{ $role }}: {{ $count }}</div>
                @endforeach
            </div>
        </div>
    </div>

    {{-- Navigation --}}
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
        <a href="{{ route('superadmin.promission.insights.alerts') }}"
           class="rounded-2xl border border-amber-500/30 bg-amber-500/10 p-4 hover:bg-amber-500/20 transition">
            <div class="font-extrabold text-amber-200 mb-1">🔔 التنبيهات الذكية</div>
            <div class="text-[12px] text-amber-100/80">
                خمول، أداء منخفض، انقطاع استمرارية
            </div>
        </a>

        <a href="{{ route('superadmin.promission.insights.microgoals') }}"
           class="rounded-2xl border border-cyan-500/30 bg-cyan-500/10 p-4 hover:bg-cyan-500/20 transition">
            <div class="font-extrabold text-cyan-200 mb-1">🎯 Micro Goals</div>
            <div class="text-[12px] text-cyan-100/80">
                أهداف أسبوعية ذكية لكل عضو
            </div>
        </a>

        <a href="{{ route('superadmin.promission.radar.index') }}"
           class="rounded-2xl border border-rose-500/30 bg-rose-500/10 p-4 hover:bg-rose-500/20 transition">
            <div class="font-extrabold text-rose-200 mb-1">📡 Radar الأداء</div>
            <div class="text-[12px] text-rose-100/80">
                من متقدم ومن يحتاج تدخل
            </div>
        </a>
    </div>

    <div class="mt-6 text-[11px] text-slate-500 text-center">
        ProMission Insights = قيادة بالبيانات، مش بالحدس.
    </div>

</div>
</div>
@endsection