{% extends "base.html" %}

{% block title %}Импорт клиентов{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-md-8 offset-md-2">
            
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1>Импорт клиентов</h1>
                <a href="{% url 'customers:customer-list' %}" class="btn btn-outline-secondary">
                    <i class="bi bi-arrow-left"></i> Назад к списку
                </a>
            </div>

            <!-- Инструкция -->
            <div class="alert alert-info mb-4">
                <h5 class="alert-heading"><i class="bi bi-info-circle"></i> Инструкция</h5>
                <p class="mb-2">Загрузите CSV или Excel файл со следующими столбцами:</p>
                <ul class="mb-2">
                    <li><strong>Имя</strong> (обязательно)</li>
                    <li><strong>Email</strong> (опционально, должен быть уникальным)</li>
                    <li><strong>Телефон</strong> (опционально, формат: +375XXXXXXXXX, должен быть уникальным)</li>
                </ul>
                <p class="mb-0">
                    <a href="{% url 'customers:customer-export' %}" class="btn btn-sm btn-outline-primary">
                        <i class="bi bi-download"></i> Скачать образец (текущие клиенты)
                    </a>
                </p>
            </div>

            <!-- Результаты импорта -->
            {% if import_result %}
            <div class="card mb-4 border-{{ import_result.success|yesno:'success,danger' }}">
                <div class="card-header bg-{{ import_result.success|yesno:'success,danger' }} text-white">
                    <h5 class="mb-0">
                        <i class="bi bi-{{ import_result.success|yesno:'check-circle,exclamation-triangle' }}"></i>
                        Результаты импорта
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-md-2">
                            <div class="text-center p-3 bg-light rounded">
                                <div class="h2 mb-0 text-success">{{ import_result.created }}</div>
                                <small class="text-muted">Создано</small>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="text-center p-3 bg-light rounded">
                                <div class="h2 mb-0 text-primary">{{ import_result.enriched }}</div>
                                <small class="text-muted">Дополнено</small>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="text-center p-3 bg-light rounded">
                                <div class="h2 mb-0 text-info">{{ import_result.updated }}</div>
                                <small class="text-muted">Обновлено</small>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="text-center p-3 bg-light rounded">
                                <div class="h2 mb-0 text-secondary">{{ import_result.conflicts_resolved }}</div>
                                <small class="text-muted">Альт. контакты</small>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="text-center p-3 bg-light rounded">
                                <div class="h2 mb-0 text-warning">{{ import_result.duplicate_count }}</div>
                                <small class="text-muted">Дубликатов</small>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="text-center p-3 bg-light rounded">
                                <div class="h2 mb-0 text-danger">{{ import_result.real_error_count }}</div>
                                <small class="text-muted">Ошибок</small>
                            </div>
                        </div>
                    </div>

                    {% if import_result.real_errors %}
                    <div class="alert alert-warning">
                        <h6 class="alert-heading">
                            <i class="bi bi-exclamation-triangle"></i> 
                            Обнаружено {{ import_result.real_error_count }} ошибок валидации
                        </h6>
                        <p class="mb-2">Первые ошибки:</p>
                        <ul class="mb-0">
                            {% for error in import_result.real_errors|slice:":10" %}
                            <li>
                                <strong>Строка {{ error.row }}:</strong> {{ error.reason }}
                                {% if error.email %}<code>{{ error.email }}</code>{% endif %}
                                {% if error.phone %}<code>{{ error.phone }}</code>{% endif %}
                            </li>
                            {% endfor %}
                        </ul>
                        {% if import_result.real_error_count > 10 %}
                        <p class="mb-0 mt-2 text-muted">
                            <small>...и ещё {{ import_result.real_error_count|add:"-10" }} ошибок</small>
                        </p>
                        {% endif %}
                    </div>

                    {% if has_error_file %}
                    <div class="text-center">
                        <a href="{% url 'customers:customer-import-download-errors' %}" class="btn btn-danger btn-lg">
                            <i class="bi bi-download"></i> Скачать файл с ошибками
                        </a>
                        <p class="text-muted mt-2 mb-0">
                            <small>Исправьте ошибки в файле и загрузите снова</small>
                        </p>
                    </div>
                    {% endif %}
                    {% endif %}

                    {% if import_result.duplicate_count > 0 %}
                    <div class="alert alert-info mt-3">
                        <i class="bi bi-info-circle"></i>
                        Пропущено дубликатов: {{ import_result.duplicate_count }} 
                        (клиенты с такими email/телефонами уже существуют)
                    </div>
                    {% endif %}
                </div>
            </div>
            {% endif %}

            <!-- Форма загрузки -->
            <div class="card">
                <div class="card-body">
                    <form method="post" enctype="multipart/form-data" id="importForm">
                        {% csrf_token %}
                        
                        <!-- Drag & Drop зона -->
                        <div class="mb-3">
                            <label for="file" class="form-label">Выберите файл</label>
                            
                            <div id="dropZone" class="border border-2 border-dashed rounded p-4 text-center position-relative" 
                                 style="min-height: 150px; cursor: pointer; transition: all 0.3s;">
                                <input type="file" class="form-control d-none" id="file" name="file" 
                                       accept=".csv,.xlsx,.xls" required>
                                
                                <div id="dropZoneContent">
                                    <i class="bi bi-cloud-upload fs-1 text-muted"></i>
                                    <p class="mt-3 mb-2">
                                        <strong>Перетащите файл сюда</strong> или 
                                        <span class="text-primary">нажмите для выбора</span>
                                    </p>
                                    <p class="text-muted mb-0">
                                        <small>
                                            Поддерживаемые форматы: CSV, Excel (.xlsx, .xls)<br>
                                            Также можно вставить файл через <kbd>Ctrl+V</kbd>
                                        </small>
                                    </p>
                                </div>

                                <div id="filePreview" class="d-none">
                                    <i class="bi bi-file-earmark-spreadsheet fs-1 text-success"></i>
                                    <p class="mt-3 mb-0">
                                        <strong id="fileName"></strong>
                                        <br>
                                        <small class="text-muted" id="fileSize"></small>
                                    </p>
                                    <button type="button" class="btn btn-sm btn-outline-danger mt-2" id="removeFile">
                                        <i class="bi bi-x-circle"></i> Удалить
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div class="form-check mb-3">
                            <input type="checkbox" class="form-check-input" id="update_existing" name="update_existing">
                            <label class="form-check-label" for="update_existing">
                                Обновлять существующих клиентов (по email или телефону)
                            </label>
                        </div>

                        <button type="submit" class="btn btn-primary" id="submitBtn">
                            <i class="bi bi-upload"></i> Импортировать
                        </button>
                        <a href="{% url 'customers:customer-list' %}" class="btn btn-outline-secondary">
                            Отмена
                        </a>
                    </form>
                    
                    <!-- Прогресс-бар (скрыт по умолчанию) -->
                    <div id="progressContainer" class="mt-4 d-none">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <strong>Импорт в процессе...</strong>
                            <span id="progressText" class="text-muted">Подготовка...</span>
                        </div>
                        <div class="progress" style="height: 25px;">
                            <div id="progressBar" class="progress-bar progress-bar-striped progress-bar-animated" 
                                 role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
                                <span id="progressPercent">0%</span>
                            </div>
                        </div>
                        <p class="text-muted mt-2 mb-0">
                            <small><i class="bi bi-exclamation-triangle text-warning"></i> Не закрывайте страницу до завершения импорта</small>
                        </p>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const dropZone = document.getElementById('dropZone');
    const fileInput = document.getElementById('file');
    const dropZoneContent = document.getElementById('dropZoneContent');
    const filePreview = document.getElementById('filePreview');
    const fileName = document.getElementById('fileName');
    const fileSize = document.getElementById('fileSize');
    const removeFileBtn = document.getElementById('removeFile');
    const importForm = document.getElementById('importForm');

    // Клик по зоне = открыть диалог выбора файла
    dropZone.addEventListener('click', function(e) {
        if (e.target.id !== 'removeFile' && !e.target.closest('#removeFile')) {
            fileInput.click();
        }
    });

    // Обработка выбора файла через input
    fileInput.addEventListener('change', function(e) {
        if (e.target.files.length > 0) {
            showFilePreview(e.target.files[0]);
        }
    });

    // Drag & Drop события
    dropZone.addEventListener('dragover', function(e) {
        e.preventDefault();
        e.stopPropagation();
        dropZone.classList.add('border-primary', 'bg-light');
    });

    dropZone.addEventListener('dragleave', function(e) {
        e.preventDefault();
        e.stopPropagation();
        dropZone.classList.remove('border-primary', 'bg-light');
    });

    dropZone.addEventListener('drop', function(e) {
        e.preventDefault();
        e.stopPropagation();
        dropZone.classList.remove('border-primary', 'bg-light');

        const files = e.dataTransfer.files;
        if (files.length > 0) {
            const file = files[0];
            if (isValidFile(file)) {
                // Присваиваем файл в input через DataTransfer
                const dataTransfer = new DataTransfer();
                dataTransfer.items.add(file);
                fileInput.files = dataTransfer.files;
                showFilePreview(file);
            } else {
                alert('Неподдерживаемый формат файла. Используйте CSV или Excel (.xlsx, .xls)');
            }
        }
    });

    // Paste через Ctrl+V
    document.addEventListener('paste', function(e) {
        const items = e.clipboardData.items;
        
        for (let i = 0; i < items.length; i++) {
            const item = items[i];
            
            // Проверяем, есть ли файл в буфере
            if (item.kind === 'file') {
                const file = item.getAsFile();
                if (file && isValidFile(file)) {
                    const dataTransfer = new DataTransfer();
                    dataTransfer.items.add(file);
                    fileInput.files = dataTransfer.files;
                    showFilePreview(file);
                    e.preventDefault();
                    break;
                }
            }
        }
    });

    // Показать превью файла
    function showFilePreview(file) {
        fileName.textContent = file.name;
        fileSize.textContent = formatFileSize(file.size);
        dropZoneContent.classList.add('d-none');
        filePreview.classList.remove('d-none');
    }

    // Удалить файл
    removeFileBtn.addEventListener('click', function(e) {
        e.stopPropagation();
        fileInput.value = '';
        filePreview.classList.add('d-none');
        dropZoneContent.classList.remove('d-none');
    });

    // Проверка формата файла
    function isValidFile(file) {
        const validExtensions = ['.csv', '.xlsx', '.xls'];
        const fileName = file.name.toLowerCase();
        return validExtensions.some(ext => fileName.endsWith(ext));
    }

    // Форматирование размера файла
    function formatFileSize(bytes) {
        if (bytes === 0) return '0 Bytes';
        const k = 1024;
        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
    }

    // Валидация перед отправкой
    importForm.addEventListener('submit', function(e) {
        if (!fileInput.files || fileInput.files.length === 0) {
            e.preventDefault();
            alert('Пожалуйста, выберите файл для импорта');
            return false;
        }
        
        // НЕ блокируем отправку формы, но показываем прогресс-бар сразу после клика
        // Используем setTimeout чтобы форма успела начать отправку
        setTimeout(() => {
            showProgressBar();
        }, 10);
    });
    
    // Показать прогресс-бар и защиту от закрытия
    function showProgressBar() {
        const submitBtn = document.getElementById('submitBtn');
        const progressContainer = document.getElementById('progressContainer');
        const progressBar = document.getElementById('progressBar');
        const progressPercent = document.getElementById('progressPercent');
        const progressText = document.getElementById('progressText');
        
        // Блокируем кнопку и форму
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Импорт...';
        fileInput.disabled = true;
        dropZone.style.pointerEvents = 'none';
        dropZone.style.opacity = '0.6';
        
        // Показываем прогресс-бар
        progressContainer.classList.remove('d-none');
        
        // Анимация прогресса (имитация, т.к. реальный прогресс без WebSocket сложен)
        let progress = 0;
        const progressInterval = setInterval(() => {
            if (progress < 90) {
                progress += Math.random() * 15;
                if (progress > 90) progress = 90;
                
                progressBar.style.width = progress + '%';
                progressBar.setAttribute('aria-valuenow', progress);
                progressPercent.textContent = Math.round(progress) + '%';
                
                if (progress < 30) {
                    progressText.textContent = 'Чтение файла...';
                } else if (progress < 60) {
                    progressText.textContent = 'Обработка данных...';
                } else {
                    progressText.textContent = 'Сохранение в базу...';
                }
            }
        }, 300);
        
        // Сохраняем интервал для очистки при завершении страницы
        window.importProgressInterval = progressInterval;
        
        // Включаем защиту от закрытия страницы
        window.importInProgress = true;
    }
    
    // Предупреждение при закрытии страницы во время импорта
    window.addEventListener('beforeunload', function(e) {
        if (window.importInProgress) {
            e.preventDefault();
            e.returnValue = 'Импорт ещё не завершён. Вы уверены, что хотите покинуть страницу?';
            return e.returnValue;
        }
    });
});
</script>

<style>
#dropZone {
    transition: all 0.3s ease;
}

#dropZone:hover {
    border-color: var(--bs-primary) !important;
    background-color: rgba(var(--bs-primary-rgb), 0.05);
}

#dropZone.border-primary {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
}
</style>
{% endblock %}
