
<!DOCTYPE html>
<html>
<head>
    <title>Admin Dashboard</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        :root {
            --primary: #c8a2c8;
            --primary-dark: #9b7b9b;
            --background: #17181c;
            --card-bg: #1c1d24;
            --text: #e8e8e8;
            --text-secondary: #9b9b9b;
            --border: #2a2a2a;
            --success: #9fde4f;
            --danger: #ff4747;
            --warning: #ffd700;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Verdana', sans-serif;
            background-color: var(--background);
            background-image: linear-gradient(45deg, #191b20 25%, transparent 25%),
                          linear-gradient(-45deg, #191b20 25%, transparent 25%),
                          linear-gradient(45deg, transparent 75%, #191b20 75%),
                          linear-gradient(-45deg, transparent 75%, #191b20 75%);
            background-size: 20px 20px;
            background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
            color: var(--text);
            line-height: 1.5;
            min-height: 100vh;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem;
        }

        .login-container {
            max-width: 400px;
            margin: 100px auto;
            padding: 2rem;
            background: var(--card-bg);
            border: 1px solid var(--border);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .login-form {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .form-group {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .form-group label {
            font-size: 0.875rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--text-secondary);
        }

        .stat-select {
        background: var(--background);
        border: 1px solid var(--border);
        color: var(--text);
        padding: 0.5rem 1rem;
        font-family: 'Roboto Mono', monospace;
        margin-right: 1rem;
        min-width: 200px;
        }

.stat-select:focus {
    border-color: var(--primary);
    outline: none;
}

        .form-group input {
            background: var(--background);
            border: 1px solid var(--border);
            color: var(--text);
            padding: 0.75rem;
            font-size: 1rem;
            font-family: 'Roboto Mono', monospace;
            transition: all 0.2s ease;
        }

        .form-group input:focus {
            border-color: var(--primary);
            outline: none;
            box-shadow: 0 0 0 2px rgba(200, 162, 200, 0.1);
        }

        .editor-input {
            width: 100%;
            background: var(--background);
            border: 1px solid var(--border);
            color: var(--text);
            padding: 0.5rem;
            font-family: 'Roboto Mono', monospace;
            font-size: 0.875rem;
        }

        .editor-input:focus {
            border-color: var(--primary);
            outline: none;
            box-shadow: 0 0 0 2px rgba(200, 162, 200, 0.1);
        }

        #tableEditorBox {
            max-height: 90vh;
            overflow-y: auto;
        }

        .logo {
            font-family: 'Verdana', sans-serif;
            font-size: 2rem;
            font-weight: 800;
            color: var(--primary);
            text-transform: uppercase;
            letter-spacing: 0.2em;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            text-align: center;
            margin-bottom: 2rem;
        }

        .logo span {
            color: var(--text);
        }

        .dashboard-container {
            display: none;
        }

        .dashboard-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--border);
        }

        .btn {
            display: inline-flex;
            align-items: center;
            padding: 0.75rem 1.5rem;
            font-weight: 600;
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            border: 1px solid transparent;
            cursor: pointer;
            transition: all 0.3s ease;
            background: transparent;
        }

        .execution-graph {
            height: 400px;
            margin-top: 2rem;
            position: relative;
        }

        .graph-controls {
            display: flex;
            gap: 1rem;
            margin-bottom: 1rem;
        }

        .graph-toggle {
            padding: 0.5rem 1rem;
            border: 1px solid var(--primary);
            background: transparent;
            color: var(--primary);
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .graph-toggle.active {
            background: var(--primary);
            color: var(--background);
        }

        .graph-container {
            position: relative;
            height: 100%;
            width: 100%;
        }

        .btn i {
            margin-right: 0.5rem;
            font-size: 0.875rem;
        }

        .btn-primary {
            border: 1px solid var(--primary);
            color: var(--primary);
        }

        .btn-primary:hover {
            background: var(--primary);
            color: var(--background);
        }

        .btn-danger {
            border: 1px solid var(--danger);
            color: var(--danger);
        }

        .btn-danger:hover {
            background: var(--danger);
            color: var(--background);
        }

        .btn-success {
            border: 1px solid var(--success);
            color: var(--success);
        }

        .btn-success:hover {
            background: var(--success);
            color: var(--background);
        }

        .btn-warning {
            border: 1px solid var(--warning);
            color: var(--warning);
        }

        .btn-warning:hover {
            background: var(--warning);
            color: var(--background);
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        .stat-card {
            border: 1px solid var(--border);
            background: linear-gradient(135deg, var(--card-bg) 0%, rgba(28, 29, 36, 0.8) 100%);
            padding: 1.5rem;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .stat-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        }

        .stat-title {
            font-size: 0.75rem;
            font-weight: 500;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }

        .stat-value {
            font-size: 2rem;
            font-weight: 600;
            color: var(--primary);
            font-family: 'Roboto Mono', monospace;
            margin-top: 0.5rem;
            text-shadow: 0 0 10px rgba(200, 162, 200, 0.3);
        }

        .card {
            background: var(--card-bg);
            border: 1px solid var(--border);
            margin-bottom: 2rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .card:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        }

        .card-header {
            padding: 1.25rem 1.5rem;
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .card-title {
            font-size: 1rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--primary);
        }

        .card-body {
            padding: 1.5rem;
        }

        .table-container {
            overflow-x: auto;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            border: 1px solid var(--border);
        }

        th, td {
            padding: 1rem;
            text-align: left;
            border-bottom: 1px solid var(--border);
        }

        th {
            background: var(--card-bg);
            border-bottom: 2px solid var(--primary);
            font-weight: 600;
            color: var(--primary);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            font-size: 0.75rem;
        }

        td {
            color: var(--text);
            font-family: 'Roboto Mono', monospace;
            font-size: 0.875rem;
        }

        tr:hover {
            background: rgba(200, 162, 200, 0.05);
        }

        .badge {
            display: inline-flex;
            align-items: center;
            padding: 0.25rem 0.75rem;
            font-size: 0.65rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            font-family: 'Roboto Mono', monospace;
            border: 1px solid transparent;
        }

        .badge-success {
            background: transparent;
            border-color: var(--success);
            color: var(--success);
        }

        .badge-danger {
            background: transparent;
            border-color: var(--danger);
            color: var(--danger);
        }

        .badge-warning {
            background: transparent;
            border-color: var(--warning);
            color: var(--warning);
        }

        .actions {
            display: flex;
            gap: 0.5rem;
        }

        .toast {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            padding: 1rem 1.5rem;
            background: var(--card-bg);
            border: 1px solid var(--border);
            color: var(--text);
            display: none;
            animation: slideIn 0.3s ease-out;
            z-index: 1000;
            font-family: 'Roboto Mono', monospace;
            font-size: 0.875rem;
            letter-spacing: 0.05em;
        }

        .message-box {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: var(--card-bg);
            padding: 2rem;
            border: 1px solid var(--border);
            z-index: 1000;
            display: none;
            width: 90%;
            max-width: 500px;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        }

        .message-box h3 {
            color: var(--primary);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 1rem;
            font-size: 1.25rem;
            font-weight: 600;
        }

        .message-box textarea {
            width: 100%;
            min-height: 100px;
            margin: 1rem 0;
            padding: 0.75rem;
            background: var(--background);
            border: 1px solid var(--border);
            color: var(--text);
            font-family: 'Roboto Mono', monospace;
            resize: vertical;
            font-size: 0.875rem;
        }

        .message-box textarea:focus {
            border-color: var(--primary);
            outline: none;
            box-shadow: 0 0 0 2px rgba(200, 162, 200, 0.1);
        }

        .message-box-actions {
            display: flex;
            justify-content: flex-end;
            gap: 1rem;
            margin-top: 1rem;
        }

        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.8);
            z-index: 999;
            display: none;
            backdrop-filter: blur(4px);
        }

        .header-actions {
            display: flex;
            gap: 1rem;
            align-items: center;
        }

        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        ::-webkit-scrollbar-track {
            background: var(--background);
        }

        ::-webkit-scrollbar-thumb {
            background: var(--primary);
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--primary-dark);
        }

        @keyframes slideIn {
            from {
                transform: translateY(100%);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .monospace {
            font-family: 'Roboto Mono', monospace;
            font-size: 0.875rem;
        }
    </style>
</head>
<body>
    <div class="login-container" id="loginContainer">
        <div class="logo">Socket<span>Auth</span></div>
        <form class="login-form" onsubmit="handleLogin(event)">
            <div class="form-group">
                <label for="adminKey">Admin Key</label>
                <input type="password" id="adminKey" required autocomplete="off">
            </div>
            <button type="submit" class="btn btn-primary">
                <i class="fas fa-sign-in-alt"></i>
                Access Dashboard
            </button>
        </form>
    </div>

    <div class="dashboard-container" id="dashboardContainer">
        <div class="container">
            <div class="dashboard-header">
                <div class="logo">Socket<span>Auth</span></div>
                <div class="header-actions">
                    <button class="btn btn-primary" onclick="generateToken()">
                        <i class="fas fa-plus"></i>
                        Generate Token
                    </button>
                    <div class="version-control" style="display: flex; align-items: center; gap: 1rem;">
                        
                        <button class="btn btn-warning" onclick="showVersionBox()">
                            <i class="fas fa-code-branch"></i>
                            Update Version
                        </button>

                    </div>                    
                    <button class="btn btn-danger" onclick="logout()">
                        <i class="fas fa-sign-out-alt"></i>
                        Logout
                    </button>
                </div>
            </div>

            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-title">Total Users</div>
                    <div class="stat-value" id="totalUsers">-</div>
                </div>
                <div class="stat-card">
                    <div class="stat-title">Active Users</div>
                    <div class="stat-value" id="activeUsers">-</div>
                </div>
                <div class="stat-card">
                    <div class="stat-title">Available Tokens</div>
                    <div class="stat-value" id="availableTokens">-</div>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <h2 class="card-title">Active Connections</h2>
                </div>
                <div class="card-body">
                    <div class="table-container">
                        <table>
                            <thead>
                                <tr>
                                    <th>Username</th>
                                    <th>HWID</th>
                                    <th>Connected Since</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody id="activeConnectionsList"></tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <h2 class="card-title">User Management</h2>
                </div>
                <div class="card-body">
                    <div class="table-container">
                        <table>
                            <thead>
                                <tr>
                                    <th>Username</th>
                                    <th>HWID</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody id="userList"></tbody>
                        </table>
                    </div>
                </div>
            </div>



            <div class="card">
                <div class="card-header">
                    <h2 class="card-title">Execution Analytics</h2>
                    <div class="actions">
                        <select id="userSelect" class="stat-select">
                            <option value="all">All Users</option>
                            <!-- Will be populated dynamically -->
                        </select>
                        <button class="btn btn-primary" onclick="refreshExecutionGraph()">
                            <i class="fas fa-sync"></i>
                            Refresh
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="graph-controls">
                        <button class="graph-toggle active" data-metric="executionTime">Execution Time</button>
                        <button class="graph-toggle active" data-metric="memoryUsage">Memory Usage</button>
                        <button class="graph-toggle active" data-metric="cpuUsage">CPU Usage</button>
                    </div>
                    <div class="execution-graph">
                        <canvas id="executionGraph"></canvas>
                    </div>
                    
                    <div class="user-stats-summary" style="margin-top: 2rem;">
                        <h3>User Statistics Summary</h3>
                        <div class="stats-grid">
                            <div class="stat-card">
                                <div class="stat-title">Total Executions</div>
                                <div class="stat-value" id="userTotalExecutions">-</div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-title">Average Execution Time</div>
                                <div class="stat-value" id="userAvgExecutionTime">-</div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-title">Peak Memory Usage</div>
                                <div class="stat-value" id="userPeakMemory">-</div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-title">Peak CPU Usage</div>
                                <div class="stat-value" id="userPeakCPU">-</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="card">
                <div class="card-header">
                    <h2 class="card-title">Token Management</h2>
                </div>
                <div class="card-body">
                    <div class="table-container">
                        <table>
                            <thead>
                                <tr>
                                    <th>Token</th>
                                    <th>Created</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody id="tokenList"></tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <h2 class="card-title">Database Editor</h2>
                </div>
                <div class="card-body">
                    <div class="table-container">
                        <table>
                            <thead>
                                <tr>
                                    <th>Table</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Users</td>
                                    <td class="actions">
                                        <button class="btn btn-primary" onclick="openTableEditor('users')">
                                            <i class="fas fa-edit"></i>
                                            Edit
                                        </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Tokens</td>
                                    <td class="actions">
                                        <button class="btn btn-primary" onclick="openTableEditor('tokens')">
                                            <i class="fas fa-edit"></i>
                                            Edit
                                        </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>execution_data</td>
                                    <td class="actions">
                                        <button class="btn btn-primary" onclick="openTableEditor('execution_data')">
                                            <i class="fas fa-edit"></i>
                                            Edit
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="overlay" id="overlay"></div>
    
    <div class="message-box" id="messageBox">
        <h3>Send Message</h3>
        <textarea id="messageText" placeholder="Enter your message..."></textarea>
        <div class="message-box-actions">
            <button class="btn btn-danger" onclick="closeMessageBox()">Cancel</button>
            <button class="btn btn-primary" onclick="sendMessageConfirm()">Send</button>
        </div>
    </div>

    <div class="message-box" id="versionBox">
        <h3>Update Version</h3>
        <div class="form-group" style="margin: 1rem 0;">
            <label>Current Version: <span id="currentVersion" class="monospace">-</span></label>
            <input type="text" id="newVersionInput" placeholder="Enter new version" class="editor-input" style="margin-top: 0.5rem;">
        </div>
        <div class="message-box-actions">
            <button class="btn btn-danger" onclick="closeVersionBox()">
                <i class="fas fa-times"></i>
                Cancel
            </button>
            <button class="btn btn-warning" onclick="updateVersionConfirm()">
                <i class="fas fa-code-branch"></i>
                Update Version
            </button>
        </div>
    </div>

    <div class="message-box" id="tableEditorBox" style="width: 90%; max-width: 1200px;">
        <h3>Edit Table: <span id="currentTable"></span></h3>
        <div class="table-container" style="margin: 1rem 0;">
            <table id="editorTable">
                <thead id="editorHeader"></thead>
                <tbody id="editorBody"></tbody>
            </table>
        </div>
        <div class="message-box-actions">
            <button class="btn btn-success" onclick="addNewRow()">
                <i class="fas fa-plus"></i>
                Add Row
            </button>
            <button class="btn btn-primary" onclick="saveChanges()">
                <i class="fas fa-save"></i>
                Save Changes
            </button>
            <button class="btn btn-danger" onclick="closeTableEditor()">
                <i class="fas fa-times"></i>
                Close
            </button>
        </div>
    </div>

    <div id="toast" class="toast"></div>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        let selectedHWID = null;
        let executionChart = null;
        let selectedUser = 'all';
        

        async function loadUserList() {
    const adminKey = localStorage.getItem('adminKey');
    if (!adminKey) return;

    try {
        const response = await fetch('/api/admin/users', {
            headers: { 'x-admin-key': adminKey }
        });
        const data = await response.json();
        
        if (!data.success) throw new Error(data.error);
        
        const userSelect = document.getElementById('userSelect');
        userSelect.innerHTML = '<option value="all">All Users</option>';
        
        data.users.forEach(user => {
            const option = document.createElement('option');
            option.value = user.username;
            option.textContent = user.username;
            userSelect.appendChild(option);
        });
    } catch (error) {
        console.error('Error loading user list:', error);
    }
}



        function showToast(message, type = 'success') {
            const toast = document.getElementById('toast');
            toast.textContent = message;
            toast.style.display = 'block';
            
            if (type === 'success') {
                toast.style.borderColor = 'var(--success)';
                toast.style.backgroundColor = 'rgba(0, 255, 0, 0.1)';
                toast.style.color = 'var(--success)';
            } else {
                toast.style.borderColor = 'var(--danger)';
                toast.style.backgroundColor = 'rgba(255, 0, 0, 0.1)';
                toast.style.color = 'var(--danger)';
            }

            setTimeout(() => {
                toast.style.display = 'none';
            }, 3000);
        }


        async function handleLogin(event) {
    event.preventDefault();
    const adminKey = document.getElementById('adminKey').value;
    
    try {
        const response = await fetch('/api/admin/login', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ key: adminKey })
        });
        
        const data = await response.json();
        
        if (response.ok && data.success) {
            localStorage.setItem('adminKey', adminKey);
            document.getElementById('loginContainer').style.display = 'none';
            document.getElementById('dashboardContainer').style.display = 'block';
            loadUsers();
            loadTokens();
            loadActiveConnections();
            showToast('Login successful', 'success');
        } else {
            document.getElementById('adminKey').value = '';
            showToast('Invalid admin key', 'error');
        }
    } catch (error) {
        console.error('Login error:', error);
        document.getElementById('adminKey').value = '';
        showToast('Login failed', 'error');
    }
}

async function checkSavedKey() {
    const savedKey = localStorage.getItem('adminKey');
    if (!savedKey) {
        document.getElementById('loginContainer').style.display = 'block';
        document.getElementById('dashboardContainer').style.display = 'none';
        return;
    }

    try {
        const response = await fetch('/api/admin/login', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ key: savedKey })
        });

        if (!response.ok) {
            localStorage.removeItem('adminKey');
            document.getElementById('loginContainer').style.display = 'block';
            document.getElementById('dashboardContainer').style.display = 'none';
            return;
        }

        const data = await response.json();
        if (data.success) {
            document.getElementById('loginContainer').style.display = 'none';
            document.getElementById('dashboardContainer').style.display = 'block';
            loadUsers();
            loadTokens();
            loadActiveConnections();
        } else {
            localStorage.removeItem('adminKey');
            document.getElementById('loginContainer').style.display = 'block';
            document.getElementById('dashboardContainer').style.display = 'none';
        }
    } catch (error) {
        localStorage.removeItem('adminKey');
        document.getElementById('loginContainer').style.display = 'block';
        document.getElementById('dashboardContainer').style.display = 'none';
    }
}

