@extends('layouts.member')
@section('title', 'Points Ledger — JAM Members Club')

@section('content')
@php
    $user = auth()->user();
    $filter = request('filter', 'all');
    $query  = $user->pointsTransactions();
    if ($filter === 'credit') $query->where('type', 'credit');
    if ($filter === 'debit')  $query->whereIn('type', ['debit','expiry']);
    $transactions = $query->paginate(20)->withQueryString();
@endphp

<div class="mb-8 flex items-start justify-between">
    <div>
        <h1 class="text-3xl font-semibold" style="font-family: 'Playfair Display', serif;">Points Ledger</h1>
        <p class="text-white/40 text-sm mt-1">Your complete points history.</p>
    </div>
    <div class="text-right">
        <p class="text-3xl font-semibold text-[#D4B84A]">{{ number_format($user->points_balance) }}</p>
        <p class="text-white/30 text-xs uppercase tracking-widest mt-0.5">Current Balance</p>
    </div>
</div>

{{-- Filter tabs --}}
<div class="flex items-center gap-1 mb-6 border-b border-[#1e1e1e] pb-0">
    @foreach(['all' => 'All Transactions', 'credit' => 'Credits', 'debit' => 'Debits'] as $key => $label)
    <a href="{{ request()->fullUrlWithQuery(['filter' => $key]) }}"
       class="px-4 py-2.5 text-sm transition-colors border-b-2 -mb-px
           {{ $filter === $key ? 'border-[#D4B84A] text-[#D4B84A]' : 'border-transparent text-white/40 hover:text-white' }}">
        {{ $label }}
    </a>
    @endforeach
</div>

<div class="bg-[#111111] border border-[#1e1e1e] rounded-2xl overflow-hidden">
    <div class="divide-y divide-[#1e1e1e]">
        @forelse($transactions as $tx)
        <div class="flex items-center justify-between px-6 py-4">
            <div class="flex items-center gap-4">
                <div class="w-9 h-9 rounded-full flex items-center justify-center flex-shrink-0
                    {{ $tx->isCredit() ? 'bg-[#D4B84A]/10' : 'bg-red-900/20' }}">
                    <span class="text-sm font-medium {{ $tx->isCredit() ? 'text-[#D4B84A]' : 'text-red-400' }}">
                        {{ $tx->isCredit() ? '+' : '−' }}
                    </span>
                </div>
                <div>
                    <p class="text-white text-sm">{{ $tx->description }}</p>
                    <p class="text-white/30 text-xs mt-0.5">{{ $tx->created_at->format('d M Y') }}
                        @if($tx->visit_date && $tx->visit_date != $tx->created_at->toDateString())
                        · Visit: {{ \Carbon\Carbon::parse($tx->visit_date)->format('d M Y') }}
                        @endif
                    </p>
                    @if($tx->note_visible_to_member && $tx->admin_note)
                    <p class="text-white/35 text-xs mt-1 italic">{{ $tx->admin_note }}</p>
                    @endif
                </div>
            </div>
            <div class="text-right flex-shrink-0 ml-4">
                <p class="font-semibold text-sm {{ $tx->isCredit() ? 'text-[#D4B84A]' : 'text-red-400' }}">
                    {{ $tx->isCredit() ? '+' : '−' }}{{ number_format($tx->amount) }}
                </p>
                <p class="text-white/25 text-xs mt-0.5">Bal: {{ number_format($tx->balance_after) }}</p>
            </div>
        </div>
        @empty
        <div class="px-6 py-12 text-center">
            <p class="text-white/30 text-sm">No transactions found.</p>
            @if($filter !== 'all')
            <a href="{{ request()->fullUrlWithQuery(['filter' => 'all']) }}" class="text-[#D4B84A] text-xs mt-2 inline-block hover:text-[#E8D080]">View all transactions</a>
            @endif
        </div>
        @endforelse
    </div>
    @if($transactions->hasPages())
    <div class="px-6 py-4 border-t border-[#1e1e1e]">{{ $transactions->links() }}</div>
    @endif
</div>

{{-- Tier progress sidebar widget --}}
@php
    $currentTier = $user->currentTier?->tier;
    $nextTier = $currentTier ? \App\Models\Tier::where('display_order', $currentTier->display_order + 1)->first() : null;
@endphp
@if($nextTier)
<div class="mt-6 bg-[#111111] border border-[#D4B84A]/20 rounded-2xl p-5">
    <p class="text-[#D4B84A] text-xs tracking-widest uppercase font-medium mb-3">Next Tier: {{ $nextTier->name }}</p>
    <div class="flex justify-between text-xs text-white/40 mb-2">
        <span>{{ number_format($user->points_balance) }} pts earned</span>
        <span>{{ number_format($nextTier->points_threshold_3months) }} pts needed (per quarter)</span>
    </div>
    <div class="h-1.5 bg-white/10 rounded-full overflow-hidden">
        <div class="h-full bg-[#D4B84A] rounded-full"
             style="width: {{ min(100, ($user->points_balance / $nextTier->points_threshold_3months) * 100) }}%"></div>
    </div>
    <p class="text-white/25 text-xs mt-3">Tier upgrades are assessed quarterly by JAM Corner.</p>
</div>
@endif
@endsection