@extends('layouts.superadmin')

@section('title','التنبيهات الذكية - ProMission')
@section('page-title','التنبيهات الذكية (AI Alerts)')

@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-amber-500/60 shadow-lg shadow-amber-500/30">
                <i class="fa-solid fa-bell text-amber-300 text-xl"></i>
            </div>
            <div>
                <h1 class="text-xl sm:text-2xl font-bold">التنبيهات الذكية</h1>
                <p class="text-sm text-slate-300/80">
                    تنبيهات تلقائية مبنية على الأداء، الغياب، ضعف الإنجاز، والتوقف.
                </p>
            </div>
        </div>
    </div>

    {{-- Alerts --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">

        {{-- Inactive --}}
        <div class="rounded-2xl border border-rose-500/30 bg-rose-500/10 p-4">
            <div class="flex items-center justify-between mb-2">
                <span class="font-extrabold text-rose-200">⚠️ خمول 3 أيام</span>
                <span class="text-xs bg-rose-600/20 px-2 py-0.5 rounded-full">
                    {{ $alerts['inactive_3days']['count'] ?? 0 }}
                </span>
            </div>
            <p class="text-[12px] text-rose-100/80">
                أعضاء لم يشاركوا بأي لايف أو قست منذ 3 أيام.
            </p>
        </div>

        {{-- Low Performance --}}
        <div class="rounded-2xl border border-amber-500/30 bg-amber-500/10 p-4">
            <div class="flex items-center justify-between mb-2">
                <span class="font-extrabold text-amber-200">📉 أداء منخفض</span>
                <span class="text-xs bg-amber-600/20 px-2 py-0.5 rounded-full">
                    {{ $alerts['low_performance']['count'] ?? 0 }}
                </span>
            </div>
            <p class="text-[12px] text-amber-100/80">
                أعضاء تحت 30% من أهدافهم الأسبوعية.
            </p>
        </div>

        {{-- Streak Broken --}}
        <div class="rounded-2xl border border-sky-500/30 bg-sky-500/10 p-4">
            <div class="flex items-center justify-between mb-2">
                <span class="font-extrabold text-sky-200">💔 انقطاع Streak</span>
                <span class="text-xs bg-sky-600/20 px-2 py-0.5 rounded-full">
                    {{ $alerts['streak_broken']['count'] ?? 0 }}
                </span>
            </div>
            <p class="text-[12px] text-sky-100/80">
                أعضاء فقدوا الاستمرارية اليومية.
            </p>
        </div>

    </div>

    {{-- Footer --}}
    <div class="mt-6 text-[11px] text-slate-500 text-center">
        هذه التنبيهات تساعد القيادة على التدخل المبكر قبل تراجع الأداء.
    </div>

</div>
</div>
@endsection