document.addEventListener('DOMContentLoaded', () => {
    checkSavedKey();
    getCurrentVersion();
});


        async function loadActiveConnections() {
            const adminKey = localStorage.getItem('adminKey');
            if (!adminKey) return;

            try {
                const response = await fetch('/api/admin/active-users', {
                    headers: { 'x-admin-key': adminKey }
                });
                const data = await response.json();
                
                if (!data.success) throw new Error(data.error);
                
                const activeList = document.getElementById('activeConnectionsList');
                activeList.innerHTML = '';
                
                data.activeUsers.forEach(user => {
                    const tr = document.createElement('tr');
                    tr.innerHTML = `
                        <td>${user.username || 'Unknown'}</td>
                        <td><span class="monospace">${user.hwid}</span></td>
                        <td>${new Date(user.connectedAt).toLocaleString()}</td>
                        <td class="actions">
                            <button class="btn btn-primary" onclick="showMessageBox('${user.hwid}')">
                                <i class="fas fa-comment"></i>
                                Message
                            </button>
                            <button class="btn btn-warning" onclick="closeApp('${user.hwid}')">
                                <i class="fas fa-times-circle"></i>
                                Close
                            </button>
                            <button class="btn btn-danger" onclick="shutdownPC('${user.hwid}')">
                                <i class="fas fa-power-off"></i>
                                Shutdown
                            </button>
                        </td>
                    `;
                    activeList.appendChild(tr);
                });
            } catch (error) {
                console.error('Error loading active connections:', error);
                showToast('Failed to load active connections', 'error');
            }
        }

        async function loadUsers() {
            const adminKey = localStorage.getItem('adminKey');
            if (!adminKey) return;

            try {
                const response = await fetch('/api/admin/users', {
                    headers: { 'x-admin-key': adminKey }
                });
                const data = await response.json();
                
                if (!data.success) throw new Error(data.error);
                
                const userList = document.getElementById('userList');
                userList.innerHTML = '';
                
                document.getElementById('totalUsers').textContent = data.users.length;

                const activeResponse = await fetch('/api/admin/active-users', {
                    headers: { 'x-admin-key': adminKey }
                });
                const activeData = await activeResponse.json();
                
                document.getElementById('activeUsers').textContent = 
                    activeData.success ? activeData.activeUsers.length : 0;

                data.users.forEach(user => {
                    const tr = document.createElement('tr');
                    tr.innerHTML = `
                        <td>${user.username}</td>
                        <td><span class="monospace">${user.hwid || 'Not set'}</span></td>
                        <td>
                            <span class="badge ${user.blacklisted ? 'badge-danger' : 'badge-success'}">
                                ${user.blacklisted ? 'Banned' : 'Active'}
                            </span>
                        </td>
                        <td class="actions">
                            <button class="btn ${user.blacklisted ? 'btn-success' : 'btn-danger'}"
                                    onclick="toggleBan(${user.id}, ${!user.blacklisted})">
                                <i class="fas fa-${user.blacklisted ? 'unlock' : 'ban'}"></i>
                                ${user.blacklisted ? 'Unban' : 'Ban'}
                            </button>
                            <button class="btn btn-primary" onclick="resetHWID(${user.id})">
                                <i class="fas fa-redo"></i>
                                Reset HWID
                            </button>
                        </td>
                    `;
                    userList.appendChild(tr);
                });
            } catch (error) {
                console.error('Error loading users:', error);
                showToast('Failed to load users', 'error');
            }
        }




