{% extends "admin/layout.html" %}
{% block title %}{{ super() }} - {{ page | capitalize }}{% endblock %}
{% block pagetitle %}PROFILE{% endblock %}
{% block content %}
{% for (category, message) in get_flashed_messages(request) %}
<div class="alert alert-{{ category }} mb-3">
    <i class="fas fa-{% if category == 'danger' %}exclamation-circle{% elif category == 'success' %}check-circle{% else %}info-circle{% endif %}"></i>
    <span>{{ message }}</span>
    <button type="button" class="btn-close" data-bs-dismiss="alert">
        <i class="fas fa-times"></i>
    </button>
</div>
{% endfor %}

<div class="card">
    <div class="card-body p-0">
        <div class="row g-0">
            <div class="col-lg-3 border-end">
                <div class="p-4 text-center">
                    <div class="rounded-circle d-flex align-items-center justify-content-center mx-auto" 
                         style="width: 100px; height: 100px; background: var(--accent-glow); border: 3px solid var(--accent);">
                        <i class="fas fa-shield-alt fa-3x text-accent"></i>
                    </div>
                    
                    <h4 class="text-mono mt-3 mb-1">{{ user.name }}</h4>
                    <p class="text-muted mb-2" style="font-size: 0.875rem;">{{ user.email }}</p>
                    <span class="badge badge-accent mb-3">
                        <i class="fas fa-crown fa-fw me-1"></i>
                        {{ user.role.name | default('Admin') | upper }}
                    </span>
                    
                    <div class="d-flex justify-content-center gap-4 text-center">
                        <div>
                            <div class="text-accent text-mono" style="font-size: 1.25rem; font-weight: 600;">
                                {{ user.role.permissions | default([]) | length }}
                            </div>
                            <div class="text-muted" style="font-size: 0.75rem;">Permissions</div>
                        </div>
                        <div>
                            <div class="text-accent text-mono" style="font-size: 1.25rem; font-weight: 600;">
                                {{ user.role.priority | default(0) }}
                            </div>
                            <div class="text-muted" style="font-size: 0.75rem;">Priority</div>
                        </div>
                    </div>
                </div>
                
                <hr class="my-0" style="border-color: var(--border-color);">
                
                <div class="nav flex-column nav-pills" id="profile-tabs" role="tablist">
                    <button class="nav-link active text-start" data-bs-toggle="pill" data-bs-target="#tab-overview" type="button" role="tab">
                        <i class="fas fa-user fa-fw me-2"></i>
                        Overview
                    </button>
                    <button class="nav-link text-start" data-bs-toggle="pill" data-bs-target="#tab-account" type="button" role="tab">
                        <i class="fas fa-cog fa-fw me-2"></i>
                        Account Settings
                    </button>
                    <button class="nav-link text-start" data-bs-toggle="pill" data-bs-target="#tab-security" type="button" role="tab">
                        <i class="fas fa-shield-alt fa-fw me-2"></i>
                        Security
                    </button>
                    <button class="nav-link text-start" data-bs-toggle="pill" data-bs-target="#tab-preferences" type="button" role="tab">
                        <i class="fas fa-palette fa-fw me-2"></i>
                        Preferences
                    </button>
                    <button class="nav-link text-start" data-bs-toggle="pill" data-bs-target="#tab-activity" type="button" role="tab">
                        <i class="fas fa-history fa-fw me-2"></i>
                        Activity
                    </button>
                </div>
            </div>
            
            <div class="col-lg-9">
                <div class="tab-content p-4" id="profile-tab-content">
                    <div class="tab-pane fade show active" id="tab-overview" role="tabpanel">
                        <h5 class="text-mono mb-4">
                            <i class="fas fa-shield-alt fa-fw text-accent me-2"></i>
                            Admin Profile Overview
                        </h5>
                        
                        <div class="row g-4 mb-4">
                            <div class="col-md-4">
                                <div class="stat-card">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>
                                            <div class="stat-label">Role</div>
                                            <div class="stat-value" style="font-size: 1.25rem;">{{ user.role.name | default('Admin') }}</div>
                                        </div>
                                        <i class="fas fa-user-tag fa-2x text-accent" style="opacity: 0.5;"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="stat-card">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>
                                            <div class="stat-label">Priority Level</div>
                                            <div class="stat-value">{{ user.role.priority | default(0) }}</div>
                                        </div>
                                        <i class="fas fa-layer-group fa-2x text-accent" style="opacity: 0.5;"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="stat-card">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>
                                            <div class="stat-label">Permissions</div>
                                            <div class="stat-value">{{ user.role.permissions | default([]) | length }}</div>
                                        </div>
                                        <i class="fas fa-key fa-2x text-accent" style="opacity: 0.5;"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="card mb-4">
                            <div class="card-header">
                                <i class="fas fa-info-circle fa-fw text-accent me-2"></i>
                                Account Information
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label text-muted">Full Name</label>
                                            <div class="text-mono">{{ user.name }}</div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label text-muted">Username</label>
                                            <div class="text-mono">{{ user.username }}</div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label text-muted">Email Address</label>
                                            <div class="text-mono">{{ user.email }}</div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label text-muted">Admin ID</label>
                                            <div class="text-mono" style="font-size: 0.875rem;">{{ user.id }}</div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label text-muted">Role</label>
                                            <div>
                                                <span class="badge badge-accent">{{ user.role.name | default('Admin') }}</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label text-muted">Member Since</label>
                                            <div class="text-mono">{{ user.created_at | default('N/A') }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        {% if user.role.permissions %}
                        <div class="card">
                            <div class="card-header">
                                <i class="fas fa-lock fa-fw text-accent me-2"></i>
                                Role Permissions
                            </div>
                            <div class="card-body">
                                <div class="d-flex flex-wrap gap-2">
                                    {% for permission in user.role.permissions %}
                                    <span class="badge badge-secondary">
                                        <i class="fas fa-check fa-fw me-1"></i>
                                        {{ permission }}
                                    </span>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                        {% endif %}
                    </div>
                    
                    <div class="tab-pane fade" id="tab-account" role="tabpanel">
                        <h5 class="text-mono mb-4">
                            <i class="fas fa-cog fa-fw text-accent me-2"></i>
                            Account Settings
                        </h5>
                        
                        <div class="card mb-4">
                            <div class="card-header">
                                <i class="fas fa-user-edit fa-fw text-accent me-2"></i>
                                Edit Profile
                            </div>
                            <div class="card-body">
                                <form id="update-profile-form">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="name" class="form-label">Full Name</label>
                                                <input type="text" value="{{ user.name }}" class="form-control" id="name" name="name" required>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="username" class="form-label">Username</label>
                                                <input type="text" value="{{ user.username }}" class="form-control form-control-mono" id="username" name="username" required>
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="email" class="form-label">Email Address</label>
                                                <input type="email" value="{{ user.email }}" class="form-control form-control-mono" id="email" name="email" required>
                                            </div>
                                        </div>
                                    </div>
                                    <button type="button" class="btn btn-accent" onclick="updateProfile()">
                                        <i class="fas fa-save fa-fw me-1"></i>
                                        Save Changes
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                    
                    <div class="tab-pane fade" id="tab-security" role="tabpanel">
                        <h5 class="text-mono mb-4">
                            <i class="fas fa-shield-alt fa-fw text-accent me-2"></i>
                            Security Settings
                        </h5>
                        
                        <div class="card mb-4">
                            <div class="card-header">
                                <i class="fas fa-key fa-fw text-accent me-2"></i>
                                Change Password
                            </div>
                            <div class="card-body">
                                <form id="change-password-form">
                                    <div class="form-group">
                                        <label for="current_password" class="form-label">Current Password</label>
                                        <input type="password" name="current_password" class="form-control" placeholder="Enter current password" required>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="new_password" class="form-label">New Password</label>
                                                <input type="password" name="new_password" class="form-control" placeholder="Enter new password" required>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="confirm_password" class="form-label">Confirm Password</label>
                                                <input type="password" name="confirm_password" class="form-control" placeholder="Confirm new password" required>
                                            </div>
                                        </div>
                                    </div>
                                    <button type="button" class="btn btn-accent" onclick="changePassword()">
                                        <i class="fas fa-key fa-fw me-1"></i>
                                        Update Password
                                    </button>
                                </form>
                            </div>
                        </div>
                        
                        <div class="card mb-4">
                            <div class="card-header">
                                <i class="fas fa-code fa-fw text-accent me-2"></i>
                                API Access Token
                            </div>
                            <div class="card-body">
                                <p class="text-muted mb-3">Use this token to authenticate admin API requests.</p>
                                <div class="input-group">
                                    <input type="text" class="form-control form-control-mono" value="{{ request.session['access_token'] }}" readonly id="api-token">
                                    <button class="btn btn-outline-secondary" type="button" onclick="copyToken()">
                                        <i class="fas fa-copy"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="card">
                            <div class="card-header">
                                <i class="fas fa-laptop fa-fw text-accent me-2"></i>
                                Active Sessions
                            </div>
                            <div class="card-body">
                                <div class="d-flex align-items-center justify-content-between py-2 border-bottom">
                                    <div class="d-flex align-items-center gap-3">
                                        <i class="fas fa-desktop fa-lg text-accent"></i>
                                        <div>
                                            <div class="text-mono">Current Session</div>
                                            <div class="text-muted" style="font-size: 0.75rem;">{{ request.headers.get('user-agent', 'Unknown')[:60] }}...</div>
                                        </div>
                                    </div>
                                    <span class="badge badge-success">Active</span>
                                </div>
                                <div class="d-flex align-items-center justify-content-between py-2">
                                    <div class="d-flex align-items-center gap-3">
                                        <i class="fas fa-clock fa-lg text-muted"></i>
                                        <div>
                                            <div class="text-mono">Last Login</div>
                                            <div class="text-muted" style="font-size: 0.75rem;">{{ user.updated_at | default('Recently') }}</div>
                                        </div>
                                    </div>
                                    <span class="badge badge-secondary">System</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="tab-pane fade" id="tab-preferences" role="tabpanel">
                        <h5 class="text-mono mb-4">
                            <i class="fas fa-palette fa-fw text-accent me-2"></i>
                            Preferences
                        </h5>
                        
                        <div class="card mb-4">
                            <div class="card-header">
                                <i class="fas fa-moon fa-fw text-accent me-2"></i>
                                Appearance
                            </div>
                            <div class="card-body">
                                <div class="d-flex align-items-center justify-content-between py-2">
                                    <div>
                                        <div class="text-mono">Theme</div>
                                        <div class="text-muted" style="font-size: 0.875rem;">Choose your preferred color scheme</div>
                                    </div>
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn {% if request.session.get('theme', 'dark') == 'dark' %}btn-accent{% else %}btn-outline-secondary{% endif %}" onclick="setTheme('dark')">
                                            <i class="fas fa-moon fa-fw me-1"></i>
                                            Dark
                                        </button>
                                        <button type="button" class="btn {% if request.session.get('theme', 'dark') == 'light' %}btn-accent{% else %}btn-outline-secondary{% endif %}" onclick="setTheme('light')">
                                            <i class="fas fa-sun fa-fw me-1"></i>
                                            Light
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="card mb-4">
                            <div class="card-header">
                                <i class="fas fa-bell fa-fw text-accent me-2"></i>
                                Notifications
                            </div>
                            <div class="card-body">
                                <div class="d-flex align-items-center justify-content-between py-2 border-bottom">
                                    <div>
                                        <div class="text-mono">System Alerts</div>
                                        <div class="text-muted" style="font-size: 0.875rem;">Receive alerts for system events</div>
                                    </div>
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="system-alerts" checked>
                                    </div>
                                </div>
                                <div class="d-flex align-items-center justify-content-between py-2 border-bottom">
                                    <div>
                                        <div class="text-mono">User Activity</div>
                                        <div class="text-muted" style="font-size: 0.875rem;">Get notified about user actions</div>
                                    </div>
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="user-activity" checked>
                                    </div>
                                </div>
                                <div class="d-flex align-items-center justify-content-between py-2">
                                    <div>
                                        <div class="text-mono">Security Alerts</div>
                                        <div class="text-muted" style="font-size: 0.875rem;">Critical security notifications</div>
                                    </div>
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="security-alerts" checked>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="card">
                            <div class="card-header">
                                <i class="fas fa-sliders-h fa-fw text-accent me-2"></i>
                                Admin Preferences
                            </div>
                            <div class="card-body">
                                <div class="d-flex align-items-center justify-content-between py-2 border-bottom">
                                    <div>
                                        <div class="text-mono">Default Users View</div>
                                        <div class="text-muted" style="font-size: 0.875rem;">Default layout for users list</div>
                                    </div>
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-accent">
                                            <i class="fas fa-th-large fa-fw"></i>
                                        </button>
                                        <button type="button" class="btn btn-outline-secondary">
                                            <i class="fas fa-th-list fa-fw"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="d-flex align-items-center justify-content-between py-2">
                                    <div>
                                        <div class="text-mono">Auto-refresh Dashboard</div>
                                        <div class="text-muted" style="font-size: 0.875rem;">Automatically refresh statistics</div>
                                    </div>
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="auto-refresh">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="tab-pane fade" id="tab-activity" role="tabpanel">
                        <h5 class="text-mono mb-4">
                            <i class="fas fa-history fa-fw text-accent me-2"></i>
                            Recent Activity
                        </h5>
                        
                        <div class="card">
                            <div class="card-header">
                                <i class="fas fa-list fa-fw text-accent me-2"></i>
                                Activity Log
                            </div>
                            <div class="card-body p-0">
                                <div class="list-group list-group-flush">
                                    <div class="list-group-item d-flex align-items-center gap-3 py-3">
                                        <div class="badge badge-accent rounded-circle p-2">
                                            <i class="fas fa-sign-in-alt"></i>
                                        </div>
                                        <div class="flex-grow-1">
                                            <div class="text-mono">Admin login</div>
                                            <div class="text-muted" style="font-size: 0.75rem;">{{ user.updated_at | default('Recently') }}</div>
                                        </div>
                                        <span class="badge badge-success">Success</span>
                                    </div>
                                    <div class="list-group-item d-flex align-items-center gap-3 py-3">
                                        <div class="badge badge-secondary rounded-circle p-2">
                                            <i class="fas fa-user-shield"></i>
                                        </div>
                                        <div class="flex-grow-1">
                                            <div class="text-mono">Account created</div>
                                            <div class="text-muted" style="font-size: 0.75rem;">{{ user.created_at | default('N/A') }}</div>
                                        </div>
                                        <span class="badge badge-secondary">System</span>
                                    </div>
                                    <div class="list-group-item d-flex align-items-center gap-3 py-3">
                                        <div class="badge badge-info rounded-circle p-2">
                                            <i class="fas fa-shield-alt"></i>
                                        </div>
                                        <div class="flex-grow-1">
                                            <div class="text-mono">Role assigned: {{ user.role.name | default('Admin') }}</div>
                                            <div class="text-muted" style="font-size: 0.75rem;">{{ user.created_at | default('N/A') }}</div>
                                        </div>
                                        <span class="badge badge-info">Role</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.list-group-item {
    background: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.nav-pills .nav-link {
    border-radius: 0;
    border-left: 3px solid transparent;
    padding: 0.75rem 1.25rem;
}

.nav-pills .nav-link:hover {
    background: var(--bg-hover);
    border-left-color: var(--border-light);
}

.nav-pills .nav-link.active {
    background: var(--accent-glow);
    color: var(--accent);
    border-left-color: var(--accent);
}
</style>
{% endblock %}

{% block scripts %} 
{{ super() }}
<script>
function copyToken() {
    const token = document.getElementById('api-token').value;
    navigator.clipboard.writeText(token).then(() => {
        const btn = event.currentTarget;
        const icon = btn.querySelector('i');
        icon.className = 'fas fa-check';
        setTimeout(() => { icon.className = 'fas fa-copy'; }, 2000);
    });
}

function setTheme(theme) {
    document.documentElement.setAttribute('data-theme', theme);
    localStorage.setItem('runit-theme', theme);
}

function updateProfile() {
    const form = document.getElementById('update-profile-form');
    const formData = new FormData(form);
    const btn = event.currentTarget;
    const originalText = btn.innerHTML;
    
    btn.innerHTML = '<i class="fas fa-spinner fa-spin fa-fw me-1"></i> Saving...';
    btn.disabled = true;
    
    fetch('{{ url_for("admin_update_profile") }}', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert(data.message || 'Failed to update profile');
        }
    })
    .catch(err => {
        alert('An error occurred. Please try again.');
    })
    .finally(() => {
        btn.innerHTML = originalText;
        btn.disabled = false;
    });
}

function changePassword() {
    const form = document.getElementById('change-password-form');
    const formData = new FormData(form);
    const newPass = formData.get('new_password');
    const confirmPass = formData.get('confirm_password');
    
    if (newPass !== confirmPass) {
        alert('Passwords do not match');
        return;
    }
    
    const btn = event.currentTarget;
    const originalText = btn.innerHTML;
    
    btn.innerHTML = '<i class="fas fa-spinner fa-spin fa-fw me-1"></i> Updating...';
    btn.disabled = true;
    
    fetch('{{ url_for("admin_change_password") }}', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('Password changed successfully');
            form.reset();
        } else {
            alert(data.message || 'Failed to change password');
        }
    })
    .catch(err => {
        alert('An error occurred. Please try again.');
    })
    .finally(() => {
        btn.innerHTML = originalText;
        btn.disabled = false;
    });
}
</script>
{% endblock %}