@extends('backendTools.layouts.backend')

@section('title', 'Socket Connection Check')
@section('header', 'Socket Connection Check')

@push('styles')
    <style>
        .status-indicator {
            padding: 2rem;
            border-radius: .75rem;
            text-align: center;
            transition: all 0.3s ease-in-out;
            margin-top: 1.5rem;
        }

        .status-indicator .icon {
            font-size: 3rem;
            margin-bottom: 1rem;
            display: inline-block;
        }

        .status-indicator .status-text {
            font-size: 1.5rem;
            font-weight: 500;
        }

        .status-checking {
            background-color: #f0f4f8;
            border: 1px solid #d6e0ea;
            color: #345172;
        }

        .status-success {
            background-color: #e6f9f0;
            border: 1px solid #b8e9d1;
            color: #1b8755;
        }

        .status-failed {
            background-color: #fdf0f1;
            border: 1px solid #f5c6cb;
            color: #d9534f;
        }

        .status-closed {
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            color: #6c757d;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        .spinner-icon {
            animation: spin 1s linear infinite;
        }
    </style>
@endpush

@section('content')
    <div class="container py-5">
        <div class="row justify-content-center">
            {{-- WebSocket Connection Check --}}
            <div class="col-md-9 col-lg-8">
                <div class="card shadow-sm border-0">
                    <div class="card-header bg-white py-3 d-flex align-items-center justify-content-between">
                        <div class="d-flex align-items-center">
                            <i class="bi bi-plug-fill me-2" style="font-size: 1.75rem; color: #0d6efd;"></i>
                            <h4 class="mb-0 fw-bold">WebSocket Connection Check</h4>
                        </div>
                        <p class="mb-0 text-muted">目前連線數: {{ $socket_connect_count }}</p>
                    </div>
                    <div class="card-body p-4">
                        <p class="card-text text-muted">
                            檢查 web socket server 有無正常運行
                        </p>
                        <code class="text-muted">web-socket-server.php</code>

                        <div class="input-group my-4">
                            <span class="input-group-text bg-light border-end-0" id="socket-url-addon">
                                <i class="bi bi-link-45deg"></i>
                            </span>
                            <input type="text" class="form-control bg-light border-start-0" value="{{ $socketWssLink }}"
                                readonly>
                        </div>

                        <div id="socket-status-indicator" class="status-indicator">
                            <div id="socket-status-icon" class="icon">
                                <!-- Icon will be inserted here by script -->
                            </div>
                            <div id="socket-status-text" class="status-text">
                                Initializing...
                            </div>
                        </div>
                    </div>
                    <div class="card-footer bg-light text-center text-muted small py-3">
                        Status is updated in real-time.
                    </div>
                </div>
            </div>
            {{-- Redis to Socket Listener --}}
            <div class="col-md-9 col-lg-8 mt-4">
                <div class="card shadow-sm border-0">
                    <div class="card-header bg-white py-3 d-flex align-items-center">
                        <i class="bi bi-broadcast me-2" style="font-size: 1.75rem; color: #fd7e14;"></i>
                        <h4 class="mb-0 fw-bold">Redis to Socket Listener Status</h4>
                    </div>
                    <div class="card-body p-4">
                        <p class="card-text text-muted">
                            檢查
                            <code class="text-break" style="cursor: pointer;">
                                app:redis-socket-listener
                            </code>
                            是否正常運行
                        </p>
                        <code class="text-muted">前台/command/RedisWebSocketListener 用於監聽Redis訊息並發送socket</code>
                        <div class="d-flex justify-content-start">
                            <button id="send-ajax-btn" class="btn btn-outline-success btn-sm mt-3"
                                onclick="sendAjaxToListener()">發送測試</button>
                        </div>
                        <div
                            class="status-indicator {{ $redis_socket_listener_status ? 'status-success' : 'status-failed' }}">
                            <div class="icon">
                                <i
                                    class="bi {{ $redis_socket_listener_status ? 'bi-check-circle-fill' : 'bi-x-circle-fill' }}"></i>
                            </div>
                            <div class="status-text">
                                {{ $redis_socket_listener_status ? 'Service is Running : ' . $redis_socket_listener_status : 'Service is Down' }}
                            </div>
                        </div>
                    </div>
                    <div class="card-footer bg-light text-center text-muted small py-3">
                        Status reflects the last known state of the service.
                    </div>
                </div>
            </div>
            {{-- WebSocket Message Log --}}
            <div class="col-md-9 col-lg-8 mt-4">
                <div class="card shadow-sm border-0">
                    <div class="card-header bg-white py-3 d-flex align-items-center">
                        <i class="bi bi-terminal-fill me-2" style="font-size: 1.75rem; color: #6c757d;"></i>
                        <h4 class="mb-0 fw-bold">WebSocket Message Log</h4>
                    </div>
                    <div class="card-body">
                        <pre id="socket-messages"
                            style="height: 200px; overflow-y: auto; background-color: #212529; color: #f8f9fa; border: 1px solid #495057; border-radius: .25rem; padding: 1rem; font-family: monospace;"></pre>
                    </div>
                    <div id="log-footer" class="card-footer bg-light text-center text-muted small py-3">
                        Listening for messages for 10 seconds... <span id="countdown" class="fw-bold">10</span>s
                        remaining.
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const indicator = document.getElementById('socket-status-indicator');
            const iconEl = document.getElementById('socket-status-icon');
            const textEl = document.getElementById('socket-status-text');
            const messagesEl = document.getElementById('socket-messages');
            const countdownEl = document.getElementById('countdown');
            const logFooter = document.getElementById('log-footer');
            const socketUrl = '{{ $socketWssLink }}';

            let countdownInterval;

            function setStatus(statusClass, iconHtml, text) {
                indicator.className = 'status-indicator ' + statusClass;
                iconEl.innerHTML = iconHtml;
                textEl.textContent = text;
            }

            function startCountdown(seconds, socket) {
                let remaining = seconds;
                countdownEl.textContent = remaining;
                countdownInterval = setInterval(() => {
                    remaining--;
                    countdownEl.textContent = remaining > 0 ? remaining : 0;
                    if (remaining <= 0) {
                        clearInterval(countdownInterval);
                        if (socket && socket.readyState === WebSocket.OPEN) {
                            console.log('Countdown finished. Closing connection.');
                            setStatus('status-success', '<i class="bi bi-plug"></i>',
                                'Connection Closing connection...');
                            socket.close();
                        }
                    }
                }, 1000);
            }

            console.log('Attempting to connect to:', socketUrl);
            setStatus('status-checking', '<i class="bi bi-arrow-repeat spinner-icon"></i>', 'Connecting...');
            messagesEl.textContent = 'Waiting for connection...';

            try {
                const socket = new WebSocket(socketUrl);

                socket.onopen = function(event) {
                    setStatus('status-success', '<i class="bi bi-reception-4"></i>',
                        'Connection Successful & Listening...');
                    console.log('Successfully connected to the WebSocket server.');
                    messagesEl.textContent = 'Connected. Listening for messages...\n';
                    startCountdown(10, socket);
                };

                socket.onmessage = function(event) {
                    console.log('Message received:', event.data);
                    const timestamp = new Date().toLocaleTimeString();
                    messagesEl.textContent += `[${timestamp}] ${event.data}\n`;
                    messagesEl.scrollTop = messagesEl.scrollHeight; // Auto-scroll to bottom
                };

                socket.onerror = function(event) {
                    setStatus('status-failed', '<i class="bi bi-x-octagon-fill"></i>',
                        'Connection Failed');
                    messagesEl.textContent += '\nConnection error occurred.';
                    logFooter.textContent = 'Connection failed.';
                    console.error('WebSocket connection error:', event);
                    if (countdownInterval) clearInterval(countdownInterval);
                };

                socket.onclose = function(event) {
                    console.log('WebSocket connection closed.');
                    if (indicator.classList.contains('status-success')) {
                        setStatus('status-closed', '<i class="bi bi-plug-fill"></i>',
                            'Connection Closed');
                        messagesEl.textContent += '\n\nListening period ended. Connection closed.';
                        logFooter.textContent = 'Disconnected.';
                    } else {
                        setStatus('status-failed', '<i class="bi bi-x-octagon-fill"></i>',
                            'Connection Failed');
                    }
                    if (countdownInterval) clearInterval(countdownInterval);
                    countdownEl.textContent = '0';
                };
            } catch (error) {
                setStatus('status-failed', '<i class="bi bi-exclamation-triangle-fill"></i>', 'Error: ' +
                    error.message);
                messagesEl.textContent = 'Error creating WebSocket: ' + error.message;
                logFooter.textContent = 'Failed to create WebSocket.';
                console.error('Error creating WebSocket:', error);
                if (countdownInterval) clearInterval(countdownInterval);
            }
        });

        // sendAjaxToListener
        function sendAjaxToListener() {
            $.ajax({
                url: 'https://tts88.tw/api/cash-register/sendMsgToSocket',
                method: 'POST',
                data: {
                    member_info_uid: 1,
                    message: `[${new Date().toISOString().substr(0, 19)}] send from backend-tools`
                },
                success: function(response) {
                    // console.log('Message sent successfully:', response);
                    const sendSuccess = response.result;
                    console.log('sendSuccess:', sendSuccess);
                    if (sendSuccess == false) {
                        alert('Message sent failed.');
                    } else {
                        alert('Message sent successfully.');
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error sending message:', error);
                    alert('Error sending message: ' + error);
                }
            })
        }
    </script>
@endpush