{% extends "base.html" %}

{% block title %}Dashboard - Codomyrmex{% endblock %}

{% block content %}
<h1>Command Center
    <span id="dash-connection" class="connection-status connection-ok"
        style="float: right; font-size: 0.8rem; font-weight: 400;">
        <span class="status-dot"></span> <span id="dash-connection-text">Connected</span>
    </span>
</h1>

<!-- Top Row: Key Metrics -->
<section aria-label="System Metrics">
    <div class="dashboard-metrics">
        <div class="dash-metric">
            <span id="dm-status" class="dash-metric-value status-ok">{{ health.status_text|default('Operational')
                }}</span>
            <span class="dash-metric-label">System Status</span>
        </div>
        <div class="dash-metric">
            <span id="dm-modules" class="dash-metric-value">{{ system.module_count }}</span>
            <span class="dash-metric-label">Modules</span>
        </div>
        <div class="dash-metric">
            <span id="dm-agents" class="dash-metric-value">{{ system.agent_count }}</span>
            <span class="dash-metric-label">Agent Integrations</span>
        </div>
        <div class="dash-metric">
            <span id="dm-scripts" class="dash-metric-value">{{ scripts|length }}</span>
            <span class="dash-metric-label">Scripts</span>
        </div>
        <div class="dash-metric">
            <span id="dm-uptime" class="dash-metric-value">{{ health.uptime|default('--') }}</span>
            <span class="dash-metric-label">Uptime</span>
        </div>
        <div class="dash-metric">
            <span id="dm-environment" class="dash-metric-value">{{ system.environment }}</span>
            <span class="dash-metric-label">Environment</span>
        </div>
    </div>
</section>

