{% set active_page = "history" %}
{% extends "base.html" %}
{% block title %}History{% endblock %}
{% block content %}
<div class="page-header animate-in">
    <div class="page-title">History</div>
    <div class="page-subtitle">{{ sessions|length }} coding session{{ "s" if sessions|length != 1 else "" }} recorded</div>
</div>

{% if sessions %}
<div class="animate-in delay-1">
    <div class="section-header">Coding Sessions</div>
    <div class="table-wrap mb-8">
        <table>
            <thead><tr>
                <th>Session</th>
                <th>Started</th>
                <th>Duration</th>
                <th>Instances</th>
                <th>Tool Calls</th>
                <th>Tokens Saved</th>
                <th>Efficiency</th>
            </tr></thead>
            <tbody>
                {% for cs in sessions %}
                <tr>
                    <td><span class="mono text-xs">{{ cs.id[:20] }}</span></td>
                    <td class="text-sm text-faint">{{ cs.started_at[:16]|replace("T", " ") }}</td>
                    <td class="text-sm">{{ cs.duration }}</td>
                    <td class="text-sm text-center">{{ cs.instances_spawned }}</td>
                    <td class="mono text-sm text-accent">{{ "{:,}".format(cs.total_tool_calls) }}</td>
                    <td class="mono text-sm">{{ "{:,}".format(cs.total_tokens_avoided) }}</td>
                    <td>
                        {% if cs.reduction_pct > 0 %}
                        <span class="mono text-sm" style="color:var(--accent)">{{ cs.reduction_pct }}%</span>
                        {% else %}
                        <span class="text-faint text-sm">-</span>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    {% if daily_stats %}
    <div class="section-header">Daily Activity</div>
    <div class="table-wrap mb-8">
        <table>
            <thead><tr>
                <th>Date</th>
                <th>Repository</th>
                <th>Sessions</th>
                <th>Tool Calls</th>
                <th>Symbols</th>
                <th>Sections</th>
                <th>Tokens Saved</th>
            </tr></thead>
            <tbody>
                {% for row in daily_stats %}
                <tr>
                    <td class="text-sm">{{ row.date }}</td>
                    <td><span class="mono text-sm">{{ row.repo }}</span></td>
                    <td class="text-sm text-center">{{ row.sessions }}</td>
                    <td class="mono text-sm text-accent">{{ "{:,}".format(row.tool_calls) }}</td>
                    <td class="mono text-sm">{{ "{:,}".format(row.symbols_retrieved) }}</td>
                    <td class="mono text-sm">{{ "{:,}".format(row.sections_retrieved) }}</td>
                    <td class="mono text-sm">{{ "{:,}".format(row.tokens_avoided) }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% endif %}

    {% if totals %}
    <div class="grid-4 animate-in delay-2">
        <div class="card metric">
            <div class="metric-value">{{ "{:,}".format(totals.tool_calls) }}</div>
            <div class="metric-label">Total Tool Calls</div>
        </div>
        <div class="card metric">
            <div class="metric-value">{{ "{:,}".format(totals.tokens_avoided) }}</div>
            <div class="metric-label">Total Tokens Saved</div>
        </div>
        <div class="card metric">
            <div class="metric-value">{{ "{:,}".format(totals.symbols) }}</div>
            <div class="metric-label">Symbols Retrieved</div>
        </div>
        <div class="card metric">
            <div class="metric-value">{{ totals.sessions }}</div>
            <div class="metric-label">Sessions</div>
        </div>
    </div>
    {% endif %}
</div>
{% else %}
<div class="empty-state animate-in delay-1">
    <div style="font-size:28px;margin-bottom:12px;opacity:0.3">&#9670;</div>
    No session history yet<br>
    <span class="text-faint">History is recorded automatically as you use sylvan tools</span>
</div>
{% endif %}
{% endblock %}