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

{% block title %}Demo AI Agent - Gvelo{% endblock %}
{% block body_class %}demo-body{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/demo/demo.css">
{% endblock %}
{% block content %}
<main class="agent-shell">
    <header class="agent-hero">
        <div>
            <a class="demo-wordmark" href="/experience">Gvelo Experience Center</a>
            <p class="eyebrow">Demo intelligence agent</p>
            <h1>Keep the product tour aligned as Gvelo Enterprise Platform grows.</h1>
            <p>
                The agent scans safe Flask pages, updates a demo-only feature catalog, and recommends new walkthrough coverage when modules are added.
            </p>
        </div>
        <div class="agent-actions">
            <form method="post" action="/demo/agent/run">
                <button class="solid-button" type="submit">Run Agent Now</button>
            </form>
            <form method="post" action="/demo/reports/generate">
                <button class="ghost-button" type="submit">Generate Reports</button>
            </form>
        </div>
    </header>

    <section class="agent-grid">
        <article class="metric-card">
            <span>Safe Pages</span>
            <strong>{{ report.report.route_count if report else 0 }}</strong>
        </article>
        <article class="metric-card">
            <span>Covered</span>
            <strong>{{ report.report.covered_count if report else 0 }}</strong>
        </article>
        <article class="metric-card">
            <span>Suggested</span>
            <strong>{{ report.report.suggested_count if report else 0 }}</strong>
        </article>
        <article class="metric-card">
            <span>Conversion</span>
            <strong>{{ report.report.conversion_count if report else 0 }}</strong>
        </article>
    </section>

    {% if report %}
    <section class="agent-panel">
        <div>
            <p class="eyebrow">Latest run</p>
            <h2>{{ report.summary }}</h2>
            <p>{{ report.created_at }} · {{ report.run_type }}</p>
        </div>
        <div class="safety-list">
            <span>Demo-only writes</span>
            <span>No production data exposure</span>
            <span>No code auto-rewrites</span>
        </div>
    </section>
    {% else %}
    <section class="agent-panel">
        <div>
            <p class="eyebrow">No runs yet</p>
            <h2>Run the agent to build the first demo feature catalog.</h2>
        </div>
    </section>
    {% endif %}

    <section class="agent-columns">
        <article class="agent-panel">
            <p class="eyebrow">Suggested demo additions</p>
            <h2>Pages not yet represented in walkthroughs</h2>
            <div class="agent-table">
                {% for feature in suggested %}
                <a href="{{ feature.route_path }}">
                    <span>{{ feature.title }}</span>
                    <em>{{ feature.category }}</em>
                    <strong>{{ feature.route_path }}</strong>
                </a>
                {% else %}
                <p>No suggestions yet. Run the agent after adding new pages.</p>
                {% endfor %}
            </div>
        </article>

        <article class="agent-panel">
            <p class="eyebrow">Covered catalog</p>
            <h2>Features already reflected in demo storytelling</h2>
            <div class="agent-table compact">
                {% for feature in covered %}
                <a href="{{ feature.route_path }}">
                    <span>{{ feature.title }}</span>
                    <em>{{ feature.category }}</em>
                </a>
                {% else %}
                <p>No covered features recorded yet.</p>
                {% endfor %}
            </div>
        </article>
    </section>

    {% if report and report.report.suggested_flows %}
    <section class="agent-panel">
        <p class="eyebrow">Recommended walkthrough drafts</p>
        <div class="flow-grid">
            {% for flow in report.report.suggested_flows %}
            <article class="flow-card">
                <span>{{ flow.category }}</span>
                <h3>{{ flow.title }}</h3>
                <p>{{ flow.source_route }}</p>
                {% for step in flow.recommended_steps %}
                <p><strong>{{ step.title }}</strong><br>{{ step.body }}</p>
                {% endfor %}
            </article>
            {% endfor %}
        </div>
    </section>
    {% endif %}
</main>
{% endblock %}