<!-- Main Grid -->
<div class="dashboard-grid">
    <!-- Git Status -->
    <div class="card">
        <h2 class="card-title">Git Status
            <span id="dm-git-badge"
                class="status-badge {% if health.git.dirty_files == 0 %}active{% else %}running{% endif %}">
                {{ health.git.status }}
            </span>
        </h2>
        <p><strong>Branch:</strong> <code id="dm-git-branch">{{ health.git.branch }}</code></p>
        <p><strong>Commits:</strong> <span id="dm-git-commits">{{ health.git.commit_count }}</span></p>
        <p id="dm-git-last" style="font-size: 0.85rem; color: var(--text-secondary); margin-top: 0.5rem;">
            {{ health.git.last_commit }}
        </p>
    </div>

    <!-- Coverage Overview -->
    <div class="card">
        <h2 class="card-title">Coverage</h2>
        <div class="coverage-bars" style="margin-top: 0.5rem;">
            <div class="coverage-row">
                <span class="coverage-label">API Specs</span>
                <div id="dm-api-bar" class="coverage-bar" role="progressbar"
                    aria-valuenow="{{ health.modules.api_spec_pct }}" aria-valuemin="0" aria-valuemax="100"
                    aria-label="API Specs coverage">
                    <div class="coverage-fill"
                        style="width: {{ health.modules.api_spec_pct }}%; background: var(--success-color);"></div>
                </div>
                <span id="dm-api-pct" class="coverage-pct">{{ health.modules.api_spec_pct }}%</span>
            </div>
            <div class="coverage-row">
                <span class="coverage-label">Tests</span>
                <div id="dm-test-bar" class="coverage-bar" role="progressbar"
                    aria-valuenow="{{ health.modules.test_coverage_pct }}" aria-valuemin="0" aria-valuemax="100"
                    aria-label="Tests coverage">
                    <div class="coverage-fill"
                        style="width: {{ health.modules.test_coverage_pct }}%; background: var(--accent-color);"></div>
                </div>
                <span id="dm-test-pct" class="coverage-pct">{{ health.modules.test_coverage_pct }}%</span>
            </div>
            <div class="coverage-row">
                <span class="coverage-label">MCP</span>
                <div id="dm-mcp-bar" class="coverage-bar" role="progressbar"
                    aria-valuenow="{{ health.modules.mcp_spec_pct }}" aria-valuemin="0" aria-valuemax="100"
                    aria-label="MCP Specs coverage">
                    <div class="coverage-fill" style="width: {{ health.modules.mcp_spec_pct }}%; background: #8b5cf6;">
                    </div>
                </div>
                <span id="dm-mcp-pct" class="coverage-pct">{{ health.modules.mcp_spec_pct }}%</span>
            </div>
        </div>
    </div>

    <!-- MCP Server Status -->
    <div class="card" id="mcp-card">
        <h2 class="card-title">MCP Server
            <span id="mcp-badge" class="status-badge">Checking...</span>
        </h2>
        <div id="mcp-content">
            <p style="color: var(--text-secondary);">Probing localhost:8080...</p>
        </div>
    </div>

    <!-- PAI Awareness Summary -->
    <div class="card">
        <h2 class="card-title">PAI Awareness
            <a href="awareness.html"
                style="font-size: 0.75rem; font-weight: 400; color: var(--accent-color); text-decoration: none;">View
                All</a>
        </h2>
        <div id="pai-summary">
            {% if awareness and awareness.metrics %}
            <div class="pai-stats">
                <div class="pai-stat">
                    <span class="pai-stat-value">{{ awareness.metrics.mission_count|default(0) }}</span>
                    <span class="pai-stat-label">Missions</span>
                </div>
                <div class="pai-stat">
                    <span class="pai-stat-value">{{ awareness.metrics.project_count|default(0) }}</span>
                    <span class="pai-stat-label">Projects</span>
                </div>
                <div class="pai-stat">
                    <span class="pai-stat-value">{{ awareness.metrics.completed_tasks|default(0) }}/{{
                        awareness.metrics.total_tasks|default(0) }}</span>
                    <span class="pai-stat-label">Tasks Done</span>
                </div>
                <div class="pai-stat">
                    <span class="pai-stat-value" style="color: var(--accent-color);">{{
                        awareness.metrics.overall_completion|default(0) }}%</span>
                    <span class="pai-stat-label">Completion</span>
                </div>
            </div>
            {% else %}
            <p style="color: var(--text-secondary); font-size: 0.85rem;">PAI data unavailable</p>
            {% endif %}
        </div>
    </div>

    <!-- Architecture Layers -->
    <div class="card">
        <h2 class="card-title">Architecture</h2>
        <div class="arch-layers-compact">
            {% for layer in health.architecture_layers %}
            <div class="arch-row">
                <span class="arch-dot" style="background: {{ layer.color }};"></span>
                <span class="arch-name">{{ layer.name }}</span>
                <span class="arch-count">{{ layer.modules|length }}</span>
                <div class="arch-bar">
                    <div class="arch-bar-fill"
                        style="width: {% if system.module_count > 0 %}{{ (layer.modules|length / system.module_count * 100)|round }}{% else %}0{% endif %}%; background: {{ layer.color }};">
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>

    <!-- Quick Navigation -->
    <div class="card">
        <h2 class="card-title">Quick Actions</h2>
        <div class="quick-actions">
            <a href="health.html" class="quick-btn">System Health</a>
            <a href="modules.html" class="quick-btn">Browse Modules</a>
            <a href="agents.html" class="quick-btn">AI Agents</a>
            <a href="scripts.html" class="quick-btn">Run Scripts</a>
            <a href="docs.html" class="quick-btn">Documentation</a>
            <a href="config.html" class="quick-btn">Edit Config</a>
            <button id="refresh-data-btn" class="quick-btn"
                style="border: none; cursor: pointer; font-family: inherit; font-size: inherit;">Refresh Data</button>
        </div>
    </div>
</div>

<p id="dash-last-updated"
    style="text-align: right; font-size: 0.75rem; color: var(--text-secondary); margin-top: 1rem;"></p>

