<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VNC - %s</title>
    <link rel="icon" href="/favicon.ico" type="image/x-icon">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/novnc.css">
    <script src="/novnc/util/strings.js"></script>
    <script src="/novnc/util/logging.js"></script>
    <script src="/novnc/util/browser.js"></script>
    <script src="/novnc/util/element.js"></script>
    <script src="/novnc/util/events.js"></script>
    <script src="/novnc/util/eventtarget.js"></script>
    <script src="/novnc/util/int.js"></script>
    <script src="/novnc/util/cursor.js"></script>
    <script src="/novnc/util/md5.js"></script>
    <script src="/novnc/websock.js"></script>
    <script src="/novnc/des.js"></script>
    <script src="/novnc/input/keysym.js"></script>
    <script src="/novnc/input/keysymdef.js"></script>
    <script src="/novnc/input/xtscancodes.js"></script>
    <script src="/novnc/input/util.js"></script>
    <script src="/novnc/input/keyboard.js"></script>
    <script src="/novnc/input/gesturehandler.js"></script>
    <script src="/novnc/display.js"></script>
    <script src="/novnc/inflator.js"></script>
    <script src="/novnc/deflator.js"></script>
    <script src="/novnc/encodings.js"></script>
    <script src="/novnc/ra2.js"></script>
    <script src="/novnc/decoders/raw.js"></script>
    <script src="/novnc/decoders/copyrect.js"></script>
    <script src="/novnc/decoders/rre.js"></script>
    <script src="/novnc/decoders/hextile.js"></script>
    <script src="/novnc/decoders/tight.js"></script>
    <script src="/novnc/decoders/tightpng.js"></script>
    <script src="/novnc/decoders/zrle.js"></script>
    <script src="/novnc/decoders/jpeg.js"></script>
    <script src="/novnc/vendor/pako/lib/zlib/adler32.js"></script>
    <script src="/novnc/vendor/pako/lib/zlib/constants.js"></script>
    <script src="/novnc/vendor/pako/lib/zlib/crc32.js"></script>
    <script src="/novnc/vendor/pako/lib/zlib/deflate.js"></script>
    <script src="/novnc/vendor/pako/lib/zlib/inffast.js"></script>
    <script src="/novnc/vendor/pako/lib/zlib/inflate.js"></script>
    <script src="/novnc/vendor/pako/lib/zlib/inftrees.js"></script>
    <script src="/novnc/vendor/pako/lib/zlib/messages.js"></script>
    <script src="/novnc/vendor/pako/lib/zlib/trees.js"></script>
    <script src="/novnc/vendor/pako/lib/zlib/zstream.js"></script>
    <script src="/novnc/rfb.js"></script>
    <style>
        .navbar-brand {
            font-weight: bold;
        }
        .vnc-container {
            background-color: #1e1e1e;
            color: #f8f8f2;
            border-radius: 8px;
            height: calc(100vh - 200px);
            min-height: 400px;
            overflow: hidden;
            position: relative;
        }
        /* GNOME-like window decorations */
        .vnc-window {
            border: 1px solid #ccc;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        }
        .window-titlebar {
            background: linear-gradient(to bottom, #f0f0f0, #e0e0e0);
            border-bottom: 1px solid #ccc;
            padding: 4px 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 32px;
        }
        .window-title {
            font-weight: bold;
            color: #333;
            font-size: 14px;
        }
        .window-controls {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .window-btn {
            width: 24px;
            height: 24px;
            border: none;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.2s;
        }
        .window-btn:hover {
            transform: scale(1.1);
        }
        .close-btn {
            background: #ff605c;
            color: white;
        }
        .close-btn:hover {
            background: #ff403c;
        }
        .maximize-btn {
            background: #28ca42;
            color: white;
        }
        .maximize-btn:hover {
            background: #24b83a;
        }
        .minimize-btn {
            background: #ffbd44;
            color: white;
            display: none; /* Hidden by default, shown in fullscreen */
        }
        .minimize-btn:hover {
            background: #ffad2c;
        }
        .window-content {
            background: #1e1e1e;
            padding: 8px;
        }
        /* Fullscreen styles */
        .vnc-window.fullscreen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            border: none;
            border-radius: 0;
            z-index: 9999;
        }
        .vnc-window.fullscreen .vnc-container {
            height: calc(100vh - 40px) !important;
            min-height: calc(100vh - 40px) !important;
        }
        .vnc-window.fullscreen .minimize-btn {
            display: flex;
        }
        #noVNC_screen {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="/">
<i class="fas fa-desktop"></i> WSSSHD control panel</a>
<div class="navbar-nav ms-auto">
<span class="navbar-text me-3">VNC Session - %s</span>
<a class="nav-link" href="/logout">Logout</a>
</div></div></nav>
<div id="notification-area" class="position-fixed top-0 end-0 p-3" style="z-index: 1050;"></div>
<div class="container mt-4">
<div class="row">
    <div class="col-12">
        <div class="vnc-window">
            <div class="window-titlebar">
                <div class="window-title">
                    <i class="fas fa-desktop"></i> VNC Session - %s
                </div>
                <div class="window-controls">
                    <button id="connectBtn" class="btn btn-success btn-sm me-1" style="height: 24px; font-size: 12px; padding: 0 8px;">
                        <i class="fas fa-play"></i> Connect
                    </button>
                    <button id="disconnectBtn" class="btn btn-danger btn-sm me-1" disabled style="height: 24px; font-size: 12px; padding: 0 8px;">
                        <i class="fas fa-stop"></i> Disconnect
                    </button>
                    <button class="window-btn minimize-btn" title="Exit Fullscreen">_</button>
                    <button class="window-btn maximize-btn" title="Fullscreen"><span class="maximize-icon">□</span></button>
                    <button class="window-btn close-btn" title="Disconnect">×</button>
                </div>
            </div>
            <div class="window-content">
                <div id="vnc" class="vnc-container w-100">
                    <div id="noVNC_screen">
                        <div id="noVNC_status">Click Connect to start VNC session</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
console.log('VNC page loaded');

let rfb = null;
let connected = false;

document.getElementById('connectBtn').addEventListener('click', connect);
document.getElementById('disconnectBtn').addEventListener('click', disconnect);

// Window control buttons
document.querySelector('.close-btn').addEventListener('click', disconnect);
document.querySelector('.maximize-btn').addEventListener('click', toggleFullscreen);
document.querySelector('.minimize-btn').addEventListener('click', toggleFullscreen);

function showNotification(message, type = 'info') {
    const notificationArea = document.getElementById('notification-area');
    const notification = document.createElement('div');
    notification.className = `alert alert-${type} alert-dismissible fade show`;
    notification.innerHTML = `${message}<button type="button" class="btn-close" data-bs-dismiss="alert"></button>`;
    notificationArea.appendChild(notification);
    setTimeout(() => {
        if (notification.parentNode) {
            notification.remove();
        }
    }, 5000);
}

function toggleFullscreen() {
    const vncWindow = document.querySelector('.vnc-window');
    const maximizeBtn = document.querySelector('.maximize-btn');
    const maximizeIcon = maximizeBtn.querySelector('.maximize-icon');

    if (vncWindow.classList.contains('fullscreen')) {
        // Exit fullscreen
        vncWindow.classList.remove('fullscreen');
        maximizeIcon.textContent = '□';
        maximizeBtn.title = 'Fullscreen';
    } else {
        // Enter fullscreen
        vncWindow.classList.add('fullscreen');
        maximizeIcon.textContent = '▭'; // Restore icon
        maximizeBtn.title = 'Exit Fullscreen';
    }
}

function connect() {
    console.log('Connect button clicked');
    if (connected) return;

    const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
    const wsUrl = wsProtocol + '//' + window.location.host + '/vnc/%s/ws';
    console.log('Connecting VNC to:', wsUrl);

    try {
        rfb = new RFB(document.getElementById('noVNC_screen'), wsUrl, {
            credentials: {},
            shared: true,
            repeaterID: '',
            wsProtocols: ['binary']
        });

        rfb.addEventListener('connect', () => {
            console.log('[VNC-DEBUG] VNC connected event fired');
            console.log('[VNC-DEBUG] Connection state:', rfb._rfbConnectionState);
            console.log('[VNC-DEBUG] Init state:', rfb._rfbInitState);
            connected = true;
            document.getElementById('connectBtn').disabled = true;
            document.getElementById('disconnectBtn').disabled = false;
            showNotification('VNC session connected', 'success');
        });

        rfb.addEventListener('disconnect', () => {
            console.log('[VNC-DEBUG] VNC disconnected event fired');
            console.log('[VNC-DEBUG] Connection state:', rfb._rfbConnectionState);
            console.log('[VNC-DEBUG] Init state:', rfb._rfbInitState);
            connected = false;
            document.getElementById('connectBtn').disabled = false;
            document.getElementById('disconnectBtn').disabled = true;
            showNotification('VNC session disconnected', 'info');
        });

        rfb.addEventListener('credentialsrequired', (e) => {
            console.log('VNC credentials required');
            // For now, assume no credentials needed
        });

        rfb.addEventListener('securityfailure', (e) => {
            console.error('VNC security failure:', e.detail);
            showNotification('VNC security failure: ' + e.detail.reason, 'danger');
        });

        rfb.addEventListener('clipboard', (e) => {
            console.log('VNC clipboard:', e.detail.text);
        });

    } catch (e) {
        console.error('Failed to create RFB:', e);
        showNotification('Failed to connect VNC: ' + e.message, 'danger');
    }
}

function disconnect() {
    if (rfb) {
        rfb.disconnect();
        rfb = null;
    }
    connected = false;
    document.getElementById('connectBtn').disabled = false;
    document.getElementById('disconnectBtn').disabled = true;
    setTimeout(() => {
        location.reload();
    }, 3000);
}
</script>
</body>
</html>
