{% extends "base.html" %}

{% block title %}Response Cache - AISBF Dashboard{% endblock %}

{% block content %}
<h2 style="margin-bottom: 30px;">Response Cache Management</h2>

<!-- Quick Links Navigation -->
<div style="background: var(--bg-page); padding: 15px; border-radius: 8px; margin-bottom: 30px;">
    <div style="display: flex; gap: 15px; flex-wrap: wrap;">
        <a href="{{ url_for(request, '/dashboard/analytics') }}" class="btn btn-secondary" style="text-decoration: none;">
            📊 Analytics
        </a>
        <a href="{{ url_for(request, '/dashboard/response-cache') }}" class="btn" style="text-decoration: none;">
            💾 Response Cache
        </a>
        <a href="{{ url_for(request, '/dashboard/rate-limits') }}" class="btn btn-secondary" style="text-decoration: none;">
            ⏱️ Rate Limits
        </a>
    </div>
</div>

<!-- Cache Statistics -->
<div style="background: var(--bg-panel); padding: 20px; border-radius: 8px; margin-bottom: 30px;">
    {% if is_admin %}
    <h3 style="margin-bottom: 20px;">Global Cache Statistics</h3>
    {% else %}
    <h3 style="margin-bottom: 20px;">Your Personal Cache Impact</h3>
    <p style="color: var(--color-muted); margin-bottom: 20px;">These statistics show how the response cache has benefited your requests personally.</p>
    {% endif %}
    
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px;">
        <div style="background: var(--bg-accent); padding: 15px; border-radius: 8px;">
            <div style="color: var(--color-muted); font-size: 14px; margin-bottom: 5px;">Status</div>
            <div style="font-size: 24px; font-weight: bold; color: {% if stats.enabled %}#4ade80{% else %}var(--alert-error-fg){% endif %};">
                {% if stats.enabled %}Enabled{% else %}Disabled{% endif %}
            </div>
        </div>
        
        {% if is_admin %}
        <div style="background: var(--bg-accent); padding: 15px; border-radius: 8px;">
            <div style="color: var(--color-muted); font-size: 14px; margin-bottom: 5px;">Backend</div>
            <div style="font-size: 24px; font-weight: bold;">{{ stats.backend|upper }}</div>
        </div>
        {% endif %}
        
        <div style="background: var(--bg-accent); padding: 15px; border-radius: 8px;">
            <div style="color: var(--color-muted); font-size: 14px; margin-bottom: 5px;">{% if is_admin %}Cache Hits{% else %}Your Cache Hits{% endif %}</div>
            <div style="font-size: 24px; font-weight: bold; color: #4ade80;">{{ stats.hits }}</div>
        </div>
        
        <div style="background: var(--bg-accent); padding: 15px; border-radius: 8px;">
            <div style="color: var(--color-muted); font-size: 14px; margin-bottom: 5px;">{% if is_admin %}Cache Misses{% else %}Your Cache Misses{% endif %}</div>
            <div style="font-size: 24px; font-weight: bold; color: var(--alert-error-fg);">{{ stats.misses }}</div>
        </div>
        
        <div style="background: var(--bg-accent); padding: 15px; border-radius: 8px;">
            <div style="color: var(--color-muted); font-size: 14px; margin-bottom: 5px;">{% if is_admin %}Hit Rate{% else %}Your Hit Rate{% endif %}</div>
            <div style="font-size: 24px; font-weight: bold; color: var(--color-link);">{{ "%.1f"|format(stats.hit_rate * 100) }}%</div>
        </div>
        
        {% if is_admin %}
        <div style="background: var(--bg-accent); padding: 15px; border-radius: 8px;">
            <div style="color: var(--color-muted); font-size: 14px; margin-bottom: 5px;">Cache Size</div>
            <div style="font-size: 24px; font-weight: bold;">{{ stats.size }}</div>
        </div>
        
        <div style="background: var(--bg-accent); padding: 15px; border-radius: 8px;">
            <div style="color: var(--color-muted); font-size: 14px; margin-bottom: 5px;">Evictions</div>
            <div style="font-size: 24px; font-weight: bold; color: #f59e0b;">{{ stats.evictions }}</div>
        </div>
        {% else %}
        <div style="background: var(--bg-accent); padding: 15px; border-radius: 8px;">
            <div style="color: var(--color-muted); font-size: 14px; margin-bottom: 5px;">Total Requests</div>
            <div style="font-size: 24px; font-weight: bold; color: var(--color-link);">{{ stats.total_requests }}</div>
        </div>
        {% endif %}
    </div>
</div>

{% if is_admin %}
<!-- Cache Actions -->
<div style="background: var(--bg-panel); padding: 20px; border-radius: 8px; margin-bottom: 30px;">
    <h3 style="margin-bottom: 20px;">Cache Actions</h3>
    
    <div style="display: flex; gap: 15px; flex-wrap: wrap;">
        <button onclick="refreshStats()" class="btn" style="padding: 10px 20px;">
            🔄 Refresh Stats
        </button>
        
        <button onclick="clearCache()" class="btn btn-danger" style="padding: 10px 20px;">
            🗑️ Clear Cache
        </button>
    </div>
</div>
{% endif %}

<!-- Error Display -->
{% if stats.error %}
<div style="background: var(--alert-error-bg); padding: 15px; border-radius: 8px; margin-bottom: 30px; border-left: 4px solid var(--alert-error-border);">
    <strong style="color: var(--alert-error-fg);">Error:</strong>
    <span style="color: var(--color-text);">{{ stats.error }}</span>
</div>
{% endif %}

<!-- Cache Information -->
<div style="background: var(--bg-panel); padding: 20px; border-radius: 8px;">
    <h3 style="margin-bottom: 15px;">About Response Cache</h3>
    <p style="color: var(--color-muted); line-height: 1.6;">
        The response cache stores API responses to reduce redundant requests and improve performance. 
        When enabled, identical requests will be served from cache instead of making new API calls.
    </p>
    <ul style="color: var(--color-muted); line-height: 1.8; margin-top: 15px;">
        <li><strong>Hit Rate:</strong> Percentage of requests served from cache</li>
        <li><strong>Cache Size:</strong> Number of cached responses currently stored</li>
        <li><strong>Evictions:</strong> Number of entries removed due to cache size limits</li>
    </ul>
</div>

<script>
function refreshStats() {
    location.reload();
}

async function clearCache() {
    const ok = await showDangerConfirm('Are you sure you want to clear the entire response cache? This action cannot be undone.', 'Clear Cache');
    if (!ok) return;
    
    try {
        const response = await fetch('{{ url_for(request, "/dashboard/response-cache/clear") }}', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'}
        });
        const data = await response.json();
        if (data.success) {
            showAlert('Cache cleared successfully!', 'Done', '✅', 'info').then(() => location.reload());
        } else {
            showAlert('Error clearing cache: ' + (data.error || 'Unknown error'), 'Error', '❌', 'danger');
        }
    } catch (error) {
        showAlert('Error clearing cache: ' + error, 'Error', '❌', 'danger');
    }
}
</script>

{% endblock %}
