@extends('layouts.admin')
@section('title', 'Points Ledger — JAM Admin')
@section('page-title', 'Points Ledger')

@section('content')
<div class="flex flex-col sm:flex-row sm:items-start justify-between gap-4 mb-6">
    <div>
        <h2 class="text-xl sm:text-2xl font-semibold" style="font-family: 'Playfair Display', serif;">Points Ledger</h2>
        <p class="text-white/40 text-sm mt-1">All point transactions across every member.</p>
    </div>
    <div class="flex items-center gap-4 sm:gap-5">
        <div class="text-right">
            <p class="text-[#D4B84A] font-semibold text-lg">{{ number_format($totalCredits) }}</p>
            <p class="text-white/30 text-xs uppercase tracking-widest">Total Issued</p>
        </div>
        <div class="w-px h-8 bg-[#1e1e1e]"></div>
        <div class="text-right">
            <p class="text-red-400 font-semibold text-lg">{{ number_format($totalDebits) }}</p>
            <p class="text-white/30 text-xs uppercase tracking-widest">Total Deducted</p>
        </div>
    </div>
</div>

{{-- Filters --}}
<div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-3 mb-5">
    <form method="GET" class="flex items-center gap-2 flex-1 min-w-0 sm:max-w-sm">
        <input type="hidden" name="filter" value="{{ $filter }}">
        <input type="text" name="search" value="{{ $search }}"
               placeholder="Search member name or email…"
               class="flex-1 bg-[#111111] border border-[#1e1e1e] rounded-lg px-4 py-2 text-sm text-white placeholder-white/20 focus:outline-none focus:border-[#D4B84A]/40">
        <button type="submit" class="px-4 py-2 bg-[#1e1e1e] text-white/60 text-sm rounded-lg hover:bg-[#2a2a2a] transition-colors whitespace-nowrap">Search</button>
        @if($search)
        <a href="{{ request()->fullUrlWithQuery(['search' => null]) }}" class="text-white/30 hover:text-white text-xs transition-colors whitespace-nowrap">Clear</a>
        @endif
    </form>

    <div class="flex items-center gap-1 border-b border-[#1e1e1e]">
        @foreach(['all' => 'All', 'credit' => 'Credits', 'debit' => 'Debits'] as $key => $label)
        <a href="{{ request()->fullUrlWithQuery(['filter' => $key, 'search' => $search]) }}"
           class="px-3 py-2 text-xs 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>

<div class="bg-[#111111] border border-[#1e1e1e] rounded-xl overflow-hidden">
    {{-- Desktop header --}}
    <div class="hidden md:grid px-6 py-3 border-b border-[#1e1e1e] grid-cols-12 gap-4 text-xs tracking-widest uppercase text-white/25">
        <div class="col-span-3">Member</div>
        <div class="col-span-3">Description</div>
        <div class="col-span-2">Date</div>
        <div class="col-span-1 text-center">Type</div>
        <div class="col-span-1 text-right">Points</div>
        <div class="col-span-2 text-right">Balance After</div>
    </div>

    <div class="divide-y divide-[#1e1e1e]">
        @forelse($transactions as $tx)
        {{-- Desktop row --}}
        <div class="hidden md:grid px-6 py-4 grid-cols-12 gap-4 items-center hover:bg-white/[0.015] transition-colors">
            <div class="col-span-3">
                <a href="{{ route('admin.members.show', $tx->user) }}" class="hover:text-[#D4B84A] transition-colors">
                    <p class="text-white text-sm font-medium">{{ $tx->user?->full_name ?? '—' }}</p>
                    <p class="text-white/30 text-xs mt-0.5">{{ $tx->user?->membership_number }}</p>
                </a>
            </div>
            <div class="col-span-3">
                <p class="text-white/80 text-sm">{{ $tx->description }}</p>
                @if($tx->admin_note)
                <p class="text-white/30 text-xs mt-0.5 italic">{{ Str::limit($tx->admin_note, 60) }}</p>
                @endif
                @if($tx->admin)
                <p class="text-white/20 text-xs mt-0.5">by {{ $tx->admin->name }}</p>
                @endif
            </div>
            <div class="col-span-2">
                <p class="text-white/60 text-sm">{{ $tx->created_at->format('d M Y') }}</p>
                <p class="text-white/25 text-xs mt-0.5">{{ $tx->created_at->format('h:i A') }}</p>
            </div>
            <div class="col-span-1 text-center">
                <span class="px-2 py-0.5 rounded-full text-[10px] font-semibold
                    {{ $tx->type === 'credit' ? 'bg-green-900/30 text-green-400' : ($tx->type === 'expiry' ? 'bg-white/5 text-white/30' : 'bg-red-900/30 text-red-400') }}">
                    {{ ucfirst($tx->type) }}
                </span>
            </div>
            <div class="col-span-1 text-right">
                <span class="font-semibold text-sm {{ $tx->isCredit() ? 'text-[#D4B84A]' : 'text-red-400' }}">
                    {{ $tx->isCredit() ? '+' : '−' }}{{ number_format($tx->amount) }}
                </span>
            </div>
            <div class="col-span-2 text-right">
                <span class="text-white/50 text-sm">{{ number_format($tx->balance_after) }}</span>
                <p class="text-white/20 text-xs mt-0.5">pts remaining</p>
            </div>
        </div>

        {{-- Mobile row --}}
        <div class="md:hidden px-4 py-4 flex items-start justify-between gap-3 hover:bg-white/[0.015] transition-colors">
            <div class="min-w-0">
                <a href="{{ route('admin.members.show', $tx->user) }}" class="hover:text-[#D4B84A] transition-colors">
                    <p class="text-white text-sm font-medium truncate">{{ $tx->user?->full_name ?? '—' }}</p>
                </a>
                <p class="text-white/60 text-xs truncate mt-0.5">{{ $tx->description }}</p>
                <p class="text-white/25 text-xs mt-1">{{ $tx->created_at->format('d M Y · h:i A') }}</p>
            </div>
            <div class="text-right flex-shrink-0">
                <p class="font-semibold text-sm {{ $tx->isCredit() ? 'text-[#D4B84A]' : 'text-red-400' }}">
                    {{ $tx->isCredit() ? '+' : '−' }}{{ number_format($tx->amount) }}
                </p>
                <span class="px-2 py-0.5 rounded-full text-[10px] font-semibold mt-1 inline-block
                    {{ $tx->type === 'credit' ? 'bg-green-900/30 text-green-400' : ($tx->type === 'expiry' ? 'bg-white/5 text-white/30' : 'bg-red-900/30 text-red-400') }}">
                    {{ ucfirst($tx->type) }}
                </span>
            </div>
        </div>
        @empty
        <div class="px-6 py-12 text-center text-white/30 text-sm">
            No transactions found.
            @if($search || $filter !== 'all')
            <a href="{{ route('admin.points.ledger') }}" class="text-[#D4B84A] text-xs ml-2 hover:text-[#E8D080]">Clear filters</a>
            @endif
        </div>
        @endforelse
    </div>

    @if($transactions->hasPages())
    <div class="px-4 sm:px-6 py-4 border-t border-[#1e1e1e]">{{ $transactions->links() }}</div>
    @endif
</div>
@endsection