{% extends "base_shell.html" %}

{% block title %}Account - Auth MCP{% endblock %}

{% block sidebar_subtitle %}Account{% endblock %}

{% block sidebar_nav %}
    <a
        href="/account"
        @click="mobileMenuOpen = false"
        class="flex items-center px-3 py-3 rounded-lg transition-all group bg-white/20 shadow-lg"
    >
        <i data-lucide="key-round" class="w-5 h-5 min-w-[20px]"></i>
        <span x-show="sidebarOpen" class="ml-3 font-medium slide-in">Account Access</span>
        <span x-show="sidebarOpen" class="ml-auto w-1.5 h-1.5 bg-white rounded-full"></span>
    </a>
{% endblock %}

{% block logout_url %}/account/logout{% endblock %}

{% block main_attrs %}x-data="accountPortal()" x-init="window.accountPortalInstance = $data; loadInfo()"{% endblock %}

{% block content %}
<div class="max-w-6xl mx-auto">
    <div class="flex items-center justify-between mb-8">
        <div class="flex items-center gap-3">
            <div class="p-3 rounded-xl bg-gradient-to-br from-blue-600 to-cyan-600 text-white shadow-sm">
                <i data-lucide="key-round" class="w-6 h-6"></i>
            </div>
            <div>
                <h1 class="text-3xl font-bold text-gray-900">Account Access</h1>
                <p class="text-gray-600">Get your access token for MCP clients</p>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="lg:col-span-2 bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
            <div class="flex items-center justify-between mb-4">
                <div class="text-sm text-gray-600">
                    Signed in as <span class="font-semibold text-gray-900">{{ username or "user" }}</span>
                </div>
            </div>

            <div class="mb-4 text-sm text-gray-600">
                This page does not provide admin access.
            </div>

            <div class="mb-6 text-sm text-gray-700" x-show="expiresAt">
                Token expires: <span class="font-medium" x-text="expiresAt"></span>
                <span class="text-gray-500" x-text="expiresIn"></span>
            </div>

            <div class="flex items-center gap-3">
                <button type="button" @click="loadToken"
                        class="px-4 py-2 bg-gradient-to-r from-blue-600 to-cyan-600 hover:from-blue-700 hover:to-cyan-700 text-white rounded-lg transition-colors">
                    Show Token
                </button>
                <button type="button" @click="rotateToken"
                        class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">
                    Rotate Token
                </button>
                <span x-show="loading" class="text-sm text-gray-500">Loading...</span>
            </div>

            <template x-if="error">
                <div class="mt-4 text-sm text-red-600" x-text="error"></div>
            </template>

            <template x-if="token">
                <div class="mt-6 space-y-3">
                    <div class="text-sm text-gray-700 font-medium">Access Token</div>
                    <textarea readonly rows="4"
                              class="w-full text-xs font-mono bg-gray-50 border border-gray-200 rounded-lg p-3"
                              x-text="token"></textarea>

                    <div class="text-sm text-gray-700 font-medium">Authorization Header</div>
                    <input readonly
                           class="w-full text-xs font-mono bg-gray-50 border border-gray-200 rounded-lg p-2"
                           :value="`Authorization: Bearer ${token}`">

                    <div class="flex gap-2">
                        <button type="button" @click="copyToken"
                                class="px-3 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 text-sm">
                            Copy Token
                        </button>
                        <button type="button" @click="copyHeader"
                                class="px-3 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 text-sm">
                            Copy Header
                        </button>
                    </div>
                </div>
            </template>

            <div class="mt-8">
                <div class="text-sm font-medium text-gray-700 mb-2">Available MCP Servers</div>
                <template x-if="servers.length === 0">
                    <div class="text-sm text-gray-500">No servers available.</div>
                </template>
                <ul class="space-y-2">
                    <template x-for="s in servers" :key="s.id">
                        <li class="flex items-center justify-between text-sm bg-gray-50 border border-gray-200 rounded-lg px-3 py-2">
                            <div class="flex flex-col">
                                <span class="font-medium text-gray-900" x-text="s.name"></span>
                                <span class="text-xs text-gray-500" x-text="s.endpoint"></span>
                            </div>
                            <button type="button" @click="copyEndpoint(s.endpoint)"
                                    class="p-2 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded">
                                <i data-lucide="copy" class="w-4 h-4"></i>
                            </button>
                        </li>
                    </template>
                </ul>
            </div>
        </div>

        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
            <div class="text-sm font-medium text-gray-700 mb-2">Gateway Endpoint</div>
            <div class="flex items-center justify-between text-sm bg-gray-50 border border-gray-200 rounded-lg px-3 py-2">
                <span class="text-xs text-gray-600" x-text="gatewayEndpoint || '/mcp'">/mcp</span>
                <button type="button" @click="copyEndpoint(gatewayEndpoint || '/mcp')"
                        class="p-2 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded">
                    <i data-lucide="copy" class="w-4 h-4"></i>
                </button>
            </div>
            <div class="mt-4 text-xs text-gray-500">
                Use this endpoint with your token in the Authorization header.
            </div>
        </div>
    </div>

    <div class="mt-6 text-xs text-gray-500">
        Use the MCP endpoint <span class="font-mono" x-text="gatewayEndpointDisplay || '/mcp'">/mcp</span> with your token in the
        <span class="font-mono">Authorization</span> header.
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
    function accountPortal() {
        return {
            token: '',
            error: '',
            loading: false,
            servers: [],
            gatewayEndpoint: '',
            gatewayEndpointDisplay: '',
            expiresAt: '',
            expiresIn: '',
            async loadInfo() {
                try {
                    const response = await fetch('/account/info');
                    const data = await response.json();
                    if (!response.ok) {
                        throw new Error(data.detail || 'Failed to load account info');
                    }
                    this.servers = data.servers || [];
                    this.gatewayEndpoint = data.gateway_endpoint || '/mcp';
                    if (this.gatewayEndpoint.startsWith('http://') || this.gatewayEndpoint.startsWith('https://')) {
                        this.gatewayEndpointDisplay = this.gatewayEndpoint;
                    } else {
                        const origin = window.location.origin || '';
                        this.gatewayEndpointDisplay = `${origin}${this.gatewayEndpoint}`;
                    }
                    this.expiresAt = data.expires_at || '';
                    if (data.expires_in_seconds != null) {
                        const secs = Math.max(0, parseInt(data.expires_in_seconds, 10));
                        const mins = Math.floor(secs / 60);
                        const hrs = Math.floor(mins / 60);
                        const days = Math.floor(hrs / 24);
                        let label = '';
                        if (days > 0) label = `(${days}d ${hrs % 24}h left)`;
                        else if (hrs > 0) label = `(${hrs}h ${mins % 60}m left)`;
                        else label = `(${mins}m left)`;
                        this.expiresIn = label;
                    }
                } catch (err) {
                    this.error = err.message || 'Failed to load account info';
                }
            },
            async loadToken() {
                this.error = '';
                this.loading = true;
                try {
                    const response = await fetch('/account/token');
                    const data = await response.json();
                    if (!response.ok) {
                        throw new Error(data.detail || 'Failed to fetch token');
                    }
                    this.token = data.access_token || '';
                } catch (err) {
                    this.error = err.message || 'Failed to fetch token';
                } finally {
                    this.loading = false;
                }
            },
            async copyToken() {
                if (!this.token) return;
                await navigator.clipboard.writeText(this.token);
            },
            async copyHeader() {
                if (!this.token) return;
                await navigator.clipboard.writeText(`Authorization: Bearer ${this.token}`);
            },
            async rotateToken() {
                this.error = '';
                this.loading = true;
                try {
                    const response = await fetch('/account/rotate', { method: 'POST' });
                    const data = await response.json();
                    if (!response.ok) {
                        throw new Error(data.detail || 'Failed to rotate token');
                    }
                    this.token = data.access_token || '';
                    await this.loadInfo();
                } catch (err) {
                    this.error = err.message || 'Failed to rotate token';
                } finally {
                    this.loading = false;
                }
            },
            async copyEndpoint(value) {
                if (!value) return;
                await navigator.clipboard.writeText(value);
            }
        };
    }
</script>
{% endblock %}