templates/admin.html

{% extends "base.html" %}
{% block title %}Admin - English Helper{% endblock %}
{% block content %}
<style>
    .spinner {
        border: 3px solid #f3f3f3;
        border-top: 3px solid #3498db;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        animation: spin 1s linear infinite;
        display: inline-block;
        margin-right: 10px;
    }
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    .table-container {
        max-height: 600px;
        overflow-y: auto;
    }
</style>

<div id="adminInterface">
    <!-- Header -->
    <header class="bg-white shadow-md">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center py-4">
                <div class="flex items-center">
                    <h1 class="text-2xl font-bold text-gray-900">🎓 English Helper Admin</h1>
                </div>
            </div>
        </div>
    </header>

    <!-- Floating Save Data Button -->
    <div class="fixed top-4 right-4 z-50">
        <button id="saveDataBtn" class="px-4 py-2 bg-blue-600 text-white rounded shadow">Salvar dados</button>
    </div>

    <!-- Navigation Tabs -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-6">
        <div class="border-b border-gray-200">
            <nav class="-mb-px flex space-x-8">
                <button onclick="showTab('dashboard')" class="admin-tab active" data-tab="dashboard">
                    📊 Dashboard
                </button>
                <button onclick="showTab('users')" class="admin-tab" data-tab="users">
                    👥 Users
                </button>
                <button onclick="showTab('database')" class="admin-tab" data-tab="database">
                    🗄️ Database
                </button>
                <button onclick="showTab('tokens')" class="admin-tab" data-tab="tokens">
                    💳 Token Usage
                </button>
                <button onclick="showTab('system')" class="admin-tab" data-tab="system">
                    🩺 System Health
                </button>
            </nav>
        </div>
    </div>

    <!-- Tab Content -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        <!-- Dashboard Tab -->
        <div id="dashboardTab" class="tab-content">
            <!-- ...existing dashboard content... -->
        </div>

        <!-- Users Tab -->
        <div id="usersTab" class="tab-content hidden">
            <!-- ...existing users content... -->
        </div>

        <!-- Database Tab -->
        <div id="databaseTab" class="tab-content hidden">
            <!-- ...existing database content... -->
        </div>

        <!-- Token Usage Tab -->
        <div id="tokensTab" class="tab-content hidden">
            <!-- ...existing token usage content... -->
        </div>

        <!-- System Health Tab -->
        <div id="systemTab" class="tab-content hidden">
            <!-- ...existing system health content... -->
        </div>
    </div>
</div>

<!-- User Detail Modal -->
<div id="userDetailModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-lg p-6 max-w-4xl w-full mx-4 max-h-screen overflow-y-auto">
        <div class="flex justify-between items-center mb-4">
            <!-- ...existing modal header... -->
        </div>
        <div id="userDetailContent">
            <!-- ...existing modal content... -->
        </div>
    </div>
</div>

<!-- Toast Notifications -->
<div id="toastContainer" class="fixed top-4 right-4 z-50"></div>

<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Minimal, consolidated admin UI JS that talks to existing backend endpoints
let currentPage = 1;
let usersData = [];

document.addEventListener('DOMContentLoaded', () => {
    showTab('dashboard');
    loadDashboard();
    loadUsers();
    loadDatabaseSchema();
    loadTokenUsage();
    loadSystemHealth();
});

function showTab(tabName) {
    document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
    const active = document.getElementById(tabName + 'Tab');
    if (active) active.classList.remove('hidden');

    document.querySelectorAll('.admin-tab').forEach(btn => btn.classList.remove('active'));
    const btn = document.querySelector(`.admin-tab[data-tab="${tabName}"]`);
    if (btn) btn.classList.add('active');
}

async function loadDashboard() {
    try {
        const res = await fetch('/admin/stats');
        const data = await res.json();

        const container = document.getElementById('dashboardTab');
        if (!container) return;

        container.innerHTML = `
            <h2 class="text-xl font-semibold mb-4">System Dashboard</h2>
            <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                <div class="p-4 bg-white rounded shadow"> <div class="text-sm text-gray-500">Total Users</div> <div class="text-2xl font-bold">${data.total_users ?? '-'}</div></div>
                <div class="p-4 bg-white rounded shadow"> <div class="text-sm text-gray-500">Study Sessions</div> <div class="text-2xl font-bold">-</div></div>
                <div class="p-4 bg-white rounded shadow"> <div class="text-sm text-gray-500">API Tokens</div> <div class="text-2xl font-bold">-</div></div>
                <div class="p-4 bg-white rounded shadow"> <div class="text-sm text-gray-500">Content Items</div> <div class="text-2xl font-bold">-</div></div>
            </div>
            <div class="mt-6">
                <canvas id="userGrowthChart" height="120"></canvas>
            </div>
        `;

        // simple user growth sample chart
        const ctx = document.getElementById('userGrowthChart')?.getContext('2d');
        if (ctx) {
            new Chart(ctx, { type: 'line', data: { labels: ['-','-','-'], datasets:[{label:'Users', data:[0,0, data.total_users || 0], borderColor:'rgb(59,130,246)', fill:false}]}, options:{responsive:true}});
        }
    } catch (e) {
        console.error('Dashboard load error', e);
    }
}

