{{--
    brafa Systems — Mews hotels.
    Livewire backing: App\Http\Livewire\SuperAdmin\MewsManagement.
--}}
<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

    {{-- Hotels --}}
    <section class="card card--pad-lg" style="margin-bottom: 24px;">
        <h3 class="card-heading" style="margin: 0 0 6px;">Mews hotels</h3>
        <p class="subtle" style="font-size: 13px; margin: 0 0 20px;">
            Hotels connected to Mews (docs/mews-integration-plan.md). Add one from the properties page with its
            Mews access token, or let the hotel connect brafa in the Mews Marketplace (needs the webhook below).
            Door codes are written to the reservation in Mews once a lock has the code.
        </p>
        <div style="overflow-x: auto;">
            <table class="table">
                <thead>
                    <tr>
                        <th>Hotel</th>
                        <th>Status</th>
                        <th>Last sync</th>
                        <th>Rooms</th>
                        <th>Codes in Mews</th>
                        <th style="width: 360px;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($details as $d)
                        @php($pid = (string) $d->PropertyID)
                        <tr wire:key="mews-{{ $pid }}">
                            <td>
                                <div class="prop-name__main">
                                    <a href="{{ route('assignedlocks.edit', ['propertyID' => $pid]) }}">{{ $names[$pid] ?? $pid }}</a>
                                </div>
                                <div class="mono muted" style="font-size: 12px;">{{ $pid }} · {{ $d->environment }} · {{ $d->timezone }}</div>
                            </td>
                            <td>
                                @if ($d->is_enabled)
                                    <span class="pill pill--active"><span class="dot"></span>Connected</span>
                                @else
                                    <span class="pill">Off</span>
                                @endif
                                @unless (isset($automationOn[$pid]))
                                    <div class="subtle" style="font-size: 12px; margin-top: 4px;">Automation is switched off</div>
                                @endunless
                            </td>
                            <td>
                                <span class="mono muted">{{ optional($d->last_synced_at)->diffForHumans() ?? 'Never' }}</span>
                                @if ($d->last_error)
                                    <div style="font-size: 12px; color: var(--brafa-red); max-width: 280px;" title="{{ $d->last_error }}">
                                        {{ \Illuminate\Support\Str::limit($d->last_error, 90) }}
                                    </div>
                                @endif
                            </td>
                            <td>{{ $rooms[$pid] ?? 0 }}</td>
                            <td>
                                @if ($d->writeback_enabled)
                                    {{ $codesInMews[$pid] ?? 0 }}
                                    @if (($writeErrors[$pid] ?? 0) > 0)
                                        <div style="font-size: 12px; color: var(--brafa-red);">{{ $writeErrors[$pid] }} failed</div>
                                    @endif
                                @else
                                    <span class="muted">Not written</span>
                                @endif
                            </td>
                            <td>
                                <div class="hstack" style="gap: 6px; flex-wrap: wrap;">
                                    <button type="button" class="btn btn--outline btn--sm" wire:click="editSettings('{{ $pid }}')">Settings</button>
                                    <button type="button" class="btn btn--outline btn--sm" wire:click="testConnection('{{ $pid }}')">Test</button>
                                    <button type="button" class="btn btn--outline btn--sm" wire:click="syncRooms('{{ $pid }}')">Fetch rooms</button>
                                    <button type="button" class="btn btn--outline btn--sm" wire:click="toggle('{{ $pid }}', 'writeback_enabled')">
                                        {{ $d->writeback_enabled ? 'Stop writing codes' : 'Write codes to Mews' }}
                                    </button>
                                    <button type="button" class="btn btn--outline btn--sm" wire:click="toggle('{{ $pid }}', 'write_note')">
                                        {{ $d->write_note ? 'No front-desk note' : 'Add front-desk note' }}
                                    </button>
                                    @if (($writeErrors[$pid] ?? 0) > 0)
                                        <button type="button" class="btn btn--outline btn--sm" wire:click="retryFailedWrites('{{ $pid }}')">Retry failed</button>
                                    @endif
                                    <button type="button" class="btn btn--outline btn--sm" wire:click="toggle('{{ $pid }}', 'is_enabled')"
                                            @if ($d->is_enabled) style="border-color: var(--brafa-red); color: var(--brafa-red);" @endif>
                                        {{ $d->is_enabled ? 'Disconnect' : 'Reconnect' }}
                                    </button>
                                </div>
                            </td>
                        </tr>

                        @if ($editing === $pid)
                            <tr wire:key="mews-edit-{{ $pid }}">
                                <td colspan="6" style="background: var(--bg-surface);">
                                    <form wire:submit.prevent="saveSettings" style="display: grid; gap: 16px; padding: 8px 0;">
                                        <div>
                                            <span class="field-label">Mews services that get door codes</span>
                                            <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px;">
                                                @foreach ($services as $s)
                                                    <label class="hstack" style="gap: 6px; font-size: 13px;">
                                                        <input type="checkbox" wire:model.defer="selectedServices" value="{{ $s['id'] }}">
                                                        {{ $s['name'] }}
                                                        @unless ($s['overnight'])
                                                            <span class="subtle">(not overnight)</span>
                                                        @endunless
                                                    </label>
                                                @endforeach
                                            </div>
                                            @error('selectedServices') <p class="field-error">{{ $message }}</p> @enderror
                                        </div>
                                        <div class="hstack" style="gap: 16px; flex-wrap: wrap; align-items: flex-end;">
                                            <label>
                                                <span class="field-label">PIN length</span>
                                                <input type="number" min="4" max="9" class="input" style="width: 90px;" wire:model.defer="pinLength">
                                                @error('pinLength') <p class="field-error">{{ $message }}</p> @enderror
                                            </label>
                                            <label>
                                                <span class="field-label">Days ahead to sync</span>
                                                <input type="number" min="1" max="90" class="input" style="width: 90px;" wire:model.defer="horizonDays">
                                                @error('horizonDays') <p class="field-error">{{ $message }}</p> @enderror
                                            </label>
                                            <label class="hstack" style="gap: 6px; font-size: 13px;">
                                                <input type="checkbox" wire:model.defer="includeOptional">
                                                Include optional (unconfirmed) reservations
                                            </label>
                                        </div>
                                        <p class="subtle" style="font-size: 12px; margin: 0;">PIN length applies to new bookings only.</p>
                                        <div class="hstack" style="gap: 16px; flex-wrap: wrap; align-items: flex-end;">
                                            <label>
                                                <span class="field-label">When the guest first opens their door</span>
                                                <select class="select" wire:model.defer="checkinMode">
                                                    <option value="start">Check them in (staff task if Mews refuses)</option>
                                                    <option value="task">Only a staff task</option>
                                                </select>
                                            </label>
                                            <label>
                                                <span class="field-label">"Mark clean" sets the room to</span>
                                                <select class="select" wire:model.defer="cleanState">
                                                    <option value="Inspected">Inspected (ready for check-in)</option>
                                                    <option value="Clean">Clean (staff inspect in Mews)</option>
                                                </select>
                                            </label>
                                            <label class="hstack" style="gap: 6px; font-size: 13px;">
                                                <input type="checkbox" wire:model.defer="processOnCheckout">
                                                Check out in Mews when the guest checks out (only with no open bills)
                                            </label>
                                        </div>
                                        <p class="subtle" style="font-size: 12px; margin: 0;">
                                            Check-in on first unlock needs auto check-in switched on for the property; early check-in when
                                            the room is ready needs auto early check-in. Both are on the property page.
                                        </p>
                                        <div class="hstack" style="gap: 6px;">
                                            <button type="submit" class="btn btn--sm">Save</button>
                                            <button type="button" class="btn btn--outline btn--sm" wire:click="cancelEdit">Cancel</button>
                                        </div>
                                    </form>
                                </td>
                            </tr>
                        @endif
                    @empty
                        <tr>
                            <td colspan="6" style="padding: 48px 24px; text-align: center; color: var(--fg-subtle); font-size: 13px;">
                                No Mews hotels yet.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </section>

    {{-- Webhooks --}}
    <section class="card card--pad-lg" style="margin-bottom: 24px;">
        <h3 class="card-heading" style="margin: 0 0 6px;">Webhooks</h3>
        <p class="subtle" style="font-size: 13px; margin: 0 0 16px;">
            Send these to Mews support to register them (one per environment, for both general and integration
            webhooks). Reservation changes then sync within a couple of minutes, and hotels that connect brafa in
            the Mews Marketplace are added automatically, with their automation switched off.
        </p>
        @forelse ($webhookUrls as $label => $url)
            <div style="margin-bottom: 8px;">
                <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);">{{ $url }}</code>
                    <button type="button" class="btn btn--outline btn--sm" data-copy="{{ $url }}"
                            onclick="navigator.clipboard.writeText(this.dataset.copy); this.textContent = 'Copied';">Copy</button>
                </div>
            </div>
        @empty
            <div class="status-banner status-banner--danger">Set MEWS_WEBHOOK_SECRET (16+ letters and digits) in .env, then run config:cache.</div>
        @endforelse

        <div style="overflow-x: auto; margin-top: 16px;">
            <table class="table">
                <thead><tr><th>Received</th><th>Env</th><th>Hotel</th><th>What</th><th>Result</th></tr></thead>
                <tbody>
                    @forelse ($events as $e)
                        <tr wire:key="mews-event-{{ $e->id }}">
                            <td class="mono muted">{{ $e->created_at->format('Y-m-d H:i:s') }}</td>
                            <td>{{ $e->environment }}</td>
                            <td class="mono muted" style="font-size: 12px;">{{ $e->enterprise_id ?? '—' }}</td>
                            <td>{{ $e->summary }}</td>
                            <td>
                                @if ($e->error)
                                    <span style="color: var(--brafa-red); font-size: 12px;" title="{{ $e->error }}">{{ \Illuminate\Support\Str::limit($e->error, 80) }}</span>
                                @elseif ($e->processed_at)
                                    <span class="muted">Done</span>
                                @else
                                    <span class="muted">Pending</span>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="5" style="padding: 24px; text-align: center; color: var(--fg-subtle); font-size: 13px;">No webhooks received yet.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </section>

    {{-- Write errors --}}
    @if ($recentErrors->isNotEmpty())
        <section class="card card--pad-lg">
            <h3 class="card-heading" style="margin: 0 0 6px;">Door codes not written to Mews</h3>
            <p class="subtle" style="font-size: 13px; margin: 0 0 16px;">Retried automatically on each sync (up to 40 per hotel per run).</p>
            <div style="overflow-x: auto;">
                <table class="table">
                    <thead><tr><th>Hotel</th><th>Booking</th><th>Error</th><th>When</th></tr></thead>
                    <tbody>
                        @foreach ($recentErrors as $r)
                            <tr wire:key="mews-err-{{ $r->id }}">
                                <td>{{ $names[(string) $r->PropertyID] ?? $r->PropertyID }}</td>
                                <td class="mono">{{ $r->booking_id }}</td>
                                <td style="font-size: 12px;">{{ \Illuminate\Support\Str::limit($r->door_code_error, 160) }}</td>
                                <td class="mono muted">{{ $r->updated_at->diffForHumans() }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </section>
    @endif
</div>