async function loadStats() {
    const adminKey = localStorage.getItem('adminKey');
    if (!adminKey) return;

    try {
        const allTimeResponse = await fetch('/api/admin/stats/all-time', {
            headers: { 'x-admin-key': adminKey }
        });
        const allTimeData = await allTimeResponse.json();
        
        if (allTimeData.success) {
            const stats = allTimeData.stats;
            document.getElementById('allTimeStats').innerHTML = `
                <div class="stat-card">
                    <div class="stat-title">Total Executions</div>
                    <div class="stat-value">${stats.total_executions}</div>
                </div>
                <div class="stat-card">
                    <div class="stat-title">Average Execution Time</div>
                    <div class="stat-value">${stats.avg_execution_time.toFixed(2)}ms</div>
                </div>
                <div class="stat-card">
                    <div class="stat-title">Max Execution Time</div>
                    <div class="stat-value">${stats.max_execution_time}ms</div>
                </div>
                <div class="stat-card">
                    <div class="stat-title">Average Memory Usage</div>
                    <div class="stat-value">${stats.avg_memory_usage.toFixed(2)}MB</div>
                </div>
            `;
        }

        const userResponse = await fetch('/api/admin/stats/users', {
            headers: { 'x-admin-key': adminKey }
        });
        const userData = await userResponse.json();
        
        if (userData.success) {
            const userStatsHtml = userData.stats.map(user => `
                <tr>
                    <td>${user.username}</td>
                    <td>${user.execution_count}</td>
                    <td>${user.avg_execution_time.toFixed(2)}ms</td>
                    <td>${user.max_execution_time}ms</td>
                    <td>${user.avg_memory_usage.toFixed(2)}MB</td>
                    <td>${user.max_memory_usage}MB</td>
                    <td>${user.avg_cpu_usage.toFixed(2)}%</td>
                    <td>${user.max_cpu_usage}%</td>
                </tr>
            `).join('');
            
            document.getElementById('userStats').innerHTML = userStatsHtml;
        }
    } catch (error) {
        console.error('Error loading stats:', error);
        showToast('Failed to load statistics', 'error');
    }
}



