@php
    use Carbon\Carbon;
    $title = $register->title;
@endphp@extends('layouts.app')@section('title', $title)
@section('content')
    <x-page-header>
        <x-slot name="left">
            <x-breadcrumbs :items="[
                ['label' => __('sidebar.dashboard'), 'url' => route('home.dashboard')],
                ['label' => __('device.index'), 'url' => route('devices.index')],
                ['label' => translate($device->name), 'url' => route('devices.show', $device)],
                ['label' => __('device.DeviceRegisters', ['device' => translate($device->name)]), 'url' => route('devices.registers', $device)],
                ['label' => $title, 'url' => '']
            ]"/>
        </x-slot>

        <x-slot name="right">
            @include('shared.button', ['type' => 'edit', 'url' => route('registers.edit', $register)])
            @include('shared.button', ['type' => 'delete', 'url' => route('registers.destroy', $register)])
        </x-slot>
    </x-page-header>

    <x-hr/>

    <ul class="space-y-5">
        @include('shared.list-item', ['label' => __('forms.title'), 'value' => ($register->title ?? '---')])
        @include('shared.list-item', ['label' => __('table.value'), 'value' => ($register->value ?? '---')])
        @include('shared.list-item', ['label' => __('table.unit'), 'value' => ($register->unit ?? '---')])
        @include('shared.list-item', ['label' => __('forms.type'), 'value' => ($register->type ? $register->GetType() : '---')])
        @include('shared.list-item', ['label' => __('forms.CreatedAt'), 'value' => CheckDateTime($register->created_at, 'show', 'FullDateTime')])
        @include('shared.list-item', ['label' => __('forms.UpdatedAt'), 'value' => CheckDateTime($register->updated_at, 'show', 'FullDateTime')])
    </ul>

    <x-hr/>

    <h3 class="text-2xl">
        {{ __('forms.commands') }}
    </h3>
    <div class="relative overflow-x-auto shadow-md rounded-lg mt-5 border-2 border-gray-300 dark:border-gray-700">
        <table id="data" class="w-full text-sm text-left rtl:text-right text-gray-900 dark:text-gray-100">
            <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
            <tr class="text-center">
                <th scope="col" class="px-6 py-3">
                    #
                </th>
                <th scope="col" class="px-6 py-3">
                    {{ __('forms.title') }}
                </th>
                <th scope="col" class="px-6 py-3">
                    {{ __('forms.command') }}
                </th>
                <th scope="col" class="px-6 py-3">
                    {{ __('forms.type') }}
                </th>
                <th scope="col" class="px-6 py-3">
                    {{ __('forms.values') }}
                </th>
            </tr>
            </thead>
            <tbody>
            @forelse($register->Commands as $key => $command)
                <tr class="odd:bg-dar-gray-100 odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 text-center">
                    <td class="px-6 py-4">
                        {{ $key + 1 }}
                    </td>
                    <td class="px-6 py-4">
                        {{ $command->title }}
                    </td>
                    <td class="px-6 py-4" id="register{{ $register->key }}">
                        {{ $command->command }}
                    </td>
                    <td class="px-6 py-4">
                        {{ $command->GetType() }}
                    </td>
                    <td class="px-6 py-4">
                        @switch($command->type)
                            @case('Switch')
                                {{ implode(' | ', json_decode($command->value)) }}
                                @break
                            @case('SetPoint')
                                {{ 'From ' . json_decode($command->value)[0] . ' To ' . json_decode($command->value)[1] }}
                                @break
                            @case('Selection')
                                <div class="flex space-x-2">
                                    @foreach(json_decode($command->value, true) as $key => $value)
                                        <p class="rounded-lg p-2 bg-gray-300 dark:bg-gray-700">
                                            {{ $key . ' : ' . $value }}
                                        </p>
                                    @endforeach
                                </div>
                                <!-- {{ ImplodeKeys($command->value, true) }} -->
                                @break
                            @case('JSON')
                                {{ $command->value }}
                                @break
                            @default
                                ---
                                @break
                        @endswitch
                    </td>
                </tr>
            @empty
                <tr class="odd:bg-dar-gray-100 odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 text-center">
                    <td colspan="5" class="px-6 py-4">
                        <i class="bi bi-info-circle-fill me-1"></i>
                        {{ __('table.NoRecords') }}
                    </td>
                </tr>
            @endforelse
            </tbody>
        </table>
    </div>

    <x-hr/>

    <div class="mt-5">
        <h3 class="text-center text-2xl font-bold">
            {{ __('forms.chart') }}
        </h3>
        <canvas class="mt-3" id="chart"></canvas>
        <label class="inline-flex items-center cursor-pointer mt-3"> <input type="checkbox" value=""
                                                                            class="sr-only peer" id="live">
            <div
                class="relative w-11 h-6 bg-gray-400 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-600 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
            <span class="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300">
                {{ __('forms.LiveUpdate') }}
            </span> </label>
    </div>

    <script>
        window.addEventListener('load', () => {
            @php
                $registerLogs = $register->chartLogs(50);
                $chartLabels = $registerLogs->map(fn($log) => CheckDateTime($log->created_at, 'show', 'DateTime'));
                $chartValues = $registerLogs->map(fn($log) => $log->value === null ? null : (float) $log->value);
            @endphp

            const data = {
                labels: @json($chartLabels),
                datasets: [
                    {
                        label: '{{ $register->title }}',
                        backgroundColor: '#f3f4f6',
                        borderColor: '#2563eb',
                        spanGaps: true,
                        data: @json($chartValues),
                    }
                ]
            };

            const config = {
                type: 'line',
                data: data,
                options: {
                    responsive: true,
                    plugins: {
                        zoom: {
                            pan: {
                                enabled: true,
                                mode: 'xy',
                                modifierKey: 'alt',
                                speed: 10
                            },
                            zoom: {
                                wheel: {enabled: true},
                                pinch: {enabled: true},
                                mode: 'xy',
                                speed: 0.1
                            }
                        },
                    },
                    transitions: {
                        show: {
                            animations: {
                                x: {from: 0},
                                y: {from: 0}
                            }
                        },
                        hide: {
                            animations: {
                                x: {to: 0},
                                y: {to: 0}
                            }
                        }
                    }
                }
            };

            const LogChart = new Chart(
                document.getElementById('chart'),
                config
            );

            switch (typeof service !== 'undefined' ? service : null) {
                case "mqtt":
                    const registerTopic = "{{$device->mqtt_topic}}";

                    if (typeof client !== 'undefined') {
                        if (typeof client.off === 'function') {
                            try {
                                client.off('message');
                            } catch (e) { /* ignore */
                            }
                        }
                        if (typeof client.removeAllListeners === 'function') {
                            try {
                                client.removeAllListeners('message');
                            } catch (e) { /* ignore */
                            }
                        }

                        if (client.connected === false && typeof client.connected !== 'undefined') {
                            console.warn('MQTT client exists but not connected (client.connected === false). Will still subscribe but will guard on message.');
                        }

                        client.subscribe(registerTopic, (err) => {
                            if (err) {
                                console.error("❌ Failed to subscribe to topic:", registerTopic, err);
                            } else {
                                console.log("✅ Subscribed to topic:", registerTopic);
                            }
                        });

                        const registerKey = "{{ $register->key }}";
                        const registerUuid = "{{ $register->uuid }}";

                        client.on("message", (topic, payload) => {
                            if (topic !== registerTopic) return;

                            let e;
                            try {
                                e = JSON.parse(payload.toString());
                            } catch (err) {
                                console.error("Invalid JSON payload:", payload.toString());
                                return;
                            }

                            if (!$('#live').is(':checked')) return;

                            if (Object.prototype.hasOwnProperty.call(e, 'register_uuid')) {
                                if (String(e.register_uuid) !== String(registerUuid)) {
                                    // پیام برای register دیگری است — نادیده بگیر
                                    console.log('Ignored message: register_uuid mismatch', e.register_uuid);
                                    return;
                                }
                            }

                            let rawValue;
                            if (registerKey && registerKey.length > 0) {
                                if (Object.prototype.hasOwnProperty.call(e, registerKey)) {
                                    rawValue = e[registerKey];
                                } else {
                                    console.log(`Ignored message: payload does not contain registerKey "${registerKey}"`);
                                    return;
                                }
                            } else if (Object.prototype.hasOwnProperty.call(e, 'value')) {
                                rawValue = e.value;
                            } else {
                                console.log('Ignored message: no registerKey and no "value" field');
                                return;
                            }

                            if (rawValue === null || rawValue === undefined) {
                                console.log('Ignored message: value null/undefined');
                                return;
                            }
                            const cleaned = String(rawValue).replace(/\r?\n/g, '').trim();
                            const p = parseFloat(cleaned);
                            if (!Number.isFinite(p)) {
                                console.log('Ignored message: parsed value not finite', rawValue);
                                return;
                            }

                            const label = e.datetime ?? new Date().toLocaleTimeString();
                            const idx = LogChart.data.labels.indexOf(label);
                            if (idx === -1) {
                                LogChart.data.labels.push(label);
                                LogChart.data.datasets[0].data.push(p);
                            } else {
                                LogChart.data.datasets[0].data[idx] = p;
                            }
                            if (LogChart.data.labels.length > 50) {
                                LogChart.data.labels.shift();
                                LogChart.data.datasets[0].data.shift();
                            }
                            LogChart.update();
                            console.log(`Chart updated for register ${registerKey} (${registerUuid}) =>`, p);
                        });


                    }
                    break;

                case "echo":
                    if (typeof Echo !== 'undefined') {
                        Echo.private('register.{{ $register->uuid }}').listen('RegisterEvent', (e) => {
                            if ($('#live:checkbox:checked').length > 0) {
                                let label = e.label;
                                let rawValue = e.value;
                                let parsed = null;
                                if (rawValue !== null && rawValue !== undefined) {
                                    const p = parseFloat(rawValue);
                                    parsed = Number.isFinite(p) ? p : null;
                                }

                                let labelIndex = LogChart.data.labels.indexOf(label);
                                if (labelIndex === -1) {
                                    LogChart.data.labels.push(label);
                                    LogChart.data.datasets[0].data.push(parsed);
                                } else {
                                    LogChart.data.datasets[0].data[labelIndex] = parsed;
                                }
                                LogChart.update();
                            }
                        });
                    } else {
                        console.warn('Echo is not defined — skipping echo live updates.');
                    }
                    break;

                default:
                    // هیچ خدمتی فعال نیست — کاری نمی‌کنیم
                    break;
            }
        });
    </script>

@endsection