@props([
    'items' => collect(),
    'type'  => 'membership',   // membership | training | mentorship
])

@php
    $typeConfig = [
        'membership' => [
            'badge'       => 'bg-green-100 text-green-700',
            'label'       => 'Membership',
            'icon'        => 'fas fa-id-card',
            'approveRoute' => 'admin.members.applications.approve',
            'rejectRoute'  => 'admin.members.applications.reject',
            'routeParam'   => 'application',
        ],
        'training' => [
            'badge'       => 'bg-blue-100 text-blue-700',
            'label'       => 'Training',
            'icon'        => 'fas fa-graduation-cap',
            'approveRoute' => 'training.registrations.approve',
            'rejectRoute'  => 'training.registrations.reject',
            'routeParam'   => 'registration',
        ],
        'mentorship' => [
            'badge'       => 'bg-purple-100 text-purple-700',
            'label'       => 'Mentorship',
            'icon'        => 'fas fa-hands-helping',
            'approveRoute' => 'mentorship.applications.approve',
            'rejectRoute'  => 'mentorship.applications.reject',
            'routeParam'   => 'application',
        ],
    ];
    $cfg = $typeConfig[$type] ?? $typeConfig['membership'];
@endphp

<div class="space-y-3">
    @forelse($items as $item)
        <div x-data="{ processing: false, done: false, action: '' }"
             x-show="!done"
             x-transition:leave="transition ease-in duration-200"
             x-transition:leave-start="opacity-100 translate-x-0"
             x-transition:leave-end="opacity-0 translate-x-4"
             class="bg-white border border-gray-100 rounded-xl p-4 flex items-center gap-4 shadow-sm hover:shadow-md transition-shadow">

            {{-- Avatar --}}
            <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center flex-shrink-0 text-gray-500 font-semibold text-sm">
                {{ strtoupper(substr($item->user?->name ?? $item->name ?? '?', 0, 2)) }}
            </div>

            {{-- Info --}}
            <div class="flex-1 min-w-0">
                <p class="text-sm font-semibold text-gray-800 truncate">
                    {{ $item->user?->name ?? $item->name ?? 'Unknown' }}
                </p>
                <p class="text-xs text-gray-400 mt-0.5">
                    @if($type === 'training')
                        {{ $item->trainingPackage?->title ?? 'Training Package' }}
                    @elseif($type === 'mentorship')
                        {{ $item->programme?->title ?? 'Mentorship Programme' }}
                    @else
                        {{ $item->membershipCategory?->name ?? 'Membership' }}
                    @endif
                    &bull; {{ $item->created_at->diffForHumans() }}
                </p>
            </div>

            {{-- Module badge --}}
            <span class="hidden sm:inline-flex items-center gap-1 text-xs font-medium px-2 py-0.5 rounded-full {{ $cfg['badge'] }}">
                <i class="{{ $cfg['icon'] }} text-xs"></i>
                {{ $cfg['label'] }}
            </span>

            {{-- Action buttons --}}
            <div class="flex items-center gap-2 flex-shrink-0">
                <template x-if="!processing">
                    <div class="flex gap-2">
                        {{-- Approve --}}
                        <form method="POST"
                              action="{{ route($cfg['approveRoute'], [$cfg['routeParam'] => $item->id]) }}"
                              @submit.prevent="
                                processing = true;
                                action = 'approve';
                                $el.submit();
                                setTimeout(() => done = true, 400);
                              ">
                            @csrf
                            <button type="submit"
                                    class="px-3 py-1.5 bg-green-500 hover:bg-green-600 text-white text-xs font-medium rounded-lg transition-colors">
                                Approve
                            </button>
                        </form>

                        {{-- Reject --}}
                        <form method="POST"
                              action="{{ route($cfg['rejectRoute'], [$cfg['routeParam'] => $item->id]) }}"
                              @submit.prevent="
                                processing = true;
                                action = 'reject';
                                $el.submit();
                                setTimeout(() => done = true, 400);
                              ">
                            @csrf
                            <button type="submit"
                                    class="px-3 py-1.5 bg-red-100 hover:bg-red-200 text-red-700 text-xs font-medium rounded-lg transition-colors">
                                Reject
                            </button>
                        </form>
                    </div>
                </template>

                <template x-if="processing">
                    <span class="text-xs text-gray-400 flex items-center gap-1">
                        <svg class="animate-spin h-4 w-4 text-gray-400" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"></path>
                        </svg>
                        Processing…
                    </span>
                </template>
            </div>
        </div>
    @empty
        <div class="text-center py-8 text-gray-400">
            <i class="fas fa-check-circle text-3xl mb-2 text-green-300"></i>
            <p class="text-sm">No pending {{ $cfg['label'] }} items.</p>
        </div>
    @endforelse
</div>