<style>
    .dashboard-metrics {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 1rem;
        margin-bottom: 2rem;
    }

    .dash-metric {
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 10px;
        padding: 1rem;
        text-align: center;
    }

    .dash-metric-value {
        display: block;
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 0.25rem;
    }

    .dash-metric-label {
        font-size: 0.75rem;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .dashboard-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .coverage-bars {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
    }

    .coverage-row {
        display: flex;
        align-items: center;
        gap: 0.6rem;
    }

    .coverage-label {
        width: 70px;
        font-size: 0.8rem;
        color: var(--text-secondary);
    }

    .coverage-bar {
        flex: 1;
        height: 6px;
        background: var(--bg-tertiary);
        border-radius: 3px;
        overflow: hidden;
    }

    .coverage-fill {
        height: 100%;
        border-radius: 3px;
        transition: width 0.5s ease;
    }

    .coverage-pct {
        width: 45px;
        text-align: right;
        font-size: 0.8rem;
        font-weight: 600;
        font-family: 'Fira Code', monospace;
    }

    .arch-layers-compact {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-top: 0.5rem;
    }

    .arch-row {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .arch-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .arch-name {
        font-size: 0.85rem;
        width: 85px;
    }

    .arch-count {
        font-size: 0.8rem;
        color: var(--text-secondary);
        width: 25px;
        text-align: right;
        font-family: 'Fira Code', monospace;
    }

    .arch-bar {
        flex: 1;
        height: 5px;
        background: var(--bg-tertiary);
        border-radius: 3px;
        overflow: hidden;
    }

    .arch-bar-fill {
        height: 100%;
        border-radius: 3px;
    }

    .quick-actions {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .quick-btn {
        display: block;
        text-align: center;
        padding: 0.6rem;
        background: var(--bg-tertiary);
        border-radius: 6px;
        color: var(--text-secondary);
        text-decoration: none;
        font-size: 0.85rem;
        transition: var(--transition);
    }

    .quick-btn:hover {
        background: var(--accent-color);
        color: white;
    }

    .connection-status {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.2rem 0.6rem;
        border-radius: 12px;
    }

    .connection-ok {
        color: var(--success-color);
    }

    .connection-err {
        color: var(--error-color, #ef4444);
    }

    .status-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: currentColor;
        display: inline-block;
    }

    .pai-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
        margin-top: 0.5rem;
    }

    .pai-stat {
        text-align: center;
        padding: 0.4rem;
        background: var(--bg-tertiary);
        border-radius: 6px;
    }

    .pai-stat-value {
        display: block;
        font-size: 1.1rem;
        font-weight: 700;
        font-family: 'Fira Code', monospace;
    }

    .pai-stat-label {
        font-size: 0.7rem;
        color: var(--text-secondary);
        text-transform: uppercase;
    }

    .mcp-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
        margin-top: 0.5rem;
    }

    .mcp-stat {
        text-align: center;
        padding: 0.4rem;
        background: var(--bg-tertiary);
        border-radius: 6px;
    }

    .mcp-stat-value {
        display: block;
        font-size: 1.1rem;
        font-weight: 700;
        font-family: 'Fira Code', monospace;
    }

    .mcp-stat-label {
        font-size: 0.7rem;
        color: var(--text-secondary);
        text-transform: uppercase;
    }

    .mcp-link {
        display: block;
        margin-top: 0.5rem;
        text-align: center;
        font-size: 0.8rem;
        color: var(--accent-color);
        text-decoration: none;
    }

    .mcp-link:hover {
        text-decoration: underline;
    }

    @media (max-width: 900px) {
        .dashboard-metrics {
            grid-template-columns: repeat(3, 1fr);
        }

        .dashboard-grid {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 600px) {
        .dashboard-metrics {
            grid-template-columns: repeat(2, 1fr);
        }
    }
</style>

<script>
    (function () {
        let failCount = 0;

        function updateBar(barId, pctId, value) {
            const bar = document.getElementById(barId);
            const pct = document.getElementById(pctId);
            if (bar) {
                const fill = bar.querySelector('.coverage-fill');
                if (fill) fill.style.width = value + '%';
                bar.setAttribute('aria-valuenow', value);
            }
            if (pct) pct.textContent = value + '%';
        }

        function setConnection(ok) {
            const el = document.getElementById('dash-connection');
            const txt = document.getElementById('dash-connection-text');
            if (el) el.className = 'connection-status ' + (ok ? 'connection-ok' : 'connection-err');
            if (txt) txt.textContent = ok ? 'Connected' : 'Connection lost';
        }

        async function refreshDashboard(data = null) {
            try {
                if (!data) {
                    const resp = await fetch('/api/health');
                    data = await resp.json();
                }
                failCount = 0;
                setConnection(true);

                // Update metrics
                const statusEl = document.getElementById('dm-status');
                if (statusEl) { statusEl.textContent = data.status_text; statusEl.className = 'dash-metric-value status-' + data.status_class; }

                const modulesEl = document.getElementById('dm-modules');
                if (modulesEl && data.modules) modulesEl.textContent = data.modules.total;

                const uptimeEl = document.getElementById('dm-uptime');
                if (uptimeEl) uptimeEl.textContent = data.uptime;

                // Git
                const branchEl = document.getElementById('dm-git-branch');
                if (branchEl && data.git) branchEl.textContent = data.git.branch;
                const commitsEl = document.getElementById('dm-git-commits');
                if (commitsEl && data.git) commitsEl.textContent = data.git.commit_count;
                const gitBadge = document.getElementById('dm-git-badge');
                if (gitBadge && data.git) {
                    gitBadge.textContent = data.git.status;
                    gitBadge.className = 'status-badge ' + (data.git.dirty_files === 0 ? 'active' : 'running');
                }
                const gitLast = document.getElementById('dm-git-last');
                if (gitLast && data.git) gitLast.textContent = data.git.last_commit;

                // Coverage
                if (data.modules) {
                    updateBar('dm-api-bar', 'dm-api-pct', data.modules.api_spec_pct);
                    updateBar('dm-test-bar', 'dm-test-pct', data.modules.test_coverage_pct);
                    updateBar('dm-mcp-bar', 'dm-mcp-pct', data.modules.mcp_spec_pct);
                }

                // Timestamp
                const ts = document.getElementById('dash-last-updated');
                if (ts) ts.textContent = 'Last updated: ' + new Date().toLocaleTimeString();

            } catch (e) {
                failCount++;
                if (failCount >= 2) setConnection(false);
            }
        }

        async function probeMCP() {
            const badge = document.getElementById('mcp-badge');
            const content = document.getElementById('mcp-content');
            try {
                const resp = await fetch('http://localhost:8080/health', { signal: AbortSignal.timeout(3000) });
                const data = await resp.json();
                if (data.status === 'ok') {
                    badge.textContent = 'Online';
                    badge.className = 'status-badge active';
                    content.innerHTML =
                        '<div class="mcp-stats">' +
                        '<div class="mcp-stat"><span class="mcp-stat-value">' + data.tool_count + '</span><span class="mcp-stat-label">Tools</span></div>' +
                        '<div class="mcp-stat"><span class="mcp-stat-value">' + data.resource_count + '</span><span class="mcp-stat-label">Resources</span></div>' +
                        '<div class="mcp-stat"><span class="mcp-stat-value">' + data.prompt_count + '</span><span class="mcp-stat-label">Prompts</span></div>' +
                        '</div>' +
                        '<a href="http://localhost:8080/" target="_blank" class="mcp-link">Open MCP Dashboard &rarr;</a>';
                } else {
                    badge.textContent = 'Error';
                    badge.className = 'status-badge running';
                    content.innerHTML = '<p style="color: var(--text-secondary); font-size: 0.85rem;">Server returned non-ok status</p>';
                }
            } catch (e) {
                badge.textContent = 'Offline';
                badge.className = 'status-badge';
                content.innerHTML = '<p style="color: var(--text-secondary); font-size: 0.85rem;">MCP server not running on port 8080</p>' +
                    '<p style="font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.5rem;"><code>uv run python scripts/model_context_protocol/run_mcp_server.py --transport http --port 8080</code></p>';
            }
        }

        function initWebSocket() {
            const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
            const ws = new WebSocket(wsProtocol + '//' + window.location.hostname + ':8890');

            ws.onopen = function () {
                setConnection(true);
                failCount = 0;
            };

            ws.onmessage = function (event) {
                try {
                    const payload = JSON.parse(event.data);
                    if (payload.type === 'update' && payload.health) {
                        refreshDashboard(payload.health);
                    }
                } catch (e) {
                    console.error("WS format error:", e);
                }
            };

            ws.onclose = function () {
                setConnection(false);
                setTimeout(initWebSocket, 5000);
            };
        }

        // Initial load + WebSocket setup
        refreshDashboard();
        probeMCP();
        initWebSocket();
        setInterval(probeMCP, 30000);
    })();
</script>
{% endblock %}