{% extends "admin/base.html" %}

{% block title %}Dashboard - Auth MCP Admin{% endblock %}

{% block content %}
<div x-data="dashboardManager()">
    <!-- Header -->
    <div class="flex items-center justify-between mb-8">
        <div>
            <h1 class="text-3xl font-bold text-gray-900 flex items-center gap-3">
                <i data-lucide="gauge" class="w-8 h-8 text-blue-600"></i>
                Dashboard
            </h1>
            <p class="text-gray-600 mt-1">Real-time overview of your Auth MCP Gateway</p>
        </div>
        <div class="flex gap-2">
            <button 
                @click="loadAll()"
                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 shadow-sm transition-colors flex items-center gap-2"
            >
                <i data-lucide="refresh-cw" class="w-4 h-4" :class="{ 'animate-spin': loading }"></i>
                Refresh
            </button>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="bg-gradient-to-r from-blue-600 to-cyan-600 rounded-xl shadow-lg p-6 mb-8">
        <h3 class="text-white text-lg font-semibold mb-4 flex items-center gap-2">
            <i data-lucide="zap" class="w-5 h-5"></i>
            Quick Actions
        </h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <a href="/admin/mcp-servers" class="bg-white/10 hover:bg-white/20 backdrop-blur-sm text-white rounded-lg p-4 transition-all hover:scale-105 flex items-center gap-3">
                <i data-lucide="server" class="w-6 h-6"></i>
                <div>
                    <div class="font-semibold">Add MCP Server</div>
                    <div class="text-xs text-white/80">Configure backend</div>
                </div>
            </a>
            <a href="/admin/users" class="bg-white/10 hover:bg-white/20 backdrop-blur-sm text-white rounded-lg p-4 transition-all hover:scale-105 flex items-center gap-3">
                <i data-lucide="user-plus" class="w-6 h-6"></i>
                <div>
                    <div class="font-semibold">Create User</div>
                    <div class="text-xs text-white/80">Add new user</div>
                </div>
            </a>
            <a href="/admin/mcp-activity" class="bg-white/10 hover:bg-white/20 backdrop-blur-sm text-white rounded-lg p-4 transition-all hover:scale-105 flex items-center gap-3">
                <i data-lucide="activity" class="w-6 h-6"></i>
                <div>
                    <div class="font-semibold">View Activity</div>
                    <div class="text-xs text-white/80">Real-time logs</div>
                </div>
            </a>
        </div>
    </div>

    <!-- MCP Stats Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <!-- MCP Requests (24h) -->
        <div class="bg-white rounded-xl shadow-sm p-6 border-l-4 border-blue-500 hover:shadow-md transition-shadow">
            <div class="flex items-center justify-between">
                <div class="flex-1">
                    <p class="text-sm font-medium text-gray-600">MCP Requests (24h)</p>
                    <p class="text-3xl font-bold text-gray-900 mt-2" x-text="mcpStats.requests24h || 0"></p>
                    <p class="text-xs text-gray-500 mt-1" x-text="mcpStats.requestsTrend || 'Loading...'"></p>
                </div>
                <div class="p-3 bg-blue-100 rounded-lg">
                    <i data-lucide="send" class="w-6 h-6 text-blue-600"></i>
                </div>
            </div>
        </div>

        <!-- Active Servers -->
        <div class="bg-white rounded-xl shadow-sm p-6 border-l-4 border-emerald-500 hover:shadow-md transition-shadow">
            <div class="flex items-center justify-between">
                <div class="flex-1">
                    <p class="text-sm font-medium text-gray-600">MCP Servers</p>
                    <p class="text-3xl font-bold text-gray-900 mt-2">
                        <span x-text="mcpStats.activeServers || 0" class="text-emerald-600"></span>
                        <span class="text-xl text-gray-400">/</span>
                        <span x-text="mcpStats.totalServers || 0" class="text-gray-400"></span>
                    </p>
                    <p class="text-xs text-gray-500 mt-1">Online / Total</p>
                </div>
                <div class="p-3 bg-emerald-100 rounded-lg">
                    <i data-lucide="server" class="w-6 h-6 text-emerald-600"></i>
                </div>
            </div>
        </div>

        <!-- Success Rate -->
        <div class="bg-white rounded-xl shadow-sm p-6 border-l-4 border-cyan-500 hover:shadow-md transition-shadow">
            <div class="flex items-center justify-between">
                <div class="flex-1">
                    <p class="text-sm font-medium text-gray-600">Success Rate</p>
                    <p class="text-3xl font-bold text-gray-900 mt-2" x-text="mcpStats.successRate || '0%'"></p>
                    <p class="text-xs text-gray-500 mt-1">Last 24 hours</p>
                </div>
                <div class="p-3 bg-cyan-100 rounded-lg">
                    <i data-lucide="check-circle" class="w-6 h-6 text-cyan-600"></i>
                </div>
            </div>
        </div>

        <!-- Avg Response Time -->
        <div class="bg-white rounded-xl shadow-sm p-6 border-l-4 border-orange-500 hover:shadow-md transition-shadow">
            <div class="flex items-center justify-between">
                <div class="flex-1">
                    <p class="text-sm font-medium text-gray-600">Avg Response</p>
                    <p class="text-3xl font-bold text-gray-900 mt-2" x-text="mcpStats.avgResponseTime || '0ms'"></p>
                    <p class="text-xs text-gray-500 mt-1">MCP requests</p>
                </div>
                <div class="p-3 bg-orange-100 rounded-lg">
                    <i data-lucide="timer" class="w-6 h-6 text-orange-600"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Token Warnings (if any) -->
    <div x-show="tokenWarnings.length > 0" class="mb-6">
        <div class="bg-gradient-to-r from-yellow-50 to-orange-50 border-l-4 border-yellow-400 rounded-lg shadow-sm p-5">
            <div class="flex items-start gap-3">
                <i data-lucide="alert-triangle" class="w-6 h-6 text-yellow-600"></i>
                <div class="flex-1">
                    <h3 class="text-lg font-bold text-yellow-900 mb-2">Token Expiration Warnings</h3>
                    <div class="space-y-2">
                        <template x-for="warning in tokenWarnings" :key="warning.id">
                            <div class="text-sm text-yellow-800">
                                <strong x-text="warning.name"></strong> - 
                                <span x-text="warning.message"></span>
                            </div>
                        </template>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
        <!-- MCP Servers Health -->
        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
            <div class="bg-gradient-to-r from-emerald-600 to-cyan-600 px-6 py-4 flex items-center gap-2 text-white">
                <i data-lucide="server" class="w-5 h-5"></i>
                <h2 class="text-lg font-semibold">MCP Servers Health</h2>
            </div>
            <div class="p-6">
                <div class="space-y-3" x-show="servers.length > 0">
                    <template x-for="server in servers.slice(0, 5)" :key="server.id">
                        <div class="p-4 bg-gray-50 rounded-lg border-l-4" 
                             :class="{
                                 'border-emerald-500': server.status === 'online',
                                 'border-red-500': server.status === 'error',
                                 'border-gray-400': server.status === 'offline'
                             }">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center gap-3">
                                    <i data-lucide="server" class="w-5 h-5" 
                                       :class="{
                                           'text-emerald-600': server.status === 'online',
                                           'text-red-600': server.status === 'error',
                                           'text-gray-400': server.status === 'offline'
                                       }"></i>
                                    <div>
                                        <div class="font-semibold text-gray-900" x-text="server.name"></div>
                                        <div class="text-xs text-gray-500" x-text="server.url"></div>
                                    </div>
                                </div>
                                <div class="flex items-center gap-2">
                                    <span class="px-2 py-1 rounded text-xs font-semibold"
                                          :class="{
                                              'bg-emerald-100 text-emerald-700': server.status === 'online',
                                              'bg-red-100 text-red-700': server.status === 'error',
                                              'bg-gray-100 text-gray-700': server.status === 'offline'
                                          }"
                                          x-text="server.status.toUpperCase()"></span>
                                    <span class="text-xs text-gray-500" x-show="server.tools_count" x-text="server.tools_count + ' tools'"></span>
                                </div>
                            </div>
                        </div>
                    </template>
                </div>
                <div x-show="servers.length > 5" class="text-center mt-4">
                    <a href="/admin/mcp-servers" class="text-blue-600 hover:underline text-sm">View all servers</a>
                </div>
                <div x-show="servers.length === 0" class="text-center py-8 text-gray-500">
                    <i data-lucide="inbox" class="w-12 h-12 mx-auto mb-2 text-gray-300"></i>
                    <p>No MCP servers configured</p>
                    <a href="/admin/mcp-servers" class="text-blue-600 hover:underline text-sm mt-2 inline-block">Add your first server</a>
                </div>
            </div>
        </div>

        <!-- Top Tools -->
        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
            <div class="bg-gradient-to-r from-purple-600 to-pink-600 px-6 py-4 flex items-center gap-2 text-white">
                <i data-lucide="wrench" class="w-5 h-5"></i>
                <h2 class="text-lg font-semibold">Top 5 Tools (24h)</h2>
            </div>
            <div class="p-6">
                <div class="space-y-3" x-show="topTools.length > 0">
                    <template x-for="(tool, index) in topTools" :key="tool.name">
                        <div class="flex items-center gap-3">
                            <div class="flex-shrink-0 w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center text-white font-bold text-sm"
                                 x-text="index + 1"></div>
                            <div class="flex-1 min-w-0">
                                <div class="font-medium text-gray-900 truncate" x-text="tool.name"></div>
                                <div class="text-xs text-gray-500" x-text="tool.server"></div>
                            </div>
                            <div class="text-right">
                                <div class="font-semibold text-gray-900" x-text="tool.count"></div>
                                <div class="text-xs text-gray-500">calls</div>
                            </div>
                        </div>
                    </template>
                </div>
                <div x-show="topTools.length === 0" class="text-center py-8 text-gray-500">
                    <i data-lucide="wrench" class="w-12 h-12 mx-auto mb-2 text-gray-300"></i>
                    <p>No tool usage yet</p>
                </div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Recent MCP Activity -->
        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
            <div class="bg-gradient-to-r from-blue-600 to-cyan-600 px-6 py-4 flex items-center justify-between text-white">
                <div class="flex items-center gap-2">
                    <i data-lucide="activity" class="w-5 h-5"></i>
                    <h2 class="text-lg font-semibold">Recent Activity</h2>
                </div>
                <a href="/admin/mcp-activity" class="text-xs text-white/80 hover:text-white">View all →</a>
            </div>
            <div class="divide-y divide-gray-100">
                <template x-for="(request, rIdx) in recentRequests" :key="rIdx">
                    <div class="p-4 hover:bg-gray-50 transition-colors">
                        <div class="flex items-start justify-between gap-4">
                            <div class="flex-1 min-w-0">
                                <div class="flex items-center gap-2 mb-1">
                                    <i data-lucide="check-circle" class="w-4 h-4" 
                                       :class="request.success ? 'text-green-600' : 'text-red-600'"></i>
                                    <span class="font-medium text-gray-900" x-text="request.method"></span>
                                    <span class="text-xs text-gray-500" x-show="request.tool_name">
                                        → <span x-text="request.tool_name"></span>
                                    </span>
                                </div>
                                <div class="text-xs text-gray-600 space-x-3">
                                    <span x-text="request.username"></span>
                                    <span x-show="request.server_name" x-text="'• ' + request.server_name"></span>
                                    <span x-show="request.response_time_ms" x-text="'• ' + request.response_time_ms + 'ms'"></span>
                                </div>
                            </div>
                            <div class="text-xs text-gray-500 whitespace-nowrap" x-text="formatTime(request.timestamp)"></div>
                        </div>
                    </div>
                </template>
                <div x-show="recentRequests.length === 0" class="p-8 text-center text-gray-500">
                    <i data-lucide="inbox" class="w-12 h-12 mx-auto mb-2 text-gray-300"></i>
                    <p>No recent activity in the last 2 hours</p>
                </div>
            </div>
        </div>

        <!-- MCP Auth Events -->
        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
            <div class="bg-gradient-to-r from-indigo-600 to-purple-600 px-6 py-4 flex items-center justify-between text-white">
                <div class="flex items-center gap-2">
                    <i data-lucide="shield-check" class="w-5 h-5"></i>
                    <h2 class="text-lg font-semibold">MCP Auth Events</h2>
                </div>
                <a href="/admin/logs" class="text-xs text-white/80 hover:text-white">View all →</a>
            </div>
            <div class="divide-y divide-gray-100">
                <template x-for="(event, eIdx) in mcpAuthEvents" :key="eIdx">
                    <div class="p-4 hover:bg-gray-50 transition-colors">
                        <div class="flex items-start justify-between gap-4">
                            <div class="flex-1 min-w-0">
                                <div class="flex items-center gap-2 mb-1">
                                    <i data-lucide="key-round" class="w-4 h-4" 
                                       :class="event.success ? 'text-green-600' : 'text-red-600'"></i>
                                    <span class="font-medium text-gray-900" x-text="event.event_type"></span>
                                </div>
                                <div class="text-xs text-gray-600 space-x-3">
                                    <span x-text="event.username || 'Unknown'"></span>
                                    <span x-show="event.details" x-text="'• ' + event.details"></span>
                                </div>
                            </div>
                            <div class="text-xs text-gray-500 whitespace-nowrap" x-text="formatTime(event.timestamp)"></div>
                        </div>
                    </div>
                </template>
                <div x-show="mcpAuthEvents.length === 0" class="p-8 text-center text-gray-500">
                    <i data-lucide="inbox" class="w-12 h-12 mx-auto mb-2 text-gray-300"></i>
                    <p>No recent MCP auth events</p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
    function dashboardManager() {
        return {
            loading: false,
            mcpStats: {
                requests24h: 0,
                requestsTrend: '',
                activeServers: 0,
                totalServers: 0,
                successRate: '0%',
                avgResponseTime: '0ms'
            },
            servers: [],
            topTools: [],
            recentRequests: [],
            mcpAuthEvents: [],
            tokenWarnings: [],
            autoRefreshInterval: null,
            
            init() {
                this.loadAll();
                // Auto-refresh every 15 seconds (pauses when tab hidden)
                this._poller = pollWhileVisible(() => this.loadAll(), 15000);
            },
            
            async loadAll() {
                this.loading = true;
                await Promise.all([
                    this.loadMCPStats(),
                    this.loadServers(),
                    this.loadTopTools(),
                    this.loadRecentRequests(),
                    this.loadMcpAuthEvents(),
                    this.loadTokenWarnings()
                ]);
                this.loading = false;
                lucide.createIcons();
            },
            
            async loadMCPStats() {
                try {
                    const response = await fetch('/admin/api/mcp-stats');
                    const data = await response.json();
                    
                    this.mcpStats.requests24h = data.requests_24h || 0;
                    this.mcpStats.requestsTrend = data.trend || '';
                    this.mcpStats.activeServers = data.active_servers || 0;
                    this.mcpStats.totalServers = data.total_servers || 0;
                    
                    const successRate = data.success_rate || 0;
                    this.mcpStats.successRate = successRate.toFixed(1) + '%';
                    
                    const avgTime = data.avg_response_time || 0;
                    this.mcpStats.avgResponseTime = Math.round(avgTime) + 'ms';
                } catch (error) {
                    console.error('Failed to load MCP stats:', error);
                }
            },
            
            async loadServers() {
                try {
                    const response = await fetch('/admin/api/mcp-servers');
                    const data = await response.json();
                    this.servers = data.servers || [];
                } catch (error) {
                    console.error('Failed to load servers:', error);
                }
            },
            
            async loadTopTools() {
                try {
                    const response = await fetch('/admin/api/mcp-stats?include_top_tools=true');
                    const data = await response.json();
                    this.topTools = (data.top_tools || []).slice(0, 5);
                } catch (error) {
                    console.error('Failed to load top tools:', error);
                }
            },
            
            async loadRecentRequests() {
                try {
                    const response = await fetch('/admin/api/mcp-requests?limit=10&last_seconds=7200');
                    const data = await response.json();
                    this.recentRequests = data.requests || [];
                } catch (error) {
                    console.error('Failed to load recent requests:', error);
                }
            },

            async loadMcpAuthEvents() {
                try {
                    const response = await fetch('/admin/api/mcp-auth-events?limit=8');
                    const data = await response.json();
                    this.mcpAuthEvents = data.events || [];
                } catch (error) {
                    console.error('Failed to load MCP auth events:', error);
                }
            },
            
            async loadTokenWarnings() {
                try {
                    const response = await fetch('/admin/api/mcp-servers/token-status');
                    const data = await response.json();
                    const servers = data.servers || [];
                    
                    this.tokenWarnings = servers.filter(s => {
                        const status = s.token_status?.status;
                        return status === 'warning' || status === 'expired';
                    }).map(s => ({
                        id: s.id,
                        name: s.name,
                        message: s.token_status?.status === 'expired' 
                            ? 'Token expired!' 
                            : `Token expires in ${s.token_status?.days_left} days`
                    }));
                } catch (error) {
                    console.error('Failed to load token warnings:', error);
                }
            },
            
            formatTime(timestamp) {
                const date = new Date(timestamp);
                const now = new Date();
                const diff = Math.floor((now - date) / 1000);
                
                if (diff < 60) return diff + 's ago';
                if (diff < 3600) return Math.floor(diff / 60) + 'm ago';
                if (diff < 86400) return Math.floor(diff / 3600) + 'h ago';
                return date.toLocaleDateString();
            }
        };
    }
</script>
{% endblock %}