@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">
            <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">
                        <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>
                    <div class="card-body p-4">
                        <p class="card-text text-muted">
                            This tool performs a real-time check to verify connectivity with the WebSocket server.
                        </p>
                        <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>

            <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}] RX: ${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);
            }
        });
    </script>
@endpush