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

        <x-slot name="right">
            <p class="hidden sm:block p-2 rounded-xl bg-gray-300 dark:bg-gray-700" data-tooltip-target="connection-tooltip"
               data-tooltip-placement="left">
                <i class="bi bi-plugin mr-2"></i>
                {{ $topic->Connection->name }}
            </p>
            <p class="sm:hidden fixed bottom-4 right-4 rounded-full bg-gray-300 dark:bg-gray-700"
               data-tooltip-target="connection-tooltip-mobile" data-tooltip-placement="left">
                <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-plugin"
                     viewBox="0 0 16 16">
                    <path fill-rule="evenodd"
                          d="M1 8a7 7 0 1 1 2.898 5.673c-.167-.121-.216-.406-.002-.62l1.8-1.8a3.5 3.5 0 0 0 4.572-.328l1.414-1.415a.5.5 0 0 0 0-.707l-.707-.707 1.559-1.563a.5.5 0 1 0-.708-.706l-1.559 1.562-1.414-1.414 1.56-1.562a.5.5 0 1 0-.707-.706l-1.56 1.56-.707-.706a.5.5 0 0 0-.707 0L5.318 5.975a3.5 3.5 0 0 0-.328 4.571l-1.8 1.8c-.58.58-.62 1.6.121 2.137A8 8 0 1 0 0 8a.5.5 0 0 0 1 0"/>
                </svg>
            </p>
        </x-slot>
    </x-page-header>

    <x-hr/>

    <div class="grid gap-6 grid-cols-3">
        <div class="flex justify-start items-center">
            <p class="text-green-500 flex items-center space-x-2" data-tooltip-target="status-tooltip" data-tooltip-placement="left">
                <i class="bi bi-megaphone-fill"></i>
                <span id="status" class="hidden sm:block">
                {{ __('topic.ListeningForNewMessages') }}
            </span>
            </p>
        </div>
        <div class="flex justify-center items-center space-x-3 text-blue-500 max-sm:w-max">
            <i class="bi bi-info-circle-fill"></i>
            <p id="info">
                {{ __('topic.NoMessages') }}
            </p>
        </div>
        <div class="flex justify-end items-center">
{{--            <button type="button" id="clear" disabled--}}
{{--                    class="disabled:opacity-50 flex items-center space-x-2 text-red-500 enabled:hover:cursor-pointer"--}}
{{--                    onclick="Clear();">--}}
{{--                <i class="bi bi-trash3-fill"></i>--}}
{{--                <span class="hidden sm:block">--}}
{{--                {{ __('topic.ClearAll') }}--}}
{{--            </span>--}}
{{--            </button>--}}
        </div>
    </div>

    <div id="messages" class="flex flex-col space-y-3"></div>

    <div id="connection-tooltip" role="tooltip"
         class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
        {{ __('table.connection') }}
        <div class="tooltip-arrow" data-popper-arrow></div>
    </div>
    <div id="connection-tooltip-mobile" role="tooltip"
         class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
        {{ __('table.connection') }} : {{ $topic->Connection->name }}
        <div class="tooltip-arrow" data-popper-arrow></div>
    </div>
    <div id="status-tooltip" role="tooltip"
         class="sm:hidden absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
        {{ __('topic.ListeningForNewMessages') }}
        <div class="tooltip-arrow" data-popper-arrow></div>
    </div>
@endsection

<script src="{{asset('js/jquery-3.7.0.min.js')}}"></script>
<script src="{{asset('js/mqtt.min.js')}}"></script>



<script>
    $(document).ready(function() {
        let count = 0;
        const chosenTopic = "{{$topic->topic}}";
        const info = $('#info');
        const messages = $('#messages');
        const clearBtn = $('#clear');
{{--@dd($broker->host, $broker->port)--}}
        const client = mqtt.connect(`ws://{{$broker->host}}:{{$broker->port}}`, {
            username: "{{$connection->username}}",
            password: "{{$connection->password}}",
            reconnectPeriod: 2000,
            connectTimeout: 5000
        });

        client.on("connect", () => {
            console.log("🔌 Connected to MQTT WebSocket");
            info.text("✅ Connected to MQTT WebSocket");

            client.subscribe(chosenTopic, (err, granted) => {
                if(err){
                    console.error("❌ Subscribe failed:", err);
                    info.text("❌ Subscribe failed: " + err.message);
                } else {
                    console.log("✅ Subscribed to:", chosenTopic, granted);
                    client.publish(chosenTopic, "Hello from browser ✅");
                }
            });
        });

        client.on("message", (topic, payload) => {
            const msg = payload.toString();
            console.log("📩 Received:", topic, msg);
            pushMessage(topic, msg);
        });

        client.on("error", (err) => {
            console.error("❌ MQTT Error:", err);
            info.text("❌ MQTT Error: " + err.message);
        });

        client.on("reconnect", () => console.log("♻️ Reconnecting..."));
        client.on("offline", () => console.log("⚠️ Client offline"));
        client.on("close", () => console.log("❌ Connection closed"));

        function pushMessage(topic, content) {
            if(topic.startsWith("BMS")) {
                const date = new Date();
                const time = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;

                const element = `
            <div class="flex flex-col p-3 mt-2 rounded-lg bg-gray-300 dark:bg-gray-700">
                <p><strong>Topic:</strong> ${topic}</p>
                <p>${content}</p>
                <div class="flex justify-between items-center mt-1">
                    <p>${time}</p>
                    <button type="button" class="text-red-600" onclick="removeMessage(this)">
                        <i class="bi bi-trash3-fill"></i>
                    </button>
                </div>
            </div>`;
                messages.prepend(element);
                count++;
                setText();
            }
        }

        window.removeMessage = function(el){
            $(el).closest('#messages > div').remove();
            count--;
            setText();
        }

        window.clearMessages = function(){
            messages.empty();
            count = 0;
            setText();
        }

        function setText(){
            if(count === 0){
                info.text("No messages");
                clearBtn.prop("disabled", true);
            } else {
                info.text(count + " message" + (count>1?"s":""));
                clearBtn.prop("disabled", false);
            }
        }

        clearBtn.click(clearMessages);
    });
</script>