@extends('layouts.app')

@section('content')
<div class="py-8">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 space-y-6">

        <div class="flex items-center justify-between">
            <h1 class="text-2xl font-bold text-gray-800">Event #{{ $event->id }}</h1>
            <div class="flex gap-2">
                <form method="POST" action="{{ route('admin.events.retry', $event) }}">@csrf
                    <button class="px-4 py-2 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700">Retry</button>
                </form>
                <a href="{{ route('admin.events.index') }}" class="px-4 py-2 text-sm text-gray-600 border border-gray-300 rounded-lg">Back</a>
            </div>
        </div>

        @if(session('success'))<div class="bg-green-50 border-l-4 border-green-500 text-green-700 px-4 py-3 rounded">{{ session('success') }}</div>@endif

        <div class="bg-white rounded-xl border border-gray-200 p-5 grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
            <div><dt class="text-xs text-gray-500 uppercase">Status</dt><dd class="mt-1"><span class="text-xs px-2 py-0.5 rounded {{ $event->statusBadgeClass() }}">{{ $event->status }}</span></dd></div>
            <div><dt class="text-xs text-gray-500 uppercase">Provider</dt><dd class="mt-1 uppercase">{{ $event->provider }}</dd></div>
            <div><dt class="text-xs text-gray-500 uppercase">Reff No</dt><dd class="mt-1 font-mono text-xs">{{ $event->reff_no ?? '—' }}</dd></div>
            <div><dt class="text-xs text-gray-500 uppercase">Prefix</dt><dd class="mt-1"><code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">{{ $event->prefix ?? '—' }}</code></dd></div>
            <div><dt class="text-xs text-gray-500 uppercase">Mapping</dt><dd class="mt-1">{{ $event->mapping->name ?? '—' }}</dd></div>
            <div><dt class="text-xs text-gray-500 uppercase">Attempts</dt><dd class="mt-1">{{ $event->attempts }}</dd></div>
            <div><dt class="text-xs text-gray-500 uppercase">Received At</dt><dd class="mt-1 text-xs">{{ $event->created_at->format('d M Y H:i:s') }}</dd></div>
            <div><dt class="text-xs text-gray-500 uppercase">Forwarded At</dt><dd class="mt-1 text-xs">{{ $event->forwarded_at?->format('d M Y H:i:s') ?? '—' }}</dd></div>
        </div>

        @if($event->forward_error)
        <div class="bg-red-50 border border-red-200 rounded-xl p-5">
            <h3 class="text-sm font-semibold text-red-800 mb-2">Forward Error</h3>
            <pre class="text-xs text-red-700 whitespace-pre-wrap break-all">{{ $event->forward_error }}</pre>
        </div>
        @endif

        <div class="bg-white rounded-xl border border-gray-200">
            <div class="px-5 py-3 border-b border-gray-100 flex items-center justify-between">
                <h3 class="font-semibold text-gray-800">Forward Response</h3>
                @if($event->forward_response_code)
                    <span class="text-xs px-2 py-0.5 rounded {{ $event->forward_response_code < 300 ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700' }}">HTTP {{ $event->forward_response_code }}</span>
                @endif
            </div>
            <pre class="p-5 text-xs whitespace-pre-wrap break-all bg-gray-50 max-h-80 overflow-auto">{{ $event->forward_response_body ?? '— no response —' }}</pre>
        </div>

        <div class="bg-white rounded-xl border border-gray-200">
            <div class="px-5 py-3 border-b border-gray-100"><h3 class="font-semibold text-gray-800">Request Payload</h3></div>
            <pre class="p-5 text-xs whitespace-pre-wrap break-all bg-gray-50 max-h-96 overflow-auto">{{ json_encode($event->request_payload, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) }}</pre>
        </div>

        <details class="bg-white rounded-xl border border-gray-200">
            <summary class="px-5 py-3 border-b border-gray-100 font-semibold text-gray-800 cursor-pointer">Request Headers</summary>
            <pre class="p-5 text-xs whitespace-pre-wrap break-all bg-gray-50 max-h-80 overflow-auto">{{ json_encode($event->request_headers, JSON_PRETTY_PRINT) }}</pre>
        </details>

    </div>
</div>
@endsection
