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

{% block title %}Статус импорта{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="row">
        <div class="col-md-8 offset-md-2">
            <div class="card">
                <div class="card-header">
                    <h4>Статус импорта товаров</h4>
                </div>
                <div class="card-body">
                    <!-- Файл -->
                    <div class="mb-3">
                        <strong>Файл:</strong> {{ job.file_name }}
                    </div>

                    <!-- Статус -->
                    <div class="mb-3">
                        <strong>Статус:</strong> 
                        <span id="status-badge" class="badge bg-secondary">{{ job.get_status_display }}</span>
                    </div>

                    <!-- Прогресс-бар -->
                    <div class="mb-4" id="progress-container">
                        <div class="d-flex justify-content-between mb-2">
                            <span><strong>Прогресс:</strong></span>
                            <span id="progress-text">0 / 0 (0%)</span>
                        </div>
                        <div class="progress" style="height: 25px;">
                            <div id="progress-bar" class="progress-bar progress-bar-striped progress-bar-animated" 
                                 role="progressbar" 
                                 style="width: 0%"
                                 aria-valuenow="0" 
                                 aria-valuemin="0" 
                                 aria-valuemax="100">
                                <span id="progress-percent">0%</span>
                            </div>
                        </div>
                    </div>

                    <!-- Результаты -->
                    <div id="results-container" style="display: none;">
                        <h5 class="mb-3">Результаты импорта</h5>
                        <div class="row">
                            <div class="col-md-3">
                                <div class="card text-center bg-light">
                                    <div class="card-body">
                                        <h6 class="text-muted">Создано</h6>
                                        <h3 id="created-count" class="text-success">0</h3>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="card text-center bg-light">
                                    <div class="card-body">
                                        <h6 class="text-muted">Обновлено</h6>
                                        <h3 id="updated-count" class="text-info">0</h3>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="card text-center bg-light">
                                    <div class="card-body">
                                        <h6 class="text-muted">Пропущено</h6>
                                        <h3 id="skipped-count" class="text-warning">0</h3>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="card text-center bg-light">
                                    <div class="card-body">
                                        <h6 class="text-muted">Ошибки</h6>
                                        <h3 id="errors-count" class="text-danger">0</h3>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Сообщение об ошибке -->
                    <div id="error-container" class="alert alert-danger mt-3" style="display: none;">
                        <strong>Ошибка:</strong>
                        <p id="error-message" class="mb-0"></p>
                    </div>

                    <!-- Кнопки действий -->
                    <div class="mt-4">
                        <a href="{% url 'products:product-import' %}" class="btn btn-secondary">
                            <i class="bi bi-arrow-left"></i> Назад к импорту
                        </a>
                        <a href="{% url 'products:products-list' %}" class="btn btn-primary" id="view-products-btn" style="display: none;">
                            <i class="bi bi-list"></i> Посмотреть товары
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
(function() {
    const jobId = {{ job.id }};
    const statusUrl = "{% url 'products:product-import-status-api' job.id %}";
    let pollInterval = null;

    // Обновление UI на основе данных с сервера
    function updateUI(data) {
        // Обновляем статус
        const statusBadge = document.getElementById('status-badge');
        const statusMap = {
            'pending': { class: 'bg-secondary', text: 'Ожидание' },
            'processing': { class: 'bg-primary', text: 'Обработка' },
            'completed': { class: 'bg-success', text: 'Завершено' },
            'failed': { class: 'bg-danger', text: 'Ошибка' }
        };
        
        const statusInfo = statusMap[data.status] || { class: 'bg-secondary', text: data.status };
        statusBadge.className = 'badge ' + statusInfo.class;
        statusBadge.textContent = statusInfo.text;

        // Обновляем прогресс
        const progressPercent = data.progress_percent || 0;
        const progressBar = document.getElementById('progress-bar');
        const progressPercentText = document.getElementById('progress-percent');
        const progressText = document.getElementById('progress-text');
        
        progressBar.style.width = progressPercent + '%';
        progressBar.setAttribute('aria-valuenow', progressPercent);
        progressPercentText.textContent = progressPercent + '%';
        progressText.textContent = `${data.processed_rows} / ${data.total_rows} (${progressPercent}%)`;

        // Убираем анимацию если завершено
        if (data.is_finished) {
            progressBar.classList.remove('progress-bar-animated');
        }

        // Показываем результаты
        if (data.status === 'completed' || data.status === 'failed') {
            document.getElementById('results-container').style.display = 'block';
            document.getElementById('created-count').textContent = data.created_count;
            document.getElementById('updated-count').textContent = data.updated_count;
            document.getElementById('skipped-count').textContent = data.skipped_count;
            document.getElementById('errors-count').textContent = data.errors_count;

            // Показываем кнопку просмотра товаров
            if (data.status === 'completed') {
                document.getElementById('view-products-btn').style.display = 'inline-block';
            }
        }

        // Показываем сообщение об ошибке
        if (data.error_message) {
            const errorContainer = document.getElementById('error-container');
            const errorMessage = document.getElementById('error-message');
            errorContainer.style.display = 'block';
            errorMessage.textContent = data.error_message;
        }

        // Останавливаем polling если задача завершена
        if (data.is_finished && pollInterval) {
            clearInterval(pollInterval);
            pollInterval = null;
        }
    }

    // Получение статуса с сервера
    function fetchStatus() {
        fetch(statusUrl)
            .then(response => response.json())
            .then(data => {
                updateUI(data);
            })
            .catch(error => {
                console.error('Ошибка получения статуса:', error);
            });
    }

    // Запускаем polling каждые 2 секунды
    fetchStatus(); // Первый запрос сразу
    pollInterval = setInterval(fetchStatus, 2000);

    // Останавливаем polling при уходе со страницы
    window.addEventListener('beforeunload', function() {
        if (pollInterval) {
            clearInterval(pollInterval);
        }
    });
})();
</script>
{% endblock %}
