{% extends "base.html" %}

{% block title %}Dashboard - Context7 Docs{% endblock %}

{% block content %}
<h1>Dashboard</h1>

<!-- Status Cards -->
<div class="status-cards">
    <div class="status-card" style="{% if health.status == 'ok' %}border-left-color: #00c467{% else %}border-left-color: #f53800{% endif %}">
        <h3>Docs API Service</h3>
        {% if health.status and health.status == 'ok' %}
        <p style="color: #00c467;"><strong>Status:</strong> Online ✓</p>
        {% else %}
        <p style="color: #f53800;"><strong>Status:</strong> {% if health.status == 'error' %}Error{% else %}Offline{% endif %}</p>
        {% endif %}
    </div>

    <div class="status-card">
        <h3>Vectors Stored</h3>
        <p>{{ vectors|default(0) }}</p>
    </div>

    <div class="status-card">
        <h3>Libraries Registered</h3>
        <p>{{ libraries|length }}</p>
    </div>
</div>

<!-- Recent Messages -->
{% if libraries and libraries|length > 0 %}
<div class="message-box" style="background: #e8f4fd;">
    <strong>Libraries:</strong> {{ escapeHtml(libraries) }}
</div>
{% endif %}

<!-- Action Buttons -->
<div class="action-buttons">
    <form method="post" action="/actions/ingest-all" style="display: inline;">
        <button type="submit" name="ingest-all" class="btn btn-primary">
            🔄 Ingest All Libraries
        </button>
    </form>

    <form method="post" action="/actions/sync-sources" style="display: inline;">
        <input type="hidden" name="override" value="false">
        <button type="submit" name="sync-sources" class="btn btn-secondary">
            📦 Sync Git Sources
        </button>
    </form>
</div>

<!-- Links -->
<div class="links-section">
    <h2>Navigate to Other Pages</h2>
    <a href="/libraries" style="display: inline-block; margin-right: 15px;">View Libraries →</a>
    <a href="/upload" style="display: inline-block; margin-right: 15px;">Upload Files →</a>
    <a href="/search" style="display: inline-block; margin-right: 15px;">Search Docs →</a>
    <a href="/sources" style="display: inline-block;">Git Sources →</a>
</div>

<!-- Script for health refresh on reload -->
<script>
// On page reload, re-fetch and update status if needed
document.addEventListener("DOMContentLoaded", async function() {
    try {
        const api = window.docsApiClient;
        
        // Refresh health status from server-rendered data
        document.querySelector('.status-cards .status-card:first-of-type')?.classList.remove('error');
        const newHealth = await api.get("/health");
        
        if (newHealth.status === 'ok') {
            document.querySelector('.status-cards .status-card:first-of-type')?.querySelector('p')?.classList.add('online');
        } else {
            document.querySelector('.status-cards .status-card:first-of-type')?.querySelector('p')?.classList.add('error');
        }
    } catch (err) {
        console.log('Health refresh skipped:', err);
    }
});
</script>
{% endblock %}