{% extends "base.html" %}

{% block title %}Overview - Memory MCP Dashboard{% endblock %}

{% block content %}
<div class="space-y-8">
    <!-- Page Header -->
    <div>
        <h1 class="text-2xl font-bold text-white">Overview</h1>
        <p class="text-gray-400 mt-1">Memory system status and statistics</p>
    </div>

    <!-- Stats Cards -->
    <div id="stats-container"
         hx-get="/api/stats"
         hx-trigger="refresh"
         hx-swap="innerHTML">
        {% include "partials/stats_cards.html" %}
    </div>

    <!-- Quick Actions -->
    <div class="bg-dark-900 rounded-lg border border-gray-800 p-6">
        <h2 class="text-lg font-semibold text-white mb-4">Quick Actions</h2>
        <div class="flex flex-wrap gap-3">
            <a href="/hot-cache"
               class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors">
                <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="M13 10V3L4 14h7v7l9-11h-7z"/>
                </svg>
                Manage Hot Cache
            </a>
            <a href="/memories"
               class="inline-flex items-center px-4 py-2 bg-gray-700 hover:bg-gray-600 text-white text-sm font-medium rounded-lg transition-colors">
                <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                </svg>
                Browse Memories
            </a>
        </div>
    </div>

    <!-- Type Distribution -->
    <div class="bg-dark-900 rounded-lg border border-gray-800 p-6">
        <h2 class="text-lg font-semibold text-white mb-4">By Type</h2>
        <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
            {% for type, count in stats.get('by_type', {}).items() %}
            <div class="bg-dark-800 rounded-lg p-4">
                <div class="flex items-center space-x-2 mb-2">
                    <span class="px-2 py-0.5 text-xs font-medium rounded border {{ get_type_badge_class(type) }}">
                        {{ type }}
                    </span>
                </div>
                <p class="text-2xl font-bold text-white">{{ count }}</p>
            </div>
            {% endfor %}
        </div>
    </div>

    <!-- Category Distribution -->
    <div class="bg-dark-900 rounded-lg border border-gray-800 p-6">
        <h2 class="text-lg font-semibold text-white mb-4">By Category</h2>
        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3">
            {% for category, count in stats.get('by_category', {}).items()|sort(attribute='1', reverse=true) %}
            <div class="bg-dark-800 rounded-lg p-3">
                <p class="text-xs text-gray-400 truncate" title="{{ category }}">{{ category }}</p>
                <p class="text-xl font-bold text-white">{{ count }}</p>
            </div>
            {% endfor %}
        </div>
    </div>

    <!-- Helpfulness Stats -->
    <div class="bg-dark-900 rounded-lg border border-gray-800 p-6">
        <h2 class="text-lg font-semibold text-white mb-4">Helpfulness Metrics</h2>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div class="bg-dark-800 rounded-lg p-4">
                <p class="text-xs text-gray-400">Total Retrieved</p>
                <p class="text-2xl font-bold text-white">{{ stats.get('total_retrieved', 0) }}</p>
            </div>
            <div class="bg-dark-800 rounded-lg p-4">
                <p class="text-xs text-gray-400">Total Used</p>
                <p class="text-2xl font-bold text-white">{{ stats.get('total_used', 0) }}</p>
            </div>
            <div class="bg-dark-800 rounded-lg p-4">
                <p class="text-xs text-gray-400">Avg Trust</p>
                {% set avg_trust = stats.get('avg_trust', 0.7) %}
                <p class="text-2xl font-bold {% if avg_trust >= 0.7 %}text-green-400{% elif avg_trust >= 0.4 %}text-yellow-400{% else %}text-red-400{% endif %}">
                    {{ avg_trust }}
                </p>
            </div>
            <div class="bg-dark-800 rounded-lg p-4">
                <p class="text-xs text-gray-400">Helpfulness Rate</p>
                {% set retrieved = stats.get('total_retrieved', 0) %}
                {% set used = stats.get('total_used', 0) %}
                {% if retrieved > 0 %}
                    {% set rate = (used / retrieved * 100)|round|int %}
                    <p class="text-2xl font-bold {% if rate >= 50 %}text-green-400{% elif rate >= 25 %}text-yellow-400{% else %}text-red-400{% endif %}">
                        {{ rate }}%
                    </p>
                {% else %}
                    <p class="text-2xl font-bold text-gray-500">—</p>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Memories Over Time Chart -->
    <div class="bg-dark-900 rounded-lg border border-gray-800 p-6">
        <h2 class="text-lg font-semibold text-white mb-4">Memories Over Time</h2>
        <div id="memory-chart" class="h-48 flex items-end gap-1">
        </div>
        <div id="chart-labels" class="flex justify-between mt-2 text-xs text-gray-500">
        </div>
    </div>
</div>

<script>
(async function() {
    const resp = await fetch('/api/stats/history?days=30');
    const data = await resp.json();
    const chart = document.getElementById('memory-chart');
    const labels = document.getElementById('chart-labels');

    if (!data.days || data.days.length === 0) {
        const noData = document.createElement('p');
        noData.className = 'text-gray-500 text-sm';
        noData.textContent = 'No data yet';
        chart.appendChild(noData);
        return;
    }

    const maxCount = Math.max(...data.days.map(d => d.count), 1);

    data.days.forEach((day) => {
        const pct = (day.count / maxCount) * 100;
        const col = document.createElement('div');
        col.className = 'flex-1 flex flex-col justify-end';
        const bar = document.createElement('div');
        bar.className = 'bg-blue-500 rounded-t';
        bar.style.height = pct + '%';
        bar.title = day.day + ': ' + day.count + ' memories (' + day.hot_count + ' hot)';
        col.appendChild(bar);
        chart.appendChild(col);
    });

    if (data.days.length > 0) {
        const startLabel = document.createElement('span');
        startLabel.textContent = data.days[0].day;
        const endLabel = document.createElement('span');
        endLabel.textContent = data.days[data.days.length - 1].day;
        labels.appendChild(startLabel);
        labels.appendChild(endLabel);
    }
})();
</script>
{% endblock %}