@extends('layouts.admin')
@section('title', 'Members — JAM Admin')
@section('page-title', 'Member Directory')

@section('content')
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
    <div>
        <h2 class="text-xl sm:text-2xl font-semibold" style="font-family: 'Playfair Display', serif;">Directory</h2>
        <p class="text-white/40 text-sm mt-1">{{ $members->total() }} {{ Str::plural('member', $members->total()) }} registered.</p>
    </div>
    <a href="{{ route('admin.members.create') }}"
       class="self-start sm:self-auto bg-[#D4B84A] hover:bg-[#E8D080] text-black text-xs font-semibold tracking-widest uppercase px-5 py-3 rounded-full transition-colors whitespace-nowrap">
        + New Member
    </a>
</div>

@if(session('success'))
<div class="bg-green-900/20 border border-green-700/40 rounded-xl px-5 py-3 mb-5 text-green-400 text-sm">
    {{ session('success') }}
</div>
@endif

{{-- Filters --}}
<form method="GET" action="{{ route('admin.members.index') }}" class="flex flex-col sm:flex-row flex-wrap items-stretch sm:items-center gap-3 mb-5">
    <input type="text" name="search" value="{{ request('search') }}"
           placeholder="Search name, email, membership no…"
           class="bg-[#1a1a1a] border border-[#2a2a2a] rounded-lg px-4 py-2.5 text-sm text-white placeholder-white/20 outline-none focus:border-[#D4B84A] transition-colors w-full sm:w-72">
    <div class="flex items-center gap-3 flex-wrap">
        <select name="tier"
                class="bg-[#1a1a1a] border border-[#2a2a2a] rounded-lg px-3 py-2.5 text-sm text-white/60 outline-none focus:border-[#D4B84A] transition-colors flex-1 sm:flex-none">
            <option value="">All Tiers</option>
            @foreach($tiers as $tier)
            <option value="{{ $tier->slug }}" {{ request('tier') === $tier->slug ? 'selected' : '' }}>{{ $tier->name }}</option>
            @endforeach
        </select>
        <select name="status"
                class="bg-[#1a1a1a] border border-[#2a2a2a] rounded-lg px-3 py-2.5 text-sm text-white/60 outline-none focus:border-[#D4B84A] transition-colors flex-1 sm:flex-none">
            <option value="">All Status</option>
            <option value="active"    {{ request('status') === 'active'    ? 'selected' : '' }}>Active</option>
            <option value="suspended" {{ request('status') === 'suspended' ? 'selected' : '' }}>Suspended</option>
            <option value="inactive"  {{ request('status') === 'inactive'  ? 'selected' : '' }}>Inactive</option>
            <option value="lapsed"    {{ request('status') === 'lapsed'    ? 'selected' : '' }}>Lapsed</option>
        </select>
        <button type="submit"
                class="border border-[#2a2a2a] hover:border-[#D4B84A]/50 text-white/50 hover:text-white text-xs uppercase tracking-wide px-4 py-2.5 rounded-lg transition-colors whitespace-nowrap">
            Filter
        </button>
        @if(request()->hasAny(['search','tier','status']))
        <a href="{{ route('admin.members.index') }}" class="text-white/30 hover:text-white text-xs transition-colors whitespace-nowrap">Clear</a>
        @endif
    </div>
</form>

{{-- List --}}
<div class="bg-[#111111] border border-[#1e1e1e] rounded-xl overflow-hidden">
    <div class="divide-y divide-[#1e1e1e]">
        @forelse($members as $member)
        <div class="flex items-center justify-between px-4 sm:px-6 py-4 hover:bg-white/[0.02] transition-colors gap-3">
            {{-- Identity --}}
            <div class="flex items-center gap-3 min-w-0">
                <div class="w-8 h-8 sm:w-9 sm:h-9 rounded-full bg-[#1e1e1e] flex items-center justify-center flex-shrink-0">
                    <span class="text-white/60 text-sm font-medium">{{ strtoupper(substr($member->first_name, 0, 1)) }}</span>
                </div>
                <div class="min-w-0">
                    <p class="text-white text-sm font-medium truncate">{{ $member->full_name }}</p>
                    <p class="text-white/40 text-xs truncate">{{ $member->email }}<span class="hidden sm:inline"> · {{ $member->membership_number }}</span></p>
                </div>
            </div>

            {{-- Meta --}}
            <div class="flex items-center gap-2 sm:gap-6 flex-shrink-0">
                {{-- Points — hidden on xs --}}
                <div class="text-right hidden md:block w-16 sm:w-20">
                    <p class="text-white text-sm font-medium">{{ number_format($member->points_balance) }}</p>
                    <p class="text-white/30 text-xs">pts</p>
                </div>
                {{-- Tier — hidden on small --}}
                <span class="hidden md:inline-flex w-20 justify-center px-2.5 py-1 rounded-full text-xs border
                    {{ $member->currentTier?->tier?->slug === 'limitless' ? 'border-[#D4B84A]/50 text-[#D4B84A]' : ($member->currentTier?->tier?->slug === 'indulged' ? 'border-blue-400/30 text-blue-300' : 'border-white/20 text-white/50') }}">
                    {{ $member->currentTier?->tier?->name ?? 'Invited' }}
                </span>
                {{-- Status --}}
                <span class="px-2 sm:px-2.5 py-1 rounded-full text-xs font-medium whitespace-nowrap
                    {{ $member->status === 'active' ? 'bg-green-900/40 text-green-400' : ($member->status === 'suspended' ? 'bg-orange-900/40 text-orange-400' : 'bg-red-900/40 text-red-400') }}">
                    {{ ucfirst($member->status) }}
                </span>
                {{-- Date — hidden on small --}}
                <p class="text-white/30 text-xs hidden lg:block w-20 text-right">{{ $member->created_at->format('d M Y') }}</p>
                {{-- Arrow --}}
                <a href="{{ route('admin.members.show', $member) }}"
                   class="text-white/30 hover:text-[#D4B84A] transition-colors">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5l7 7-7 7"/></svg>
                </a>
            </div>
        </div>
        @empty
        <div class="px-6 py-12 text-center text-white/30 text-sm">
            @if(request()->hasAny(['search','tier','status']))
            No members match your filters.
            @else
            No members yet.
            @endif
        </div>
        @endforelse
    </div>
    @if($members->hasPages())
    <div class="px-4 sm:px-6 py-4 border-t border-[#1e1e1e]">{{ $members->links() }}</div>
    @endif
</div>
@endsection