@extends('layouts.superadmin')

@section('title','تحليلات الرسائل — مخططات + توصيات')

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

        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-xl font-extrabold text-cyan-200">تحليلات الرسائل</h1>
                <p class="text-xs text-slate-300/80">مخططات + قراءات ذكية + توصيات تشغيلية.</p>
            </div>
        </div>

        <form method="get" class="grid grid-cols-1 md:grid-cols-5 gap-2 rounded-3xl bg-black/30 border border-white/10 p-3">
            <div>
                <label class="text-[10px] text-slate-300/80">من</label>
                <input type="date" name="from" value="{{ $from->format('Y-m-d') }}"
                    class="w-full mt-1 rounded-xl bg-black/50 border border-white/15 text-xs text-slate-50 px-3 py-2">
            </div>
            <div>
                <label class="text-[10px] text-slate-300/80">إلى</label>
                <input type="date" name="to" value="{{ $to->format('Y-m-d') }}"
                    class="w-full mt-1 rounded-xl bg-black/50 border border-white/15 text-xs text-slate-50 px-3 py-2">
            </div>
            <div class="md:col-span-3 flex items-end">
                <button class="w-full px-4 py-2 rounded-2xl text-xs font-bold text-slate-900
                    bg-gradient-to-r from-cyan-200 to-fuchsia-200 hover:scale-[1.01] transition">
                    تحديث
                </button>
            </div>
        </form>

        {{-- AI Suggestions --}}
        <div class="rounded-3xl bg-gradient-to-br from-slate-900/90 to-slate-950/90 border border-fuchsia-400/20 shadow-xl p-5">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-2xl bg-fuchsia-500/15 border border-fuchsia-400/25 grid place-items-center text-fuchsia-200">
                    <i class="fa-solid fa-brain"></i>
                </div>
                <div>
                    <div class="text-[11px] text-slate-300/80">تحليلات ذكية</div>
                    <div class="text-sm font-extrabold text-white">اقتراحات & توصيات</div>
                </div>
            </div>

            <ul class="mt-3 space-y-2 text-sm text-slate-100/90">
                @forelse($suggestions as $s)
                    <li class="rounded-2xl bg-black/30 border border-white/10 px-4 py-3">{!! $s !!}</li>
                @empty
                    <li class="text-slate-300/70">لا توجد توصيات ضمن الفترة.</li>
                @endforelse
            </ul>
        </div>

        {{-- Charts --}}
        <div class="grid gap-4 lg:grid-cols-2">
            <div class="rounded-3xl bg-slate-950/70 border border-white/10 p-4 shadow-xl">
                <h2 class="text-sm font-bold text-cyan-200 mb-2">الرسائل حسب اليوم</h2>
                <canvas id="chartMessages"></canvas>
            </div>
            <div class="rounded-3xl bg-slate-950/70 border border-white/10 p-4 shadow-xl">
                <h2 class="text-sm font-bold text-rose-200 mb-2">الممنوعات حسب اليوم</h2>
                <canvas id="chartFlags"></canvas>
            </div>
            <div class="rounded-3xl bg-slate-950/70 border border-white/10 p-4 shadow-xl lg:col-span-2">
                <h2 class="text-sm font-bold text-fuchsia-200 mb-2">توزيع أنواع الممنوعات</h2>
                <canvas id="chartTypes"></canvas>
            </div>
        </div>

    </div>
</div>

{{-- Chart.js --}}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
(async function () {
    const url = @json(route('superadmin.messages-monitor.analytics.data', ['from'=>request('from'), 'to'=>request('to')]));
    const res = await fetch(url);
    const data = await res.json();

    const labels1 = data.messages_by_day.map(x => x.d);
    const values1 = data.messages_by_day.map(x => x.c);

    new Chart(document.getElementById('chartMessages'), {
        type: 'line',
        data: { labels: labels1, datasets: [{ label: 'Messages', data: values1 }] },
        options: { responsive:true }
    });

    const labels2 = data.flags_by_day.map(x => x.d);
    const values2 = data.flags_by_day.map(x => x.c);

    new Chart(document.getElementById('chartFlags'), {
        type: 'line',
        data: { labels: labels2, datasets: [{ label: 'Flags', data: values2 }] },
        options: { responsive:true }
    });

    const labels3 = data.types.map(x => x.primary_type ?? '—');
    const values3 = data.types.map(x => x.c);

    new Chart(document.getElementById('chartTypes'), {
        type: 'bar',
        data: { labels: labels3, datasets: [{ label: 'Types', data: values3 }] },
        options: { responsive:true }
    });
})();
</script>
@endsection