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

{% block title %}Импорт товаров{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>Импорт товаров</h2>
        <a href="{% url 'products:products-list' %}" class="btn btn-secondary">
            <i class="bi bi-arrow-left"></i> Назад к списку
        </a>
    </div>

    <!-- Инструкция -->
    <div class="card mb-4">
        <div class="card-header">
            <h5 class="mb-0">Инструкция</h5>
        </div>
        <div class="card-body">
            <p class="mb-2"><strong>Поддерживаемые форматы:</strong> CSV, XLSX</p>
            <p class="mb-2"><strong>Обязательные колонки:</strong></p>
            <ul class="mb-2">
                <li><code>Название</code> или <code>Артикул</code> (хотя бы одно)</li>
                <li><code>Цена</code> (обязательно для новых товаров)</li>
            </ul>
            <p class="mb-2"><strong>Опциональные колонки:</strong></p>
            <ul class="mb-2">
                <li><code>Описание</code></li>
                <li><code>Краткое описание</code></li>
                <li><code>Единица</code> (шт, м, г, л, кг)</li>
                <li><code>Себестоимость</code></li>
                <li><code>Цена со скидкой</code></li>
                <li><code>Изображения</code> (URL изображений, каждый с новой строки)</li>
            </ul>
            <p class="mb-0 text-muted">
                <small>Система автоматически распознает колонки на русском и английском языках.</small>
            </p>
        </div>
    </div>

    <!-- Форма загрузки -->
    <div class="card">
        <div class="card-body">
            <form method="post" enctype="multipart/form-data">
                {% csrf_token %}
                
                <div class="mb-3">
                    <label for="file" class="form-label">Выберите файл</label>
                    <input type="file" class="form-control" id="file" name="file" 
                           accept=".csv,.xlsx,.xls" required>
                    <div class="form-text">Формат: CSV или XLSX</div>
                </div>

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

                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-upload"></i> Импортировать
                </button>
            </form>
        </div>
    </div>

    <!-- Результаты импорта -->
    {% if result %}
    <div class="card mt-4">
        <div class="card-header {% if result.success %}bg-success text-white{% else %}bg-danger text-white{% endif %}">
            <h5 class="mb-0">Результаты импорта</h5>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-3">
                    <div class="text-center p-3 border rounded">
                        <h3 class="text-success mb-0">{{ result.created }}</h3>
                        <small class="text-muted">Создано</small>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="text-center p-3 border rounded">
                        <h3 class="text-info mb-0">{{ result.updated }}</h3>
                        <small class="text-muted">Обновлено</small>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="text-center p-3 border rounded">
                        <h3 class="text-warning mb-0">{{ result.skipped }}</h3>
                        <small class="text-muted">Пропущено</small>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="text-center p-3 border rounded">
                        <h3 class="text-danger mb-0">{{ result.real_error_count }}</h3>
                        <small class="text-muted">Ошибок</small>
                    </div>
                </div>
            </div>

            {% if has_error_file %}
            <div class="mt-3">
                <a href="{% url 'products:product-import-errors-download' %}" 
                   class="btn btn-warning">
                    <i class="bi bi-download"></i> Скачать файл с ошибками
                </a>
            </div>
            {% endif %}

            <!-- Детальный список ошибок -->
            {% if result.errors %}
            <div class="mt-4">
                <h6>Детальный список проблем:</h6>
                <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
                    <table class="table table-sm table-striped">
                        <thead class="sticky-top bg-white">
                            <tr>
                                <th>Строка</th>
                                <th>Название</th>
                                <th>Артикул</th>
                                <th>Причина</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for error in result.errors %}
                            <tr>
                                <td>{{ error.row|default:"-" }}</td>
                                <td>{{ error.name|default:"-" }}</td>
                                <td>{{ error.sku|default:"-" }}</td>
                                <td class="text-danger">{{ error.reason }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
    {% endif %}

    <!-- Пример CSV -->
    <div class="card mt-4">
        <div class="card-header">
            <h5 class="mb-0">Пример формата CSV</h5>
        </div>
        <div class="card-body">
            <pre class="mb-0"><code>Название,Цена,Артикул,Описание,Единица,Себестоимость,Цена со скидкой
Роза красная 50см,150.00,R-001,Красивая роза,шт,80.00,
Лента атласная,50.00,L-001,,м,,45.00
Упаковка крафт,30.00,P-001,Крафт-бумага,шт,15.00,</code></pre>
        </div>
    </div>
</div>
{% endblock %}