async function loadExecutionGraph() {
    try {
        const adminKey = localStorage.getItem('adminKey');
        if (!adminKey) {
            console.log('[DEBUG] No admin key found');
            return;
        }

        const userSelect = document.getElementById('userSelect');
        if (!userSelect) {
            console.error('[DEBUG] userSelect element not found in DOM');
            return;
        }

        const selectedUsername = userSelect.value;
        console.log('[DEBUG] User select element found, selected value:', selectedUsername);

        const url = new URL('/api/admin/execution-graph', window.location.origin);
        url.searchParams.append('username', selectedUsername);
        
        console.log('[DEBUG] Requesting URL:', url.toString());
        console.log('[DEBUG] Request parameters:', Object.fromEntries(url.searchParams));

        const response = await fetch(url, {
            headers: { 
                'x-admin-key': adminKey,
                'Content-Type': 'application/json'
            }
        });
        
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        
        const data = await response.json();
        console.log('[DEBUG] Received data:', data);

        if (!data.success) {
            throw new Error(data.error || 'Failed to fetch execution data');
        }

        const canvas = document.getElementById('executionGraph');
        if (!canvas) {
            console.error('[DEBUG] Canvas element not found');
            return;
        }

        const ctx = canvas.getContext('2d');
        if (!ctx) {
            console.error('[DEBUG] Could not get canvas context');
            return;
        }

        let memoryVisible = true;
        let cpuVisible = true;
        
        if (window.executionChart) {
            memoryVisible = !window.executionChart.data.datasets[0].hidden;
            cpuVisible = !window.executionChart.data.datasets[1].hidden;
            window.executionChart.destroy();
        }

        const chartData = data.data.map(d => ({
            timestamp: new Date(d.timestamp).toLocaleTimeString(),
            executionTime: d.execution_time,
            memoryUsage: d.memory_usage,
            cpuUsage: d.cpu_usage
        }));

        if (chartData.length > 0) {
            const stats = {
                totalExecutions: chartData.length,
                avgExecutionTime: chartData.reduce((sum, d) => sum + d.executionTime, 0) / chartData.length,
                peakMemory: Math.max(...chartData.map(d => d.memoryUsage)),
                peakCPU: Math.max(...chartData.map(d => d.cpuUsage))
            };

            const formatTime = (ms) => {
                if (ms >= 1000) {
                    return `${(ms / 1000).toFixed(2)}s`;
                }
                return `${Math.round(ms)}ms`;
            };

            document.getElementById('userTotalExecutions').textContent = stats.totalExecutions.toLocaleString();
            document.getElementById('userAvgExecutionTime').textContent = formatTime(stats.avgExecutionTime);
            document.getElementById('userPeakMemory').textContent = `${stats.peakMemory.toFixed(2)}MB`;
            document.getElementById('userPeakCPU').textContent = `${stats.peakCPU.toFixed(2)}%`;
        } else {
            document.getElementById('userTotalExecutions').textContent = '0';
            document.getElementById('userAvgExecutionTime').textContent = '0ms';
            document.getElementById('userPeakMemory').textContent = '0MB';
            document.getElementById('userPeakCPU').textContent = '0%';
        }

        const memoryToggle = document.querySelector('[data-metric="memoryUsage"]');
        const cpuToggle = document.querySelector('[data-metric="cpuUsage"]');

        window.executionChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: chartData.map(d => d.timestamp),
                datasets: [
                    {
                        label: 'Memory Usage (MB)',
                        data: chartData.map(d => d.memoryUsage),
                        borderColor: 'rgb(159, 222, 79)',
                        tension: 0.1,
                        fill: false,
                        hidden: !memoryVisible
                    },
                    {
                        label: 'CPU Usage (%)',
                        data: chartData.map(d => d.cpuUsage),
                        borderColor: 'rgb(255, 71, 71)',
                        tension: 0.1,
                        fill: false,
                        hidden: !cpuVisible
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                animation: {
                    duration: 750
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        grid: {
                            color: 'rgba(200, 162, 200, 0.1)'
                        },
                        ticks: {
                            color: 'rgb(232, 232, 232)'
                        }
                    },
                    x: {
                        grid: {
                            color: 'rgba(200, 162, 200, 0.1)'
                        },
                        ticks: {
                            color: 'rgb(232, 232, 232)'
                        }
                    }
                },
                plugins: {
                    legend: {
                        labels: {
                            color: 'rgb(232, 232, 232)',
                            font: {
                                family: "'Inter', sans-serif"
                            }
                        }
                    },
                    tooltip: {
                        mode: 'index',
                        intersect: false,
                        backgroundColor: 'rgba(28, 29, 36, 0.9)',
                        titleColor: 'rgb(200, 162, 200)',
                        bodyColor: 'rgb(232, 232, 232)',
                        borderColor: 'rgba(200, 162, 200, 0.3)',
                        borderWidth: 1
                    }
                },
                interaction: {
                    mode: 'nearest',
                    axis: 'x',
                    intersect: false
                }
            }
        });

        if (memoryToggle) memoryToggle.classList.toggle('active', memoryVisible);
        if (cpuToggle) cpuToggle.classList.toggle('active', cpuVisible);

        console.log('[DEBUG] Chart created successfully with', chartData.length, 'data points');

    } catch (error) {
        console.error('[DEBUG] Error in loadExecutionGraph:', error);
        showToast('Failed to load execution graph', 'error');
        
        document.getElementById('userTotalExecutions').textContent = '-';
        document.getElementById('userAvgExecutionTime').textContent = '-';
        document.getElementById('userPeakMemory').textContent = '-';
        document.getElementById('userPeakCPU').textContent = '-';
    }
}

