@extends('layouts.app')
@section('title', $title = $template->title)
@section('content')
    <x-page-header>
        <x-slot name="left">
            <x-breadcrumbs :items="[
                ['label' => __('sidebar.dashboard'), 'url' => route('home.dashboard')],
                ['label' => __('sidebar.templates'), 'url' => route('templates.index')],
                ['label' => $title, 'url' => ''],
            ]"/>
        </x-slot>

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

    <hr class="my-5 border-gray-300 dark:border-gray-700">

    <ul class="space-y-5">
        <li>
            {{ __('table.title') . ' : ' . $template->title }}
        </li>
        <li>
            {{ __('table.dimensions') . ' : ' . $template->columns . ' x ' . $template->rows }}
        </li>
        <li>
            {{ __('table.created_at') . ' : ' . CheckDateTime($template->created_at, 'show', 'DateTime') }}
        </li>
        <li>
            {{ __('table.updated_at') . ' : ' . CheckDateTime($template->updated_at, 'show', 'DateTime') }}
        </li>
    </ul>

    <x-hr/>

    <div id="AllCharts">
        <div class="flex justify-between items-center">
            <h3 class="text-2xl text-center font-bold">
                {{ __('forms.charts') }}
            </h3>
            <button type="button"
                    class="rounded-full bg-gray-400 dark:bg-gray-600 py-1 px-2 hover:shadow-lg hover:bg-gray-500"
                    onclick="FullscreenCharts(this)">
                <i class="bi bi-fullscreen"></i>
            </button>
        </div>
        <div class="grid gap-6 mb-6 md:grid-cols-{{ $template->columns }} mt-5">
            @for($i = 0; $i < ($template->GetTotal()); $i++)
                <div id="{{ 'Chart' . $i . 'Div' }}" class="bg-gray-300 dark:bg-gray-700 p-2 rounded-lg">
                    <div class="flex justify-between items-center">
                        <button onclick="ExportChart(chartInstances[{{ $i }}])"
                                class="flex items-center text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:outline-none focus:ring-green-300 font-medium rounded-lg text-sm w-auto px-5 py-2.5 text-center dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800">
                            <i class="bi bi-filetype-png sm:me-2"></i> <span class="hidden sm:block">
                                {{ __('forms.export') }}
                            </span>
                        </button>
                        <button type="button"
                                class="SubFS rounded-full bg-gray-400 dark:bg-gray-600 py-1 px-2 hover:shadow-lg hover:bg-gray-500"
                                onclick="toggleFullscreen(document.getElementById('Chart{{ $i }}Div'), $(this).children()[0])">
                            <i class="bi bi-fullscreen"></i>
                        </button>
                    </div>
                    <canvas class="mt-3" id="chart-{{ $i }}"></canvas>
                    <label class="flex justify-between items-center cursor-pointer mt-3">
                        <input type="checkbox" value="" class="sr-only peer" id="live-{{ $i }}">
                        <span class="text-sm font-medium text-gray-900 dark:text-gray-300">
                            {{ __('forms.LiveUpdate') }}
                        </span>
                        <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>
                    </label>
                </div>
            @endfor
        </div>
    </div>

    <script>
        const MAX_DATA_POINTS = 50;
        const chartInstances = {};
        const registerMap = {};

        // ایجاد نقشه رجیسترها برای جستجوی سریع
        @foreach($template->Items as $item)
            @foreach($item->GetRegisters() as $index => $register)
            registerMap['{{ $register->uuid }}'] = {
            chartIndex: {{ $item->order }},
            datasetIndex: {{ $index }},
            registerId: '{{ $register->id }}'
        };
        @endforeach
        @endforeach

        document.addEventListener('DOMContentLoaded', () => {
            console.log('Initializing charts...');

            // ایجاد نمودارها با داده‌های اولیه
            @foreach($template->Items as $item)
            @php
                $registers = $item->GetRegisters();
                $firstRegister = $registers->first();
                $chartLogs = $firstRegister ? $firstRegister->chartLogs($item->count) : collect();
            @endphp

            @if($chartLogs->isNotEmpty())
            const data{{ $item->order }} = {
                labels: @json($chartLogs->map(fn ($log) => CheckDateTime($log->created_at, 'show', 'DateTime'))),
                datasets: [
                        @foreach($registers as $register)
                        @php
                            $data = $register->chartLogs($item->count);
                            $color = GetRandomColors();
                        @endphp
                    {
                        label: '{{ $register->title }}',
                        backgroundColor: "{{ $register->border_color ?? $color['hex'] }}",
                        borderColor: "{{ $register->background_color ?? $color['complementary'] }}",
                        borderWidth: 2,
                        pointRadius: 3,
                        pointHoverRadius: 5,
                        tension: 0.4, // انحناء خطوط
                        spanGaps: true,
                        data: @json($data->map(fn ($log) => $log->value)),
                    },
                    @endforeach
                ]
            };
            @else
            const data{{ $item->order }} = {
                labels: [],
                datasets: [
                        @foreach($registers as $register)
                        @php
                            $color = GetRandomColors();
                        @endphp
                    {
                        label: '{{ $register->title }}',
                        backgroundColor: "{{ $register->border_color ?? $color['hex'] }}",
                        borderColor: "{{ $register->background_color ?? $color['complementary'] }}",
                        borderWidth: 2,
                        pointRadius: 3,
                        pointHoverRadius: 5,
                        tension: 0.4,
                        spanGaps: true,
                        data: [],
                    },
                    @endforeach
                ]
            };
            @endif

            const config{{ $item->order }} = {
                type: 'line',
                data: data{{ $item->order }},
                options: {
                    responsive: true,
                    animation: {
                        duration: 1000, // مدت انیمیشن
                        easing: 'easeOutQuart' // نوع انیمیشن
                    },
                    transitions: {
                        active: {
                            animation: {
                                duration: 500
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            display: true,
                            position: 'top',
                        },
                        zoom: {
                            pan: {
                                enabled: true,
                                mode: 'xy',
                                modifierKey: 'alt',
                                speed: 10
                            },
                            zoom: {
                                wheel: {
                                    enabled: true
                                },
                                pinch: {
                                    enabled: true
                                },
                                mode: 'xy',
                                speed: 0.1
                            }
                        },
                    },
                    scales: {
                        x: {
                            display: true,
                            title: {
                                display: true,
                                text: 'Time'
                            }
                        },
                        y: {
                            display: true,
                            title: {
                                display: true,
                                text: 'Value'
                            }
                        }
                    }
                }
            };

            try {
                chartInstances['{{ $item->order }}'] = new Chart(
                    document.getElementById('chart-{{ $item->order }}'),
                    config{{ $item->order }}
                );
                console.log('Chart {{ $item->order }} initialized successfully');
            } catch (error) {
                console.error('Error initializing chart {{ $item->order }}:', error);
            }
            @endforeach

            // راه‌اندازی MQTT برای Live Updates
            initializeMQTTForCharts();
        });

        function updateChart(chartIndex, value, datasetIndex) {
            const checkbox = document.getElementById('live-' + chartIndex);

            if (checkbox && checkbox.checked && chartInstances[chartIndex]) {
                const chart = chartInstances[chartIndex];
                const currentTime = new Date().toLocaleTimeString();

                let labelIndex = chart.data.labels.indexOf(currentTime);

                if (labelIndex === -1) {
                    // اضافه کردن label جدید
                    chart.data.labels.push(currentTime);

                    // اضافه کردن داده برای همه datasetها
                    chart.data.datasets.forEach((dataset, i) => {
                        if (i === datasetIndex) {
                            dataset.data.push(value);
                        } else {
                            dataset.data.push(null);
                        }
                    });
                } else {
                    // آپدیت داده موجود
                    chart.data.datasets[datasetIndex].data[labelIndex] = value;
                }

                // محدود کردن تعداد داده‌ها
                if (chart.data.labels.length > MAX_DATA_POINTS) {
                    chart.data.labels.shift();
                    chart.data.datasets.forEach(dataset => {
                        dataset.data.shift();
                    });
                }

                // آپدیت با انیمیشن روان
                chart.update({
                    duration: 800,
                    easing: 'easeOutQuart',
                    lazy: false
                });
            }
        }

        function initializeMQTTForCharts() {
            if (typeof client !== 'undefined' && client) {
                // Subscribe به topics مربوط به رجیسترها
                @foreach($template->Items as $item)
                    @foreach($item->GetRegisters() as $register)
                (function(registerId, registerUuid) {
                    const topic = "registers/" + registerUuid;

                    client.subscribe(topic, (err) => {
                        if (err) {
                            console.error("Failed to subscribe to register topic:", topic, err);
                        }
                    });
                })('{{ $register->id }}', '{{ $register->uuid }}');
                @endforeach
                @endforeach

                // پردازش پیام‌های MQTT برای رجیسترها
                const originalOnMessage = client.onMessage || (() => {});

                client.on('message', (topic, payload) => {
                    try {
                        // چک کردن آیا تاپیک مربوط به رجیستر است
                        if (topic.startsWith('registers/')) {
                            const registerUuid = topic.replace('registers/', '');

                            // پیدا کردن اطلاعات نمودار مربوط به این رجیستر
                            const registerInfo = registerMap[registerUuid];
                            if (registerInfo) {
                                const payloadStr = payload.toString();
                                const e = JSON.parse(payloadStr);

                                // استخراج مقدار از پیام
                                let rawValue = e.value;
                                if (rawValue === null || rawValue === undefined) {
                                    return;
                                }

                                const cleaned = String(rawValue).replace(/\r?\n/g, '').trim();
                                const parsedValue = parseFloat(cleaned);

                                if (Number.isFinite(parsedValue)) {
                                    updateChart(
                                        registerInfo.chartIndex,
                                        parsedValue,
                                        registerInfo.datasetIndex
                                    );
                                }
                            }
                        }

                        // فراخوانی handler اصلی اگر وجود دارد
                        if (typeof originalOnMessage === 'function') {
                            originalOnMessage(topic, payload);
                        }
                    } catch (error) {
                        console.error("Error processing MQTT message:", error);
                    }
                });
            } else {
                // اگر MQTT client موجود نبود، بعد از 2 ثانیه دوباره تلاش کن
                setTimeout(initializeMQTTForCharts, 2000);
            }
        }

        function ExportChart(chart) {
            if (!chart) {
                console.error('Chart instance is not available');
                return;
            }

            const canvas = chart.canvas;
            const ctx = canvas.getContext('2d');

            ctx.save();
            ctx.globalCompositeOperation = 'destination-over';
            ctx.fillStyle = 'white';
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            const link = document.createElement('a');
            link.href = canvas.toDataURL('image/png');
            link.download = 'chart.png';
            link.click();

            ctx.restore();
        }

        function FullscreenCharts(btn) {
            const element = document.getElementById('AllCharts');
            const icon = btn.querySelector('i');
            const result = toggleFullscreen(element, icon);

            if (result) {
                element.classList.add('p-5', 'bg-gray-200', 'dark:bg-gray-800', 'overflow-y-scroll');
                document.querySelectorAll('.SubFS').forEach(el => el.classList.add('hidden'));
            } else {
                element.classList.remove('p-5', 'bg-gray-200', 'dark:bg-gray-800', 'overflow-y-scroll');
                document.querySelectorAll('.SubFS').forEach(el => el.classList.remove('hidden'));
            }
        }

        function toggleFullscreen(element, icon) {
            if (!document.fullscreenElement) {
                if (element.requestFullscreen) {
                    element.requestFullscreen();
                } else if (element.webkitRequestFullscreen) {
                    element.webkitRequestFullscreen();
                } else if (element.msRequestFullscreen) {
                    element.msRequestFullscreen();
                }
                if (icon) {
                    icon.classList.remove('bi-fullscreen');
                    icon.classList.add('bi-fullscreen-exit');
                }
                return true;
            } else {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.webkitExitFullscreen) {
                    document.webkitExitFullscreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                }
                if (icon) {
                    icon.classList.remove('bi-fullscreen-exit');
                    icon.classList.add('bi-fullscreen');
                }
                return false;
            }
        }
    </script>
@endsection