{% extends 'administration/base.html.twig' %}

{% block title %}{{ 'admin.cache_management'|trans }}{% endblock %}

{% block body %}
<div class="container-fluid">
    <!-- Header Section -->
    <div class="row">
        <div class="col-12">
            <div class="admin-card p-4">
                <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center">
                    <div class="admin-header mb-3 mb-md-0">
                        <h2 class="gradient-text fw-bold mb-2">
                            <i class="bi bi-lightning-charge me-3"></i>
                            {{ 'admin.cache_management'|trans }}
                        </h2>
                        <p class="text-muted mb-0">{{ 'admin.cache_management_description'|trans }}</p>
                    </div>
                    <div class="d-flex gap-2">
                        <form method="post" action="{{ path('admin_modules_cache', {action: 'clear'}) }}" class="d-inline" id="clearCacheForm">
                            <button type="button" class="btn btn-danger btn-lg" onclick="handleClearCache()">
                                <i class="bi bi-trash me-2"></i>
                                {{ 'admin.cache.clear_all'|trans }}
                            </button>
                        </form>
                        <form method="post" action="{{ path('admin_modules_cache', {action: 'warmup'}) }}" class="d-inline" id="warmupCacheForm">
                            <button type="button" class="btn btn-success btn-lg" onclick="handleWarmupCache()">
                                <i class="bi bi-fire me-2"></i>
                                {{ 'admin.cache.warmup'|trans }}
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Cache Statistics & Configuration -->
    <div class="row g-3">
        <div class="col-12 col-lg-8">
            <div class="admin-card p-4">
                <h4 class="gradient-text fw-bold mb-4">
                    <i class="bi bi-info-circle me-2"></i>
                    {{ 'admin.cache.configuration'|trans }}
                </h4>
                
                <div class="row g-3">
                    <div class="col-12 col-md-6">
                        <div class="config-item">
                            <div class="config-label">
                                <i class="bi bi-gear me-2 text-primary"></i>
                                {{ 'admin.cache.adapter'|trans }}
                            </div>
                            <div class="config-value">
                                <code class="bg-light p-2 rounded">{{ stats.adapter|split('\\')|last }}</code>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-6">
                        <div class="config-item">
                            <div class="config-label">
                                <i class="bi bi-tags me-2 text-info"></i>
                                {{ 'admin.cache.tag_support'|trans }}
                            </div>
                            <div class="config-value">
                                {% if stats.supported_features.tags %}
                                    <span class="badge bg-success">
                                        <i class="bi bi-check-circle me-1"></i>
                                        {{ 'admin.available'|trans }}
                                    </span>
                                {% else %}
                                    <span class="badge bg-warning">
                                        <i class="bi bi-x-circle me-1"></i>
                                        {{ 'admin.not_available'|trans }}
                                    </span>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-6">
                        <div class="config-item">
                            <div class="config-label">
                                <i class="bi bi-arrow-repeat me-2 text-success"></i>
                                {{ 'admin.cache.versioning'|trans }}
                            </div>
                            <div class="config-value">
                                {% if stats.supported_features.versioning %}
                                    <span class="badge bg-success">
                                        <i class="bi bi-check-circle me-1"></i>
                                        {{ 'admin.available'|trans }}
                                    </span>
                                {% else %}
                                    <span class="badge bg-secondary">
                                        <i class="bi bi-x-circle me-1"></i>
                                        {{ 'admin.not_available'|trans }}
                                    </span>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-6">
                        <div class="config-item">
                            <div class="config-label">
                                <i class="bi bi-clock me-2 text-warning"></i>
                                {{ 'admin.cache.last_cleared'|trans }}
                            </div>
                            <div class="config-value">
                                <span class="text-muted">{{ 'admin.cache.never'|trans }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-lg-4">
            <div class="admin-card p-4">
                <h4 class="gradient-text fw-bold mb-4">
                    <i class="bi bi-speedometer2 me-2"></i>
                    {{ 'admin.cache.quick_actions'|trans }}
                </h4>
                
                <div class="d-grid gap-3">
                    <button type="button" class="btn btn-outline-danger" onclick="handleClearCache()">
                        <i class="bi bi-trash me-2"></i>
                        {{ 'admin.cache.clear_all'|trans }}
                    </button>
                    
                    <button type="button" class="btn btn-outline-success" onclick="handleWarmupCache()">
                        <i class="bi bi-fire me-2"></i>
                        {{ 'admin.cache.warmup'|trans }}
                    </button>
                    
                    <button type="button" class="btn btn-outline-info" onclick="showCacheStats()">
                        <i class="bi bi-graph-up me-2"></i>
                        {{ 'admin.cache.statistics'|trans }}
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Symfony HttpCache (Kernel-Reverse-Proxy) -->
    <div class="row g-3">
        <div class="col-12">
            <div class="admin-card p-4">
                <h4 class="gradient-text fw-bold mb-3">
                    <i class="bi bi-hdd-network me-2"></i>
                    {{ 'admin.cache.http_cache_title'|trans }}
                </h4>
                <div class="row g-3">
                    <div class="col-12 col-md-4">
                        <div class="config-label">
                            <i class="bi bi-toggle-on me-2 text-primary"></i>
                            {{ 'admin.cache.http_cache_status'|trans }}
                        </div>
                        <div class="config-value">
                            {% if stats.http_cache.enabled %}
                                <span class="badge bg-success">{{ 'admin.cache.http_cache_enabled'|trans }}</span>
                            {% else %}
                                <span class="badge bg-secondary">{{ 'admin.cache.http_cache_disabled'|trans }}</span>
                            {% endif %}
                        </div>
                    </div>
                    <div class="col-12 col-md-8">
                        <div class="config-label">
                            <i class="bi bi-folder2-open me-2 text-muted"></i>
                            {{ 'admin.cache.http_cache_path'|trans }}
                        </div>
                        <div class="config-value">
                            <code class="bg-light p-2 rounded small d-block text-break">{{ stats.http_cache.path }}</code>
                        </div>
                    </div>
                    <div class="col-12 col-md-4">
                        <div class="config-label">
                            <i class="bi bi-database me-2 text-info"></i>
                            {{ 'admin.cache.http_cache_size'|trans }}
                        </div>
                        <div class="config-value">
                            {% if stats.http_cache.exists and stats.http_cache.approx_bytes is not null %}
                                {% set bytes = stats.http_cache.approx_bytes %}
                                {% if bytes < 1024 %}
                                    {{ bytes }} B
                                {% elseif bytes < 1048576 %}
                                    {{ (bytes / 1024)|round(1) }} KB
                                {% else %}
                                    {{ (bytes / 1048576)|round(2) }} MB
                                {% endif %}
                            {% else %}
                                <span class="text-muted">—</span>
                            {% endif %}
                        </div>
                    </div>
                </div>
                <p class="small text-muted mb-0 mt-3">
                    <i class="bi bi-info-circle me-1"></i>
                    {{ 'admin.cache.http_cache_clear_hint'|trans }}
                </p>
            </div>
        </div>
    </div>

    <!-- Geplante Cache-Wartung -->
    <div class="row g-3">
        <div class="col-12">
            <div class="admin-card rounded-4 border-0 shadow-sm p-4 p-lg-5">
                <h4 class="gradient-text fw-bold mb-2">
                    <i class="bi bi-clock-history me-2"></i>
                    {{ 'admin.cache.task_section_title'|trans }}
                </h4>
                <p class="text-muted small mb-2">{{ 'admin.cache.task_section_intro'|trans }}</p>
                <p class="small text-muted mb-4">
                    <a href="{{ path('admin_modules_scheduled_tasks') }}"><i class="bi bi-arrow-right-circle me-1"></i>{{ 'admin.cache.task_link_scheduled'|trans }}</a>
                </p>
                <p class="small text-secondary mb-4"><i class="bi bi-list-ol me-1"></i>{{ 'admin.cache.task_execution_order_hint'|trans }}</p>

                {{ form_start(taskForm, { attr: { class: 'needs-validation', novalidate: 'novalidate' } }) }}
                {{ form_errors(taskForm) }}

                <div class="mb-4 pb-4 border-bottom">
                    <div class="d-flex flex-wrap align-items-center justify-content-between gap-3">
                        <div class="flex-grow-1">
                            {{ form_label(taskForm.cacheTaskEnabled, null, { label_attr: { class: 'form-label fw-semibold mb-0' } }) }}
                        </div>
                        <div class="form-switch form-switch-lg m-0">
                            {{ form_widget(taskForm.cacheTaskEnabled, { attr: { class: 'form-check-input' } }) }}
                        </div>
                    </div>
                    {{ form_errors(taskForm.cacheTaskEnabled) }}
                </div>

                <div class="mb-4">
                    {{ form_label(taskForm.cacheTaskIntervalSeconds) }}
                    {{ form_widget(taskForm.cacheTaskIntervalSeconds, { attr: { class: 'form-control', style: 'max-width: 16rem' } }) }}
                    {{ form_help(taskForm.cacheTaskIntervalSeconds) }}
                    {{ form_errors(taskForm.cacheTaskIntervalSeconds) }}
                </div>

                <h6 class="fw-semibold text-body-secondary text-uppercase small mb-3">{{ 'admin.cache.quick_actions'|trans }} ({{ 'admin.scheduled_tasks.title'|trans }})</h6>

                <div class="row g-4">
                    <div class="col-12 col-lg-6">
                        <div class="mb-3">
                            <div class="form-switch mb-2">
                                {{ form_widget(taskForm.cacheTaskClearPools, { attr: { class: 'form-check-input' } }) }}
                                {{ form_label(taskForm.cacheTaskClearPools, null, { label_attr: { class: 'form-check-label' } }) }}
                            </div>
                            {{ form_help(taskForm.cacheTaskClearPools) }}
                            {{ form_errors(taskForm.cacheTaskClearPools) }}
                        </div>
                        <div class="mb-3">
                            <div class="form-switch mb-2">
                                {{ form_widget(taskForm.cacheTaskPurgeHttp, { attr: { class: 'form-check-input' } }) }}
                                {{ form_label(taskForm.cacheTaskPurgeHttp, null, { label_attr: { class: 'form-check-label' } }) }}
                            </div>
                            {{ form_help(taskForm.cacheTaskPurgeHttp) }}
                            {{ form_errors(taskForm.cacheTaskPurgeHttp) }}
                        </div>
                    </div>
                    <div class="col-12 col-lg-6">
                        <div class="mb-3">
                            <div class="form-switch mb-2">
                                {{ form_widget(taskForm.cacheTaskInvalidateTags, { attr: { class: 'form-check-input' } }) }}
                                {{ form_label(taskForm.cacheTaskInvalidateTags, null, { label_attr: { class: 'form-check-label' } }) }}
                            </div>
                            {{ form_errors(taskForm.cacheTaskInvalidateTags) }}
                        </div>
                        <div class="mb-3">
                            {{ form_label(taskForm.cacheTaskInvalidateTagsCsv) }}
                            {{ form_widget(taskForm.cacheTaskInvalidateTagsCsv) }}
                            {{ form_help(taskForm.cacheTaskInvalidateTagsCsv) }}
                            {{ form_errors(taskForm.cacheTaskInvalidateTagsCsv) }}
                        </div>
                        <div class="mb-0">
                            <div class="form-switch mb-2">
                                {{ form_widget(taskForm.cacheTaskWarmup, { attr: { class: 'form-check-input' } }) }}
                                {{ form_label(taskForm.cacheTaskWarmup, null, { label_attr: { class: 'form-check-label' } }) }}
                            </div>
                            {{ form_help(taskForm.cacheTaskWarmup) }}
                            {{ form_errors(taskForm.cacheTaskWarmup) }}
                        </div>
                    </div>
                </div>

                <div class="mt-4 pt-3 border-top">
                    {{ form_widget(taskForm.save, { attr: { class: 'btn btn-primary' } }) }}
                </div>
                {{ form_end(taskForm) }}
            </div>
        </div>
    </div>

    <!-- Tag-based Cache Invalidation -->
    <div class="row g-3">
        <div class="col-12">
            <div class="admin-card p-4">
                <h4 class="gradient-text fw-bold mb-4">
                    <i class="bi bi-tags me-2"></i>
                    {{ 'admin.cache.tag_invalidation'|trans }}
                </h4>
                
                {% if stats.supported_features.tags %}
                    <form method="post" action="{{ path('admin_modules_cache', {action: 'invalidate'}) }}" id="invalidateForm">
                        <div class="row g-3">
                            <div class="col-12 col-lg-8">
                                <div class="mb-3">
                                    <label for="tags" class="form-label fw-semibold">
                                        <i class="bi bi-tag me-2 text-primary"></i>
                                        {{ 'admin.cache.tags_input'|trans }}
                                    </label>
                                    <input type="text" class="form-control" name="tags" id="tags" 
                                           placeholder="{{ 'admin.cache.tags_placeholder'|trans }}">
                                    <div class="form-text">
                                        <i class="bi bi-info-circle me-1"></i>
                                        {{ 'admin.cache.tags_description'|trans }}
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-lg-4 d-flex align-items-end">
                                <button type="submit" class="btn btn-warning w-100">
                                    <i class="bi bi-arrow-clockwise me-2"></i>
                                    {{ 'admin.cache.invalidate_tags'|trans }}
                                </button>
                            </div>
                        </div>
                    </form>

                    <hr class="my-4">

                    <div class="row">
                        <div class="col-12">
                            <h6 class="fw-semibold mb-3">
                                <i class="bi bi-collection me-2 text-info"></i>
                                {{ 'admin.cache.common_tags'|trans }}
                            </h6>
                            <div class="d-flex flex-wrap gap-2 mb-3">
                                {% for tag, description in common_tags %}
                                    <button type="button" class="btn btn-outline-primary btn-sm tag-btn" 
                                            data-tag="{{ tag }}" title="{{ description }}">
                                        <i class="bi bi-tag me-1"></i>
                                        {{ tag }}
                                    </button>
                                {% endfor %}
                            </div>
                            <small class="text-muted">
                                <i class="bi bi-lightbulb me-1"></i>
                                {{ 'admin.cache.tag_click_hint'|trans }}
                            </small>
                        </div>
                    </div>
                {% else %}
                    <div class="alert alert-warning alert-persistent">
                        <div class="d-flex align-items-center">
                            <i class="bi bi-exclamation-triangle me-3 text-warning" style="font-size: 1.5rem;"></i>
                            <div>
                                <h6 class="alert-heading mb-1">{{ 'admin.cache.tag_support_unavailable'|trans }}</h6>
                                <p class="mb-0">{{ 'admin.cache.tag_support_description'|trans }}</p>
                            </div>
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Console Commands Info -->
    <div class="row g-3">
        <div class="col-12">
            <div class="admin-card p-4">
                <h4 class="gradient-text fw-bold mb-4">
                    <i class="bi bi-terminal me-2"></i>
                    {{ 'admin.cache.console_commands'|trans }}
                </h4>
                
                <p class="text-muted mb-4">
                    <i class="bi bi-info-circle me-2"></i>
                    {{ 'admin.cache.console_description'|trans }}
                </p>
                
                <div class="row g-3">
                    <div class="col-12 col-lg-6">
                        <div class="command-section">
                            <h6 class="fw-semibold mb-3">
                                <i class="bi bi-play-circle me-2 text-success"></i>
                                {{ 'admin.cache.basic_commands'|trans }}
                            </h6>
                            <div class="command-block">
                                <div class="command-item">
                                    <div class="command-description">
                                        <i class="bi bi-trash me-2 text-danger"></i>
                                        {{ 'admin.cache.clear_cache'|trans }}
                                    </div>
                                    <code class="command-code">php bin/console terraflow:cache:clear</code>
                                </div>
                                <div class="command-item">
                                    <div class="command-description">
                                        <i class="bi bi-fire me-2 text-warning"></i>
                                        {{ 'admin.cache.warmup_cache'|trans }}
                                    </div>
                                    <code class="command-code">php bin/console terraflow:cache:warmup</code>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-12 col-lg-6">
                        <div class="command-section">
                            <h6 class="fw-semibold mb-3">
                                <i class="bi bi-gear me-2 text-info"></i>
                                {{ 'admin.cache.advanced_commands'|trans }}
                            </h6>
                            <div class="command-block">
                                <div class="command-item">
                                    <div class="command-description">
                                        <i class="bi bi-graph-up me-2 text-primary"></i>
                                        {{ 'admin.cache.cache_statistics'|trans }}
                                    </div>
                                    <code class="command-code">php bin/console terraflow:cache:manage stats</code>
                                </div>
                                <div class="command-item">
                                    <div class="command-description">
                                        <i class="bi bi-tags me-2 text-secondary"></i>
                                        {{ 'admin.cache.invalidate_tags_cli'|trans }}
                                    </div>
                                    <code class="command-code">php bin/console terraflow:cache:manage invalidate --tags=pages,content</code>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
        </div>
    </div>
</div>

<style>
    .config-item {
        padding: 1rem;
        background: var(--light-bg);
        border-radius: 8px;
        border: 1px solid var(--border-color);
        transition: all 0.2s ease;
    }
    
    .config-item:hover {
        background: var(--card-bg);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    .config-label {
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
    }
    
    .config-value {
        color: var(--text-secondary);
    }
    
    .command-section {
        background: var(--light-bg);
        border-radius: 8px;
        padding: 1.5rem;
        border: 1px solid var(--border-color);
        transition: all 0.2s ease;
    }
    
    .command-section:hover {
        background: var(--card-bg);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    .command-block {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    
    .command-item {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .command-description {
        font-weight: 500;
        color: var(--text-primary);
        display: flex;
        align-items: center;
    }
    
    .command-code {
        background: var(--text-primary);
        color: #ffffff;
        padding: 0.75rem 1rem;
        border-radius: 6px;
        font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
        font-size: 0.875rem;
        word-break: break-all;
        border: 1px solid var(--border-color);
    }
    
    .tag-btn {
        transition: all 0.2s ease;
        border-radius: 20px;
    }
    
    .tag-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
    
    .tag-btn.active {
        background: var(--primary-color);
        border-color: var(--primary-color);
        color: white;
    }
    
    /* Force persistent alerts to stay visible */
    .alert-persistent {
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
        animation: none !important;
        transition: none !important;
    }
    
    .alert-persistent.fade {
        opacity: 1 !important;
    }
    
    .alert-persistent.show {
        opacity: 1 !important;
    }
    
    @media (max-width: 768px) {
        .admin-card {
            padding: 1rem !important;
        }
        
        .config-item {
            padding: 0.75rem;
        }
        
        .command-section {
            padding: 1rem;
        }
        
        .command-code {
            font-size: 0.75rem;
            padding: 0.5rem 0.75rem;
        }
    }
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Tag buttons functionality
    const tagButtons = document.querySelectorAll('.tag-btn');
    const tagsInput = document.getElementById('tags');
    
    if (tagsInput) {
        tagButtons.forEach(button => {
            button.addEventListener('click', function() {
                const tag = this.dataset.tag;
                const currentValue = tagsInput.value;
                
                if (currentValue) {
                    const tags = currentValue.split(',').map(t => t.trim());
                    if (!tags.includes(tag)) {
                        tagsInput.value = currentValue + ', ' + tag;
                    }
                } else {
                    tagsInput.value = tag;
                }
                
                // Visual feedback
                this.classList.add('active');
                setTimeout(() => {
                    this.classList.remove('active');
                }, 200);
                
                // Focus input for better UX
                tagsInput.focus();
            });
        });
    }
    
    // Form validation
    const invalidateForm = document.getElementById('invalidateForm');
    if (invalidateForm) {
        invalidateForm.addEventListener('submit', function(e) {
            const tagsValue = tagsInput.value.trim();
            if (!tagsValue) {
                e.preventDefault();
                showNotification('{{ 'admin.cache.enter_at_least_one_tag'|trans }}', 'warning');
                tagsInput.focus();
            }
        });
    }

    // Copy command functionality
    document.querySelectorAll('.command-code').forEach(codeElement => {
        codeElement.style.cursor = 'pointer';
        codeElement.title = '{{ 'admin.cache.click_to_copy'|trans }}';
        
        codeElement.addEventListener('click', function() {
            navigator.clipboard.writeText(this.textContent).then(() => {
                showNotification('{{ 'admin.cache.command_copied'|trans }}', 'success');
            }).catch(() => {
                showNotification('{{ 'admin.cache.copy_failed'|trans }}', 'error');
            });
        });
    });
});

// Cache Management Functions
async function handleClearCache() {
    const confirmed = await showConfirm(
        '{{ 'admin.cache.clear_confirm_message'|trans }}<br><small class="text-muted">{{ 'admin.cache.clear_confirm_description'|trans }}</small>',
        '{{ 'admin.cache.clear_cache'|trans }}',
        {
            confirmText: '{{ 'admin.cache.clear'|trans }}',
            confirmClass: 'btn-danger',
            icon: 'bi-trash-fill text-danger'
        }
    );
    
    if (confirmed) {
        const loading = showLoading('{{ 'admin.cache.clearing_cache'|trans }}...');
        document.getElementById('clearCacheForm').requestSubmit();
    }
}

async function handleWarmupCache() {
    const confirmed = await showConfirm(
        '{{ 'admin.cache.warmup_confirm_message'|trans }}<br><small class="text-muted">{{ 'admin.cache.warmup_confirm_description'|trans }}</small>',
        '{{ 'admin.cache.warmup_cache'|trans }}',
        {
            confirmText: '{{ 'admin.cache.warmup'|trans }}',
            confirmClass: 'btn-success',
            icon: 'bi-fire text-success'
        }
    );
    
    if (confirmed) {
        const loading = showLoading('{{ 'admin.cache.warming_up_cache'|trans }}...');
        document.getElementById('warmupCacheForm').requestSubmit();
    }
}

function showCacheStats() {
    showNotification('{{ 'admin.cache.statistics_feature_coming_soon'|trans }}', 'info');
}
</script>
{% endblock %}