{% extends "base.html" %}

{% block content %}
<div class="p-6">
    <!-- Row 1: Stat Cards -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        <!-- Agents -->
        <a href="/agents" class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-5 hover:shadow-md hover:border-indigo-300 transition-all no-underline">
            <div class="flex items-center gap-3 mb-2">
                <div class="w-10 h-10 rounded-full bg-indigo-100 dark:bg-indigo-900/40 flex items-center justify-center flex-shrink-0">
                    <svg class="w-5 h-5 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                </div>
                <div>
                    <div class="text-2xl font-bold text-gray-800 dark:text-gray-100 skeleton-value" id="stat-agent-count"></div>
                    <div class="text-xs text-gray-500 dark:text-gray-400">Total agents</div>
                </div>
            </div>
        </a>

        <!-- Channels -->
        <a href="/agents" class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-5 hover:shadow-md hover:border-purple-300 transition-all no-underline">
            <div class="flex items-center gap-3 mb-2">
                <div class="w-10 h-10 rounded-full bg-purple-100 dark:bg-purple-900/40 flex items-center justify-center flex-shrink-0">
                    <svg class="w-5 h-5 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.858 15.355-5.858 21.213 0"/></svg>
                </div>
                <div>
                    <div class="text-2xl font-bold text-gray-800 dark:text-gray-100 skeleton-value" id="stat-active-channel-count"></div><span class="text-sm font-normal text-gray-400 dark:text-gray-500">/<span class="skeleton-value" id="stat-channel-count"></span></span>
                    <div class="text-xs text-gray-500 dark:text-gray-400">Active channels</div>
                </div>
            </div>
        </a>

        <!-- Conversations -->
        <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-5">
            <div class="flex items-center gap-3 mb-2">
                <div class="w-10 h-10 rounded-full bg-green-100 dark:bg-green-900/40 flex items-center justify-center flex-shrink-0">
                    <svg class="w-5 h-5 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
                </div>
                <div>
                    <div class="text-2xl font-bold text-gray-800 dark:text-gray-100 skeleton-value" id="stat-session-count"></div>
                    <div class="text-xs text-gray-500 dark:text-gray-400">Total conversations</div>
                </div>
            </div>
        </div>

        <!-- Evaluations -->
        <a href="/history" class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-5 hover:shadow-md hover:border-amber-300 transition-all no-underline">
            <div class="flex items-center gap-3 mb-2">
                <div class="w-10 h-10 rounded-full bg-amber-100 dark:bg-amber-900/40 flex items-center justify-center flex-shrink-0">
                    <svg class="w-5 h-5 text-amber-600 dark:text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
                </div>
                <div>
                    <div class="text-2xl font-bold text-gray-800 dark:text-gray-100 skeleton-value" id="stat-eval-run-count"></div>
                    <div class="text-xs text-gray-500 dark:text-gray-400 skeleton-value" id="stat-latest-eval-score"></div>
                </div>
            </div>
        </a>
    </div>

    <!-- Row 2: Skills, Plugins, Tools, Scheduler, [Kanban] -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        <!-- Skills & Skillsets -->
        <a href="/skills" class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-5 hover:shadow-md hover:border-teal-300 transition-all no-underline">
            <div class="flex items-center gap-3 mb-2">
                <div class="w-10 h-10 rounded-full bg-teal-100 dark:bg-teal-900/40 flex items-center justify-center flex-shrink-0">
                    <svg class="w-5 h-5 text-teal-600 dark:text-teal-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"/></svg>
                </div>
                <div>
                    <div class="text-2xl font-bold text-gray-800 dark:text-gray-100 skeleton-value" id="stat-skill-enabled"></div><span class="text-sm font-normal text-gray-400 dark:text-gray-500">/<span class="skeleton-value" id="stat-skill-total"></span></span>
                    <div class="text-xs text-gray-500 dark:text-gray-400 skeleton-value" id="stat-skill-skillsets"></div>
                </div>
            </div>
        </a>

        <!-- Plugins -->
        <a href="/plugins" class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-5 hover:shadow-md hover:border-violet-300 transition-all no-underline">
            <div class="flex items-center gap-3 mb-2">
                <div class="w-10 h-10 rounded-full bg-violet-100 dark:bg-violet-900/40 flex items-center justify-center flex-shrink-0">
                    <svg class="w-5 h-5 text-violet-600 dark:text-violet-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z"/></svg>
                </div>
                <div>
                    <div class="text-2xl font-bold text-gray-800 dark:text-gray-100 skeleton-value" id="stat-plugin-enabled"></div><span class="text-sm font-normal text-gray-400 dark:text-gray-500">/<span class="skeleton-value" id="stat-plugin-total"></span></span>
                    <div class="text-xs text-gray-500 dark:text-gray-400">Active plugins</div>
                </div>
            </div>
        </a>

        <!-- Tools -->
        <a href="/system" class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-5 hover:shadow-md hover:border-orange-300 transition-all no-underline">
            <div class="flex items-center gap-3 mb-2">
                <div class="w-10 h-10 rounded-full bg-orange-100 dark:bg-orange-900/40 flex items-center justify-center flex-shrink-0">
                    <svg class="w-5 h-5 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                </div>
                <div>
                    <div class="text-2xl font-bold text-gray-800 dark:text-gray-100 skeleton-value" id="stat-tool-count"></div>
                    <div class="text-xs text-gray-500 dark:text-gray-400">Registered tools</div>
                </div>
            </div>
        </a>

        <!-- Scheduler -->
        <a href="/scheduler" class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-5 hover:shadow-md hover:border-blue-300 transition-all no-underline">
            <div class="flex items-center gap-3 mb-2">
                <div class="w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-900/40 flex items-center justify-center flex-shrink-0">
                    <svg class="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                </div>
                <div>
                    <div class="text-2xl font-bold text-gray-800 dark:text-gray-100 skeleton-value" id="stat-schedule-active"></div><span class="text-sm font-normal text-gray-400 dark:text-gray-500">/<span class="skeleton-value" id="stat-schedule-total"></span></span>
                    <div class="text-xs text-gray-500 dark:text-gray-400">Active schedules</div>
                </div>
            </div>
        </a>

        <!-- Plugin feature cards (dynamically rendered by JS) -->
        <div id="plugin-feature-cards" class="contents"></div>
    </div>

    <!-- Row 3: Agents (1/3) + Quick Actions (2/3) -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-6">
        <!-- Agents -->
        <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
            <div class="flex justify-between items-center p-5 border-b border-gray-100 dark:border-gray-700">
                <h3 class="text-base font-semibold text-gray-800 dark:text-gray-100 m-0">Agents</h3>
                <a href="/agents" class="bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-lg text-xs font-medium transition-colors no-underline">+ New Agent</a>
            </div>
            <div id="agent-list" class="divide-y divide-gray-50 dark:divide-gray-700" style="display:none"></div>
            <div id="agent-empty" class="divide-y divide-gray-50 dark:divide-gray-700" style="display:block">
                <div class="flex items-center gap-3 p-4">
                    <div class="skeleton-circle w-8 h-8"></div>
                    <div class="flex-1 space-y-2">
                        <div class="skeleton-line w-2/3"></div>
                        <div class="skeleton-line w-1/2"></div>
                    </div>
                </div>
                <div class="flex items-center gap-3 p-4">
                    <div class="skeleton-circle w-8 h-8"></div>
                    <div class="flex-1 space-y-2">
                        <div class="skeleton-line w-3/4"></div>
                        <div class="skeleton-line w-2/5"></div>
                    </div>
                </div>
                <div class="flex items-center gap-3 p-4">
                    <div class="skeleton-circle w-8 h-8"></div>
                    <div class="flex-1 space-y-2">
                        <div class="skeleton-line w-1/2"></div>
                        <div class="skeleton-line w-3/5"></div>
                    </div>
                </div>
                <div class="flex items-center gap-3 p-4">
                    <div class="skeleton-circle w-8 h-8"></div>
                    <div class="flex-1 space-y-2">
                        <div class="skeleton-line w-2/3"></div>
                        <div class="skeleton-line w-1/3"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Plugin Cards Container (dynamically rendered by JS) -->
        <div id="plugin-cards-container" class="contents"></div>

        <!-- Quick Actions -->
        <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 lg:col-span-2" id="quick-actions-card">
            <div class="p-5 border-b border-gray-100 dark:border-gray-700">
                <h3 class="text-base font-semibold text-gray-800 dark:text-gray-100 m-0">Quick Actions</h3>
            </div>
            <div class="p-4">
                <div class="flex flex-wrap gap-3">
                    <a href="/agents" class="flex items-center gap-2 px-4 py-2 rounded-lg bg-indigo-50 hover:bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:hover:bg-indigo-900/50 dark:text-indigo-300 transition-colors no-underline text-sm font-medium">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                        Create Agent
                    </a>
                    <a href="/evaluate" class="flex items-center gap-2 px-4 py-2 rounded-lg bg-amber-50 hover:bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:hover:bg-amber-900/50 dark:text-amber-300 transition-colors no-underline text-sm font-medium">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        Run Evaluation
                    </a>
                    <a href="/system" class="flex items-center gap-2 px-4 py-2 rounded-lg bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 transition-colors no-underline text-sm font-medium">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                        Manage System
                    </a>
                    <a href="/history" class="flex items-center gap-2 px-4 py-2 rounded-lg bg-green-50 hover:bg-green-100 text-green-700 dark:bg-green-900/30 dark:hover:bg-green-900/50 dark:text-green-300 transition-colors no-underline text-sm font-medium">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        View History
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Row 4: Model Leaderboard + Recent Evaluations + Model Distribution -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
        <!-- Model Leaderboard -->
        <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
            <div class="p-5 border-b border-gray-100 dark:border-gray-700">
                <h3 class="text-base font-semibold text-gray-800 dark:text-gray-100 m-0">Model Leaderboard</h3>
            </div>
            <div id="leaderboard-list" class="divide-y divide-gray-50 dark:divide-gray-700" style="display:none"></div>
            <div id="leaderboard-empty" class="divide-y divide-gray-50 dark:divide-gray-700" style="display:block">
                <div class="flex items-center gap-3 p-4">
                    <div class="skeleton-circle w-7 h-7"></div>
                    <div class="flex-1 space-y-2">
                        <div class="skeleton-line w-3/4"></div>
                        <div class="skeleton-line w-1/3"></div>
                    </div>
                    <div class="skeleton-line w-12 flex-shrink-0" style="height:1.25rem;border-radius:9999px"></div>
                </div>
                <div class="flex items-center gap-3 p-4">
                    <div class="skeleton-circle w-7 h-7"></div>
                    <div class="flex-1 space-y-2">
                        <div class="skeleton-line w-2/3"></div>
                        <div class="skeleton-line w-1/4"></div>
                    </div>
                    <div class="skeleton-line w-12 flex-shrink-0" style="height:1.25rem;border-radius:9999px"></div>
                </div>
                <div class="flex items-center gap-3 p-4">
                    <div class="skeleton-circle w-7 h-7"></div>
                    <div class="flex-1 space-y-2">
                        <div class="skeleton-line w-1/2"></div>
                        <div class="skeleton-line w-2/5"></div>
                    </div>
                    <div class="skeleton-line w-12 flex-shrink-0" style="height:1.25rem;border-radius:9999px"></div>
                </div>
                <div class="flex items-center gap-3 p-4">
                    <div class="skeleton-circle w-7 h-7"></div>
                    <div class="flex-1 space-y-2">
                        <div class="skeleton-line w-3/5"></div>
                        <div class="skeleton-line w-1/3"></div>
                    </div>
                    <div class="skeleton-line w-12 flex-shrink-0" style="height:1.25rem;border-radius:9999px"></div>
                </div>
            </div>
        </div>

        <!-- Recent Evaluations -->
        <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
            <div class="p-5 border-b border-gray-100 dark:border-gray-700">
                <h3 class="text-base font-semibold text-gray-800 dark:text-gray-100 m-0">Recent Evaluations</h3>
            </div>
            <div id="recent-runs-list" class="divide-y divide-gray-50 dark:divide-gray-700" style="display:none"></div>
            <div id="recent-runs-empty" class="divide-y divide-gray-50 dark:divide-gray-700" style="display:block">
                <div class="flex items-center justify-between p-4">
                    <div class="flex-1 space-y-2 mr-3">
                        <div class="skeleton-line w-3/4"></div>
                        <div class="skeleton-line w-1/2"></div>
                    </div>
                    <div class="skeleton-line w-12 flex-shrink-0" style="height:1.25rem;border-radius:9999px"></div>
                </div>
                <div class="flex items-center justify-between p-4">
                    <div class="flex-1 space-y-2 mr-3">
                        <div class="skeleton-line w-2/3"></div>
                        <div class="skeleton-line w-2/5"></div>
                    </div>
                    <div class="skeleton-line w-12 flex-shrink-0" style="height:1.25rem;border-radius:9999px"></div>
                </div>
                <div class="flex items-center justify-between p-4">
                    <div class="flex-1 space-y-2 mr-3">
                        <div class="skeleton-line w-1/2"></div>
                        <div class="skeleton-line w-1/3"></div>
                    </div>
                    <div class="skeleton-line w-12 flex-shrink-0" style="height:1.25rem;border-radius:9999px"></div>
                </div>
                <div class="flex items-center justify-between p-4">
                    <div class="flex-1 space-y-2 mr-3">
                        <div class="skeleton-line w-3/5"></div>
                        <div class="skeleton-line w-2/5"></div>
                    </div>
                    <div class="skeleton-line w-12 flex-shrink-0" style="height:1.25rem;border-radius:9999px"></div>
                </div>
            </div>
        </div>

        <!-- Model Distribution -->
        <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
            <div class="p-5 border-b border-gray-100 dark:border-gray-700">
                <h3 class="text-base font-semibold text-gray-800 dark:text-gray-100 m-0">Model Distribution</h3>
            </div>
            <div id="model-usage-list" class="p-4 space-y-3" style="display:none"></div>
            <div id="model-usage-empty" class="p-4 space-y-4" style="display:block">
                <div>
                    <div class="flex justify-between items-center mb-1.5">
                        <div class="skeleton-line w-2/3" style="height:0.75rem"></div>
                        <div class="skeleton-line w-10 ml-2" style="height:0.75rem"></div>
                    </div>
                    <div class="skeleton-line w-full" style="height:0.5rem"></div>
                </div>
                <div>
                    <div class="flex justify-between items-center mb-1.5">
                        <div class="skeleton-line w-1/2" style="height:0.75rem"></div>
                        <div class="skeleton-line w-8 ml-2" style="height:0.75rem"></div>
                    </div>
                    <div class="skeleton-line w-full" style="height:0.5rem"></div>
                </div>
                <div>
                    <div class="flex justify-between items-center mb-1.5">
                        <div class="skeleton-line w-3/5" style="height:0.75rem"></div>
                        <div class="skeleton-line w-12 ml-2" style="height:0.75rem"></div>
                    </div>
                    <div class="skeleton-line w-full" style="height:0.5rem"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="{{ url_for('static', filename='js/dashboard.js') }}?v=6"></script>
{% endblock %}