{% extends "base.html" %}

{% block title %}Prompt Cache Settings{% endblock %}

{% block content %}
<div class="container-fluid" style="padding: 20px; background: #0f3460; min-height: 100vh;">
    <div style="max-width: 1400px; margin: 0 auto;">
        <h2 style="color: #4a9eff; margin-bottom: 30px;">
            <i class="fas fa-memory me-2"></i>Prompt Cache Settings
        </h2>

        <!-- Global Cache Setting -->
        <div style="background: #16213e; border: 2px solid #f39c12; border-radius: 8px; padding: 20px; margin-bottom: 20px;">
            <h3 style="margin: 0 0 20px 0; color: #f39c12;">
                <i class="fas fa-globe me-2"></i>Global Cache Setting
            </h3>
            
            <div style="background: #1a1a2e; padding: 15px; border-radius: 8px;">
                <div style="display: flex; align-items: center; justify-content: space-between;">
                    <div>
                        <h5 style="margin: 0 0 5px 0; color: #e0e0e0;">Enable Prompt Caching</h5>
                        <p style="color: #888; margin: 0; font-size: 14px;">Enable/disable prompt caching for all providers and models</p>
                    </div>
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="globalCacheToggle" onchange="setCacheSetting(null, null, this.checked)">
                        <label class="form-check-label" for="globalCacheToggle"></label>
                    </div>
                </div>
            </div>
        </div>

        <!-- Provider-specific Settings -->
        <div style="background: #16213e; border: 2px solid #4a9eff; border-radius: 8px; padding: 20px; margin-bottom: 20px;">
            <h3 style="margin: 0 0 20px 0; color: #4a9eff;">
                <i class="fas fa-server me-2"></i>Provider-specific Settings
            </h3>
            
            <div style="background: #1a1a2e; padding: 15px; border-radius: 8px; margin-bottom: 15px;">
                <h5 style="margin: 0 0 15px 0; color: #e0e0e0;">Add Provider Setting</h5>
                <div style="display: flex; gap: 15px; align-items: center; flex-wrap: wrap;">
                    <div style="flex: 1; min-width: 200px;">
                        <label style="color: #888; font-size: 14px;">Provider</label>
                        <select id="providerSelect" class="form-control" style="background: #16213e; border: 1px solid #0f3460; color: #e0e0e0;">
                            <option value="">Select provider...</option>
                        </select>
                    </div>
                    <div style="flex: 1; min-width: 200px;">
                        <label style="color: #888; font-size: 14px;">Model (optional)</label>
                        <input type="text" id="modelInput" class="form-control" style="background: #16213e; border: 1px solid #0f3460; color: #e0e0e0;" placeholder="Leave empty for all models">
                    </div>
                    <div style="flex: 0 0 auto;">
                        <label style="color: #888; font-size: 14px;">Enable Cache</label>
                        <div style="margin-top: 5px;">
                            <label class="form-check-label" style="margin-right: 10px; color: #888;">No</label>
                            <input type="checkbox" id="addProviderCacheToggle" checked>
                            <label class="form-check-label" style="margin-left: 10px; color: #888;">Yes</label>
                        </div>
                    </div>
                    <div style="flex: 0 0 auto; align-self: flex-end;">
                        <button type="button" class="btn" style="background: #4a9eff; color: white;" onclick="addProviderSetting()">
                            <i class="fas fa-plus me-2"></i>Add
                        </button>
                    </div>
                </div>
            </div>

            <table class="table table-dark" style="margin: 0;">
                <thead>
                    <tr>
                        <th>Provider</th>
                        <th>Model</th>
                        <th>Cache Enabled</th>
                        <th>Updated</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody id="cacheSettingsTable">
                    <tr>
                        <td colspan="5" style="text-align: center; color: #888;">Loading...</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- Back Button -->
        <div style="margin-top: 30px;">
            <a href="{{ url_for(request, '/dashboard') }}" class="btn" style="background: #0f3460; color: #4a9eff; border: 1px solid #4a9eff;">
                <i class="fas fa-arrow-left me-2"></i>Back to Dashboard
            </a>
        </div>
    </div>
</div>

<script>
let cacheSettings = [];
let userProviders = [];

document.addEventListener('DOMContentLoaded', function() {
    loadCacheSettings();
    loadUserProviders();
});

async function loadCacheSettings() {
    try {
        const response = await fetch('{{ url_for(request, "/api/user/cache-settings") }}');
        const data = await response.json();
        cacheSettings = data.settings || [];
        renderCacheSettings();
    } catch (error) {
        console.error('Error loading cache settings:', error);
        document.getElementById('cacheSettingsTable').innerHTML = '<tr><td colspan="5" style="text-align: center; color: #e74c3c;">Error loading settings</td></tr>';
    }
}

async function loadUserProviders() {
    try {
        const response = await fetch('{{ url_for(request, "/api/user/providers") }}');
        const data = await response.json();
        userProviders = data.providers || [];
        
        const select = document.getElementById('providerSelect');
        select.innerHTML = '<option value="">Select provider...</option>';
        
        userProviders.forEach(provider => {
            const option = document.createElement('option');
            option.value = provider.id || provider.key;
            option.textContent = provider.name || provider.id || provider.key;
            select.appendChild(option);
        });
    } catch (error) {
        console.error('Error loading providers:', error);
    }
}

