@extends('layouts.admin')

@section('title', 'Webhook Events')
@section('page-title', 'Payment Webhook Events')

@section('content')
<div class="space-y-6">

    {{-- Stats --}}
    <section class="grid gap-4 sm:grid-cols-3 xl:grid-cols-6">
        @php
            $cards = [
                ['label' => 'Total', 'value' => $stats['total'], 'color' => 'text-slate-900'],
                ['label' => 'Queued', 'value' => $stats['queued'], 'color' => 'text-amber-600'],
                ['label' => 'Processed', 'value' => $stats['processed'], 'color' => 'text-emerald-600'],
                ['label' => 'Failed', 'value' => $stats['failed'], 'color' => 'text-red-600'],
                ['label' => 'Stripe', 'value' => $stats['stripe'], 'color' => 'text-indigo-600'],
                ['label' => 'PayPal', 'value' => $stats['paypal'], 'color' => 'text-blue-600'],
            ];
        @endphp
        @foreach($cards as $card)
            <div class="rounded-3xl border border-slate-200 bg-white p-5 shadow-sm">
                <p class="text-xs font-semibold uppercase tracking-widest text-slate-500">{{ $card['label'] }}</p>
                <p class="mt-3 text-3xl font-black {{ $card['color'] }}">{{ number_format($card['value']) }}</p>
            </div>
        @endforeach
    </section>

    {{-- Filters --}}
    <section class="rounded-3xl border border-slate-200 bg-white p-5 shadow-sm">
        <form method="GET" class="flex flex-wrap gap-3">
            <select name="provider" class="rounded-2xl border border-slate-300 px-4 py-2.5 text-sm outline-none focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                <option value="">All Providers</option>
                <option value="stripe" @selected(request('provider') === 'stripe')>Stripe</option>
                <option value="paypal" @selected(request('provider') === 'paypal')>PayPal</option>
            </select>
            <select name="status" class="rounded-2xl border border-slate-300 px-4 py-2.5 text-sm outline-none focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                <option value="">All Statuses</option>
                <option value="queued" @selected(request('status') === 'queued')>Queued</option>
                <option value="processed" @selected(request('status') === 'processed')>Processed</option>
                <option value="failed" @selected(request('status') === 'failed')>Failed</option>
            </select>
            <input type="text" name="event_type" value="{{ request('event_type') }}" placeholder="Event type…" class="rounded-2xl border border-slate-300 px-4 py-2.5 text-sm outline-none focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
            <button type="submit" class="rounded-2xl bg-brand-600 px-5 py-2.5 text-sm font-semibold text-white hover:bg-brand-700">Filter</button>
            @if(request()->hasAny(['provider','status','event_type']))
                <a href="{{ route('admin.webhooks.index') }}" class="rounded-2xl border border-slate-300 px-5 py-2.5 text-sm font-semibold text-slate-700 hover:bg-slate-50">Clear</a>
            @endif
        </form>
    </section>

    {{-- Table --}}
    <section class="rounded-3xl border border-slate-200 bg-white shadow-sm">
        <div class="overflow-x-auto">
            <table class="min-w-full text-left text-sm">
                <thead class="border-b border-slate-200 bg-slate-50">
                    <tr>
                        <th class="px-5 py-4 font-semibold text-slate-500">Provider</th>
                        <th class="px-5 py-4 font-semibold text-slate-500">Event Type</th>
                        <th class="px-5 py-4 font-semibold text-slate-500">Event ID</th>
                        <th class="px-5 py-4 font-semibold text-slate-500">Status</th>
                        <th class="px-5 py-4 font-semibold text-slate-500">Notes</th>
                        <th class="px-5 py-4 font-semibold text-slate-500">Received</th>
                        <th class="px-5 py-4 font-semibold text-slate-500">Processed At</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse($events as $event)
                        <tr class="hover:bg-slate-50 transition-colors">
                            <td class="px-5 py-4">
                                @if($event->provider === 'stripe')
                                    <span class="inline-flex items-center gap-1 rounded-full bg-indigo-100 px-3 py-1 text-xs font-semibold text-indigo-700">
                                        <svg class="h-3 w-3" viewBox="0 0 24 24" fill="currentColor"><path d="M13.976 9.15c-2.172-.806-3.356-1.426-3.356-2.409 0-.831.683-1.305 1.901-1.305 2.227 0 4.515.858 6.09 1.631l.89-5.494C18.252.975 15.697 0 12.165 0 9.667 0 7.589.654 6.104 1.872 4.56 3.147 3.757 4.992 3.757 7.218c0 4.039 2.467 5.76 6.476 7.219 2.585.92 3.445 1.574 3.445 2.583 0 .98-.84 1.545-2.354 1.545-1.875 0-4.965-.921-6.99-2.109l-.9 5.555C4.352 23.6 7.048 24 9.82 24c2.952 0 5.119-.64 6.625-1.932 1.619-1.385 2.355-3.284 2.355-5.558-.06-4.059-2.545-5.819-6.824-7.36z"/></svg>
                                        Stripe
                                    </span>
                                @else
                                    <span class="inline-flex items-center gap-1 rounded-full bg-blue-100 px-3 py-1 text-xs font-semibold text-blue-700">
                                        <svg class="h-3 w-3" viewBox="0 0 24 24" fill="currentColor"><path d="M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944.901C5.026.382 5.474 0 5.998 0h7.46c2.57 0 4.578.543 5.69 1.81 1.01 1.15 1.304 2.42 1.012 4.287-.023.143-.047.288-.077.437-.983 5.05-4.349 6.797-8.647 6.797h-2.19a.75.75 0 0 0-.74.627l-.09.532-.711 4.49-.018.113a.641.641 0 0 1-.632.54z"/></svg>
                                        PayPal
                                    </span>
                                @endif
                            </td>
                            <td class="px-5 py-4 font-mono text-xs text-slate-700">{{ $event->event_type ?? '—' }}</td>
                            <td class="px-5 py-4 font-mono text-xs text-slate-500 truncate max-w-[160px]" title="{{ $event->event_id }}">{{ Str::limit($event->event_id, 20) ?? '—' }}</td>
                            <td class="px-5 py-4">
                                @php
                                    $badge = match($event->status) {
                                        'processed' => 'bg-emerald-100 text-emerald-700',
                                        'failed'    => 'bg-red-100 text-red-700',
                                        default     => 'bg-amber-100 text-amber-700',
                                    };
                                @endphp
                                <span class="rounded-full px-3 py-1 text-xs font-semibold {{ $badge }}">{{ ucfirst($event->status) }}</span>
                            </td>
                            <td class="px-5 py-4 text-xs text-slate-500 max-w-[200px] truncate" title="{{ $event->processing_notes }}">{{ $event->processing_notes ?? '—' }}</td>
                            <td class="px-5 py-4 text-xs text-slate-500 whitespace-nowrap">{{ $event->created_at->diffForHumans() }}</td>
                            <td class="px-5 py-4 text-xs text-slate-500 whitespace-nowrap">{{ $event->processed_at?->diffForHumans() ?? '—' }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="px-5 py-16 text-center text-sm text-slate-500">
                                No webhook events yet. Events appear here after Stripe or PayPal posts to the webhook endpoints.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($events->hasPages())
            <div class="border-t border-slate-200 px-5 py-4">
                {{ $events->links() }}
            </div>
        @endif
    </section>
</div>
@endsection