{% extends "base.html" %}

{% block title %}Admin Panel - ZeroGate{% endblock %}

{% block content %}
<div class="dashboard">
    <aside class="sidebar">
        <ul class="sidebar-menu">
            <li><a href="/admin" class="active">📊 Overview</a></li>
            <li><a href="/admin/users">👥 Users</a></li>
            <li><a href="/admin/roles">🔑 Roles</a></li>
            <li><a href="/admin/logs">📝 Access Logs</a></li>
        </ul>
    </aside>
    
    <div class="main-content">
        <div class="page-header">
            <h1>Admin Panel</h1>
            <p>Zero Trust Administration - Manage users, roles, and monitor access</p>
        </div>
        
        <div class="stats-grid">
            <div class="stat-card primary">
                <h3>Total Users</h3>
                <div class="value" id="total-users">--</div>
            </div>
            <div class="stat-card success">
                <h3>Active Users</h3>
                <div class="value" id="active-users">--</div>
            </div>
            <div class="stat-card warning">
                <h3>Total Roles</h3>
                <div class="value" id="total-roles">--</div>
            </div>
            <div class="stat-card danger">
                <h3>Access Denied (24h)</h3>
                <div class="value" id="denied-count">--</div>
            </div>
        </div>
        
        <div class="card">
            <div class="card-header">
                <h2>👥 Users</h2>
                <a href="/admin/users" class="btn btn-primary btn-sm">Manage</a>
            </div>
            <div class="card-body">
                <table>
                    <thead>
                        <tr>
                            <th>User</th>
                            <th>Email</th>
                            <th>Role</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody id="users-table">
                        <tr><td colspan="5">Loading...</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
        
        <div class="card" style="margin-top: 1.5rem;">
            <div class="card-header">
                <h2>📝 Recent Access Logs</h2>
                <a href="/admin/logs" class="btn btn-primary btn-sm">View All</a>
            </div>
            <div class="card-body">
                <table>
                    <thead>
                        <tr>
                            <th>Time</th>
                            <th>User</th>
                            <th>Endpoint</th>
                            <th>Method</th>
                            <th>Status</th>
                            <th>IP</th>
                        </tr>
                    </thead>
                    <tbody id="logs-table">
                        <tr><td colspan="6">Loading...</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
const token = localStorage.getItem('token');

if (!token) {
    window.location.href = '/login';
}

async function loadAdmin() {
    try {
        // Load users
        const usersRes = await fetch('/admin/users', {
            headers: { 'Authorization': `Bearer ${token}` }
        });
        
        if (usersRes.status === 403) {
            alert('Admin access required');
            window.location.href = '/dashboard';
            return;
        }
        
        if (!usersRes.ok) {
            localStorage.removeItem('token');
            window.location.href = '/login';
            return;
        }
        
        const users = await usersRes.json();
        document.getElementById('total-users').textContent = users.length;
        document.getElementById('active-users').textContent = users.filter(u => u.is_active).length;
        
        const usersTable = document.getElementById('users-table');
        usersTable.innerHTML = users.slice(0, 5).map(u => `
            <tr>
                <td>
                    <div class="user-info">
                        <div class="avatar">${u.username[0].toUpperCase()}</div>
                        <span>${u.username}</span>
                    </div>
                </td>
                <td>${u.email}</td>
                <td><span class="badge badge-primary">${u.role_name || 'None'}</span></td>
                <td>${u.is_active ? '<span class="badge badge-success">Active</span>' : '<span class="badge badge-danger">Inactive</span>'}</td>
                <td>
                    <button class="btn btn-sm ${u.is_active ? 'btn-danger' : 'btn-success'}" 
                            onclick="toggleUser(${u.id})">
                        ${u.is_active ? 'Deactivate' : 'Activate'}
                    </button>
                </td>
            </tr>
        `).join('');
        
        // Load roles
        const rolesRes = await fetch('/admin/roles', {
            headers: { 'Authorization': `Bearer ${token}` }
        });
        const roles = await rolesRes.json();
        document.getElementById('total-roles').textContent = roles.length;
        
        // Load logs
        const logsRes = await fetch('/admin/logs?limit=10', {
            headers: { 'Authorization': `Bearer ${token}` }
        });
        const logs = await logsRes.json();
        
        const deniedCount = logs.filter(l => !l.access_granted).length;
        document.getElementById('denied-count').textContent = deniedCount;
        
        const logsTable = document.getElementById('logs-table');
        logsTable.innerHTML = logs.slice(0, 10).map(l => `
            <tr>
                <td>${new Date(l.timestamp).toLocaleString()}</td>
                <td>${l.user_id || 'Anonymous'}</td>
                <td>${l.endpoint}</td>
                <td><span class="badge badge-primary">${l.method}</span></td>
                <td>${l.access_granted 
                    ? '<span class="badge badge-success">Granted</span>' 
                    : '<span class="badge badge-danger">Denied</span>'}</td>
                <td>${l.ip_address}</td>
            </tr>
        `).join('');
        
    } catch (error) {
        console.error('Admin error:', error);
    }
}

async function toggleUser(userId) {
    try {
        const res = await fetch(`/admin/users/${userId}/activate`, {
            method: 'PUT',
            headers: { 'Authorization': `Bearer ${token}` }
        });
        if (res.ok) {
            loadAdmin();
        }
    } catch (error) {
        console.error('Toggle error:', error);
    }
}

loadAdmin();
</script>
{% endblock %}