{% extends "_admin_base.html" %}

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

{% block page_title %}Admin Panel{% endblock %}
{% block page_description %}Manage users, content, and system settings{% endblock %}

{% block admin_styles %}
.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 0.8rem;
    margin-right: 8px;
}

.user-info {
    display: flex;
    align-items: center;
}
{% endblock %}

{% block admin_content %}

        <div class="admin-tabs">
            <button class="tab-btn active" onclick="showTab('overview')">Overview</button>
            <button class="tab-btn" onclick="showTab('users')">Users</button>
            <button class="tab-btn" onclick="showTab('content')">Content</button>
            <button class="tab-btn" onclick="showTab('system')">System</button>
        </div>

        <!-- Overview Tab -->
        <div id="overview" class="tab-content active">
            <div class="admin-stats">
                <div class="stat-card">
                    <div class="stat-number">{{ users|length }}</div>
                    <div class="stat-label">Total Users</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number">{{ users|selectattr('3', 'equalto', 1)|list|length }}</div>
                    <div class="stat-label">Admins</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number">{{ users|selectattr('5', 'ne', None)|list|length }}</div>
                    <div class="stat-label">Active Users</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number">73</div>
                    <div class="stat-label">Total Posts</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number">1,299</div>
                    <div class="stat-label">Total Comments</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number">3</div>
                    <div class="stat-label">Content Sources</div>
                </div>
            </div>

            <div class="admin-section">
                <h3 class="section-title">Recent Activity</h3>
                <div class="system-info">
                    <div class="info-card">
                        <h4>Latest User</h4>
                        <p><strong>{{ users[-1].username if users else 'None' }}</strong></p>
                        <p>Joined: {{ users[-1].created_at.strftime('%Y-%m-%d') if users and users[-1].created_at else 'N/A' }}</p>
                    </div>
                    <div class="info-card">
                        <h4>System Status</h4>
                        <p><strong>🟢 Operational</strong></p>
                        <p>Last update: Just now</p>
                    </div>
                    <div class="info-card">
                        <h4>Storage Usage</h4>
                        <p><strong>~50 MB</strong></p>
                        <p>Posts and comments</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Users Tab -->
        <div id="users" class="tab-content">
            <div class="admin-section">
                <h3 class="section-title">User Management</h3>
                <div class="admin-table">
                    <table>
                        <thead>
                            <tr>
                                <th>User</th>
                                <th>Email</th>
                                <th>Role</th>
                                <th>Status</th>
                                <th>Created</th>
                                <th>Last Login</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for user in users %}
                            <tr>
                                <td>
                                    <div class="user-info">
                                        <div class="user-avatar">{{ user.username[:2].upper() }}</div>
                                        <strong>{{ user.username }}</strong>
                                    </div>
                                </td>
                                <td>{{ user.email }}</td>
                                <td>
                                    {% if user.is_admin %}
                                        <span class="badge badge-admin">Admin</span>
                                    {% else %}
                                        <span class="badge badge-user">User</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if user.last_login %}
                                        <span class="badge badge-active">Active</span>
                                    {% else %}
                                        <span class="badge badge-inactive">Inactive</span>
                                    {% endif %}
                                </td>
                                <td>{{ user.created_at.strftime('%Y-%m-%d') if user.created_at else 'N/A' }}</td>
                                <td>{{ user.last_login.strftime('%Y-%m-%d') if user.last_login else 'Never' }}</td>
                                <td>
                                    <form method="POST" action="{{ url_for('admin_toggle_admin', user_id=user.id) }}" style="display: inline;">
                                        <button type="submit" class="action-btn action-btn-primary">
                                            {% if user.is_admin %}Remove Admin{% else %}Make Admin{% endif %}
                                        </button>
                                    </form>
                                    <form method="POST" action="{{ url_for('admin_delete_user', user_id=user.id) }}" style="display: inline;"
                                          onsubmit="return confirm('Are you sure you want to delete this user?');">
                                        <button type="submit" class="action-btn action-btn-danger">Delete</button>
                                    </form>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Content Tab -->
        <div id="content" class="tab-content">
            <div class="admin-section">
                <h3 class="section-title">Content Management</h3>
                <div class="system-info">
                    <div class="info-card">
                        <h4>Content Sources</h4>
                        <p>Reddit - Active</p>
                        <p>Hacker News - Active</p>
                        <p>Lobsters - Active</p>
                    </div>
                    <div class="info-card">
                        <h4>Filter Sets</h4>
                        <p>safe_content - Default</p>
                        <p>no_filter - Unfiltered</p>
                    </div>
                    <div class="info-card">
                        <h4>Content Stats</h4>
                        <p>Posts today: 12</p>
                        <p>Comments today: 45</p>
                    </div>
                </div>
            </div>

            <div class="admin-section">
                <h3 class="section-title">Content Actions</h3>
                <form method="POST" action="{{ url_for('admin_regenerate_content') }}">
                    <button type="submit" class="btn btn-primary">Regenerate All Content</button>
                    <p style="margin-top: 8px; font-size: 0.85rem; color: var(--text-secondary);">
                        This will regenerate all HTML files with current templates and filters.
                    </p>
                </form>
            </div>
        </div>

        <!-- System Tab -->
        <div id="system" class="tab-content">
            <div class="admin-section">
                <h3 class="section-title">System Information</h3>
                <div class="system-info">
                    <div class="info-card">
                        <h4>Application</h4>
                        <p>BalanceBoard v2.0</p>
                        <p>Python 3.9+</p>
                        <p>Flask Framework</p>
                    </div>
                    <div class="info-card">
                        <h4>Database</h4>
                        <p>PostgreSQL</p>
                        <p>Connection: Active</p>
                    </div>
                    <div class="info-card">
                        <h4>Storage</h4>
                        <p>Posts: 73 files</p>
                        <p>Comments: 1,299 files</p>
                        <p>Themes: 2 available</p>
                    </div>
                </div>
            </div>

            <div class="admin-section">
                <h3 class="section-title">System Maintenance</h3>
                <div style="display: flex; gap: 12px; flex-wrap: wrap;">
                    <a href="{{ url_for('admin_polling') }}" class="action-btn action-btn-primary">📡 Manage Polling</a>
                    <form method="POST" action="{{ url_for('admin_clear_cache') }}" style="display: inline;">
                        <button type="submit" class="action-btn action-btn-warning">Clear Cache</button>
                    </form>
                    <form method="POST" action="{{ url_for('admin_backup_data') }}" style="display: inline;">
                        <button type="submit" class="action-btn action-btn-primary">Backup Data</button>
                    </form>
                </div>
            </div>
        </div>
{% endblock %}

{% block admin_scripts %}
<script>
function showTab(tabName) {
    // Hide all tabs
    const tabs = document.querySelectorAll('.tab-content');
    tabs.forEach(tab => tab.classList.remove('active'));
    
    // Remove active class from all buttons
    const buttons = document.querySelectorAll('.tab-btn');
    buttons.forEach(btn => btn.classList.remove('active'));
    
    // Show selected tab
    document.getElementById(tabName).classList.add('active');
    
    // Add active class to clicked button
    event.target.classList.add('active');
}
</script>
{% endblock %}