function renderCacheSettings() {
    const tbody = document.getElementById('cacheSettingsTable');
    
    if (cacheSettings.length === 0) {
        tbody.innerHTML = '<tr><td colspan="5" style="text-align: center; color: #888;">No custom settings defined</td></tr>';
        return;
    }
    
    tbody.innerHTML = cacheSettings.map(setting => `
        <tr>
            <td>${setting.provider_id || '<em>All</em>'}</td>
            <td>${setting.model_name || '<em>All</em>'}</td>
            <td>
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" ${setting.cache_enabled ? 'checked' : ''} 
                           onchange="setCacheSetting('${setting.provider_id || ''}', '${setting.model_name || ''}', this.checked)">
                </div>
            </td>
            <td>${setting.updated_at || '-'}</td>
            <td>
                <button type="button" class="btn btn-sm btn-danger" onclick="deleteCacheSetting('${setting.provider_id || ''}', '${setting.model_name || ''}')">
                    <i class="fas fa-trash"></i>
                </button>
            </td>
        </tr>
    `).join('');
    
    // Update global toggle
    const globalSetting = cacheSettings.find(s => !s.provider_id && !s.model_name);
    document.getElementById('globalCacheToggle').checked = globalSetting ? globalSetting.cache_enabled : true;
}

async function setCacheSetting(provider_id, model_name, enabled) {
    try {
        const response = await fetch('{{ url_for(request, "/api/user/cache-settings") }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                provider_id: provider_id || null,
                model_name: model_name || null,
                cache_enabled: enabled
            })
        });
        
        if (response.ok) {
            showToast('Cache setting updated', 'success');
            await loadCacheSettings();
        } else {
            showToast('Failed to update setting', 'danger');
        }
    } catch (error) {
        console.error('Error updating cache setting:', error);
        showToast('Error updating setting', 'danger');
    }
}

async function addProviderSetting() {
    const provider_id = document.getElementById('providerSelect').value;
    const model_name = document.getElementById('modelInput').value.trim();
    const enabled = document.getElementById('addProviderCacheToggle').checked;
    
    if (!provider_id) {
        showToast('Please select a provider', 'warning');
        return;
    }
    
    await setCacheSetting(provider_id, model_name, enabled);
    
    // Clear inputs
    document.getElementById('providerSelect').value = '';
    document.getElementById('modelInput').value = '';
}

async function deleteCacheSetting(provider_id, model_name) {
    if (!confirm('Are you sure you want to delete this setting?')) {
        return;
    }
    
    try {
        const url = new URL('{{ url_for(request, "/api/user/cache-settings") }}', window.location.origin);
        if (provider_id) url.searchParams.append('provider_id', provider_id);
        if (model_name) url.searchParams.append('model_name', model_name);
        
        const response = await fetch(url, { method: 'DELETE' });
        
        if (response.ok) {
            showToast('Cache setting deleted', 'success');
            await loadCacheSettings();
        } else {
            showToast('Failed to delete setting', 'danger');
        }
    } catch (error) {
        console.error('Error deleting cache setting:', error);
        showToast('Error deleting setting', 'danger');
    }
}

function showToast(message, type) {
    const alertDiv = document.createElement('div');
    alertDiv.style.cssText = `
        position: fixed;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10000;
        min-width: 400px;
        padding: 20px 30px;
        border-radius: 8px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.3);
        font-size: 16px;
        font-weight: 500;
        text-align: center;
        animation: slideDown 0.3s ease-out;
        ${type === 'success' ? 'background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%); color: white; border: 2px solid #27ae60;' : ''}
        ${type === 'danger' ? 'background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%); color: white; border: 2px solid #e74c3c;' : ''}
        ${type === 'warning' ? 'background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%); color: white; border: 2px solid #f39c12;' : ''}
    `;
    
    const icon = type === 'success' ? 'fa-check-circle' : type === 'danger' ? 'fa-times-circle' : 'fa-exclamation-triangle';
    alertDiv.innerHTML = `<i class="fas ${icon}" style="font-size: 24px; margin-right: 10px; vertical-align: middle;"></i><span style="vertical-align: middle;">${message}</span>`;
    
    if (!document.getElementById('alertAnimations')) {
        const style = document.createElement('style');
        style.id = 'alertAnimations';
        style.textContent = `
            @keyframes slideDown {
                from {
                    opacity: 0;
                    transform: translateX(-50%) translateY(-20px);
                }
                to {
                    opacity: 1;
                    transform: translateX(-50%) translateY(0);
                }
            }
            @keyframes slideUp {
                from {
                    opacity: 1;
                    transform: translateX(-50%) translateY(0);
                }
                to {
                    opacity: 0;
                    transform: translateX(-50%) translateY(-20px);
                }
            }
        `;
        document.head.appendChild(style);
    }
    
    document.body.appendChild(alertDiv);
    
    setTimeout(() => {
        alertDiv.style.animation = 'slideUp 0.3s ease-out';
        setTimeout(() => alertDiv.remove(), 300);
    }, 4000);
}
</script>
{% endblock %}