@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 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-book-open 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">
                            إرسال مقال اقرأني كامل ومنسّق للجروب + خيار ملخص، مع سجل للإرسالات.
                        </p>
                    </div>
                </div>

                <div class="mt-3 flex flex-wrap gap-2 text-[11px] text-white/85">
                    <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">تحويل HTML إلى نقاط • وفقرات</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"></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"></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-3 gap-3">
                <div class="sm:col-span-2">
                    <label class="block text-xs font-semibold text-slate-600 dark:text-slate-200 mb-1">اختيار مقال</label>
                    <select name="reading_id"
                            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">
                        @foreach($readings as $r)
                            <option value="{{ $r->id }}" {{ ($selected && $selected->id===$r->id) ? 'selected' : '' }}>
                                {{ $r->is_active ? '🟢 ' : '⚪ ' }}{{ $r->title }}
                                ({{ optional($r->starts_at)->format('Y-m-d') ?? '-' }})
                            </option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label class="block text-xs font-semibold text-slate-600 dark:text-slate-200 mb-1">نمط الإرسال</label>
                    <select name="style"
                            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="full" {{ $style==='full' ? 'selected' : '' }}>مقال كامل</option>
                        <option value="summary" {{ $style==='summary' ? 'selected' : '' }}>ملخص سريع</option>
                    </select>
                </div>
            </div>

            <div>
                <label class="block text-xs font-semibold text-slate-600 dark:text-slate-200 mb-1">ملاحظة الإدارة (اختياري)</label>
                <input type="text" name="note" value="{{ $note }}"
                       placeholder="مثال: الرجاء قراءة المقال اليوم قبل الساعة 9 مساءً…"
                       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 class="flex flex-col sm:flex-row gap-2 items-stretch sm:items-center justify-between">
                @if($stats)
                    <div class="text-xs text-slate-600 dark:text-slate-200">
                        📊 قرأوا: <b>{{ $stats['read'] }}</b> / {{ $stats['total'] }} ({{ $stats['percent'] }}%)
                        • لم يقرأوا: <b>{{ $stats['notread'] }}</b>
                    </div>
                @else
                    <div class="text-xs text-slate-500 dark:text-slate-300">اختر مقال لعرض المعاينة.</div>
                @endif

                <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>
                    تحديث المعاينة
                </button>
            </div>
        </form>

        {{-- معاينة + إرسال --}}
        <div class="rounded-3xl bg-white/95 dark:bg-slate-950/95 border border-slate-200/80 dark:border-slate-700 shadow p-4">
            <div class="flex items-center justify-between gap-2 flex-wrap">
                <h3 class="font-extrabold text-slate-900 dark:text-white">
                    📨 معاينة رسالة الواتساب
                </h3>

                <div class="flex gap-2">
                    <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($previewMsg)); this.innerText='✅ تم النسخ'; setTimeout(()=>this.innerText='نسخ',1200);">
                        نسخ
                    </button>

                    <form method="POST" action="{{ route('superadmin.whatsapp.daily-reading.send') }}">
                        @csrf
                        <input type="hidden" name="reading_id" value="{{ $selected?->id }}">
                        <input type="hidden" name="style" value="{{ $style }}">
                        <input type="hidden" name="note" value="{{ $note }}">
                        <button type="submit"
                                class="text-xs px-3 py-2 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white shadow">
                            <i class="fa-solid fa-paper-plane text-[11px]"></i>
                            إرسال للجروب
                        </button>
                    </form>
                </div>
            </div>

            <pre class="mt-3 text-xs whitespace-pre-wrap rounded-2xl 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">{{ $previewMsg }}</pre>
        </div>

        {{-- سجل الإرسال --}}
        <div class="rounded-3xl bg-white/95 dark:bg-slate-950/95 border border-slate-200/80 dark:border-slate-700 shadow p-4">
            <div class="flex items-center justify-between gap-2">
                <h3 class="font-extrabold text-slate-900 dark:text-white">🧾 سجل آخر الإرسالات</h3>
                <span class="text-xs text-slate-500 dark:text-slate-300">
                    {{ \Illuminate\Support\Facades\Schema::hasTable('whatsapp_daily_reading_logs') ? 'آخر 20 سجل' : 'السجل غير مفعّل (اعمل المايجريشن)' }}
                </span>
            </div>

            @if($logs->isEmpty())
                <div class="mt-3 text-sm text-slate-500 dark:text-slate-300">لا يوجد سجلات حالياً.</div>
            @else
                <div class="mt-3 space-y-2">
                    @foreach($logs as $l)
                        <div class="rounded-2xl border border-slate-200 dark:border-white/10 p-3 bg-slate-50/80 dark:bg-white/5">
                            <div class="flex items-center justify-between gap-2">
                                <div class="text-sm font-semibold text-slate-900 dark:text-white">
                                    {{ $l->title ?? 'مقال' }}
                                    <span class="text-[11px] font-normal text-slate-500 dark:text-white/60">
                                        • {{ $l->style ?? '-' }}
                                        • {{ $l->status ?? '-' }}
                                    </span>
                                </div>
                                <div class="text-[11px] text-slate-500 dark:text-white/60">
                                    {{ \Carbon\Carbon::parse($l->created_at)->format('Y-m-d H:i') }}
                                </div>
                            </div>

                            <details class="mt-2">
                                <summary class="cursor-pointer text-xs text-slate-600 dark:text-white/70 hover:text-slate-900 dark:hover:text-white">
                                    عرض الرسالة
                                </summary>
                                <pre class="mt-2 text-xs whitespace-pre-wrap rounded-xl bg-white dark:bg-black/25
                                            border border-slate-200 dark:border-white/10 p-3 text-slate-800 dark:text-white/80 overflow-auto">{{ $l->message }}</pre>
                            </details>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>

        @if(!empty($wa_message))
            <div class="rounded-3xl bg-white/95 dark:bg-slate-950/95 border border-slate-200/80 dark:border-slate-700 shadow p-4">
                <div class="flex items-center justify-between gap-2">
                    <h3 class="font-extrabold 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-2xl 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