{% extends 'layouts/app.html.twig' %}

{% block title %}{{ page_title }} | Luminous{% endblock %}

{% block app_content %}
    {% include 'partials/_flash_messages.html.twig' %}

    <div class="ops-page provider-page provider-sku-page">
        <section class="ops-hero">
            <div class="ops-hero__content">
                <span class="ops-kicker"><span class="ui-icon" aria-hidden="true">upload_file</span>Dostawcy / Import SKU</span>
                <h1>{{ provider.name }}</h1>
                <p>Import jest wykonywany dopiero po poprawnym podglądzie całego pliku. Błędny wiersz blokuje zapis wszystkich rekordów.</p>
            </div>
            <div class="ops-hero__actions">
                <a class="button button--ghost" href="{{ path('app_provider_sku_mapping', {id: provider.id}) }}">Wróć do mapowania</a>
                <a class="button button--ghost" href="{{ path('app_provider_sku_mapping_export', {id: provider.id}) }}">Pobierz wzór CSV</a>
            </div>
        </section>

        <section class="ops-card provider-sku-import-card">
            <div class="ops-card__head">
                <span class="ops-card__eyebrow">Krok 1</span>
                <h2>Wczytaj i zweryfikuj plik</h2>
                <p>Najbezpieczniej rozpocząć od eksportu, uzupełnić kolumny <code>provider_sku</code>, <code>provider_product_code</code>, <code>active</code> i <code>notes</code>, a następnie wczytać ten sam plik.</p>
            </div>
            {{ form_start(form) }}
                {{ form_errors(form) }}
                <div class="form-grid form-grid--two">
                    {{ form_row(form.file) }}
                </div>
                {{ form_row(form.preview) }}
            {{ form_end(form) }}
        </section>

        {% if preview %}
            <section class="ops-card">
                <div class="ops-card__head ops-card__head--inline">
                    <div>
                        <span class="ops-card__eyebrow">Krok 2</span>
                        <h2>Podgląd importu</h2>
                        <p>Poprawne wiersze: {{ preview.rows|length }}, pominięte puste: {{ preview.skipped }}, błędy: {{ preview.errors|length }}.</p>
                    </div>
                    <span class="provider-sku-status provider-sku-status--{{ preview.canImport ? 'resolved' : 'missing' }}">{{ preview.canImport ? 'gotowy do zapisu' : (preview.errors|length > 0 ? 'wymaga poprawy' : 'brak danych') }}</span>
                </div>

                {% if preview.errors|length == 0 and preview.rows|length == 0 %}
                    <div class="ops-note ops-note--warm">Nie znaleziono żadnego uzupełnionego SKU. Puste wiersze zostały pominięte.</div>
                {% endif %}

                {% if preview.errors|length > 0 %}
                    <div class="ops-note ops-note--danger">
                        <strong>Plik nie zostanie zapisany, dopóki wszystkie błędy nie zostaną poprawione.</strong>
                        <ul>
                            {% for error in preview.errors %}
                                <li>Wiersz {{ error.line ?: '—' }}: {{ error.message }}</li>
                            {% endfor %}
                        </ul>
                    </div>
                {% endif %}

                {% if preview.rows|length > 0 %}
                    <div class="table-responsive ops-table-wrap">
                        <table class="data-table ops-table provider-sku-import-table">
                            <thead><tr><th>Wiersz</th><th>Rodzaj produktu</th><th>Wariant</th><th>SKU</th><th>Kod produktu</th><th>Status</th><th>Uwagi</th></tr></thead>
                            <tbody>
                            {% for row in preview.rows %}
                                <tr>
                                    <td>{{ row.line }}</td>
                                    <td>{{ row.product_type ? row.product_type.name : '—' }}</td>
                                    <td><strong>{{ row.definition.label }}</strong><small><code>{{ row.definition.code }}</code></small></td>
                                    <td><code>{{ row.provider_sku }}</code></td>
                                    <td>{{ row.provider_product_code ?: '—' }}</td>
                                    <td>{{ row.active ? 'aktywna' : 'nieaktywna' }}</td>
                                    <td>{{ row.notes ?: '—' }}</td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% endif %}

                {% if preview.canImport and import_nonce %}
                    <form class="provider-sku-import-commit" method="post" action="{{ path('app_provider_sku_mapping_import_commit', {id: provider.id}) }}">
                        <input type="hidden" name="nonce" value="{{ import_nonce }}">
                        <input type="hidden" name="_token" value="{{ csrf_token('provider_sku_import_commit_' ~ provider.id ~ '_' ~ import_nonce) }}">
                        <span>Import zapisze {{ preview.rows|length }} zweryfikowanych mapowań.</span>
                        <button class="button button--primary" type="submit">Zatwierdź import</button>
                    </form>
                {% endif %}
            </section>
        {% endif %}
    </div>
{% endblock %}