<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MOXIE Admin</title>
    <link rel="stylesheet" href="/{{ settings.admin_path }}/static/admin.css">
</head>
<body>
    <nav class="navbar">
        <div class="nav-brand">MOXIE Admin</div>
        <div class="nav-links">
            <a href="/{{ settings.admin_path }}/">Dashboard</a>
            <a href="/{{ settings.admin_path }}/endpoints">Endpoints</a>
            <a href="/{{ settings.admin_path }}/documents">Documents</a>
            <a href="/{{ settings.admin_path }}/comfyui">ComfyUI</a>
        </div>
    </nav>

    <main class="container">
        <h1>Dashboard</h1>
        
        <div class="status-grid">
            <div class="status-card" id="ollama-status">
                <h3>Ollama</h3>
                <span class="status-indicator checking">Checking...</span>
            </div>
            
            <div class="status-card" id="comfyui-status">
                <h3>ComfyUI</h3>
                <span class="status-indicator checking">Checking...</span>
            </div>
            
            <div class="status-card">
                <h3>Documents</h3>
                <span class="status-value" id="doc-count">-</span>
            </div>
            
            <div class="status-card">
                <h3>Chunks</h3>
                <span class="status-value" id="chunk-count">-</span>
            </div>
        </div>

        <div class="info-section">
            <h2>Quick Start</h2>
            <ol>
                <li>Configure your API endpoints in <a href="/{{ settings.admin_path }}/endpoints">Endpoints</a></li>
                <li>Upload documents in <a href="/{{ settings.admin_path }}/documents">Documents</a></li>
                <li>Configure ComfyUI workflows in <a href="/{{ settings.admin_path }}/comfyui">ComfyUI</a></li>
                <li>Connect open-webui to <code>http://localhost:8000/v1</code></li>
            </ol>
        </div>

        <div class="info-section">
            <h2>API Configuration</h2>
            <p>Configure open-webui to use this endpoint:</p>
            <code>Base URL: http://localhost:8000/v1</code>
            <p>No API key required (leave blank)</p>
        </div>
    </main>

    <script>
        async function loadStatus() {
            try {
                const response = await fetch('/{{ settings.admin_path }}/status');
                const data = await response.json();
                
                // Update Ollama status
                const ollamaEl = document.querySelector('#ollama-status .status-indicator');
                ollamaEl.textContent = data.ollama;
                ollamaEl.className = 'status-indicator ' + data.ollama;
                
                // Update ComfyUI status
                const comfyuiEl = document.querySelector('#comfyui-status .status-indicator');
                comfyuiEl.textContent = data.comfyui;
                comfyuiEl.className = 'status-indicator ' + data.comfyui;
                
                // Update counts
                document.getElementById('doc-count').textContent = data.documents_count;
                document.getElementById('chunk-count').textContent = data.chunks_count;
            } catch (error) {
                console.error('Failed to load status:', error);
            }
        }
        
        loadStatus();
        setInterval(loadStatus, 30000);  // Refresh every 30 seconds
    </script>
</body>
</html>
