@extends('layouts.superadmin')

@section('content')
<div class="min-h-screen bg-gradient-to-b from-slate-50 via-slate-100 to-slate-50
            dark:from-slate-950 dark:via-slate-900 dark:to-slate-950">

    <div class="max-w-5xl mx-auto px-3 sm:px-6 lg:px-8 py-6 space-y-6">

        {{-- HERO --}}
        <div class="relative overflow-hidden rounded-3xl shadow-xl border border-indigo-500/40
                    bg-gradient-to-l from-sky-600 via-indigo-700 to-slate-900">
            <div class="pointer-events-none absolute -top-16 -left-8 w-40 h-40 rounded-full bg-sky-400/35 blur-3xl"></div>
            <div class="pointer-events-none absolute -bottom-24 -right-12 w-52 h-52 rounded-full bg-indigo-500/35 blur-3xl"></div>

            <div class="relative px-4 sm:px-6 py-5 flex flex-col gap-3 text-white">
                <div class="flex items-center gap-3">
                    <span class="inline-flex items-center justify-center w-10 h-10 rounded-2xl bg-black/20 border border-white/20 shadow">
                        <i class="fa-solid fa-chart-line text-sm"></i>
                    </span>
                    <div>
                        <h1 class="text-lg sm:text-xl font-extrabold">
                            مركز التحليلات الذكي (واتساب)
                        </h1>
                        <p class="text-xs sm:text-sm text-white/85 mt-1 leading-relaxed">
                            نظام واحد يجمع <b>نبض الاستقرار</b> + <b>رادار القستات</b> + <b>حرارة القيادة</b>
                            في رسائل جاهزة ترسل للجروب بضغطة واحدة.
                        </p>
                    </div>
                </div>

                <div class="flex flex-wrap gap-2 text-[11px] text-white/85 mt-1">
                    <span class="px-2 py-1 rounded-xl bg-black/20 border border-white/20">
                        📡 نبض الاستقرار = تواجد + نقاط − غياب − مخالفات
                    </span>
                    <span class="px-2 py-1 rounded-xl bg-black/20 border border-white/20">
                        🎙️ رادار القستات = منفّذ / متأخر / هوستات
                    </span>
                    <span class="px-2 py-1 rounded-xl bg-black/20 border border-white/20">
                        🔥 حرارة القيادة = حضور + قرارات + رسائل + متابعات
                    </span>
                </div>
            </div>
        </div>

        {{-- Alerts --}}
        @if (session('success'))
            <div class="p-3 rounded-2xl bg-emerald-500/10 border border-emerald-500/40 text-emerald-800 dark:text-emerald-100 text-sm flex items-center gap-2">
                <i class="fa-solid fa-circle-check text-emerald-500 text-sm"></i>
                <span>{!! session('success') !!}</span>
            </div>
        @endif

        @if (session('error'))
            <div class="p-3 rounded-2xl bg-rose-500/10 border border-rose-500/40 text-rose-800 dark:text-rose-100 text-sm flex items-center gap-2">
                <i class="fa-solid fa-triangle-exclamation text-rose-500 text-sm"></i>
                <span>{!! session('error') !!}</span>
            </div>
        @endif

        {{-- فلاتر الفترة / النمط / النطاق --}}
        <form method="GET"
              class="rounded-3xl bg-white/95 dark:bg-slate-950/95 border border-slate-200/80 dark:border-slate-700 shadow px-4 sm:px-5 py-4 space-y-3">

            <div class="grid grid-cols-1 sm:grid-cols-4 gap-3">
                <div>
                    <label class="block text-xs font-semibold text-slate-600 dark:text-slate-200 mb-1">من تاريخ</label>
                    <input type="date" name="from" value="{{ $from }}"
                           class="w-full rounded-2xl border border-slate-200 dark:border-slate-600
                                  bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-white px-3 py-2 text-sm">
                </div>

                <div>
                    <label class="block text-xs font-semibold text-slate-600 dark:text-slate-200 mb-1">إلى تاريخ</label>
                    <input type="date" name="to" value="{{ $to }}"
                           class="w-full rounded-2xl border border-slate-200 dark:border-slate-600
                                  bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-white px-3 py-2 text-sm">
                </div>

                <div>
                    <label class="block text-xs font-semibold text-slate-600 dark:text-slate-200 mb-1">نمط الرسالة</label>
                    <select name="mode"
                            class="w-full rounded-2xl border border-slate-200 dark:border-slate-600
                                   bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-white px-3 py-2 text-sm">
                        <option value="short" {{ $mode==='short' ? 'selected' : '' }}>مختصر (سريع)</option>
                        <option value="detailed" {{ $mode==='detailed' ? 'selected' : '' }}>متقدم (تفاصيل أكثر)</option>
                    </select>
                </div>

                <div>
                    <label class="block text-xs font-semibold text-slate-600 dark:text-slate-200 mb-1">النطاق</label>
                    <select name="scope"
                            class="w-full rounded-2xl border border-slate-200 dark:border-slate-600
                                   bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-white px-3 py-2 text-sm">
                        <option value="all"   {{ $scope==='all' ? 'selected' : '' }}>الكل (شباب + صبايا)</option>
                        <option value="boys"  {{ $scope==='boys' ? 'selected' : '' }}>الشباب فقط</option>
                        <option value="girls" {{ $scope==='girls' ? 'selected' : '' }}>الصبايا فقط</option>
                    </select>
                </div>
            </div>

            <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 mt-2">
                <details class="text-xs text-slate-600 dark:text-slate-200">
                    <summary class="cursor-pointer hover:text-slate-900 dark:hover:text-white">
                        شرح سريع: كيف نقرأ التقارير؟
                    </summary>
                    <div class="mt-2 rounded-2xl bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 p-3 text-xs leading-6">
                        <div>• <b>نبض الاستقرار</b>: مؤشر 0–100 يدمج <b>التواجد</b> + <b>النقاط</b> − <b>الغياب بدون عذر</b> − <b>المخالفات</b>.</div>
                        <div>• <b>رادار القستات</b>: متابعة القستات المنفذة/المتأخرة + أفضل الهوستات.</div>
                        <div>• <b>حرارة القيادة</b>: تواجد القيادة في النظام + عدد القرارات والرسائل والمتابعات.</div>
                        <div class="mt-1 text-slate-500 dark:text-slate-400">
                            النظام يتأكد من وجود الجداول والأعمدة (Schema) لتفادي أي أخطاء استعلام.
                        </div>
                    </div>
                </details>

                <button type="submit"
                        class="inline-flex items-center justify-center gap-2 px-4 py-2 rounded-2xl text-sm font-semibold
                               bg-indigo-600 hover:bg-indigo-500 text-white shadow">
                    <i class="fa-solid fa-rotate text-xs"></i>
                    <span>تحديث النتائج</span>
                </button>
            </div>
        </form>

        {{-- الكروت --}}
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            @foreach($templates as $key => $t)
                @php
                    $tone = $t['tone'] ?? 'neutral';
                    $btn =
                        $tone === 'danger'  ? 'bg-rose-600/90 hover:bg-rose-500' :
                        ($tone === 'success'? 'bg-emerald-600/90 hover:bg-emerald-500' :
                        ($tone === 'warning'? 'bg-amber-500/90 hover:bg-amber-400 text-black' :
                        ($tone === 'info'   ? 'bg-sky-600/90 hover:bg-sky-500' :
                                              'bg-indigo-600/90 hover:bg-indigo-500')));
                    $chip =
                        $tone === 'danger'  ? 'bg-rose-500/20 text-rose-700 dark:text-rose-200 border-rose-500/30' :
                        ($tone === 'success'? 'bg-emerald-500/15 text-emerald-700 dark:text-emerald-200 border-emerald-500/30' :
                        ($tone === 'warning'? 'bg-amber-400/20 text-amber-700 dark:text-amber-200 border-amber-400/30' :
                        ($tone === 'info'   ? 'bg-sky-500/20 text-sky-700 dark:text-sky-200 border-sky-500/30' :
                                              'bg-slate-100/60 text-slate-700 dark:bg-white/5 dark:text-white/70 border-white/10')));
                @endphp

                <div class="rounded-2xl bg-white/95 dark:bg-slate-950/90 border border-slate-200/80 dark:border-white/10 p-4 shadow-sm">
                    <div class="flex items-start gap-3">
                        <span class="inline-flex items-center justify-center w-10 h-10 rounded-xl
                                     bg-slate-100 dark:bg-white/10 border border-slate-200 dark:border-white/20">
                            <i class="fa-solid {{ $t['icon'] ?? 'fa-bullhorn' }} text-sm text-slate-700 dark:text-white/90"></i>
                        </span>

                        <div class="flex-1">
                            <div class="flex items-center justify-between gap-2">
                                <h3 class="font-bold text-slate-900 dark:text-white text-sm sm:text-base">
                                    {{ $t['title'] }}
                                </h3>
                                <span class="text-[11px] px-2 py-1 rounded-lg border {{ $chip }}">جاهز</span>
                            </div>
                            <p class="text-xs sm:text-sm text-slate-600 dark:text-white/70 mt-1">
                                {{ $t['desc'] ?? '' }}
                            </p>

                            <div class="mt-3 flex flex-col sm:flex-row gap-2">
                                <form method="POST" action="{{ route('superadmin.whatsapp.insights-hub.send') }}" class="w-full">
                                    @csrf
                                    <input type="hidden" name="key" value="{{ $key }}">
                                    <input type="hidden" name="from" value="{{ $from }}">
                                    <input type="hidden" name="to" value="{{ $to }}">
                                    <input type="hidden" name="mode" value="{{ $mode }}">
                                    <input type="hidden" name="scope" value="{{ $scope }}">

                                    <button type="submit"
                                            class="w-full inline-flex items-center justify-center gap-2 px-3 py-2 rounded-xl text-sm font-semibold text-white {{ $btn }}">
                                        <i class="fa-solid fa-paper-plane text-xs"></i>
                                        <span>إرسال للجروب الآن</span>
                                    </button>
                                </form>

                                <button type="button"
                                        class="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-3 py-2 rounded-xl text-sm font-semibold
                                               bg-slate-100 hover:bg-slate-200 text-slate-800 border border-slate-200
                                               dark:bg-white/5 dark:hover:bg-white/10 dark:text-white dark:border-white/10"
                                        onclick="navigator.clipboard.writeText(@js($t['message'])); this.querySelector('.txt').innerText='✅ تم النسخ'; setTimeout(()=>this.querySelector('.txt').innerText='نسخ النص',1200);">
                                    <i class="fa-regular fa-copy text-xs"></i>
                                    <span class="txt">نسخ النص</span>
                                </button>
                            </div>

                            <details class="mt-3">
                                <summary class="cursor-pointer text-xs text-slate-500 dark:text-white/70 hover:text-slate-800 dark:hover:text-white">
                                    معاينة الرسالة
                                </summary>
                                <pre class="mt-2 text-xs whitespace-pre-wrap rounded-xl bg-slate-50 dark:bg-black/25
                                            border border-slate-200 dark:border-white/10 p-3 text-slate-800 dark:text-white/80 overflow-auto">
{{ $t['message'] }}
                                </pre>
                            </details>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        {{-- آخر رسالة --}}
        @if(!empty($wa_message))
            <div class="mt-6 rounded-2xl bg-white/95 dark:bg-slate-950/90 border border-slate-200/80 dark:border-white/10 p-4 shadow-sm">
                <div class="flex items-center justify-between gap-2">
                    <h3 class="font-bold text-sm sm:text-base text-slate-900 dark:text-white">📨 آخر رسالة تم إرسالها (للتأكيد)</h3>
                    <button type="button"
                            class="text-xs px-3 py-2 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-800 border border-slate-200
                                   dark:bg-white/5 dark:hover:bg-white/10 dark:text-white dark:border-white/10"
                            onclick="navigator.clipboard.writeText(@js($wa_message)); this.innerText='✅ تم النسخ'; setTimeout(()=>this.innerText='نسخ',1200);">
                        نسخ
                    </button>
                </div>
                <pre class="mt-2 text-xs whitespace-pre-wrap rounded-xl bg-slate-50 dark:bg-black/25
                            border border-slate-200 dark:border-white/10 p-3 text-slate-800 dark:text-white/80 overflow-auto">
{{ $wa_message }}
                </pre>
            </div>
        @endif

    </div>
</div>
@endsection