document.addEventListener('DOMContentLoaded', () => {
    const toggleButtons = document.querySelectorAll('.graph-toggle');
    toggleButtons.forEach(button => {
        button.addEventListener('click', () => {
            const metric = button.dataset.metric;
            button.classList.toggle('active');
            
            if (window.executionChart) {
                const datasets = window.executionChart.data.datasets;
                const index = datasets.findIndex(d => d.label.toLowerCase().includes(metric.toLowerCase()));
                if (index !== -1) {
                    datasets[index].hidden = !datasets[index].hidden;
                    window.executionChart.update();
                }
            }
        });
    });
});


document.getElementById('userSelect').addEventListener('change', function() {
    console.log('[DEBUG] User selection changed to:', this.value);
    loadExecutionGraph();
});

document.addEventListener('DOMContentLoaded', () => {
    console.log('[DEBUG] DOM Content Loaded');
    populateUserSelect();
    loadExecutionGraph();
});

function refreshExecutionGraph() {
    console.log('[DEBUG] Manual refresh requested');
    loadExecutionGraph();
    showToast('Execution graph refreshed', 'success');
}

async function populateUserSelect() {
    try {
        const adminKey = localStorage.getItem('adminKey');
        if (!adminKey) return;

        const response = await fetch('/api/admin/users', {
            headers: { 'x-admin-key': adminKey }
        });
        const data = await response.json();

        const userSelect = document.getElementById('userSelect');
        if (!userSelect) {
            console.error('[DEBUG] userSelect element not found');
            return;
        }

        while (userSelect.options.length > 1) {
            userSelect.remove(1);
        }

        console.log('[DEBUG] Populating users:', data.users);

        if (data.users && Array.isArray(data.users)) {
            data.users.forEach(user => {
                const option = document.createElement('option');
                option.value = user.username;
                option.textContent = user.username;
                userSelect.appendChild(option);
            });
        }

        userSelect.addEventListener('change', (e) => {
            console.log('[DEBUG] User selection changed to:', e.target.value);
            loadExecutionGraph();
        });

    } catch (error) {
        console.error('[DEBUG] Error populating user select:', error);
    }
}




