{{--
    brafa Systems — booking systems on the booking-sync API.
    Livewire backing: App\Http\Livewire\SuperAdmin\BookingSystemManagement.
--}}
<div class="brafa-screen">
    @if ($successMessage)
        <div class="status-banner status-banner--success">{{ $successMessage }}</div>
    @endif
    @if ($errorMessage)
        <div class="status-banner status-banner--danger">{{ $errorMessage }}</div>
    @endif

    {{-- Add a booking system --}}
    <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 systems</h3>
            <a href="{{ route('superadmin.booking-sync-requests') }}" class="btn btn--outline btn--sm">Request log</a>
        </div>
        <p class="subtle" style="font-size: 13px; margin: 0 0 20px;">
            Systems that push bookings to brafa (docs/booking-sync-api.md). Name a system to get its
            secret, then send the secret separately from the doc.
        </p>

        @if ($shownSecret)
            <div class="status-banner status-banner--success" style="flex-direction: column; align-items: flex-start; gap: 8px;">
                <strong>
                    {{ $shownSecret['rotating'] ? 'New secret' : 'Secret' }} for {{ $shownSecret['name'] }}: copy it now, it isn't shown again.
                    @if ($shownSecret['rotating'])
                        The old one keeps working until you finish the rotation.
                    @endif
                </strong>
                @foreach ([['Base URL', $shownSecret['baseUrl']], ['Secret', $shownSecret['secret']]] as [$label, $value])
                    <div style="width: 100%;">
                        <span class="field-label">{{ $label }}</span>
                        <div class="hstack" style="gap: 6px;">
                            <code class="mono" style="flex: 1; word-break: break-all; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; color: var(--fg);">{{ $value }}</code>
                            <button type="button" class="btn btn--outline btn--sm" data-copy="{{ $value }}"
                                    onclick="navigator.clipboard.writeText(this.dataset.copy); this.textContent = 'Copied';">Copy</button>
                        </div>
                    </div>
                @endforeach
            </div>
        @endif

        <form wire:submit.prevent="createSystem">
            <div class="input-row" style="grid-template-columns: 1.4fr 1.2fr auto; align-items: end;">
                <div>
                    <label class="field-label" for="bs-name">System name</label>
                    <input wire:model.debounce.300ms="name" id="bs-name" type="text"
                           class="input @error('name') is-invalid @enderror" placeholder="e.g. Stundagátt">
                    @error('name') <p class="field-error">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="field-label" for="bs-slug">URL name</label>
                    <input wire:model.defer="slug" id="bs-slug" type="text"
                           class="input mono @error('slug') is-invalid @enderror" placeholder="stundagatt">
                    @error('slug') <p class="field-error">{{ $message }}</p> @enderror
                </div>
                <label class="hstack" style="gap: 8px; padding-bottom: 10px; cursor: pointer;">
                    <input wire:model.defer="autoProvision" type="checkbox">
                    <span class="subtle" style="font-size: 13px;">New venues set up on first push</span>
                </label>
            </div>
            @if ($slug !== '')
                <p class="subtle mono" style="font-size: 12px; margin: 0 0 10px;">https://app.brafasystems.com/api/booking-sync/{{ $slug }}/{tenant}</p>
            @endif
            <div class="hstack" style="margin-top: 4px;">
                <button type="submit" class="btn"><x-lucide name="plus" size="14" /> Add booking system</button>
            </div>
        </form>
    </section>

    {{-- Systems --}}
    <div class="card prop-list" style="margin-bottom: 24px;">
        <div class="prop-toolbar">
            <h3 class="card-heading" style="margin: 0;">Systems</h3>
        </div>
        <div style="overflow-x: auto;">
            <table class="table">
                <thead>
                    <tr>
                        <th>System</th>
                        <th>Base URL</th>
                        <th>Venues</th>
                        <th>Last push</th>
                        <th>Feed</th>
                        <th>New venues</th>
                        <th>Status</th>
                        <th style="width: 280px;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($providers as $provider)
                        <tr wire:key="provider-{{ $provider->id }}">
                            <td>
                                <div class="prop-name__main">{{ $provider->name }}</div>
                                <div class="mono muted" style="font-size: 12px;">{{ $provider->provider }}</div>
                            </td>
                            <td class="mono muted" style="font-size: 12px;">{{ $provider->baseUrl() }}</td>
                            <td>{{ $venueCounts[$provider->provider] ?? 0 }}</td>
                            <td class="mono muted">{{ optional($lastPushes[$provider->provider] ?? null)->diffForHumans() ?? 'Never' }}</td>
                            <td>
                                @if ($provider->feed_url)
                                    <span title="{{ $provider->feed_url }}">Read every 10 min</span>
                                    @if (empty($provider->feed_token))
                                        <div class="subtle" style="font-size: 12px;">no token</div>
                                    @endif
                                @else
                                    <span class="muted">None</span>
                                @endif
                            </td>
                            <td>{{ $provider->auto_provision ? 'Set up on first push' : 'Link first' }}</td>
                            <td>
                                @if ($provider->is_active)
                                    <span class="pill pill--active"><span class="dot"></span>Active</span>
                                @else
                                    <span class="pill">Off</span>
                                @endif
                                @if ($provider->previous_secret !== null)
                                    <div class="subtle" style="font-size: 12px; margin-top: 4px;">Rotating: old secret still works</div>
                                @endif
                            </td>
                            <td>
                                <div class="hstack" style="gap: 6px; flex-wrap: wrap;">
                                    @if ($provider->previous_secret !== null)
                                        <button type="button" class="btn btn--outline btn--sm" wire:click="finishRotation({{ $provider->id }})"
                                                onclick="return confirm('Stop accepting {{ addslashes($provider->name) }}\'s old secret? Only do this once they sign with the new one.')">
                                            Finish rotation
                                        </button>
                                    @else
                                        <button type="button" class="btn btn--outline btn--sm" wire:click="rotateSecret({{ $provider->id }})">
                                            <x-lucide name="refresh-ccw" size="13" /> New secret
                                        </button>
                                    @endif
                                    <button type="button" class="btn btn--outline btn--sm" wire:click="toggleAutoProvision({{ $provider->id }})">
                                        {{ $provider->auto_provision ? 'Require linking' : 'Set up on first push' }}
                                    </button>
                                    <button type="button" class="btn btn--outline btn--sm" wire:click="toggleSystem({{ $provider->id }})"
                                            @if ($provider->is_active) style="border-color: var(--brafa-red); color: var(--brafa-red);" @endif>
                                        {{ $provider->is_active ? 'Switch off' : 'Switch on' }}
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" style="padding: 48px 24px; text-align: center; color: var(--fg-subtle); font-size: 13px;">
                                No booking systems yet.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if ($providers->isNotEmpty())
            <form wire:submit.prevent="saveFeed" style="padding: 16px 20px;">
                <p class="subtle" style="font-size: 13px; margin: 0 0 12px;">
                    <strong>Bookings feed:</strong> if a system has its own feed of bookings, brafa reads it every
                    10 minutes for venues that have pushed, to catch pushes that never arrived. Leave the address
                    empty to remove it. The token is stored encrypted and never shown again.
                </p>
                <div class="input-row" style="grid-template-columns: 1fr 2fr 1.4fr auto; align-items: end;">
                    <div>
                        <label class="field-label" for="bs-feed-provider">System</label>
                        <select wire:model="feedProvider" id="bs-feed-provider" class="select @error('feedProvider') is-invalid @enderror">
                            <option value="">Select system</option>
                            @foreach ($providers as $provider)
                                <option value="{{ $provider->provider }}">{{ $provider->name }}</option>
                            @endforeach
                        </select>
                        @error('feedProvider') <p class="field-error">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label class="field-label" for="bs-feed-url">Feed address <span class="subtle">(with {tenant})</span></label>
                        <input wire:model.defer="feedUrl" id="bs-feed-url" type="text"
                               class="input mono @error('feedUrl') is-invalid @enderror" placeholder="https://…/brafa/{tenant}/bookings">
                        @error('feedUrl') <p class="field-error">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label class="field-label" for="bs-feed-token">Token <span class="subtle">(empty keeps the current one)</span></label>
                        <input wire:model.defer="feedToken" id="bs-feed-token" type="password" autocomplete="off"
                               class="input mono @error('feedToken') is-invalid @enderror">
                        @error('feedToken') <p class="field-error">{{ $message }}</p> @enderror
                    </div>
                    <div style="padding-bottom: 2px;">
                        <button type="submit" class="btn btn--sm">Save feed</button>
                    </div>
                </div>
            </form>
        @endif
    </div>

    {{-- Moving from older feeds (Bookly → Stundagátt) --}}
    @if (count($moving) > 0)
        <div class="card prop-list" style="margin-bottom: 24px;">
            <div class="prop-toolbar">
                <h3 class="card-heading" style="margin: 0;">Moving from Bookly</h3>
            </div>
            <p class="subtle" style="font-size: 13px; margin: 0 20px 12px;">
                Link each venue below to its new system before that system's first push. The property keeps
                its lock account and locks; Bookly keeps working until the first push, then stands down.
                A unit whose name matches none of the property's lock mapping gets the locks it had before.
            </p>
            <div style="overflow-x: auto;">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Property</th>
                            <th>Linked venue</th>
                            <th>Status</th>
                            <th>Lock account</th>
                            <th>Locks</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($moving as $row)
                            <tr wire:key="moving-{{ $row['propertyId'] }}">
                                <td>
                                    <a href="{{ route('show-property-details', $row['propertyId']) }}">{{ $row['name'] }}</a>
                                    <div class="mono muted" style="font-size: 12px;">{{ $row['propertyId'] }}</div>
                                </td>
                                <td>{{ $row['venue'] ?? '—' }}</td>
                                <td>
                                    @if (! $row['venue'])
                                        <span class="pill">Not linked</span>
                                    @elseif ($row['liveSince'])
                                        <span class="pill pill--active"><span class="dot"></span>Moved {{ $row['liveSince']->format('Y-m-d') }}</span>
                                    @else
                                        <span class="pill">Linked: {{ $row['from'] }} runs until first push</span>
                                    @endif
                                    @if ($row['inheritedUnits'] > 0)
                                        <div class="field-error" style="margin-top: 4px;">
                                            {{ $row['inheritedUnits'] }} unit(s) got the earlier locks: check Assigned Locks
                                        </div>
                                    @endif
                                </td>
                                <td>{{ $row['hasLockAccount'] ? 'Yes' : 'Missing' }}</td>
                                <td>{{ $row['lockCount'] ?: 'None' }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    @endif

    {{-- Venues --}}
    <div class="card prop-list">
        <div class="prop-toolbar">
            <h3 class="card-heading" style="margin: 0;">Venues</h3>
        </div>

        <form wire:submit.prevent="linkVenue" style="padding: 0 20px 16px;">
            <p class="subtle" style="font-size: 13px; margin: 0 0 12px;">
                Link a venue to a property brafa already has <strong>before</strong> its first push,
                or that push sets up a new property. New venues appear here on their own.
            </p>
            <div class="input-row" style="grid-template-columns: 1fr 1fr 1.6fr auto; align-items: end;">
                <div>
                    <label class="field-label" for="bs-link-provider">System</label>
                    <select wire:model.defer="linkProvider" id="bs-link-provider" class="select @error('linkProvider') is-invalid @enderror">
                        <option value="">Select system</option>
                        @foreach ($providers as $provider)
                            <option value="{{ $provider->provider }}">{{ $provider->name }}</option>
                        @endforeach
                    </select>
                    @error('linkProvider') <p class="field-error">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="field-label" for="bs-link-tenant">Venue id <span class="subtle">(their tenant)</span></label>
                    <input wire:model.defer="linkTenant" id="bs-link-tenant" type="text"
                           class="input mono @error('linkTenant') is-invalid @enderror" placeholder="birdie">
                    @error('linkTenant') <p class="field-error">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="field-label" for="bs-link-property">Property</label>
                    <select wire:model.defer="linkProperty" id="bs-link-property" class="select @error('linkProperty') is-invalid @enderror">
                        <option value="">Select property</option>
                        @foreach ($properties as $property)
                            <option value="{{ $property->PropertyID }}">{{ $property->PropertyName }} ({{ $property->PropertyID }})</option>
                        @endforeach
                    </select>
                    @error('linkProperty') <p class="field-error">{{ $message }}</p> @enderror
                </div>
                <div style="padding-bottom: 2px;">
                    <button type="submit" class="btn btn--sm"><x-lucide name="plus" size="13" /> Link venue</button>
                </div>
            </div>
        </form>

        <div style="overflow-x: auto;">
            <table class="table">
                <thead>
                    <tr>
                        <th>System</th>
                        <th>Venue id</th>
                        <th>Property</th>
                        <th>Units</th>
                        <th>Last push</th>
                        <th>Added</th>
                        <th>Status</th>
                        <th style="width: 120px;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($sources as $source)
                        <tr wire:key="source-{{ $source->id }}">
                            <td>{{ $providerNames[$source->provider] ?? $source->provider }}</td>
                            <td class="mono">{{ $source->tenant }}</td>
                            <td>
                                <a href="{{ route('show-property-details', $source->property_id) }}">
                                    {{ $propertyNames[$source->property_id] ?? 'Property ' . $source->property_id }}
                                </a>
                                @if ($source->replaces_api)
                                    <div class="subtle" style="font-size: 12px;">
                                        {{ $source->live_since ? 'Replaced ' . $source->replaces_api . ' on ' . $source->live_since->format('Y-m-d') : 'Replaces ' . $source->replaces_api . ' at first push' }}
                                    </div>
                                @endif
                            </td>
                            <td>
                                {{ $source->units_count }}
                                @if ($source->inherited_units_count > 0)
                                    <div class="field-error" style="font-size: 12px;">{{ $source->inherited_units_count }} with earlier locks: check</div>
                                @endif
                            </td>
                            <td class="mono muted">
                                {{ optional($source->last_push_at)->diffForHumans() ?? 'Never' }}
                                @if ($source->last_poll_at)
                                    <div style="font-size: 12px;">feed read {{ $source->last_poll_at->diffForHumans() }}</div>
                                @endif
                                @if ($source->poll_error)
                                    <div class="field-error" style="font-size: 12px;">{{ $source->poll_error }}</div>
                                @endif
                            </td>
                            <td class="mono muted">{{ optional($source->created_at)->format('Y-m-d') }}</td>
                            <td>
                                @if ($source->is_active)
                                    <span class="pill pill--active"><span class="dot"></span>Active</span>
                                @else
                                    <span class="pill">Off</span>
                                @endif
                            </td>
                            <td>
                                <button type="button" class="btn btn--outline btn--sm" wire:click="toggleVenue({{ $source->id }})">
                                    {{ $source->is_active ? 'Switch off' : 'Switch on' }}
                                </button>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" style="padding: 48px 24px; text-align: center; color: var(--fg-subtle); font-size: 13px;">
                                No venues yet. They appear on their first push, or when you link one above.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>