{{--
    brafa Systems — Google TV fleet dashboard (all properties).
    Livewire backing: App\Http\Livewire\SuperAdmin\TvFleetDashboard.
    Auto-refreshes every 15s to track online/offline.
--}}
<div class="brafa-screen" wire:poll.15s>
    @if ($successMessage)
        <div class="status-banner status-banner--success">{{ $successMessage }}</div>
    @endif

    <div class="spread" style="margin-bottom: 18px;">
        <div>
            <h3 class="card-heading" style="margin: 0;">TV fleet</h3>
            <p class="subtle" style="font-size: 13px; margin: 4px 0 0;">
                Every registered room TV across all properties. Auto-refreshes every 15s.
            </p>
        </div>
        <span class="eyebrow">Superadmin</span>
    </div>

    {{-- Summary --}}
    <div class="input-row" style="grid-template-columns: repeat(3, 1fr); margin-bottom: 18px;">
        <section class="card card--pad-lg">
            <div class="subtle" style="font-size:12px;">Devices</div>
            <div style="font-size:28px; font-weight:700;">{{ $total }}</div>
        </section>
        <section class="card card--pad-lg">
            <div class="subtle" style="font-size:12px;">Online</div>
            <div style="font-size:28px; font-weight:700; color: var(--brafa-green, #4caf7d);">{{ $online }}</div>
        </section>
        <section class="card card--pad-lg">
            <div class="subtle" style="font-size:12px;">Offline</div>
            <div style="font-size:28px; font-weight:700; color: var(--fg-subtle);">{{ $offline }}</div>
        </section>
    </div>

    @if ($inbox->isNotEmpty())
        <section class="card" style="margin-bottom:18px;">
            <div class="spread" style="padding:14px 16px; border-bottom:1px solid var(--border);">
                <h4 class="card-heading" style="margin:0;">Guest messages</h4>
                <span class="subtle" style="font-size:12px;">{{ $inbox->sum('unread') }} unread · last 48h</span>
            </div>
            <div style="display:flex; flex-direction:column;">
                @foreach ($inbox as $t)
                    <div wire:key="thread-{{ $t['device']->device_identifier }}" style="padding:14px 16px; border-bottom:1px solid var(--border);">
                        <div class="spread" style="gap:12px; flex-wrap:wrap;">
                            <div>
                                <span class="prop-name__main">{{ $t['device']->unit_name ?: $t['device']->device_identifier }}</span>
                                @if ($t['guest']) <span class="subtle" style="font-size:12px;">· {{ $t['guest'] }}</span> @endif
                                <span class="subtle" style="font-size:12px;">· {{ $t['device']->property_id }}</span>
                                @if ($t['unread'] > 0)
                                    <span class="pill pill--active" style="margin-left:6px;"><span class="dot"></span>{{ $t['unread'] }} new</span>
                                @endif
                            </div>
                            <div class="hstack" style="gap:6px;">
                                <button type="button" class="btn btn--sm" wire:click="startReply('{{ $t['device']->device_identifier }}')">Reply</button>
                                @if ($t['unread'] > 0)
                                    <button type="button" class="btn btn--outline btn--sm" wire:click="markRead('{{ $t['device']->device_identifier }}')">Mark read</button>
                                @endif
                            </div>
                        </div>

                        <div style="display:flex; flex-direction:column; gap:6px; margin-top:10px;">
                            @foreach ($t['thread'] as $m)
                                <div style="display:flex; {{ $m['direction'] === 'in' ? 'justify-content:flex-start;' : 'justify-content:flex-end;' }}">
                                    <div style="max-width:70%; padding:8px 12px; border-radius:12px; font-size:13px;
                                        {{ $m['direction'] === 'in'
                                            ? 'background:var(--surface-2); color:var(--fg);'
                                            : 'background:#0A2540; color:#fff;' }}">
                                        <div style="font-size:10px; text-transform:uppercase; letter-spacing:1px; opacity:.6; margin-bottom:2px;">
                                            {{ $m['direction'] === 'in' ? 'Guest' : 'Reception' }} · {{ optional($m['at'])->diffForHumans() }}
                                        </div>
                                        {{ $m['body'] }}
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        @if ($replyDeviceId === $t['device']->device_identifier)
                            <form wire:submit.prevent="sendReply" class="hstack" style="gap:8px; margin-top:10px;">
                                <input wire:model.defer="replyBody" type="text" class="input @error('replyBody') is-invalid @enderror"
                                       style="flex:1;" placeholder="Reply to the guest…" autofocus>
                                <button type="submit" class="btn btn--sm">Send</button>
                                <button type="button" class="btn btn--outline btn--sm" wire:click="cancelReply">Cancel</button>
                            </form>
                            @error('replyBody') <p class="field-error">{{ $message }}</p> @enderror
                        @endif
                    </div>
                @endforeach
            </div>
        </section>
    @endif

    <section class="card prop-list">
        <div class="prop-toolbar spread" style="gap:12px; flex-wrap:wrap;">
            <input wire:model.debounce.400ms="search" type="text" class="input" style="max-width:280px;"
                   placeholder="Search room, name, id…">
            <div class="hstack" style="gap:12px; flex-wrap:wrap;">
                <select wire:model="propertyId" class="input" style="min-width:200px;">
                    <option value="">All properties</option>
                    @foreach ($properties as $p)
                        <option value="{{ $p->PropertyID }}">{{ $p->PropertyName }}</option>
                    @endforeach
                </select>
                <label class="hstack" style="gap:8px; cursor:pointer;">
                    <input wire:model="onlineOnly" type="checkbox">
                    <span class="subtle" style="font-size:13px;">Online only</span>
                </label>
            </div>
        </div>

        <div style="overflow-x:auto;">
            <table class="table">
                <thead>
                    <tr>
                        <th style="width:90px;">Status</th>
                        <th>Room / device</th>
                        <th style="width:150px;">Property</th>
                        <th style="width:150px;">Guest</th>
                        <th style="width:120px;">Version</th>
                        <th style="width:120px;">Last seen</th>
                        <th style="width:210px;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($devices as $device)
                        @php $isOnline = $device->last_seen_at && $device->last_seen_at->gte($onlineSince); @endphp
                        <tr wire:key="dev-{{ $device->id }}">
                            <td>
                                @if (! $device->is_active)
                                    <span class="pill">Disabled</span>
                                @elseif ($isOnline)
                                    <span class="pill pill--active"><span class="dot"></span>Online</span>
                                @else
                                    <span class="pill">Offline</span>
                                @endif
                            </td>
                            <td>
                                <div class="prop-name__main">{{ $device->unit_name ?: ($device->name ?: '—') }}</div>
                                <div class="mono muted" style="font-size:11px;">{{ $device->device_identifier }}</div>
                            </td>
                            <td class="subtle" style="font-size:12px;">
                                {{ optional($device->property)->PropertyName ?: $device->property_id }}
                            </td>
                            <td class="subtle" style="font-size:13px;">
                                {{ $guests[$device->property_id . '|' . $device->unit_name] ?? '—' }}
                            </td>
                            <td class="subtle" style="font-size:12px;">
                                <div>{{ $device->app_version ? 'v' . $device->app_version : '—' }}</div>
                                @if ($device->android_version)
                                    <div class="muted" style="font-size:11px;">Android {{ $device->android_version }}</div>
                                @endif
                            </td>
                            <td class="subtle" style="font-size:12px;">
                                {{ $device->last_seen_at ? $device->last_seen_at->diffForHumans() : 'never' }}
                            </td>
                            <td>
                                <div class="hstack" style="gap:6px; flex-wrap:wrap;">
                                    <button type="button" class="btn btn--outline btn--sm" wire:click="sendCommand({{ $device->id }}, 'reload')">Reload</button>
                                    <button type="button" class="btn btn--outline btn--sm" wire:click="sendCommand({{ $device->id }}, 'reboot')">Reboot</button>
                                    <button type="button" class="btn btn--outline btn--sm" wire:click="toggleActive({{ $device->id }})">{{ $device->is_active ? 'Disable' : 'Enable' }}</button>
                                    <button type="button" class="btn btn--outline btn--sm" wire:click="removeDevice({{ $device->id }})"
                                            onclick="return confirm('Remove this device and revoke its token?')"
                                            style="border-color: var(--brafa-red); color: var(--brafa-red);">Remove</button>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="7" style="padding:32px 24px;text-align:center;color:var(--fg-subtle);font-size:13px;">No devices match.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div style="padding:12px 16px;">
            {{ $devices->links() }}
        </div>
    </section>
</div>