@extends('dashboard.app')

@section('page_title', 'Webhook Detail')
@section('page_subtitle', 'Event payload, headers, and processing status.')

@section('dashboard_content')
    <a href="{{ route('dashboard.admin.webhooks') }}" class="inline-flex items-center gap-2 text-sm text-gray-400 hover:text-white">
        <i data-lucide="arrow-left" class="w-4 h-4"></i><span>Back to webhooks</span>
    </a>

    <div class="mt-6 grid gap-6 lg:grid-cols-3">
        <div class="rounded-2xl glass-card p-6">
            <div class="text-xs uppercase tracking-[0.2em] text-gray-400">Event</div>
            <div class="mt-3 text-2xl font-semibold text-white">#{{ $event->id }}</div>
            <div class="mt-2 text-sm text-gray-400">{{ $event->event_type ?? 'event' }}</div>
        </div>
        <div class="rounded-2xl glass-card p-6">
            <div class="text-xs uppercase tracking-[0.2em] text-gray-400">Provider</div>
            <div class="mt-3 text-2xl font-semibold text-white">{{ $event->provider }}</div>
            <div class="mt-2 text-sm text-gray-400">Event ID: {{ $event->event_id ?? '—' }}</div>
        </div>
        <div class="rounded-2xl glass-card p-6">
            <div class="text-xs uppercase tracking-[0.2em] text-gray-400">Status</div>
            <div class="mt-3 text-2xl font-semibold text-white">{{ $event->status }}</div>
            <div class="mt-2 text-sm text-gray-400">Received: {{ $event->received_at?->toDateTimeString() ?? $event->created_at?->toDateTimeString() }}</div>
        </div>
    </div>

    <div class="mt-8 grid gap-6 lg:grid-cols-2">
        <div class="rounded-2xl glass-card p-6">
            <div class="flex items-center justify-between">
                <div>
                    <div class="text-xs uppercase tracking-[0.2em] text-gray-400">Payload</div>
                    <div class="mt-2 text-lg font-semibold text-white">Event body</div>
                </div>
                <form method="POST" action="{{ route('dashboard.admin.webhooks.replay', $event->id) }}">
                    @csrf
                    <button class="rounded-xl border border-white/10 px-4 py-2 text-sm font-semibold text-gray-200 hover:bg-white/5 transition-colors">Replay</button>
                </form>
            </div>
            <pre class="mt-4 rounded-xl border border-white/10 bg-black/40 p-4 text-xs text-gray-200 overflow-x-auto">{{ json_encode($event->payload, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES) }}</pre>
            @if ($event->error)
                <div class="mt-4 rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700 dark:border-rose-500/30 dark:bg-rose-500/15 dark:text-rose-200">
                    {{ $event->error }}
                </div>
            @endif
        </div>
        <div class="rounded-2xl glass-card p-6">
            <div class="text-xs uppercase tracking-[0.2em] text-gray-400">Headers</div>
            <div class="mt-2 text-lg font-semibold text-white">Request metadata</div>
            <pre class="mt-4 rounded-xl border border-white/10 bg-black/40 p-4 text-xs text-gray-200 overflow-x-auto">{{ json_encode($event->headers, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES) }}</pre>
            <div class="mt-4 text-sm text-gray-300">
                Processed: <span class="text-gray-200">{{ $event->processed_at?->toDateTimeString() ?? '—' }}</span>
            </div>
        </div>
    </div>
@endsection