{{--
    brafa Systems — Ajax alarm dashboard.
    Livewire backing: App\Http\Livewire\AjaxDashboard. Bindings preserved:
    wire:submit.prevent="saveCredentials", wire:model email/password,
    wire:click armSystem/disarmSystem, $statusMessage/$errorMessage,
    $hubs/$hubDetails/$devices.
--}}
<div class="brafa-screen">
    @if ($statusMessage)
        <div class="status-banner status-banner--success">{{ $statusMessage }}</div>
    @endif
    @if ($errorMessage)
        <div class="status-banner status-banner--danger">{{ $errorMessage }}</div>
    @endif

    {{-- Credentials --}}
    <section class="card card--pad-lg" style="margin-bottom: 24px;">
        <div class="spread" style="margin-bottom: 20px;">
            <h3 class="card-heading" style="margin: 0;">Ajax credentials</h3>
            <span class="eyebrow">Alarm system</span>
        </div>
        <form wire:submit.prevent="saveCredentials">
            <div class="input-row">
                <div>
                    <label class="field-label" for="ajax-email">Ajax email</label>
                    <input wire:model="email" id="ajax-email" type="email" required
                           class="input @error('email') is-invalid @enderror" placeholder="you@brafa.is">
                    @error('email') <p class="field-error">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="field-label" for="ajax-password">Ajax password</label>
                    <input wire:model="password" id="ajax-password" type="password" required
                           class="input @error('password') is-invalid @enderror" placeholder="••••••••">
                    @error('password') <p class="field-error">{{ $message }}</p> @enderror
                </div>
            </div>
            <div class="hstack" style="margin-top: 4px;">
                <button type="submit" class="btn">Save credentials</button>
            </div>
        </form>
    </section>

    {{-- Hubs --}}
    @if (!empty($hubs))
        <div class="vstack" style="gap: 16px;">
            @foreach ($hubs as $hub)
                <section class="card card--pad-lg">
                    <div class="spread" style="margin-bottom: 16px;">
                        <div class="hstack" style="gap: 10px;">
                            <span class="eyebrow">Hub</span>
                            <span class="mono" style="font-size: 14px;">{{ $hub['hubId'] }}</span>
                            @if (isset($hubDetails[$hub['hubId']]))
                                <span class="pill {{ ($hubDetails[$hub['hubId']]['state'] ?? '') === 'DISARMED' ? '' : 'pill--active' }}">
                                    @if (($hubDetails[$hub['hubId']]['state'] ?? '') !== 'DISARMED')<span class="dot"></span>@endif
                                    {{ $hubDetails[$hub['hubId']]['state'] ?? 'Unknown' }}
                                </span>
                            @endif
                        </div>
                        <div class="hstack" style="gap: 8px;">
                            <button wire:click="armSystem('{{ $hub['hubId'] }}')" class="btn btn--green btn--sm">
                                <x-lucide name="shield" size="14" /> Arm
                            </button>
                            <button wire:click="disarmSystem('{{ $hub['hubId'] }}')" class="btn btn--outline btn--sm">
                                <x-lucide name="power" size="14" /> Disarm
                            </button>
                        </div>
                    </div>

                    @if (isset($hubDetails[$hub['hubId']]))
                        @php $d = $hubDetails[$hub['hubId']]; @endphp
                        <div class="brafa-kv-grid">
                            <div><span class="eyebrow">Name</span><span>{{ $d['name'] }}</span></div>
                            <div><span class="eyebrow">Battery</span><span class="mono">{{ $d['battery']['chargeLevelPercentage'] ?? '—' }}%</span></div>
                            <div><span class="eyebrow">Power</span><span>{{ ($d['externallyPowered'] ?? false) ? 'External' : 'Battery' }}</span></div>
                            <div><span class="eyebrow">Time zone</span><span>{{ $d['timeZone'] ?? '—' }}</span></div>
                            <div><span class="eyebrow">Signal</span><span class="mono">{{ $d['gsm']['signalLevel'] ?? '—' }}</span></div>
                            <div><span class="eyebrow">Modem IMEI</span><span class="mono">{{ $d['modemImei'] ?? '—' }}</span></div>
                        </div>
                    @endif

                    @if (isset($devices[$hub['hubId']]))
                        <div class="divider"></div>
                        <span class="eyebrow" style="display:block; margin-bottom: 10px;">Devices</span>
                        <div style="overflow-x:auto;">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>Device</th>
                                        <th>Type</th>
                                        <th>Status</th>
                                        <th>Room</th>
                                        <th>Battery</th>
                                        <th>Signal</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($devices[$hub['hubId']] as $device)
                                        <tr>
                                            <td><div class="prop-name__main">{{ $device['deviceName'] }}</div></td>
                                            <td class="muted">{{ $device['deviceType'] }}</td>
                                            <td>
                                                @if ($device['online'])
                                                    <span class="pill pill--active"><span class="dot"></span>Online</span>
                                                @else
                                                    <span class="pill pill--danger">Offline</span>
                                                @endif
                                            </td>
                                            <td class="muted">{{ $device['roomId'] }}</td>
                                            <td class="mono muted">{{ $device['batteryLevel'] ?? '—' }}{{ isset($device['batteryLevel']) ? '%' : '' }}</td>
                                            <td class="mono muted">{{ $device['signalStrength'] ?? '—' }}{{ isset($device['signalStrength']) ? ' dBm' : '' }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif
                </section>
            @endforeach
        </div>
    @else
        <section class="card card--pad-lg" style="text-align:center; color: var(--fg-subtle);">
            No hubs found for this account.
        </section>
    @endif
</div>