document.addEventListener('DOMContentLoaded', () => {
    console.log('[DEBUG] DOM Content Loaded');
    populateUserSelect();
});


        async function loadTokens() {
            const adminKey = localStorage.getItem('adminKey');
            if (!adminKey) return;

            try {
                const response = await fetch('/api/admin/tokens', {
                    headers: { 'x-admin-key': adminKey }
                });
                const data = await response.json();
                
                if (!data.success) throw new Error(data.error);
                
                const tokenList = document.getElementById('tokenList');
                tokenList.innerHTML = '';
                
                document.getElementById('availableTokens').textContent = 
                    data.tokens.filter(t => !t.used).length;

                data.tokens.forEach(token => {
                    const tr = document.createElement('tr');
                    tr.innerHTML = `
                        <td><span class="monospace">${token.token}</span></td>
                        <td>${new Date(token.created_at).toLocaleString()}</td>
                        <td>
                            <span class="badge ${token.used ? 'badge-warning' : 'badge-success'}">
                                ${token.used ? 'Used' : 'Available'}
                            </span>
                        </td>
                        <td>
                            <button class="btn btn-primary" onclick="copyToken('${token.token}')">
                                <i class="fas fa-copy"></i>
                                Copy
                            </button>
                        </td>
                    `;
                    tokenList.appendChild(tr);
                });
            } catch (error) {
                console.error('Error loading tokens:', error);
                showToast('Failed to load tokens', 'error');
            }
        }

        async function generateToken() {
            const adminKey = localStorage.getItem('adminKey');
            if (!adminKey) return;

            try {
                const response = await fetch('/api/admin/generate-token', {
                    method: 'POST',
                    headers: { 'x-admin-key': adminKey }
                });
                const data = await response.json();
                
                if (!data.success) throw new Error(data.error);
                
                showToast('Token generated successfully', 'success');
                loadTokens();
            } catch (error) {
                console.error('Error generating token:', error);
                showToast('Failed to generate token', 'error');
            }
        }

        async function toggleBan(userId, ban) {
            
            const adminKey = localStorage.getItem('adminKey');
            if (!adminKey) return;

            try {
                const response = await fetch(`/api/admin/${ban ? 'ban' : 'unban'}/${userId}`, {
                    method: 'POST',
                    headers: { 'x-admin-key': adminKey }
                });
                
                if (!response.ok) throw new Error('Failed to update user status');
                
                showToast(`User ${ban ? 'banned' : 'unbanned'} successfully`, 'success');
                loadUsers();
                loadActiveConnections(); 
            } catch (error) {
                console.error('Error:', error);
                showToast(`Failed to ${ban ? 'ban' : 'unban'} user`, 'error');
            }
        }

        async function resetHWID(userId) {
            
            const adminKey = localStorage.getItem('adminKey');
            if (!adminKey) return;

            try {
                const response = await fetch(`/api/admin/reset-hwid/${userId}`, {
                    method: 'POST',
                    headers: { 'x-admin-key': adminKey }
                });
                
                if (!response.ok) throw new Error('Failed to reset HWID');
                
                showToast('HWID reset successfully', 'success');
                loadUsers();
            } catch (error) {
                console.error('Error:', error);
                showToast('Failed to reset HWID', 'error');
            }
        }

        function showMessageBox(hwid) {
            selectedHWID = hwid;
            document.getElementById('overlay').style.display = 'block';
            document.getElementById('messageBox').style.display = 'block';
            document.getElementById('messageText').value = '';
            document.getElementById('messageText').focus();
        }

        function closeMessageBox() {
            document.getElementById('overlay').style.display = 'none';
            document.getElementById('messageBox').style.display = 'none';
            selectedHWID = null;
        }

        async function sendMessageConfirm() {
            const message = document.getElementById('messageText').value.trim();
            if (!message || !selectedHWID) return;

            await sendMessage(selectedHWID, message);
            closeMessageBox();
        }

        async function sendMessage(hwid, message) {
            const adminKey = localStorage.getItem('adminKey');
            if (!adminKey) return;

            try {
                const response = await fetch('/api/admin/send-message', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'x-admin-key': adminKey
                    },
                    body: JSON.stringify({ hwid, message })
                });
                
                if (!response.ok) throw new Error('Failed to send message');
                showToast('Message sent successfully', 'success');
            } catch (error) {
                showToast('Failed to send message', 'error');
            }
        }

        async function closeApp(hwid) {
            
            const adminKey = localStorage.getItem('adminKey');
            if (!adminKey) return;

            try {
                const response = await fetch('/api/admin/close-app', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'x-admin-key': adminKey
                    },
                    body: JSON.stringify({ hwid })
                });
                
                if (!response.ok) throw new Error('Failed to close application');
                showToast('Close command sent successfully', 'success');
                loadActiveConnections();
            } catch (error) {
                showToast('Failed to send close command', 'error');
            }
        }

        async function shutdownPC(hwid) {
            
            const adminKey = localStorage.getItem('adminKey');
            if (!adminKey) return;

            try {
                const response = await fetch('/api/admin/shutdown-pc', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'x-admin-key': adminKey
                    },
                    body: JSON.stringify({ hwid })
                });
                
                if (!response.ok) throw new Error('Failed to shutdown PC');
                showToast('Shutdown command sent successfully', 'success');
                loadActiveConnections();
            } catch (error) {
                showToast('Failed to send shutdown command', 'error');
            }
        }

        let currentTableData = [];
