@extends('layouts.superadmin')
@section('title', 'AI Analytics — تقرير عضو')

@section('content')
@php
    $user    = $user ?? null;
    $report  = $report ?? [];
    $period  = $period ?? ['from'=>request('from', now()->subDays(14)->toDateString()), 'to'=>request('to', now()->toDateString())];

    $name = data_get($user,'name', data_get($user,'username','عضو'));
    $username = data_get($user,'username', null);
    $email = data_get($user,'email', null);

    $score = (float) data_get($report,'score',0);
    $label = (string) data_get($report,'label','—');
    $notes = (string) data_get($report,'insight','');

    $stat = [
        'live_hours'  => (float) data_get($report,'live_hours',0),
        'sahra_hours' => (float) data_get($report,'sahra_hours',0),
        'guest_hours' => (float) data_get($report,'guest_hours',0),
        'guest_count' => (int)   data_get($report,'guest_count',0),
        'commitment'  => (float) data_get($report,'commitment',0),
        'streak'      => (int)   data_get($report,'streak',0),
    ];

    $badge = $score >= 80 ? 'bg-emerald-500/15 border-emerald-500/30 text-emerald-200'
          : ($score >= 55 ? 'bg-amber-500/15 border-amber-500/30 text-amber-200'
          : 'bg-rose-500/15 border-rose-500/30 text-rose-200');

    $fmt1 = fn($n)=> number_format((float)$n,1);
@endphp

<div class="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 px-4 sm:px-6 lg:px-8 py-8 rtl">
    <div class="max-w-5xl mx-auto space-y-6">

        {{-- Header --}}
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
            <div class="text-white">
                <div class="text-[11px] text-white/55 font-bold">AI Analytics / User Report</div>
                <div class="text-2xl font-extrabold">{{ $name }}</div>
                <div class="text-[12px] text-white/55">
                    {{ $username ? '@'.$username : '' }} {{ $email ? '• '.$email : '' }}
                </div>
                <div class="mt-2 text-[11px] text-white/55 font-bold">
                    الفترة: {{ data_get($period,'from') }} → {{ data_get($period,'to') }}
                </div>
            </div>

            <div class="flex gap-2">
                <a href="{{ route('ai.analytics.index', request()->all()) }}"
                   class="rounded-xl bg-white/8 hover:bg-white/12 border border-white/10
                          text-white/85 font-bold px-4 py-2 text-sm transition">
                    ← رجوع للوحة
                </a>
            </div>
        </div>

        {{-- Hero card --}}
        <div class="relative overflow-hidden rounded-3xl border border-white/10 bg-white/5 backdrop-blur-xl shadow-xl shadow-black/25 p-5 sm:p-7 text-white">
            <div class="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(34,211,238,0.16)_0,_transparent_55%)]"></div>

            <div class="relative flex flex-col lg:flex-row gap-6 lg:items-center lg:justify-between">
                <div class="min-w-0">
                    <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/8 border border-white/10 text-[11px] font-bold">
                        <i class="fa-solid fa-brain text-white/70"></i>
                        قراءة ذكية للعضو
                    </div>

                    <div class="mt-3 flex items-center gap-2">
                        <span class="text-[11px] px-3 py-1 rounded-full border {{ $badge }} font-extrabold">
                            {{ number_format($score,1) }}%
                        </span>
                        <span class="text-[12px] text-white/70">
                            التصنيف: <span class="font-extrabold text-white/90">{{ $label }}</span>
                        </span>
                    </div>

                    <div class="mt-3 h-2.5 rounded-full bg-white/10 overflow-hidden">
                        <div class="h-2.5 rounded-full bg-sky-500/80" style="width: {{ max(0,min(100,$score)) }}%"></div>
                    </div>

                    @if($notes !== '')
                        <div class="mt-4 text-[12px] text-white/75 leading-relaxed">
                            <span class="font-extrabold text-white/90">Insight:</span> {{ $notes }}
                        </div>
                    @endif
                </div>

                <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 w-full lg:w-[420px]">
                    <div class="rounded-2xl bg-slate-950/55 border border-white/10 p-3">
                        <div class="text-[11px] text-white/55 font-bold">Live</div>
                        <div class="text-lg font-extrabold">{{ $fmt1($stat['live_hours']) }}h</div>
                    </div>
                    <div class="rounded-2xl bg-slate-950/55 border border-white/10 p-3">
                        <div class="text-[11px] text-white/55 font-bold">Sahra</div>
                        <div class="text-lg font-extrabold">{{ $fmt1($stat['sahra_hours']) }}h</div>
                    </div>
                    <div class="rounded-2xl bg-slate-950/55 border border-white/10 p-3">
                        <div class="text-[11px] text-white/55 font-bold">Guest</div>
                        <div class="text-lg font-extrabold">{{ $fmt1($stat['guest_hours']) }}h</div>
                    </div>
                    <div class="rounded-2xl bg-slate-950/55 border border-white/10 p-3">
                        <div class="text-[11px] text-white/55 font-bold">Guests Count</div>
                        <div class="text-lg font-extrabold">{{ (int)$stat['guest_count'] }}</div>
                    </div>
                    <div class="rounded-2xl bg-slate-950/55 border border-white/10 p-3">
                        <div class="text-[11px] text-white/55 font-bold">Commitment</div>
                        <div class="text-lg font-extrabold">{{ $fmt1($stat['commitment']) }}%</div>
                    </div>
                    <div class="rounded-2xl bg-slate-950/55 border border-white/10 p-3">
                        <div class="text-[11px] text-white/55 font-bold">Streak</div>
                        <div class="text-lg font-extrabold">{{ (int)$stat['streak'] }} يوم</div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Action / Recommendations --}}
        <div class="rounded-3xl border border-white/10 bg-slate-950/60 backdrop-blur-xl shadow-xl shadow-black/25 p-5 sm:p-6 text-white">
            <div class="flex items-center justify-between gap-3">
                <div class="text-sm font-extrabold">خطة تحسين سريعة</div>
                <i class="fa-solid fa-wand-magic-sparkles text-fuchsia-300/80"></i>
            </div>

            @php
                $plan = collect(data_get($report,'plan',[]));
            @endphp

            @if($plan->isEmpty())
                <div class="mt-3 text-[12px] text-white/60">
                    لا توجد خطة جاهزة (لسا ما وصل plan من الكنترولر).  
                    بس جاهزين نضيفها أول ما تبعتها.
                </div>
            @else
                <ul class="mt-4 space-y-2 text-[12px] text-white/75">
                    @foreach($plan as $p)
                        <li class="flex items-start gap-2">
                            <span class="mt-1 w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
                            <span class="leading-relaxed">{{ $p }}</span>
                        </li>
                    @endforeach
                </ul>
            @endif
        </div>

    </div>
</div>
@endsection