{% extends "base.html" %}

{% block content %}
<div class="mb-8">
    <h1 class="text-3xl font-bold text-white">Metrics</h1>
    <p class="mt-2 text-gray-400">TimescaleDB storage and poller throughput</p>
</div>

<div class="flex gap-4 mb-6">
    <a href="/"
       class="inline-flex items-center px-4 py-2 rounded-lg bg-gray-700 hover:bg-gray-600 text-gray-200 text-sm font-medium transition">
        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
        </svg>
        Home
    </a>
    <a href="/metrics"
       class="inline-flex items-center px-4 py-2 rounded-lg bg-green-700 hover:bg-green-600 text-white text-sm font-medium transition">
        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
        </svg>
        Refresh
    </a>
</div>

{% if table_stats or db_size.database_size_pretty != 'unknown' %}

<!-- Top-level stats cards -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
    <div class="bg-gray-800 p-4 rounded-lg border border-gray-700">
        <p class="text-sm text-gray-400 mb-1">Total DB Size</p>
        <p class="text-2xl font-bold text-white">{{ db_size.database_size_pretty }}</p>
    </div>
    <div class="bg-gray-800 p-4 rounded-lg border border-gray-700">
        <p class="text-sm text-gray-400 mb-1">Tables Tracked</p>
        <p class="text-2xl font-bold text-white">{{ table_stats | length }}</p>
    </div>
    <div class="bg-gray-800 p-4 rounded-lg border border-gray-700">
        <p class="text-sm text-gray-400 mb-1">Data Sources (24h)</p>
        <p class="text-2xl font-bold text-white">
            {{ pull_volume | map(attribute='source') | unique | list | length }}
        </p>
    </div>
</div>

<!-- Table stats section -->
<div class="mb-10">
    <h2 class="text-xl font-semibold text-white mb-4">Table Statistics</h2>
    {% if table_stats %}
    <div class="overflow-x-auto rounded-lg border border-gray-700">
        <table class="table-auto w-full text-sm">
            <thead class="bg-gray-800 text-gray-300">
                <tr>
                    <th class="text-left px-4 py-3 font-medium">Table</th>
                    <th class="text-right px-4 py-3 font-medium">Total Rows</th>
                    <th class="text-right px-4 py-3 font-medium">Rows (24h)</th>
                    <th class="text-left px-4 py-3 font-medium">Oldest</th>
                    <th class="text-left px-4 py-3 font-medium">Newest</th>
                    <th class="text-right px-4 py-3 font-medium">Size</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-700">
                {% for row in table_stats %}
                <tr class="hover:bg-gray-800/50 transition">
                    <td class="px-4 py-2 font-mono text-green-400">{{ row.table_name }}</td>
                    <td class="px-4 py-2 text-right text-gray-200">{{ "{:,}".format(row.total_rows) if row.total_rows is not none else '—' }}</td>
                    <td class="px-4 py-2 text-right text-gray-200">
                        {% if row.rows_24h is not none and row.rows_24h > 0 %}
                        <span class="text-green-400">+{{ "{:,}".format(row.rows_24h) }}</span>
                        {% elif row.rows_24h is not none %}
                        <span class="text-gray-500">0</span>
                        {% else %}
                        <span class="text-gray-500">—</span>
                        {% endif %}
                    </td>
                    <td class="px-4 py-2 text-gray-400 font-mono text-xs">{{ row.oldest_ts or '—' }}</td>
                    <td class="px-4 py-2 text-gray-400 font-mono text-xs">{{ row.newest_ts or '—' }}</td>
                    <td class="px-4 py-2 text-right text-gray-200">{{ row.size_pretty }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <p class="text-gray-500">No table statistics available.</p>
    {% endif %}
</div>

<!-- Pull volume section -->
<div class="mb-10">
    <h2 class="text-xl font-semibold text-white mb-4">Pull Volume (Last 24h)</h2>
    {% if pull_volume %}
    <div class="overflow-x-auto rounded-lg border border-gray-700">
        <table class="table-auto w-full text-sm">
            <thead class="bg-gray-800 text-gray-300">
                <tr>
                    <th class="text-left px-4 py-3 font-medium">Hour</th>
                    <th class="text-left px-4 py-3 font-medium">Source</th>
                    <th class="text-right px-4 py-3 font-medium">Rows Written</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-700">
                {% for entry in pull_volume %}
                <tr class="hover:bg-gray-800/50 transition">
                    <td class="px-4 py-2 text-gray-400 font-mono text-xs">{{ entry.bucket }}</td>
                    <td class="px-4 py-2 text-green-400 font-mono">{{ entry.source }}</td>
                    <td class="px-4 py-2 text-right text-gray-200">{{ "{:,}".format(entry.total_rows) }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <p class="text-gray-500">No pull volume data for the last 24 hours.</p>
    {% endif %}
</div>

{% else %}
<div class="text-center py-16">
    <p class="text-gray-400 text-lg">No metrics yet</p>
    <p class="text-gray-500 text-sm mt-2">Start the poller to see data flow in.</p>
</div>
{% endif %}
{% endblock %}