{% extends "admin_panel/base.html" %}
{% load static %}

{% block title %}Cache Management - Pulosarok Admin{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/admin/cache-management.css' %}">
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">

            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h1 class="h3 mb-0">🗂️ Cache Management</h1>
                    <p class="text-muted">Kelola dan hapus media files yang tidak digunakan</p>
                </div>
                <div>
                    <button class="btn-cache" onclick="scanFiles()">
                        <i class="fas fa-search"></i> Scan Files
                    </button>
                    <button class="btn-danger-cache" onclick="deleteAllUnused()">
                        <i class="fas fa-trash"></i> Delete All Unused
                    </button>
                </div>
            </div>

            <div id="alert-container"></div>

            <div class="cache-stats">
                <div class="row">
                    <div class="col-md-3">
                        <div class="stat-card text-center">
                            <h3 class="mb-1">{{ stats.total_files }}</h3>
                            <p class="mb-0">Total Files</p>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="stat-card text-center">
                            <h3 class="mb-1">{{ stats.total_size_formatted }}</h3>
                            <p class="mb-0">Total Size</p>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="stat-card text-center">
                            <h3 class="mb-1">{{ stats.unused_files }}</h3>
                            <p class="mb-0">Unused Files</p>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="stat-card text-center">
                            <h3 class="mb-1">{{ stats.unused_size_formatted }}</h3>
                            <p class="mb-0">Unused Size</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-file-times"></i> Unused Media Files
                        <span class="badge badge-primary ml-2">{{ total_unused }}</span>
                    </h5>
                </div>
                <div class="card-body">
                    <div class="loading" id="loading">
                        <div class="spinner"></div>
                        <p class="mt-2">Scanning files...</p>
                    </div>

                    <div class="file-list" id="file-list">
                        {% for file in unused_files %}
                        <div class="file-item" data-file="{{ file.path }}">
                            <div class="file-info">
                                <div class="file-name">{{ file.path }}</div>
                                <div class="file-details">
                                    Size: {{ file.size|filesizeformat }} |
                                    Modified: {{ file.modified|date:"M d, Y H:i" }}
                                </div>
                            </div>
                            <div class="file-actions">
                                <button class="btn btn-sm btn-outline-danger" onclick="deleteFile('{{ file.path }}')">
                                    <i class="fas fa-trash"></i> Delete
                                </button>
                            </div>
                        </div>
                        {% empty %}
                        <div class="text-center py-4">
                            <i class="fas fa-check-circle text-success fa-3x mb-3"></i>
                            <p class="text-muted">No unused files found!</p>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>let unusedFiles = [];

function showAlert(message, type = 'info') {
    const alertContainer = document.getElementById('alert-container');
    const alertClass = `alert-${type}-cache`;

    alertContainer.innerHTML = `
        <div class="alert-cache ${alertClass} alert-dismissible fade show" role="alert">
            ${message}
            <button type="button" class="close" data-dismiss="alert">
                <span>&times;</span>
            </button>
        </div>
    `;

    setTimeout(() => {
        const alert = alertContainer.querySelector('.alert');
        if (alert) {
            alert.remove();
        }
    }, 5000);
}

function scanFiles() {
    const loading = document.getElementById('loading');
    const fileList = document.getElementById('file-list');

    loading.style.display = 'block';
    fileList.style.display = 'none';

    fetch('/admin-panel/cache/api/scan/', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': getCookie('csrftoken')
        }
    })
    .then(response => response.json())
    .then(data => {
        loading.style.display = 'none';
        fileList.style.display = 'block';

        if (data.success) {
            unusedFiles = data.files;
            showAlert(`Found ${data.unused_count} unused files (${data.unused_size})`, 'success');
            updateFileList();
        } else {
            showAlert(data.message, 'danger');
        }
    })
    .catch(error => {
        loading.style.display = 'none';
        fileList.style.display = 'block';
        showAlert('Error scanning files: ' + error.message, 'danger');
    });
}

function updateFileList() {
    const fileList = document.getElementById('file-list');

    if (unusedFiles.length === 0) {
        fileList.innerHTML = `
            <div class="text-center py-4">
                <i class="fas fa-check-circle text-success fa-3x mb-3"></i>
                <p class="text-muted">No unused files found!</p>
            </div>
        `;
        return;
    }

    let html = '';
    unusedFiles.forEach(file => {
        html += `
            <div class="file-item" data-file="${file.path}">
                <div class="file-info">
                    <div class="file-name">${file.path}</div>
                    <div class="file-details">
                        Size: ${formatFileSize(file.size)} |
                        Modified: ${new Date(file.modified * 1000).toLocaleDateString()}
                    </div>
                </div>
                <div class="file-actions">
                    <button class="btn btn-sm btn-outline-danger" onclick="deleteFile('${file.path}')">
                        <i class="fas fa-trash"></i> Delete
                    </button>
                </div>
            </div>
        `;
    });

    fileList.innerHTML = html;
}

function deleteFile(filePath) {
    if (!confirm(`Are you sure you want to delete "${filePath}"?`)) {
        return;
    }

    fetch('/admin-panel/cache/api/delete/', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': getCookie('csrftoken')
        },
        body: JSON.stringify({
            file_paths: [filePath]
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert(data.message, 'success');

            const fileItem = document.querySelector(`[data-file="${filePath}"]`);
            if (fileItem) {
                fileItem.remove();
            }

            unusedFiles = unusedFiles.filter(f => f.path !== filePath);
        } else {
            showAlert(data.message, 'danger');
        }
    })
    .catch(error => {
        showAlert('Error deleting file: ' + error.message, 'danger');
    });
}

function deleteAllUnused() {
    if (unusedFiles.length === 0) {
        showAlert('No unused files to delete', 'warning');
        return;
    }

    if (!confirm(`Are you sure you want to delete ${unusedFiles.length} unused files?`)) {
        return;
    }

    fetch('/admin-panel/cache/api/delete/', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': getCookie('csrftoken')
        },
        body: JSON.stringify({
            file_paths: []
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert(data.message, 'success');

            document.getElementById('file-list').innerHTML = `
                <div class="text-center py-4">
                    <i class="fas fa-check-circle text-success fa-3x mb-3"></i>
                    <p class="text-muted">All unused files have been deleted!</p>
                </div>
            `;
            unusedFiles = [];
        } else {
            showAlert(data.message, 'danger');
        }
    })
    .catch(error => {
        showAlert('Error deleting files: ' + error.message, 'danger');
    });
}

function formatFileSize(bytes) {
    if (bytes === 0) return '0 B';

    const k = 1024;
    const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));

    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
}

function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

document.addEventListener('DOMContentLoaded', function() {

    scanFiles();
});
</script>
{% endblock %}