{{--
    brafa Systems — Property locks.
    Livewire backing: App\Http\Livewire\Dashboard\PropertyLocks. Bindings
    preserved: wire:submit.prevent="saveScienerDetails", wire:model
    username/password, wire:click goToLockDetails/unlockLock, $showDetailsForm,
    $locks, $numberOfLocks, $isUnlocking, $message, $error, $propertyName,
    $refreshComponent, showToast JS.
--}}
<div>
    @php
        $brafaLockModel = fn ($lockName, $featureValue = null) => \App\Support\LockModel::for($lockName, $featureValue)
            ?? ['img' => null, 'label' => (string) $lockName ?: 'N/A'];
    @endphp

    <div class="brafa-screen brafa-locks">
        @if ($showDetailsForm)
            <section class="card card--pad-lg" style="max-width: 420px;">
                <h3 class="card-heading">Sciener access</h3>
                <form wire:submit.prevent="saveScienerDetails">
                    <div class="input-row input-row--single">
                        <div>
                            <label class="field-label" for="username">Username</label>
                            <input type="text" id="username" wire:model="username" class="input @error('username') is-invalid @enderror">
                            @error('username') <p class="field-error">{{ $message }}</p> @enderror
                        </div>
                    </div>
                    <div class="input-row input-row--single">
                        <div>
                            <label class="field-label" for="password">Password</label>
                            <input type="password" id="password" wire:model="password" class="input @error('password') is-invalid @enderror">
                            @error('password') <p class="field-error">{{ $message }}</p> @enderror
                        </div>
                    </div>
                    <button type="submit" class="btn">Get access token</button>
                </form>
            </section>
        @else
            <div class="brafa-locks-hero">
                <div>
                    <span class="brafa-property-hero__eyebrow">{{ $propertyName }}</span>
                    <div class="brafa-locks-hero__value">{{ $numberOfLocks }}</div>
                    <span style="color: rgba(255,255,255,0.7); font-size: 12.5px;">locks on this property</span>
                </div>
            </div>

            @if ($message)
                <div class="status-banner status-banner--success">{{ $message }}</div>
            @endif
            @if ($error)
                <div class="status-banner status-banner--danger">{{ $error }}</div>
            @endif

            <div class="card prop-list">
                <div class="prop-toolbar">
                    <h3 class="card-heading" style="margin: 0;">{{ $propertyName }} lock list</h3>
                    <div class="prop-toolbar__right">
                        <button class="btn btn--sm"><x-lucide name="plus" size="14" /> Add new lock</button>
                    </div>
                </div>
                <div style="overflow-x:auto;">
                    <table class="table table--cards">
                        <thead>
                            <tr>
                                <th>Lock alias</th><th>Model</th><th>Battery</th><th>Connection</th><th style="width:110px;">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($locks as $lock)
                                @php
                                    $battery = (int) ($lock['electricQuantity'] ?? 0);
                                    $batClass = $battery > 69 ? 'battery-chip--high' : ($battery > 35 ? 'battery-chip--mid' : 'battery-chip--low');
                                    $model = $brafaLockModel($lock['lockName'] ?? '', $lock['featureValue'] ?? null);
                                @endphp
                                <tr>
                                    <td class="cards-title"><span class="lock-alias" wire:click="goToLockDetails({{ $lock['lockId'] }})">{{ $lock['lockAlias'] ?? 'N/A' }}</span></td>
                                    <td data-label="Model">
                                        <span class="lock-model">
                                            @if ($model['img'])<img src="{{ asset('assets') }}/img/{{ $model['img'] }}.png" alt="">@endif
                                            {{ $model['label'] }}
                                        </span>
                                    </td>
                                    <td data-label="Battery"><span class="battery-chip {{ $batClass }}"><i class="material-icons">battery_std</i>{{ $battery }}%</span></td>
                                    <td data-label="Connection">
                                        @if ($lock['hasGateway'] == 1)
                                            <span class="pill pill--active"><span class="dot"></span>Online</span>
                                        @else
                                            <span class="pill pill--danger">Offline</span>
                                        @endif
                                    </td>
                                    <td data-label="Action">
                                        <button wire:click="unlockLock({{ $lock['lockId'] }})" class="btn btn--outline btn--sm">
                                            @if (isset($isUnlocking[$lock['lockId']]) && $isUnlocking[$lock['lockId']])
                                                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                                            @endif
                                            Unlock
                                        </button>
                                    </td>
                                </tr>
                            @empty
                                <tr><td colspan="5" style="padding:48px 24px;text-align:center;color:var(--fg-subtle);font-size:13px;">No locks found.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        @endif
    </div>

    <div wire:ignore style="display: none;">{{ $refreshComponent }}</div>
    <script>
        window.livewire.on('showToast', () => { $('.toast').toast('show'); });
    </script>
    @push('js')
        <script src="{{ asset('assets') }}/js/plugins/perfect-scrollbar.min.js"></script>
        <script src="{{ asset('assets') }}/js/plugins/leaflet.js"></script>
        <script src="{{ asset('assets') }}/js/plugins/nouislider.min.js"></script>
    @endpush
</div>