{% extends "base.html" %}

{% block title %}Dashboard - ZeroGate{% endblock %}

{% block content %}
<div class="dashboard">
    <aside class="sidebar">
        <ul class="sidebar-menu">
            <li><a href="/dashboard" class="active">📊 Overview</a></li>
            <li><a href="/dashboard/devices">🖥️ My Devices</a></li>
            <li><a href="/dashboard/sessions">🔑 Sessions</a></li>
            <li><a href="/dashboard/security">🛡️ Security</a></li>
        </ul>
    </aside>
    
    <div class="main-content">
        <div class="page-header">
            <h1>Welcome, <span id="username">User</span></h1>
            <p>Zero Trust Dashboard - Your security overview</p>
        </div>
        
        <div class="stats-grid">
            <div class="stat-card primary">
                <h3>Trust Score</h3>
                <div class="value" id="trust-score">--</div>
            </div>
            <div class="stat-card success">
                <h3>Trust Level</h3>
                <div class="value" id="trust-level">--</div>
            </div>
            <div class="stat-card warning">
                <h3>Active Devices</h3>
                <div class="value" id="device-count">--</div>
            </div>
            <div class="stat-card">
                <h3>Role</h3>
                <div class="value" id="user-role">--</div>
            </div>
        </div>
        
        <div class="card">
            <div class="card-header">
                <h2>Your Profile</h2>
            </div>
            <div class="card-body">
                <table>
                    <tr>
                        <th>Username</th>
                        <td id="profile-username">--</td>
                    </tr>
                    <tr>
                        <th>Email</th>
                        <td id="profile-email">--</td>
                    </tr>
                    <tr>
                        <th>Account Status</th>
                        <td id="profile-status">--</td>
                    </tr>
                    <tr>
                        <th>MFA Status</th>
                        <td id="profile-mfa">--</td>
                    </tr>
                    <tr>
                        <th>Member Since</th>
                        <td id="profile-created">--</td>
                    </tr>
                </table>
            </div>
        </div>
        
        <div class="card" style="margin-top: 1.5rem;">
            <div class="card-header">
                <h2>My Devices</h2>
            </div>
            <div class="card-body">
                <table>
                    <thead>
                        <tr>
                            <th>Device</th>
                            <th>IP Address</th>
                            <th>Trust Score</th>
                            <th>Status</th>
                            <th>Last Seen</th>
                        </tr>
                    </thead>
                    <tbody id="devices-table">
                        <tr><td colspan="5">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 loadDashboard() {
    try {
        // Load user profile
        const profileRes = await fetch('/auth/me', {
            headers: { 'Authorization': `Bearer ${token}` }
        });
        
        if (!profileRes.ok) {
            localStorage.removeItem('token');
            window.location.href = '/login';
            return;
        }
        
        const profile = await profileRes.json();
        document.getElementById('username').textContent = profile.username;
        document.getElementById('profile-username').textContent = profile.username;
        document.getElementById('profile-email').textContent = profile.email;
        document.getElementById('profile-status').innerHTML = profile.is_active 
            ? '<span class="badge badge-success">Active</span>' 
            : '<span class="badge badge-danger">Inactive</span>';
        document.getElementById('profile-mfa').innerHTML = profile.mfa_enabled 
            ? '<span class="badge badge-success">Enabled</span>' 
            : '<span class="badge badge-warning">Disabled</span>';
        document.getElementById('profile-created').textContent = new Date(profile.created_at).toLocaleDateString();
        document.getElementById('user-role').textContent = profile.role_name || 'User';
        
        // Load trust score
        const verifyRes = await fetch('/auth/verify', {
            headers: { 'Authorization': `Bearer ${token}` }
        });
        const verify = await verifyRes.json();
        document.getElementById('trust-score').textContent = verify.trust_score;
        document.getElementById('trust-level').textContent = verify.trust_level.toUpperCase();
        
        // Load devices
        const devicesRes = await fetch('/devices', {
            headers: { 'Authorization': `Bearer ${token}` }
        });
        const devices = await devicesRes.json();
        document.getElementById('device-count').textContent = devices.length;
        
        const devicesTable = document.getElementById('devices-table');
        if (devices.length === 0) {
            devicesTable.innerHTML = '<tr><td colspan="5">No devices registered</td></tr>';
        } else {
            devicesTable.innerHTML = devices.map(d => `
                <tr>
                    <td>${d.device_name || 'Unknown'}</td>
                    <td>${d.ip_address}</td>
                    <td>
                        <div class="trust-score">
                            <div class="trust-bar">
                                <div class="trust-bar-fill ${d.trust_score >= 70 ? 'trust-high' : d.trust_score >= 40 ? 'trust-medium' : 'trust-low'}" 
                                     style="width: ${d.trust_score}%"></div>
                            </div>
                            ${d.trust_score}
                        </div>
                    </td>
                    <td>${d.is_trusted ? '<span class="badge badge-success">Trusted</span>' : '<span class="badge badge-warning">Unverified</span>'}</td>
                    <td>${new Date(d.last_seen).toLocaleString()}</td>
                </tr>
            `).join('');
        }
        
    } catch (error) {
        console.error('Dashboard error:', error);
    }
}

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