{% 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">inventory_2</span>Dostawcy / Mapowanie SKU</span>
                <h1>{{ provider.name }}</h1>
                <p>Dokładne mapowanie definicji wariantu produkcyjnego na SKU tego dostawcy. System nie dopasowuje kodów po podobieństwie nazw.</p>
            </div>
            <div class="ops-hero__actions">
                <a class="button button--ghost" href="{{ path('app_providers_sku_mapping') }}">Zmień dostawcę</a>
                <a class="button button--ghost" href="{{ path('app_provider_sku_mapping_export', {id: provider.id, product_type: selected_product_type ? selected_product_type.id : null, q: search}) }}">Eksport CSV</a>
                <a class="button button--primary" href="{{ path('app_provider_sku_mapping_import', {id: provider.id}) }}">Import CSV</a>
            </div>
        </section>

        <div class="provider-sku-switcher" aria-label="Dostawcy">
            {% for item in providers %}
                <a class="ops-chip {{ item.id == provider.id ? 'is-active' : '' }}" href="{{ path('app_provider_sku_mapping', {id: item.id}) }}">{{ item.name }}</a>
            {% endfor %}
        </div>

        <section class="ops-stat-grid ops-stat-grid--four">
            <article class="ops-stat-card">
                <span class="ops-stat-card__icon ui-icon">deployed_code</span>
                <span class="ops-stat-card__label">Definicje</span>
                <strong>{{ statistics.all }}</strong>
            </article>
            <article class="ops-stat-card">
                <span class="ops-stat-card__icon ui-icon">check_circle</span>
                <span class="ops-stat-card__label">Gotowe</span>
                <strong>{{ statistics.mapped }}</strong>
            </article>
            <article class="ops-stat-card">
                <span class="ops-stat-card__icon ui-icon">pause_circle</span>
                <span class="ops-stat-card__label">Nieaktywne</span>
                <strong>{{ statistics.inactive }}</strong>
            </article>
            <article class="ops-stat-card">
                <span class="ops-stat-card__icon ui-icon">warning</span>
                <span class="ops-stat-card__label">Brakujące</span>
                <strong>{{ statistics.missing }}</strong>
            </article>
        </section>

        <section class="ops-card">
            <form method="get" class="provider-sku-filters">
                <div class="form-field">
                    <label for="provider-sku-product-type">Rodzaj produktu</label>
                    <select id="provider-sku-product-type" name="product_type">
                        <option value="">Wszystkie rodzaje</option>
                        {% for product_type in product_types %}
                            <option value="{{ product_type.id }}" {{ selected_product_type and selected_product_type.id == product_type.id ? 'selected' : '' }}>{{ product_type.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-field provider-sku-filters__search">
                    <label for="provider-sku-search">Szukaj</label>
                    <input id="provider-sku-search" type="search" name="q" value="{{ search }}" placeholder="Kod albo pełna nazwa kombinacji">
                </div>
                <label class="provider-sku-checkbox">
                    <input type="checkbox" name="missing" value="1" {{ missing_only ? 'checked' : '' }}>
                    <span>Tylko brakujące lub nieaktywne</span>
                </label>
                <div class="provider-sku-filters__actions">
                    <button class="button button--primary" type="submit">Filtruj</button>
                    <a class="button button--ghost" href="{{ path('app_provider_sku_mapping', {id: provider.id}) }}">Wyczyść</a>
                </div>
            </form>
        </section>

        <section class="ops-card">
            <div class="ops-card__head ops-card__head--inline">
                <div>
                    <span class="ops-card__eyebrow">Reguły SKU</span>
                    <h2>{{ provider.name }}</h2>
                    <p>Puste SKU usuwa istniejące mapowanie. Nieaktywną regułę można zachować bez używania jej przez resolver.</p>
                </div>
                <span class="ops-soft-badge">{{ statistics.visible }} widocznych</span>
            </div>

            <form id="provider-sku-bulk-form" method="post" action="{{ path('app_provider_sku_mapping_bulk_save', {id: provider.id}) }}">
                <input type="hidden" name="_token" value="{{ csrf_token('provider_sku_bulk_' ~ provider.id) }}">
                <input type="hidden" name="_return" value="{{ return_query }}">

                <div class="table-responsive ops-table-wrap">
                    <table class="data-table ops-table provider-sku-table">
                        <thead>
                        <tr>
                            <th>Rodzaj produktu</th>
                            <th>Wariant produkcyjny</th>
                            <th>Projekty</th>
                            <th>SKU dostawcy</th>
                            <th>Kod produktu</th>
                            <th>Status</th>
                            <th>Uwagi</th>
                            <th>Akcja</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for row in rows %}
                            {% set definition = row.definition %}
                            {% set rule = row.rule %}
                            <tr class="provider-sku-row provider-sku-row--{{ row.status }}">
                                <td>
                                    <strong>{{ definition.productType ? definition.productType.name : '—' }}</strong>
                                    {% if definition.productType and definition.productType.code %}<small><code>{{ definition.productType.code }}</code></small>{% endif %}
                                </td>
                                <td class="provider-sku-definition-cell">
                                    <strong>{{ definition.label }}</strong>
                                    <code>{{ definition.code }}</code>
                                    <div class="production-component-pills">
                                        {% for component in definition.componentsJson %}
                                            <span class="production-component-pill"><small>{{ component.label|default(component.key) }}</small><strong>{{ component.value_label|default(component.value_code) }}</strong></span>
                                        {% endfor %}
                                    </div>
                                </td>
                                <td><span class="ops-soft-badge">{{ row.projectCount }}</span></td>
                                <td>
                                    <input type="text" name="rules[{{ definition.id }}][provider_sku]" value="{{ rule ? rule.providerSku : '' }}" maxlength="190" placeholder="SKU dostawcy" autocomplete="off">
                                </td>
                                <td>
                                    <input type="text" name="rules[{{ definition.id }}][provider_product_code]" value="{{ rule ? rule.providerProductCode : '' }}" maxlength="190" placeholder="opcjonalnie" autocomplete="off">
                                </td>
                                <td>
                                    <input type="hidden" name="rules[{{ definition.id }}][active]" value="0">
                                    <label class="provider-sku-active-toggle">
                                        <input type="checkbox" name="rules[{{ definition.id }}][active]" value="1" {{ rule is null or rule.active ? 'checked' : '' }}>
                                        <span>{{ row.status == 'resolved' ? 'Aktywna' : (row.status == 'inactive' ? 'Nieaktywna' : 'Nowa') }}</span>
                                    </label>
                                    <span class="provider-sku-status provider-sku-status--{{ row.status }}">
                                        {{ row.status == 'resolved' ? 'gotowe' : (row.status == 'inactive' ? 'nieaktywne' : 'brak SKU') }}
                                    </span>
                                    {% if rule %}
                                        <button
                                            class="button button--tiny button--ghost"
                                            type="submit"
                                            formaction="{{ path('app_provider_sku_mapping_toggle', {id: provider.id, rule: rule.id}) }}"
                                            name="_toggle_token"
                                            value="{{ csrf_token('provider_sku_toggle_' ~ rule.id) }}"
                                        >{{ rule.active ? 'Dezaktywuj' : 'Aktywuj' }}</button>
                                    {% endif %}
                                </td>
                                <td>
                                    <textarea name="rules[{{ definition.id }}][notes]" rows="2" placeholder="Uwagi do mapowania">{{ rule ? rule.notes : '' }}</textarea>
                                    {% if rule %}<small>Źródło: {{ rule.source == 'imported' ? 'import CSV' : 'ręczne' }}</small>{% endif %}
                                </td>
                                <td>
                                    <button
                                        class="button button--tiny"
                                        type="submit"
                                        formaction="{{ path('app_provider_sku_mapping_save', {id: provider.id, definition: definition.id}) }}"
                                        name="_row_token"
                                        value="{{ csrf_token('provider_sku_save_' ~ provider.id ~ '_' ~ definition.id) }}"
                                    >Zapisz</button>
                                </td>
                            </tr>
                        {% else %}
                            <tr><td colspan="8">Brak definicji pasujących do filtrów.</td></tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>

                {% if rows|length > 0 %}
                    <div class="provider-sku-bulk-actions">
                        <span>Zapis zbiorczy obejmie wszystkie {{ rows|length }} widoczne wiersze.</span>
                        <button class="button button--primary" type="submit">Zapisz wszystkie widoczne</button>
                    </div>
                {% endif %}
            </form>
        </section>
    </div>
{% endblock %}