{{-- resources/views/tests/weekly/partials/_kpi.blade.php --}}
@php
    $trafficChip = match($kpi->traffic->key ?? 'green'){
        'green'  => 'bg-emerald-100 text-emerald-700 border-emerald-200',
        'yellow' => 'bg-amber-100 text-amber-700 border-amber-200',
        default  => 'bg-rose-100 text-rose-700 border-rose-200',
    };
@endphp

<div class="rounded-3xl border border-slate-200 bg-white overflow-hidden shadow-xl">
    <div class="px-4 sm:px-6 py-4 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 border-b border-slate-100">
        <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-2xl bg-emerald-500/15 border border-emerald-400/25 grid place-items-center text-emerald-600">
                <i class="fa-solid fa-chart-line"></i>
            </div>
            <div>
                <h3 class="text-sm sm:text-base font-extrabold text-slate-900">لوحة معدل العضو</h3>
                <p class="text-[11px] text-slate-500">
                    محاولاتك: {{ $kpi->total_attempts }} — الإشارة: {{ $kpi->traffic->icon }} {{ $kpi->traffic->label }}
                </p>
            </div>
        </div>

        <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full border text-[11px] {{ $trafficChip }}">
            <span>{{ $kpi->traffic->icon }}</span>
            <span class="font-bold">{{ $kpi->traffic->label }}</span>
        </span>
    </div>

    <div class="p-4 sm:p-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <div class="rounded-3xl bg-gradient-to-br from-sky-50 via-white to-white border border-slate-200 shadow-sm p-5">
            <div class="text-[11px] text-slate-500">معدلك العام</div>
            <div class="text-2xl font-extrabold text-slate-900 mt-1">
                {{ $kpi->avg_all !== null ? $kpi->avg_all.'%' : '—' }}
            </div>
        </div>

        <div class="rounded-3xl bg-gradient-to-br from-emerald-50 via-white to-white border border-slate-200 shadow-sm p-5">
            <div class="text-[11px] text-slate-500">معدلك الشهر الحالي</div>
            <div class="text-2xl font-extrabold text-slate-900 mt-1">
                {{ $kpi->avg_current !== null ? $kpi->avg_current.'%' : '—' }}
            </div>
        </div>

        <div class="rounded-3xl bg-gradient-to-br from-slate-50 via-white to-white border border-slate-200 shadow-sm p-5">
            <div class="text-[11px] text-slate-500">معدلك الشهر السابق</div>
            <div class="text-2xl font-extrabold text-slate-900 mt-1">
                {{ $kpi->avg_prev !== null ? $kpi->avg_prev.'%' : '—' }}
            </div>
        </div>

        <div class="rounded-3xl bg-gradient-to-br from-fuchsia-50 via-white to-white border border-slate-200 shadow-sm p-5">
            <div class="text-[11px] text-slate-500">نسبة تقدمك</div>
            <div class="text-2xl font-extrabold mt-1 {{ $kpi->progress >= 0 ? 'text-emerald-700' : 'text-rose-700' }}">
                {{ $kpi->progress >= 0 ? '+' : '' }}{{ $kpi->progress }}%
            </div>
        </div>
    </div>

    <div class="px-4 sm:px-6 pb-6">
        <div class="rounded-2xl bg-slate-50 border border-slate-200 px-4 py-3 text-[12px] text-slate-600 leading-relaxed">
            <i class="fa-solid fa-wand-magic-sparkles ms-2 text-fuchsia-400"></i>
            <b class="text-slate-900">نصيحة ذكاء:</b>
            <span class="ms-1 text-slate-600">{{ $kpi->advice }}</span>
        </div>
    </div>
</div>