{% extends "base.html" %}
{% import 'components/macros.html' as ui %}

{% block title %}Gvelo DOC{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/hil-pages/gvelo_doc/dashboard.css">
{% endblock %}
{% block content %}
<main class="shell">
    {% with messages = get_flashed_messages(with_categories=true) %}
        {% for category, message in messages %}
            <div class="flash {{ category }}">{{ message }}</div>
        {% endfor %}
    {% endwith %}

    <header class="topbar">
        <div>
            <div class="kicker">Autonomous Documentation Intelligence</div>
            <h1>Gvelo DOC</h1>
            <p class="muted">Deep UI explanation, button intelligence, workflow traceability, role-aware documentation, offline continuity knowledge, and continuous feature intelligence for Gvelo Enterprise Platform.</p>
        </div>
        <div class="actions hil-inline-7b3ac0aa84">
            <a class="secondary" href="/admin/agents/official-ip-archive">Official IP Archive</a>
            <a class="secondary" href="/admin/agents/ip-package">IP Package</a>
            <a class="secondary" href="/documentation">System Docs</a>
            <form method="post" action="/gvelo-doc/update">
                <button type="submit">Regenerate Gvelo DOC</button>
            </form>
        </div>
    </header>

    <section class="grid">
        <div class="panel metric"><span class="muted">Routes Mapped</span><strong>{{ snapshot.route_count }}</strong></div>
        <div class="panel metric"><span class="muted">UI Components</span><strong>{{ snapshot.component_count }}</strong></div>
        <div class="panel metric"><span class="muted">Logic Traces</span><strong>{{ snapshot.logic_count }}</strong></div>
    </section>

    <section class="panel hil-inline-d6f2af6e0a">
        <h2>Search Documentation Intelligence</h2>
        <div class="search">
            <input id="doc-search" placeholder="Search buttons, workflows, pages, inventory actions, sync behavior...">
            <div id="doc-results" class="muted">Type to search Gvelo DOC.</div>
        </div>
    </section>

    <section class="panel hil-inline-d6f2af6e0a">
        <h2>Reports</h2>
        <div class="actions">
            <a href="/gvelo-doc/report/index">System Index</a>
            <a href="/gvelo-doc/report/buttons">Button Intelligence</a>
            <a href="/gvelo-doc/report/workflows">Workflow Map</a>
            <a href="/gvelo-doc/report/changes">Change Report</a>
            <a href="/gvelo-doc/report/business-logic">Business Logic</a>
            <a href="/gvelo-doc/report/roles">Role Behavior</a>
            <a href="/gvelo-doc/report/offline">Offline Continuity</a>
            <a href="/gvelo-doc/report/walkthroughs">Walkthroughs</a>
            <a href="/gvelo-doc/report/screenshots">Visual Plan</a>
        </div>
        <div class="report-list">
            {% for report in snapshot.reports %}
            <div class="report-row">
                <div>
                    <strong>{{ report.name }}</strong>
                    <div class="muted">{{ report.path }} - {{ (report.size / 1024)|round(1) }} KB - {{ report.updated }}</div>
                </div>
            </div>
            {% endfor %}
        </div>
    </section>
</main>
<script>
const input = document.getElementById("doc-search");
const results = document.getElementById("doc-results");
let timer = null;
input.addEventListener("input", () => {
    clearTimeout(timer);
    const query = input.value.trim();
    if (!query) {
        results.textContent = "Type to search Gvelo DOC.";
        return;
    }
    timer = setTimeout(async () => {
        const response = await fetch(`/gvelo-doc/api/search?q=${encodeURIComponent(query)}`, {credentials: "same-origin"});
        const data = await response.json();
        results.innerHTML = (data.results || []).map((item) => (
            `<div class="result"><strong>${item.title}</strong><div>${item.type} - ${item.body.slice(0, 180)}</div></div>`
        )).join("") || "No matching documentation records.";
    }, 160);
});
</script>
{% endblock %}