@extends('layouts.superadmin')

@section('title','المتعثرين في أهداف الساعات - لوحة الصقر')
@section('page-title','المتعثرين في أهداف الساعات - لوحة الصقر')

@section('content')
@php
    $badge = function($risk){
        $risk = (int)$risk;
        if ($risk >= 80) return 'bg-rose-500/15 text-rose-200 border-rose-500/25';
        if ($risk >= 60) return 'bg-amber-500/15 text-amber-200 border-amber-500/25';
        if ($risk >= 40) return 'bg-sky-500/15 text-sky-200 border-sky-500/25';
        return 'bg-emerald-500/15 text-emerald-200 border-emerald-500/25';
    };

    $statusLabel = function($s){
        return match($s){
            'stuck'   => 'عالق (Stuck)',
            'delayed' => 'متأخر (Delayed)',
            'at_risk' => 'على الخطر (At Risk)',
            'all'     => 'الكل',
            default   => $s,
        };
    };

    $onlyBelow = $only_below ?? request('only_below','1');
    $from = $from ?? request('from');
    $to   = $to   ?? request('to');

    $teamTotal = (float)($team['total_hours'] ?? 0);
    $teamLive  = (float)($team['live_hours'] ?? 0);
    $teamGuest = (float)($team['guest_hours'] ?? 0);
    $teamSahra = (float)($team['sahra_hours'] ?? 0);
@endphp

