@extends('layouts.superadmin')

@section('title','NotifyHub — التحليلات الذكية')

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

        {{-- HERO --}}
        <div class="relative overflow-hidden rounded-3xl
                    bg-gradient-to-br from-slate-900/95 via-slate-900/98 to-black/98
                    border border-cyan-400/30
                    shadow-2xl shadow-cyan-500/10">

            {{-- glows --}}
            <div class="pointer-events-none absolute -top-24 -right-10 w-72 h-72 rounded-full bg-cyan-400/20 blur-3xl"></div>
            <div class="pointer-events-none absolute -bottom-28 -left-16 w-80 h-80 rounded-full bg-fuchsia-500/20 blur-3xl"></div>

            <div class="relative p-5 sm:p-7 lg:p-8 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
                <div class="space-y-3 max-w-2xl">
                    <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full
                                bg-black/40 border border-cyan-300/30
                                text-[11px] text-cyan-100">
                        <i class="fa-solid fa-chart-line text-xs"></i>
                        <span>NotifyHub • AI Analytics • SuperAdmin</span>
                    </div>

                    <h1 class="text-2xl sm:text-3xl font-extrabold text-white tracking-tight">
                        التحليلات <span class="text-cyan-300">الذكية</span>
                    </h1>

                    <p class="text-[12px] sm:text-[14px] text-slate-200/85 leading-relaxed">
                        قراءة معمّقة لسلوك الإشعارات، معدلات الفشل، التوقيت، وأنماط التفاعل —  
                        بدون لمس منطق الإرسال، فقط رؤية أوضح.
                    </p>
                </div>

                {{-- PERIOD --}}
                <form method="get" action="{{ route('analytics.index') }}"
                      class="rounded-2xl bg-black/40 border border-white/15 px-4 py-3 space-y-2 text-xs text-slate-100">
                    <div class="flex items-center gap-2">
                        <i class="fa-solid fa-calendar-days text-cyan-300"></i>
                        <span class="font-bold">الفترة</span>
                    </div>
                    <div class="flex gap-2">
                        <input type="date" name="from" value="{{ $from }}"
                               class="bg-black/60 border border-white/20 rounded-lg px-2 py-1 text-xs">
                        <input type="date" name="to" value="{{ $to }}"
                               class="bg-black/60 border border-white/20 rounded-lg px-2 py-1 text-xs">
                        <button class="px-3 py-1 rounded-lg bg-cyan-600/80 hover:bg-cyan-600 text-white text-xs">
                            تطبيق
                        </button>
                    </div>
                </form>
            </div>
        </div>

        {{-- KPI --}}
        <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
            @php
                $cards = [
                    ['label'=>'إجمالي الإشعارات','value'=>$ai['total'],'icon'=>'bell','color'=>'cyan'],
                    ['label'=>'تم الإرسال','value'=>$ai['sent'],'icon'=>'paper-plane','color'=>'emerald'],
                    ['label'=>'مجدولة','value'=>$ai['scheduled'],'icon'=>'clock','color'=>'amber'],
                    ['label'=>'فشل','value'=>$ai['failed'],'icon'=>'triangle-exclamation','color'=>'rose'],
                ];
            @endphp

            @foreach($cards as $c)
                <div class="rounded-2xl bg-white/5 border border-white/10 p-4
                            hover:bg-white/10 transition">
                    <div class="flex items-center justify-between">
                        <div>
                            <div class="text-[11px] text-slate-400">{{ $c['label'] }}</div>
                            <div class="text-xl font-extrabold text-white">
                                {{ number_format($c['value']) }}
                            </div>
                        </div>
                        <div class="w-10 h-10 rounded-xl bg-{{ $c['color'] }}-500/20
                                    text-{{ $c['color'] }}-300 grid place-items-center">
                            <i class="fa-solid fa-{{ $c['icon'] }}"></i>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        {{-- AI INSIGHTS --}}
        <div class="rounded-3xl bg-gradient-to-br from-black/70 via-black/80 to-black/90
                    border border-fuchsia-400/20 p-5 space-y-4">
            <h3 class="text-lg font-extrabold text-white flex items-center gap-2">
                <i class="fa-solid fa-brain text-fuchsia-400"></i>
                رؤى الذكاء الاصطناعي
            </h3>

            <div class="grid sm:grid-cols-2 gap-3">
                @foreach($ai['tips'] as $tip)
                    <div class="rounded-2xl bg-white/5 border border-white/10 p-4">
                        <div class="font-bold text-sm text-fuchsia-300">
                            {{ $tip['title'] }}
                        </div>
                        <p class="text-xs text-slate-200/80 mt-1 leading-relaxed">
                            {{ $tip['body'] }}
                        </p>
                    </div>
                @endforeach
            </div>
        </div>

        {{-- CHART PLACEHOLDER --}}
        <div class="rounded-3xl bg-white/5 border border-white/10 p-6 text-center">
            <i class="fa-solid fa-chart-pie text-4xl text-cyan-400 mb-3"></i>
            <p class="text-sm text-slate-300">
                الرسوم البيانية (Type / Status / Daily)  
                تُغذّى عبر <code class="text-cyan-300">analytics.data</code>
            </p>
        </div>

    </div>
</div>
@endsection