{{--
    brafa Systems — booking-sync API request log.
    Livewire backing: App\Http\Livewire\SuperAdmin\BookingSyncRequestLog.
--}}
<div class="brafa-screen">
    <section class="card card--pad-lg" style="margin-bottom: 24px;">
        <div class="spread" style="margin-bottom: 6px;">
            <h3 class="card-heading" style="margin: 0;">Booking API request log</h3>
            <a href="{{ route('superadmin.booking-systems') }}" class="btn btn--outline btn--sm">Booking systems</a>
        </div>
        <p class="subtle" style="font-size: 13px; margin: 0 0 20px;">
            Every request booking systems send to the booking-sync API, and our reply, newest first.
            Door codes are masked. Kept for {{ $keepDays }} days.
        </p>

        <div class="input-row" style="grid-template-columns: 1fr 1fr 1fr 1fr 1fr auto; align-items: end;">
            <div>
                <label class="field-label" for="log-provider">System</label>
                <select wire:model="provider" id="log-provider" class="select">
                    <option value="">All systems</option>
                    @foreach ($providerNames as $slug => $name)
                        <option value="{{ $slug }}">{{ $name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="field-label" for="log-tenant">Venue id</label>
                <input wire:model.debounce.400ms="tenant" id="log-tenant" type="text" class="input mono" placeholder="e.g. birdie">
            </div>
            <div>
                <label class="field-label" for="log-book">Booking id</label>
                <input wire:model.debounce.400ms="bookId" id="log-book" type="text" class="input mono" placeholder="e.g. SG-48213">
            </div>
            <div>
                <label class="field-label" for="log-result">Result</label>
                <select wire:model="result" id="log-result" class="select">
                    <option value="">All</option>
                    <option value="accepted">Accepted (2xx)</option>
                    <option value="rejected">Rejected (4xx/5xx)</option>
                </select>
            </div>
            <div>
                <label class="field-label" for="log-endpoint">Call</label>
                <select wire:model="endpoint" id="log-endpoint" class="select">
                    <option value="">All</option>
                    <option value="bookings">Push bookings</option>
                    <option value="lock-status">Lock status</option>
                </select>
            </div>
            <div style="padding-bottom: 2px;">
                <button type="button" class="btn btn--outline btn--sm" wire:click="clearFilters">Clear</button>
            </div>
        </div>
    </section>

    @if ($selected)
        <section class="card card--pad-lg" style="margin-bottom: 24px;" wire:key="selected-{{ $selected->id }}">
            <div class="spread" style="margin-bottom: 12px;">
                <h3 class="card-heading" style="margin: 0;">
                    {{ $providerNames[$selected->provider] ?? $selected->provider }} / {{ $selected->tenant }} · {{ $selected->endpoint }}
                </h3>
                <button type="button" class="btn btn--outline btn--sm" wire:click="show({{ $selected->id }})">Close</button>
            </div>
            <p class="subtle mono" style="font-size: 12px; margin: 0 0 16px;">
                {{ optional($selected->created_at)->format('Y-m-d H:i:s') }} · HTTP {{ $selected->status }}{{ $selected->error_code ? ' ' . $selected->error_code : '' }}
                · {{ $selected->duration_ms !== null ? $selected->duration_ms . ' ms' : '' }} · from {{ $selected->ip }}
            </p>
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
                @foreach ([['Request', $selectedRequest], ['Reply', $selectedReply]] as [$label, $body])
                    <div style="min-width: 0;">
                        <span class="field-label">{{ $label }}</span>
                        <pre class="mono" style="margin: 0; max-height: 520px; overflow: auto; white-space: pre-wrap; word-break: break-all; font-size: 12px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; color: var(--fg);">{{ $body !== '' ? $body : '(empty)' }}</pre>
                    </div>
                @endforeach
            </div>
        </section>
    @endif

    <div class="card prop-list">
        <div style="overflow-x: auto;">
            <table class="table">
                <thead>
                    <tr>
                        <th>Time</th>
                        <th>System / venue</th>
                        <th>Call</th>
                        <th>Result</th>
                        <th>Bookings</th>
                        <th>Time taken</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($requests as $entry)
                        <tr wire:key="request-{{ $entry->id }}" @if ((int) $selectedId === $entry->id) style="background: var(--bg-surface);" @endif>
                            <td class="mono muted" style="white-space: nowrap;">{{ optional($entry->created_at)->format('Y-m-d H:i:s') }}</td>
                            <td>
                                <div>{{ $providerNames[$entry->provider] ?? $entry->provider }}</div>
                                <div class="mono muted" style="font-size: 12px;">{{ $entry->tenant }}</div>
                            </td>
                            <td>{{ $entry->endpoint === 'lock-status' ? 'Lock status' : ($entry->endpoint === 'bookings' ? 'Push' : $entry->endpoint) }}</td>
                            <td>
                                @if ($entry->accepted())
                                    <span class="pill pill--active"><span class="dot"></span>{{ $entry->status }}</span>
                                @else
                                    <span class="pill" style="border-color: var(--brafa-red); color: var(--brafa-red);">{{ $entry->status }}</span>
                                @endif
                                @if ($entry->error_code)
                                    <div class="mono" style="font-size: 12px; color: var(--brafa-red);">{{ $entry->error_code }}</div>
                                @endif
                            </td>
                            <td class="mono" style="font-size: 12px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                                {{ $entry->book_ids ? str_replace(',', ' ', trim($entry->book_ids, ',')) : '' }}
                            </td>
                            <td class="mono muted">{{ $entry->duration_ms !== null ? $entry->duration_ms . ' ms' : '' }}</td>
                            <td>
                                <button type="button" class="btn btn--outline btn--sm" wire:click="show({{ $entry->id }})">
                                    {{ (int) $selectedId === $entry->id ? 'Hide' : 'View' }}
                                </button>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" style="padding: 48px 24px; text-align: center; color: var(--fg-subtle); font-size: 13px;">
                                No requests match.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if (! $requests->onFirstPage() || $requests->hasMorePages())
            <div class="hstack" style="gap: 8px; padding: 12px 20px; justify-content: flex-end;">
                <button type="button" class="btn btn--outline btn--sm" wire:click="previousPage" @disabled($requests->onFirstPage())>Newer</button>
                <button type="button" class="btn btn--outline btn--sm" wire:click="nextPage" @disabled(! $requests->hasMorePages())>Older</button>
            </div>
        @endif
    </div>
</div>