let originalData = [];

async function openTableEditor(tableName) {
    const adminKey = localStorage.getItem('adminKey');
    if (!adminKey) return;

    try {
        const response = await fetch(`/api/admin/table/${tableName}`, {
            headers: { 'x-admin-key': adminKey }
        });
        const data = await response.json();
        
        if (!data.success) throw new Error(data.error);
        
        currentTableData = data.rows;
        originalData = JSON.parse(JSON.stringify(data.rows));
        
        document.getElementById('currentTable').textContent = tableName;
        document.getElementById('overlay').style.display = 'block';
        document.getElementById('tableEditorBox').style.display = 'block';
        
        renderEditorTable(tableName, data.rows);
    } catch (error) {
        console.error('Error loading table:', error);
        showToast('Failed to load table data', 'error');
    }
}


async function getCurrentVersion() {
    const adminKey = localStorage.getItem('adminKey');
    if (!adminKey) return;

    try {
        const response = await fetch('/api/admin/version', {
            headers: { 'x-admin-key': adminKey }
        });
        const data = await response.json();
        
        if (data.success) {
            document.getElementById('currentVersion').textContent = `v${data.version}`;
        }
    } catch (error) {
        console.error('Error getting version:', error);
    }
}

function showVersionBox() {
    document.getElementById('overlay').style.display = 'block';
    document.getElementById('versionBox').style.display = 'block';
    document.getElementById('newVersionInput').value = '';
    document.getElementById('newVersionInput').focus();
    getCurrentVersion();
}

