{% extends "account/layout.html" %}
{% block title %}{{ super() }} - {{ page | capitalize }} - {{ user.name }}{% 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">
                    <a href="javascript:fileInput.click()" class="d-inline-block position-relative" id="image-container" style="cursor: pointer;">
                        {% if user.image %}
                        <img src="{{ url_for('uploads', path=user.id+'/'+user.image) }}" 
                             class="rounded-circle" 
                             id="image-preview" 
                             alt="Profile Image" 
                             style="width: 100px; height: 100px; object-fit: cover; border: 3px solid var(--accent);">
                        {% else %}
                        <div class="rounded-circle d-flex align-items-center justify-content-center" 
                             id="image-placeholder" 
                             style="width: 100px; height: 100px; background: var(--bg-tertiary); border: 3px solid var(--border-color); margin: 0 auto;">
                            <i class="fas fa-user fa-2x text-muted"></i>
                        </div>
                        {% endif %}
                        <div class="position-absolute bottom-0 end-0 badge badge-accent rounded-circle p-2">
                            <i class="fas fa-camera fa-sm"></i>
                        </div>
                    </a>
                    <form action="" id="image-form" enctype="multipart/form-data">
                        <input type="file" class="d-none" id="profile-image" accept="image/*"/>
                    </form>
                    
                    <h4 class="text-mono mt-3 mb-1">{{ user.name }}</h4>
                    <p class="text-muted mb-3" style="font-size: 0.875rem;">{{ user.email }}</p>
                    
                    <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.projects | default(0) }}</div>
                            <div class="text-muted" style="font-size: 0.75rem;">Projects</div>
                        </div>
                        <div>
                            <div class="text-accent text-mono" style="font-size: 1.25rem; font-weight: 600;">{{ user.databases | default(0) }}</div>
                            <div class="text-muted" style="font-size: 0.75rem;">Databases</div>
                        </div>
                    </div>
                </div>
                
                <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-user fa-fw text-accent me-2"></i>
                            Profile Overview
                        </h5>
                        
                        <div class="row g-4 mb-4">
                            <div class="col-md-6">
                                <div class="stat-card">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>
                                            <div class="stat-label">Total Projects</div>
                                            <div class="stat-value">{{ user.projects | default(0) }}</div>
                                        </div>
                                        <i class="fas fa-sitemap fa-2x text-accent" style="opacity: 0.5;"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="stat-card">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>
                                            <div class="stat-label">Total Databases</div>
                                            <div class="stat-value">{{ user.databases | default(0) }}</div>
                                        </div>
                                        <i class="fas fa-database 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">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">Account 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">Member Since</label>
                                            <div class="text-mono">{{ user.created_at | default('N/A') }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="card">
                            <div class="card-header">
                                <i class="fas fa-bolt fa-fw text-accent me-2"></i>
                                Quick Actions
                            </div>
                            <div class="card-body">
                                <div class="row g-3">
                                    <div class="col-md-4">
                                        <a href="{{ url_for('list_user_projects') }}" class="btn btn-outline-secondary w-100">
                                            <i class="fas fa-plus fa-fw me-1"></i>
                                            New Project
                                        </a>
                                    </div>
                                    <div class="col-md-4">
                                        <a href="{{ url_for('list_user_databases') }}" class="btn btn-outline-secondary w-100">
                                            <i class="fas fa-database fa-fw me-1"></i>
                                            New Database
                                        </a>
                                    </div>
                                    <div class="col-md-4">
                                        <a href="https://github.com/login/oauth/authorize?client_id={{ git_client_id }}" class="btn btn-outline-secondary w-100">
                                            <i class="fab fa-github fa-fw me-1"></i>
                                            Link GitHub
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </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 action="{{ url_for('update_user_profile') }}" method="post">
                                    <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="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>
                                    <div class="form-group">
                                        <label for="password" class="form-label">Confirm Password to Save</label>
                                        <input type="password" name="password" class="form-control" placeholder="Enter your current password" required>
                                    </div>
                                    <button type="submit" class="btn btn-accent">
                                        <i class="fas fa-save fa-fw me-1"></i>
                                        Save Changes
                                    </button>
                                </form>
                            </div>
                        </div>
                        
                        <div class="card border-danger">
                            <div class="card-header text-danger">
                                <i class="fas fa-exclamation-triangle fa-fw me-2"></i>
                                Danger Zone
                            </div>
                            <div class="card-body">
                                <p class="text-muted mb-3">Once you delete your account, there is no going back. Please be certain.</p>
                                <button class="btn btn-outline-danger" disabled>
                                    <i class="fas fa-trash-alt fa-fw me-1"></i>
                                    Delete Account
                                </button>
                            </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 action="{{ url_for('update_user_password') }}" method="post">
                                    <div class="form-group">
                                        <label for="current_password" class="form-label">Current Password</label>
                                        <input type="password" name="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="submit" class="btn btn-accent">
                                        <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 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')[:50] }}...</div>
                                        </div>
                                    </div>
                                    <span class="badge badge-success">Active</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-th fa-fw text-accent me-2"></i>
                                Default View
                            </div>
                            <div class="card-body">
                                <div class="d-flex align-items-center justify-content-between py-2">
                                    <div>
                                        <div class="text-mono">Projects View</div>
                                        <div class="text-muted" style="font-size: 0.875rem;">Default layout for projects list</div>
                                    </div>
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-outline-secondary">
                                            <i class="fas fa-th-large fa-fw"></i>
                                        </button>
                                        <button type="button" class="btn btn-accent">
                                            <i class="fas fa-th-list fa-fw"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="card">
                            <div class="card-header">
                                <i class="fab fa-github fa-fw text-accent me-2"></i>
                                GitHub Integration
                            </div>
                            <div class="card-body">
                                <div class="d-flex align-items-center justify-content-between py-2">
                                    <div>
                                        <div class="text-mono">GitHub Account</div>
                                        <div class="text-muted" style="font-size: 0.875rem;">
                                            {% if user.gat %}
                                            Connected
                                            {% else %}
                                            Not connected
                                            {% endif %}
                                        </div>
                                    </div>
                                    {% if user.gat %}
                                    <span class="badge badge-success">
                                        <i class="fas fa-check fa-fw me-1"></i>
                                        Connected
                                    </span>
                                    {% else %}
                                    <a href="https://github.com/login/oauth/authorize?client_id={{ git_client_id }}" class="btn btn-outline-secondary">
                                        <i class="fab fa-github fa-fw me-1"></i>
                                        Connect GitHub
                                    </a>
                                    {% endif %}
                                </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">Logged in</div>
                                            <div class="text-muted" style="font-size: 0.75rem;">{{ user.updated_at | default('Recently') }}</div>
                                        </div>
                                    </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-plus"></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>
                                    </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 src="/static/js/profile.js"></script>
<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);
    location.reload();
}
</script>
{% endblock %}