{% extends "base.html" %}
{% block title %}Auth Status — Gatekeeper{% endblock %}
{% set page = "auth" %}
{% block content %}
<div class="mb-6">
    <h2 class="text-2xl font-bold text-white">Google Auth Status</h2>
    <p class="text-gray-400 mt-1">Google Workspace OAuth connection status</p>
</div>

<div id="auth-card" class="bg-gray-800 rounded-lg p-4 sm:p-6 border border-gray-700">
    <p class="text-gray-500">Loading...</p>
</div>

<div id="scope-requirements" class="mt-6">
    <h3 class="text-lg font-semibold text-white mb-3">Required Scopes by Module</h3>
    <div id="scope-list" class="text-gray-500">Loading...</div>
</div>

<div class="mt-6 bg-gray-800 rounded-lg p-4 sm:p-6 border border-gray-700">
    <h3 class="text-lg font-semibold text-white mb-3">Reconnect</h3>
    <p class="text-gray-400 text-sm mb-4">To re-authorize or change scopes, run the following command in your terminal:</p>
    <code class="block bg-gray-900 text-green-300 px-4 py-3 rounded text-sm font-mono overflow-x-auto">gatekeeper auth</code>
</div>

<script>
async function loadAuthStatus() {
    const status = await fetchJSON('/admin/api/auth/status');
    const connected = status.connected;
    let html = `
    <div class="flex items-start sm:items-center gap-3 mb-4">
        <span class="text-3xl">${connected ? '✅' : '❌'}</span>
        <div class="min-w-0">
            <h3 class="text-lg font-bold ${connected ? 'text-green-400' : 'text-red-400'}">${connected ? 'Connected' : 'Disconnected'}</h3>
            ${connected ? (status.has_refresh_token ? '<p class="text-gray-400 text-sm">Refresh token available</p>' : '<p class="text-yellow-400 text-sm">No refresh token — may need re-auth</p>') : '<p class="text-gray-400 text-sm">Run <code>gatekeeper auth</code> to connect</p>'}
        </div>
    </div>`;
    if (connected && status.scopes && status.scopes.length > 0) {
        html += '<div class="mt-3"><p class="text-sm text-gray-400 mb-1">Granted scopes:</p>';
        html += '<div class="flex flex-wrap gap-1.5">';
        status.scopes.forEach(s => {
            html += `<span class="inline-block text-xs bg-gray-700 rounded px-2 py-0.5 text-gray-300">${s.replace('https://www.googleapis.com/auth/', '')}</span>`;
        });
        html += '</div></div>';
    }
    document.getElementById('auth-card').innerHTML = html;

    const modules = await fetchJSON('/admin/api/modules');
    let scopeHtml = '';
    modules.forEach(m => {
        scopeHtml += `<div class="mb-3 p-3 bg-gray-900 rounded">
            <p class="text-sm font-semibold text-white">${m.icon} ${m.display_name} ${m.enabled ? '<span class="text-green-400 text-xs">(enabled)</span>' : '<span class="text-gray-500 text-xs">(disabled)</span>'}</p>
            <div class="mt-1 flex flex-wrap gap-1.5">${m.scopes.map(s => '<span class="inline-block text-xs bg-gray-800 rounded px-2 py-0.5 text-gray-300">' + s.replace('https://www.googleapis.com/auth/', '') + '</span>').join('')}</div>
        </div>`;
    });
    document.getElementById('scope-list').innerHTML = scopeHtml;
}

// pageInit called by auth gate in base.html after login confirmed
function pageInit() { loadAuthStatus(); }
</script>
{% endblock %}