<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-rose-500/60 shadow-lg shadow-rose-500/30">
                <i class="fa-solid fa-stopwatch text-rose-300 text-xl"></i>
            </div>
            <div>
                <h1 class="text-xl sm:text-2xl font-bold">المتعثرين في أهداف الساعات</h1>
                <p class="text-sm text-slate-300/80">
                    هذه الصفحة لا تعتمد على جدول pro_missions — بل تحسب تلقائيًا من: <span class="font-semibold text-white">لايف + قست + سهرة</span>.
                    وتُصنّف الأعضاء (عالق/متأخر/على الخطر) حسب تحقيقهم لأهداف: <span class="font-semibold text-emerald-300">50س (لايف+قست)</span> و <span class="font-semibold text-purple-300">5س سهرة</span>.
                </p>
            </div>
        </div>
        <div class="text-right text-[11px] text-slate-300/80">
            تاريخ اليوم: <span class="font-bold text-white">{{ $today }}</span>
        </div>
    </div>

    {{-- Team quick stats (current period totals) --}}
    <div class="grid grid-cols-1 sm:grid-cols-4 gap-3 mb-6">
        <div class="rounded-2xl border border-slate-800 bg-slate-900/80 p-4">
            <div class="text-[11px] text-slate-400">ساعات التيم (إجمالي الفترة)</div>
            <div class="text-2xl font-bold text-emerald-100 mt-1">{{ number_format($teamTotal, 2) }} س</div>
            <div class="text-[11px] text-slate-400 mt-1">Live + Guest + Sahra</div>
        </div>

        <div class="rounded-2xl border border-sky-500/20 bg-sky-500/5 p-4">
            <div class="text-[11px] text-sky-200/80">لايفات (بدون سهرة)</div>
            <div class="text-2xl font-bold text-sky-100 mt-1">{{ number_format($teamLive, 2) }} س</div>
            <div class="text-[11px] text-slate-400 mt-1">من live_streams (confirmed)</div>
        </div>

        <div class="rounded-2xl border border-amber-500/20 bg-amber-500/5 p-4">
            <div class="text-[11px] text-amber-200/80">قستات (ساعات)</div>
            <div class="text-2xl font-bold text-amber-100 mt-1">{{ number_format($teamGuest, 2) }} س</div>
            <div class="text-[11px] text-slate-400 mt-1">من score_records (guest)</div>
        </div>

        <div class="rounded-2xl border border-purple-500/20 bg-purple-500/5 p-4">
            <div class="text-[11px] text-purple-200/80">سهرات</div>
            <div class="text-2xl font-bold text-purple-100 mt-1">{{ number_format($teamSahra, 2) }} س</div>
            <div class="text-[11px] text-slate-400 mt-1">live_streams (is_sahra=1)</div>
        </div>
    </div>

    {{-- Status cards --}}
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-3 mb-6">
        <div class="rounded-2xl border border-rose-500/20 bg-rose-500/5 p-4">
            <div class="text-[11px] text-rose-200/80">عالق (Stuck)</div>
            <div class="text-2xl font-bold text-rose-100 mt-1">{{ (int)($stats['stuck'] ?? 0) }}</div>
            <div class="text-[11px] text-rose-200/70 mt-1">&lt; 30% من هدفه</div>
        </div>

        <div class="rounded-2xl border border-amber-500/20 bg-amber-500/5 p-4">
            <div class="text-[11px] text-amber-200/80">متأخر (Delayed)</div>
            <div class="text-2xl font-bold text-amber-100 mt-1">{{ (int)($stats['delayed'] ?? 0) }}</div>
            <div class="text-[11px] text-amber-200/70 mt-1">30% → 60%</div>
        </div>

        <div class="rounded-2xl border border-sky-500/20 bg-sky-500/5 p-4">
            <div class="text-[11px] text-sky-200/80">على الخطر (At Risk)</div>
            <div class="text-2xl font-bold text-sky-100 mt-1">{{ (int)($stats['at_risk'] ?? 0) }}</div>
            <div class="text-[11px] text-sky-200/70 mt-1">60% → 90%</div>
        </div>
    </div>

    {{-- Filters --}}
    <form method="GET" action="{{ route('superadmin.promission.stuck.index') }}"
          class="mb-6 rounded-2xl border border-slate-700/80 bg-slate-900/90 p-4 sm:p-5 shadow-xl">
        <div class="grid gap-4 md:grid-cols-6 grid-cols-1">

            <div class="flex flex-col gap-1">
                <label class="text-xs text-slate-300">من</label>
                <input type="date" name="from" value="{{ $from }}"
                       class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm text-white
                              focus:outline-none focus:ring-2 focus:ring-rose-500 focus:border-rose-500">
            </div>

            <div class="flex flex-col gap-1">
                <label class="text-xs text-slate-300">إلى</label>
                <input type="date" name="to" value="{{ $to }}"
                       class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm text-white
                              focus:outline-none focus:ring-2 focus:ring-rose-500 focus:border-rose-500">
            </div>

            <div class="flex flex-col gap-1">
                <label class="text-xs text-slate-300">التصنيف</label>
                <select name="status"
                        class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm text-white
                               focus:outline-none focus:ring-2 focus:ring-rose-500 focus:border-rose-500">
                    <option value="all" {{ $status==='all'?'selected':'' }}>الكل</option>
                    <option value="stuck" {{ $status==='stuck'?'selected':'' }}>stuck</option>
                    <option value="delayed" {{ $status==='delayed'?'selected':'' }}>delayed</option>
                    <option value="at_risk" {{ $status==='at_risk'?'selected':'' }}>at_risk</option>
                </select>
            </div>

            <div class="flex flex-col gap-1 md:col-span-2">
                <label class="text-xs text-slate-300">بحث (اسم/يوزر/إيميل)</label>
                <input type="text" name="q" value="{{ $q }}" placeholder="اكتب اسم العضو..."
                       class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm text-white
                              placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:border-rose-500">
            </div>

            <div class="flex flex-col gap-1">
                <label class="text-xs text-slate-300">عرض فقط غير محققين</label>
                <select name="only_below"
                        class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm text-white
                               focus:outline-none focus:ring-2 focus:ring-rose-500 focus:border-rose-500">
                    <option value="1" {{ $onlyBelow==='1'?'selected':'' }}>نعم (المتعثرين فقط)</option>
                    <option value="0" {{ $onlyBelow==='0'?'selected':'' }}>لا (كل الأعضاء ضمن التصنيف)</option>
                </select>
            </div>
        </div>

        <div class="mt-3 flex flex-wrap items-center gap-2">
            <button class="inline-flex items-center justify-center rounded-xl bg-rose-500 px-4 py-2 text-sm font-semibold text-slate-950 hover:bg-rose-400 transition">
                <i class="fa-solid fa-filter ml-2 text-xs"></i> تطبيق
            </button>
            <a href="{{ route('superadmin.promission.stuck.index') }}"
               class="inline-flex items-center justify-center rounded-xl border border-slate-600 px-4 py-2 text-sm font-medium text-slate-200 hover:bg-slate-800/80 transition">
                إعادة ضبط
            </a>

            <span class="text-[11px] text-slate-400">
                أي إرسال واتساب سيستخدم نفس الفلاتر الحالية.
            </span>
        </div>
    </form>

    {{-- WhatsApp Panel: 5 buttons + previews --}}
    <div class="mb-6 rounded-2xl border border-emerald-500/20 bg-emerald-500/5 p-4">
        <div class="flex items-center justify-between gap-2 mb-3">
            <div class="text-sm font-extrabold text-emerald-100">
                <i class="fa-brands fa-whatsapp ml-2"></i> إرسال تقارير واتساب (5 أوضاع)
            </div>
            <div class="text-[11px] text-emerald-100/80">
                سيتم الإرسال للبوت المحلي 127.0.0.1:3000
            </div>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-5 gap-2">
            @foreach([
                'line_all'      => ['📌 مختصر', 'bg-white/10 border-white/10 hover:bg-white/15'],
                'deep_all'      => ['📎 مفصل', 'bg-white/10 border-white/10 hover:bg-white/15'],
                'critical_only' => ['🔥 حرِج فقط', 'bg-rose-500/15 border-rose-500/20 hover:bg-rose-500/20'],
                'owners_ping'   => ['📣 تنبيه', 'bg-amber-500/15 border-amber-500/20 hover:bg-amber-500/20'],
                'rescue_plan'   => ['🧠 خطة إنقاذ', 'bg-sky-500/15 border-sky-500/20 hover:bg-sky-500/20'],
            ] as $mode => $meta)
                <form method="POST" action="{{ route('superadmin.promission.stuck.send') }}">
                    @csrf
                    <input type="hidden" name="mode" value="{{ $mode }}">
                    <input type="hidden" name="status" value="{{ $status }}">
                    <input type="hidden" name="q" value="{{ $q }}">
                    <input type="hidden" name="from" value="{{ $from }}">
                    <input type="hidden" name="to" value="{{ $to }}">
                    <input type="hidden" name="only_below" value="{{ $onlyBelow }}">
                    <button class="w-full rounded-xl px-3 py-2 text-xs font-bold border transition {{ $meta[1] }}">
                        {{ $meta[0] }}
                    </button>
                </form>
            @endforeach
        </div>

        <div class="mt-4 grid grid-cols-1 lg:grid-cols-2 gap-3">
            <div class="rounded-xl border border-slate-700 bg-slate-950/40 p-3">
                <div class="text-[11px] text-slate-300 mb-2">معاينة مختصر</div>
                <textarea rows="9" class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-xs text-slate-100">{{ $preview['line_all'] ?? '' }}</textarea>
            </div>
            <div class="rounded-xl border border-slate-700 bg-slate-950/40 p-3">
                <div class="text-[11px] text-slate-300 mb-2">معاينة مفصل</div>
                <textarea rows="9" class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-xs text-slate-100">{{ $preview['deep_all'] ?? '' }}</textarea>
            </div>
        </div>
    </div>

    {{-- Members Cards (missions paginator items) --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
        @forelse($missions as $m)
            @php
                $riskScore = (int)($m->ai_risk_score ?? 0);
                $pct = $m->ai_progress_percent ?? null;
            @endphp

            <div class="rounded-2xl border border-slate-800 bg-slate-900/80 p-4">
                <div class="flex items-start justify-between gap-2">
                    <div class="min-w-0">
                        <div class="font-semibold text-slate-100 truncate">{{ $m->owner_name ?? 'عضو' }}</div>
                        <div class="text-[11px] text-slate-400 truncate">
                            التصنيف: {{ $statusLabel($m->status) }} • #{{ $m->id }}
                        </div>
                    </div>
                    <span class="text-[11px] font-bold px-2 py-0.5 rounded-full border {{ $badge($riskScore) }}">
                        {{ $m->ai_risk_label }} • {{ $riskScore }}
                    </span>
                </div>

                <div class="mt-3 grid grid-cols-4 gap-2 text-xs">
                    <div class="rounded-xl border border-slate-800 bg-slate-950/40 p-2">
                        <div class="text-[10px] text-slate-400">لايف</div>
                        <div class="font-bold text-sky-100">{{ number_format((float)($m->live_hours ?? 0), 2) }}س</div>
                    </div>
                    <div class="rounded-xl border border-slate-800 bg-slate-950/40 p-2">
                        <div class="text-[10px] text-slate-400">قست</div>
                        <div class="font-bold text-amber-100">{{ number_format((float)($m->guest_hours ?? 0), 2) }}س</div>
                    </div>
                    <div class="rounded-xl border border-slate-800 bg-slate-950/40 p-2">
                        <div class="text-[10px] text-slate-400">سهرة</div>
                        <div class="font-bold text-purple-100">{{ number_format((float)($m->sahra_hours ?? 0), 2) }}س</div>
                    </div>
                    <div class="rounded-xl border border-slate-800 bg-slate-950/40 p-2">
                        <div class="text-[10px] text-slate-400">هدفه%</div>
                        <div class="font-bold text-emerald-100">{{ $pct === null ? '—' : $pct.'%' }}</div>
                    </div>
                </div>

                <div class="mt-2 text-[11px] text-slate-300">
                    السبب: <span class="text-slate-100">{{ $m->ai_why ?? '—' }}</span>
                </div>

                <div class="mt-2 text-[11px] text-slate-400 leading-relaxed">
                    خطة الإنقاذ: <span class="text-slate-100">{{ $m->ai_plan ?? '—' }}</span>
                </div>

                <div class="mt-3 text-[11px] text-slate-400">
                    ملاحظة: الهدف الفردي = 50س (لايف+قست) + 5س سهرة.
                </div>
            </div>
        @empty
            <div class="rounded-2xl border border-slate-800 bg-slate-900/60 p-6 text-center text-slate-400 lg:col-span-3">
                لا يوجد أعضاء ضمن الفلاتر الحالية ✅
            </div>
        @endforelse
    </div>

    <div class="mt-4">
        {{ $missions->links() }}
    </div>

</div>
</div>
@endsection