async function loadUsers() {
    try {
        const res = await fetch('/users');
        const data = await res.json();
        const users = data.users || [];
        usersData = users;

        const container = document.getElementById('usersTab');
        if (!container) return;

        if (users.length === 0) {
            container.innerHTML = '<div class="text-center py-8">No users found</div>';
            return;
        }

        container.innerHTML = `
            <div class="overflow-x-auto bg-white rounded shadow">
                <table class="w-full text-left">
                    <thead class="bg-gray-50"><tr><th class="p-3">User ID</th><th class="p-3">Stats</th><th class="p-3">Actions</th></tr></thead>
                    <tbody id="usersTableBody">${users.map(u=>`<tr class="border-b"><td class="p-3">${u}</td><td class="p-3">-</td><td class="p-3"><button onclick="viewUser('${u}')" class="text-blue-600">View</button></td></tr>`).join('')}</tbody>
                </table>
            </div>
        `;
    } catch (e) {
        console.error('loadUsers error', e);
        showToast('Failed to load users', 'error');
    }
}

async function viewUser(userId) {
    try {
        const res = await fetch(`/user/${encodeURIComponent(userId)}/analytics`);
        const data = await res.json();
        const modal = document.getElementById('userDetailModal');
        const content = document.getElementById('userDetailContent');
        content.innerHTML = `
            <h3 class="text-lg font-semibold mb-2">User: ${userId}</h3>
            <div class="text-sm">Total flashcards: ${data.total_flashcards ?? 0}</div>
            <div class="text-sm">Total conversations: ${data.total_conversations ?? 0}</div>
            <div class="text-sm">Total sessions: ${data.total_sessions ?? 0}</div>
            <div class="mt-4">
                <h4 class="font-medium">Recent activity</h4>
                <div class="max-h-48 overflow-y-auto text-sm">${(data.recent_activity||[]).map(a=>`<div class="py-1 border-b">${a.timestamp || ''} - ${a.get || a.action || JSON.stringify(a)}</div>`).join('')}</div>
            </div>
        `;
        modal.classList.remove('hidden');
    } catch (e) {
        console.error('viewUser error', e);
        showToast('Failed to load user details', 'error');
    }
}

async function loadDatabaseSchema() {
    try {
        // no DB backend available in HF simplified; show placeholder
        const container = document.getElementById('databaseTab');
        if (!container) return;
        container.innerHTML = '<div class="p-4 bg-white rounded shadow">No database schema available in file-based HF mode.</div>';
    } catch (e) {
        console.error(e);
    }
}

async function loadTokenUsage() {
    try {
        const container = document.getElementById('tokensTab');
        if (!container) return;
        container.innerHTML = `
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <canvas id="providerUsageChart"></canvas>
                <canvas id="costBreakdownChart"></canvas>
            </div>
        `;
        // create sample charts
        const pctx = document.getElementById('providerUsageChart')?.getContext('2d');
        if (pctx) new Chart(pctx, {type:'bar', data:{labels:['Groq','Gemini'], datasets:[{label:'Input Tokens', data:[150000,85000], backgroundColor:['#3b82f6','#9333ea']}]}, options:{responsive:true}});
        const cctx = document.getElementById('costBreakdownChart')?.getContext('2d');
        if (cctx) new Chart(cctx, {type:'pie', data:{labels:['Conversation','Analysis','Planning'], datasets:[{data:[40,30,30], backgroundColor:['#22c55e','#3b82f6','#f97316']}]}, options:{responsive:true}});
    } catch (e) { console.error(e); }
}

async function loadSystemHealth() {
    try {
        const res = await fetch('/system/status');
        const data = await res.json();
        const container = document.getElementById('systemTab');
        if (!container) return;
        container.innerHTML = `<div class="p-4 bg-white rounded shadow"><pre class="text-sm">${JSON.stringify(data, null, 2)}</pre></div>`;
    } catch (e) {
        console.error('system health error', e);
    }
}

function showToast(message, type='info'){
    const toast = document.createElement('div');
    toast.className = `fixed top-4 right-4 p-3 rounded shadow z-50 ${type==='success'?'bg-green-600':type==='error'?'bg-red-600':'bg-blue-600'} text-white`;
    toast.textContent = message; document.body.appendChild(toast);
    setTimeout(()=>toast.remove(),4000);
}

// Save data button
document.addEventListener('click', (e) => {
    if (e.target && e.target.id === 'saveDataBtn') {
        e.target.disabled = true;
        e.target.textContent = 'Preparando...';
        fetch('/admin/export/all')
            .then(res => {
                if (!res.ok) throw new Error('Export failed');
                return res.blob();
            })
            .then(blob => {
                const url = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = 'hf_data_export.zip';
                document.body.appendChild(a);
                a.click();
                a.remove();
                window.URL.revokeObjectURL(url);
                showToast('Download iniciado', 'success');
            })
            .catch(err => {
                console.error('Export all error', err);
                showToast('Falha ao exportar dados', 'error');
            })
            .finally(() => {
                e.target.disabled = false;
                e.target.textContent = 'Salvar dados';
            });
    }
});
</script>
{% endblock %}