@extends('student.layouts.app')

@php
    $isAr = app()->getLocale() === 'ar';
    $statusLabels = [
        'pending'   => $isAr ? 'قيد المراجعة' : 'Pending',
        'approved'  => $isAr ? 'معتمد'         : 'Approved',
        'rejected'  => $isAr ? 'مرفوض'         : 'Rejected',
        'fulfilled' => $isAr ? 'تم التسليم'    : 'Fulfilled',
    ];
    $statusColors = [
        'pending'   => 'bg-amber-100 text-amber-700 dark:bg-amber-500/20 dark:text-amber-400',
        'approved'  => 'bg-sky-100 text-sky-700 dark:bg-sky-500/20 dark:text-sky-400',
        'rejected'  => 'bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-400',
        'fulfilled' => 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-400',
    ];
@endphp

@section('title', $isAr ? 'النقاط والمكافآت' : 'Points & Rewards')

@section('content')
<div class="flex flex-col gap-6">

    {{-- Header --}}
    <div class="rounded-[1.75rem] border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-900 lg:p-7">
        <div class="flex flex-col gap-5 sm:flex-row sm:items-center sm:justify-between">
            <div class="space-y-1">
                <p class="text-[11px] font-black uppercase tracking-[0.2em] text-brand-600 dark:text-brand-400">
                    {{ $isAr ? 'مركز التقدير' : 'Recognition Center' }}
                </p>
                <h1 class="text-2xl font-black tracking-tight text-zinc-900 dark:text-white">
                    {{ $isAr ? 'نقاطك وأوسمتك' : 'Points & Badges' }}
                </h1>
                <p class="text-sm text-zinc-500 dark:text-zinc-400">
                    {{ $isAr ? 'استمر في التميز، اجمع النقاط واستبدلها بمكافآت.' : 'Keep excelling, collect points and redeem them for rewards.' }}
                </p>
            </div>
            <div class="flex shrink-0 flex-wrap gap-3">
                <div class="rounded-2xl border border-brand-200 bg-brand-50 px-6 py-3 text-center dark:border-brand-500/20 dark:bg-brand-500/10">
                    <p class="text-[11px] font-black uppercase tracking-widest text-brand-500">{{ $isAr ? 'رصيدك' : 'Balance' }}</p>
                    <p class="mt-1 text-3xl font-black text-brand-700 dark:text-brand-400">{{ number_format($student->points_balance) }}</p>
                    <p class="text-[10px] font-bold text-brand-400">{{ $isAr ? 'نقطة' : 'pts' }}</p>
                </div>
                <div class="rounded-2xl border border-zinc-200 bg-zinc-50 px-6 py-3 text-center dark:border-zinc-700 dark:bg-zinc-950">
                    <p class="text-[11px] font-black uppercase tracking-widest text-zinc-400">{{ $isAr ? 'الأوسمة' : 'Badges' }}</p>
                    <p class="mt-1 text-3xl font-black text-zinc-900 dark:text-white">{{ $student->badges->count() }}</p>
                    <p class="text-[10px] font-bold text-zinc-400">{{ $isAr ? 'وسام' : 'earned' }}</p>
                </div>
            </div>
        </div>
    </div>

    <div class="grid gap-6 lg:grid-cols-3">

        {{-- Left: Rewards + History --}}
        <div class="flex flex-col gap-6 lg:col-span-2">

            {{-- Available Rewards --}}
            <section class="rounded-[2rem] border border-zinc-200 bg-white shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
                <div class="flex items-center justify-between border-b border-zinc-100 p-6 dark:border-zinc-800">
                    <h2 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isAr ? 'المكافآت المتاحة' : 'Available Rewards' }}</h2>
                    <span class="rounded-full bg-zinc-100 px-3 py-1 text-[11px] font-black text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400">{{ $rewards->count() }}</span>
                </div>
                @if($rewards->isEmpty())
                    <div class="p-10 text-center text-zinc-400">
                        <i class="fa-solid fa-gift mb-2 text-3xl text-zinc-200 dark:text-zinc-700"></i>
                        <p class="text-sm">{{ $isAr ? 'لا توجد مكافآت متاحة حالياً' : 'No rewards available yet' }}</p>
                    </div>
                @else
                    <div class="grid gap-4 p-6 sm:grid-cols-2">
                        @foreach($rewards as $reward)
                        @php
                            $outOfStock = !is_null($reward->quantity) && $reward->reserved_count >= $reward->quantity;
                            $canRedeem  = $student->points_balance >= $reward->points_cost && !$outOfStock;
                            $remaining  = is_null($reward->quantity) ? '∞' : max(0, $reward->quantity - $reward->reserved_count);
                        @endphp
                        <article class="flex flex-col rounded-[1.5rem] border border-zinc-200 bg-zinc-50 p-5 dark:border-zinc-800 dark:bg-zinc-950">
                            <div class="flex items-start justify-between gap-3">
                                <div class="flex h-11 w-11 items-center justify-center rounded-2xl bg-white text-xl shadow-sm dark:bg-zinc-900">🎁</div>
                                <div class="text-end">
                                    <p class="text-lg font-black text-brand-600 dark:text-brand-400">{{ number_format($reward->points_cost) }}</p>
                                    <p class="text-[10px] font-bold text-zinc-400">{{ $isAr ? 'نقطة' : 'pts' }}</p>
                                </div>
                            </div>
                            <h3 class="mt-3 font-black text-zinc-900 dark:text-white">{{ $reward->name }}</h3>
                            @if($reward->description)
                                <p class="mt-1 line-clamp-2 text-xs leading-relaxed text-zinc-500 dark:text-zinc-400">{{ $reward->description }}</p>
                            @endif
                            <div class="mt-4 flex items-center justify-between border-t border-zinc-100 pt-4 dark:border-zinc-800">
                                <span class="text-[11px] font-bold text-zinc-400">
                                    {{ $isAr ? 'المتبقي:' : 'Left:' }} {{ $remaining }}
                                </span>
                                <form action="{{ route('student.rewards.redeem', $reward) }}" method="POST">
                                    @csrf
                                    <button type="submit"
                                            @if(!$canRedeem) disabled @endif
                                            class="inline-flex items-center gap-1.5 rounded-xl px-4 py-2 text-xs font-black transition {{ $canRedeem ? 'bg-brand-600 text-white hover:bg-brand-700' : 'cursor-not-allowed bg-zinc-200 text-zinc-400 dark:bg-zinc-800' }}">
                                        <i class="fa-solid fa-cart-shopping"></i>
                                        {{ $isAr ? 'استبدال' : 'Redeem' }}
                                    </button>
                                </form>
                            </div>
                        </article>
                        @endforeach
                    </div>
                @endif
            </section>

            {{-- Points History --}}
            <section class="rounded-[2rem] border border-zinc-200 bg-white shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
                <div class="flex items-center justify-between border-b border-zinc-100 p-6 dark:border-zinc-800">
                    <h2 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isAr ? 'سجل النقاط' : 'Points Log' }}</h2>
                    <a href="{{ route('student.rewards.transactions') }}"
                       class="text-xs font-bold text-brand-600 no-underline hover:text-brand-800 dark:text-brand-400">
                        {{ $isAr ? 'السجل الكامل' : 'Full log' }} →
                    </a>
                </div>
                <div class="divide-y divide-zinc-100 dark:divide-zinc-800">
                    @forelse($transactions as $tx)
                    <div class="flex items-center justify-between px-6 py-4">
                        <div class="flex items-center gap-3">
                            <div class="flex h-9 w-9 items-center justify-center rounded-xl {{ $tx->points >= 0 ? 'bg-emerald-50 text-emerald-600 dark:bg-emerald-500/10' : 'bg-red-50 text-red-500 dark:bg-red-500/10' }}">
                                <i class="fa-solid {{ $tx->points >= 0 ? 'fa-arrow-up' : 'fa-arrow-down' }} text-xs"></i>
                            </div>
                            <div>
                                <p class="text-sm font-bold text-zinc-800 dark:text-zinc-200">{{ str_replace('_', ' ', $tx->action_key) }}</p>
                                <p class="text-[11px] text-zinc-400">{{ optional($tx->awarded_at)->diffForHumans() }}</p>
                            </div>
                        </div>
                        <span class="font-black {{ $tx->points >= 0 ? 'text-emerald-600 dark:text-emerald-400' : 'text-red-500' }}">
                            {{ $tx->points >= 0 ? '+' : '' }}{{ $tx->points }}
                        </span>
                    </div>
                    @empty
                    <div class="p-8 text-center text-sm text-zinc-400">{{ $isAr ? 'لا توجد معاملات بعد' : 'No transactions yet' }}</div>
                    @endforelse
                </div>
            </section>
        </div>

        {{-- Right: Leaderboard + Badges + Redemptions --}}
        <div class="flex flex-col gap-6">

            {{-- Leaderboard --}}
            <section class="rounded-[2rem] border border-zinc-200 bg-white shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
                <div class="border-b border-zinc-100 p-6 dark:border-zinc-800">
                    <h2 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isAr ? 'المتصدرون' : 'Leaderboard' }}</h2>
                </div>
                <div class="divide-y divide-zinc-100 dark:divide-zinc-800">
                    @foreach($topStudents as $i => $s)
                    @php $isMe = $s->id === auth()->id(); @endphp
                    <div class="flex items-center gap-3 px-5 py-3 {{ $isMe ? 'bg-brand-50 dark:bg-brand-500/10' : '' }}">
                        <div class="w-7 shrink-0 text-center text-sm font-black">
                            @if($i === 0) 🥇 @elseif($i === 1) 🥈 @elseif($i === 2) 🥉
                            @else <span class="text-xs text-zinc-400">#{{ $i+1 }}</span>
                            @endif
                        </div>
                        <p class="min-w-0 flex-1 truncate text-sm font-bold {{ $isMe ? 'text-brand-700 dark:text-brand-400' : 'text-zinc-800 dark:text-zinc-200' }}">
                            {{ $isMe ? $s->name : explode(' ', trim($s->name))[0] }}
                            @if($isMe)<span class="text-[10px] font-bold opacity-60"> ({{ $isAr ? 'أنت' : 'You' }})</span>@endif
                        </p>
                        <span class="shrink-0 text-sm font-black text-zinc-700 dark:text-zinc-300">{{ number_format((int)($s->point_transactions_sum_points ?? 0)) }}</span>
                    </div>
                    @endforeach
                </div>
            </section>

            {{-- Badges --}}
            <section class="rounded-[2rem] border border-zinc-200 bg-white shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
                <div class="border-b border-zinc-100 p-6 dark:border-zinc-800">
                    <h2 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isAr ? 'أوسمتك' : 'Your Badges' }}</h2>
                </div>
                @if($student->badges->isEmpty())
                    <div class="p-8 text-center">
                        <i class="fa-solid fa-medal mb-2 text-3xl text-zinc-200 dark:text-zinc-700"></i>
                        <p class="text-sm text-zinc-400">{{ $isAr ? 'لا يوجد أوسمة بعد' : 'No badges yet' }}</p>
                    </div>
                @else
                    <div class="grid grid-cols-3 gap-3 p-5">
                        @foreach($student->badges as $badge)
                        <div class="flex flex-col items-center gap-2 rounded-2xl border border-zinc-100 bg-zinc-50 p-3 dark:border-zinc-800 dark:bg-zinc-950">
                            <div class="flex h-11 w-11 items-center justify-center rounded-xl text-white shadow-sm" style="background-color: {{ $badge->color }}">
                                <i class="fa-solid {{ $badge->icon }}"></i>
                            </div>
                            <p class="text-center text-[10px] font-black text-zinc-700 line-clamp-2 dark:text-zinc-300">{{ $badge->name }}</p>
                        </div>
                        @endforeach
                    </div>
                @endif
            </section>

            {{-- Redemption Requests --}}
            @if($student->rewardRedemptions->isNotEmpty())
            <section class="rounded-[2rem] border border-zinc-200 bg-white shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
                <div class="border-b border-zinc-100 p-6 dark:border-zinc-800">
                    <h2 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isAr ? 'طلباتك' : 'Your Requests' }}</h2>
                </div>
                <div class="divide-y divide-zinc-100 dark:divide-zinc-800">
                    @foreach($student->rewardRedemptions->take(5) as $r)
                    <div class="flex items-center justify-between px-5 py-3">
                        <div>
                            <p class="text-sm font-bold text-zinc-800 truncate max-w-[130px] dark:text-zinc-200">{{ $r->reward?->name }}</p>
                            <p class="text-[11px] text-zinc-400">{{ $r->points_cost }} {{ $isAr ? 'نقطة' : 'pts' }}</p>
                        </div>
                        <span class="rounded-full px-2.5 py-1 text-[10px] font-black {{ $statusColors[$r->status] ?? 'bg-zinc-100 text-zinc-500' }}">
                            {{ $statusLabels[$r->status] ?? $r->status }}
                        </span>
                    </div>
                    @endforeach
                </div>
            </section>
            @endif

        </div>
    </div>
</div>
@endsection