function closeVersionBox() {
    document.getElementById('overlay').style.display = 'none';
    document.getElementById('versionBox').style.display = 'none';
}

async function updateVersionConfirm() {
    const version = document.getElementById('newVersionInput').value.trim();
    if (!version) {
        showToast('Please enter a version number', 'error');
        return;
    }

    const adminKey = localStorage.getItem('adminKey');
    if (!adminKey) return;

    try {
        const response = await fetch('/api/admin/update-version', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'x-admin-key': adminKey
            },
            body: JSON.stringify({ version })
        });
        
        if (!response.ok) throw new Error('Failed to update version');
        
        showToast('Version updated successfully', 'success');
        closeVersionBox();
        getCurrentVersion();
    } catch (error) {
        console.error('Error updating version:', error);
        showToast('Failed to update version', 'error');
    }
}

document.getElementById('newVersionInput').addEventListener('keydown', function(e) {
    if (e.key === 'Enter') {
        e.preventDefault();
        updateVersionConfirm();
    }
    if (e.key === 'Escape') {
        closeVersionBox();
    }
});


function renderEditorTable(tableName, rows) {
    if (!rows || rows.length === 0) return;
    
    const header = document.getElementById('editorHeader');
    const body = document.getElementById('editorBody');
    
    const headerRow = document.createElement('tr');
    Object.keys(rows[0]).forEach(key => {
        const th = document.createElement('th');
        th.textContent = key;
        headerRow.appendChild(th);
    });
    
    const actionsHeader = document.createElement('th');
    actionsHeader.textContent = 'Actions';
    headerRow.appendChild(actionsHeader);
    
    header.innerHTML = '';
    header.appendChild(headerRow);
    
    body.innerHTML = '';
    rows.forEach((row, index) => {
        const tr = document.createElement('tr');
        
        Object.entries(row).forEach(([key, value]) => {
            const td = document.createElement('td');
            const input = document.createElement('input');
            input.type = typeof value === 'number' ? 'number' : 'text';
            input.value = value || '';
            input.className = 'editor-input';
            input.dataset.column = key;
            input.dataset.row = index;
            
            if (key === 'id') {
                input.readOnly = true;
                input.style.backgroundColor = 'var(--background)';
            }
            
            input.addEventListener('change', (e) => {
                currentTableData[index][key] = e.target.value;
            });
            
            td.appendChild(input);
            tr.appendChild(td);
        });
        
        const actionsTd = document.createElement('td');
        actionsTd.className = 'actions';
        actionsTd.innerHTML = `
            <button class="btn btn-danger" onclick="deleteRow(${index})">
                <i class="fas fa-trash"></i>
                Delete
            </button>
        `;
        tr.appendChild(actionsTd);
        
        body.appendChild(tr);
    });
}

function deleteRow(index) {
    if (confirm('Are you sure you want to delete this row?')) {
        currentTableData.splice(index, 1);
        renderEditorTable(document.getElementById('currentTable').textContent, currentTableData);
    }
}

function addNewRow() {
    if (currentTableData.length === 0) return;
    
    const newRow = {};
    Object.keys(currentTableData[0]).forEach(key => {
        newRow[key] = key === 'id' ? null : '';
    });
    
    currentTableData.push(newRow);
    renderEditorTable(document.getElementById('currentTable').textContent, currentTableData);
}

async function saveChanges() {
    const adminKey = localStorage.getItem('adminKey');
    if (!adminKey) return;
    
    const tableName = document.getElementById('currentTable').textContent;
    
    try {
        const response = await fetch(`/api/admin/table/${tableName}/update`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'x-admin-key': adminKey
            },
            body: JSON.stringify({
                original: originalData,
                updated: currentTableData
            })
        });
        
        if (!response.ok) throw new Error('Failed to save changes');
        
        showToast('Changes saved successfully', 'success');
        closeTableEditor();
        
        loadUsers();
        loadTokens();
        loadActiveConnections();
    } catch (error) {
        console.error('Error saving changes:', error);
        showToast('Failed to save changes', 'error');
    }
}

function closeTableEditor() {
    document.getElementById('overlay').style.display = 'none';
    document.getElementById('tableEditorBox').style.display = 'none';
    currentTableData = [];
    originalData = [];
}


        function copyToken(tokenText) {
            navigator.clipboard.writeText(tokenText)
                .then(() => showToast('Token copied to clipboard', 'success'))
                .catch(() => showToast('Failed to copy token', 'error'));
        }

        function logout() {
            localStorage.removeItem('adminKey');
            document.getElementById('loginContainer').style.display = 'block';
            document.getElementById('dashboardContainer').style.display = 'none';
            document.getElementById('adminKey').value = '';
            showToast('Logged out successfully', 'success');
        }

        setInterval(() => {
            if (localStorage.getItem('adminKey')) {
                loadUsers();
        loadTokens();
        loadActiveConnections();
        loadUserList();                
            }
        }, 30000);


       

        loadUserList();


        document.getElementById('messageText').addEventListener('keydown', function(e) {
            if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();
                sendMessageConfirm();
            }
            if (e.key === 'Escape') {
                closeMessageBox();
            }
        });
    </script>
</body>
</html>