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

{% block title %}Warianty produkcyjne | micey-projects{% endblock %}

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

    <div class="ops-page production-variants-page">
        <section class="ops-hero">
            <div class="ops-hero__content">
                <span class="ops-kicker"><span class="ui-icon" aria-hidden="true">deployed_code</span>Słowniki / Mapowania</span>
                <h1>Warianty produkcyjne</h1>
                <p>
                    Wspólne, kompletne kombinacje produkcyjne dla projektów jednego rodzaju produktu. Ten słownik nie zmienia
                    profili wariantów PrestaShop i nie uruchamia generatora wariantów platformowych.
                </p>
            </div>
            <div class="ops-hero__actions">
                <a class="button button--ghost" href="{{ path('app_dictionaries_index') }}">Wróć do słowników</a>
            </div>
        </section>

        <section class="ops-card ops-card--compact">
            <div class="ops-card__head ops-card__head--inline">
                <div>
                    <p class="ops-card__eyebrow">Filtrowanie</p>
                    <h2>Znajdź definicję</h2>
                </div>
            </div>

            <form method="get" action="{{ path('app_production_variants') }}" class="ops-form production-variant-filter">
                <div class="ops-form-grid ops-form-grid--three">
                    <label class="ops-field">
                        <span>Rodzaj produktu</span>
                        <select 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>
                    </label>
                    <label class="ops-field production-variant-filter__search">
                        <span>Kod lub etykieta</span>
                        <input type="search" name="q" value="{{ search }}" placeholder="np. BCE190 albo Czarny / S">
                    </label>
                    <div class="production-variant-filter__actions">
                        <button type="submit" class="button button--primary">Filtruj</button>
                        <a href="{{ path('app_production_variants') }}" class="button button--ghost">Wyczyść</a>
                    </div>
                </div>
            </form>
        </section>

        <section class="ops-layout ops-layout--main-aside production-variant-editor-layout">
            <article class="ops-card">
                <div class="ops-card__head">
                    <p class="ops-card__eyebrow">Kompletna kombinacja</p>
                    <h2>{{ editing_definition ? 'Edytuj definicję' : 'Dodaj definicję' }}</h2>
                    <p>
                        Każdy składnik opisuje jeden wymiar kombinacji. Podpis jest liczony automatycznie po normalizacji
                        kluczy, wartości, spacji i wielkości liter.
                    </p>
                </div>

                {{ form_start(form, { attr: { class: 'ops-form production-variant-form' } }) }}
                    <input type="hidden" name="_filter_product_type" value="{{ selected_product_type ? selected_product_type.id : '' }}">
                    <input type="hidden" name="_filter_q" value="{{ search }}">

                    {{ form_errors(form) }}

                    <div class="ops-form-grid ops-form-grid--two">
                        {{ form_row(form.productType) }}
                        {{ form_row(form.code) }}
                    </div>
                    <div class="ops-form-grid ops-form-grid--two">
                        {{ form_row(form.label) }}
                        {{ form_row(form.sortOrder) }}
                    </div>
                    {{ form_row(form.active) }}

                    {% set component_prototype %}
                        {% include 'production_variant/_component_row.html.twig' with { component: form.componentsJson.vars.prototype } only %}
                    {% endset %}

                    <div
                        class="production-components"
                        data-controller="production-variant-components"
                        data-production-variant-components-prototype-value="{{ component_prototype|e('html_attr') }}"
                        data-production-variant-components-index-value="{{ form.componentsJson|length }}"
                    >
                        <div class="production-components__head">
                            <div>
                                <strong>{{ form.componentsJson.vars.label }}</strong>
                                <span>Przykład: model → B&amp;C E190, color → Czarny, size → S.</span>
                            </div>
                            <button type="button" class="button button--tiny" data-action="production-variant-components#add">
                                Dodaj składnik
                            </button>
                        </div>

                        {{ form_errors(form.componentsJson) }}

                        <div class="production-components__list" data-production-variant-components-target="container">
                            {% for component in form.componentsJson %}
                                {% include 'production_variant/_component_row.html.twig' with { component: component } only %}
                            {% endfor %}
                        </div>

                        <p class="production-components__counter">
                            Składniki: <strong data-production-variant-components-target="count">{{ form.componentsJson|length }}</strong>
                        </p>
                    </div>
                    {% do form.componentsJson.setRendered %}

                    <div class="form-actions">
                        <button type="submit" class="button button--primary">
                            {{ editing_definition ? 'Zapisz zmiany' : 'Dodaj kombinację' }}
                        </button>
                        {% if editing_definition %}
                            <a
                                class="button button--ghost"
                                href="{{ path('app_production_variants', {
                                    product_type: selected_product_type ? selected_product_type.id : null,
                                    q: search ?: null
                                }) }}"
                            >Anuluj edycję</a>
                        {% endif %}
                    </div>
                {{ form_end(form) }}
            </article>

            <aside class="ops-card ops-card--aside">
                <div class="ops-card__head">
                    <p class="ops-card__eyebrow">Zakres</p>
                    <h3>Co zapisuje definicja?</h3>
                </div>
                <div class="ops-stack production-variant-help">
                    <p><strong>Jedną kompletną kombinację</strong>, nie globalne słowniki kolorów, modeli ani rozmiarów.</p>
                    <p><strong>Wspólną tożsamość produkcyjną</strong>, którą można przypisać do wielu projektów tego samego rodzaju.</p>
                    <p><strong>Stabilny podpis SHA-256</strong>, który zabezpiecza import przed powieleniem tej samej kombinacji.</p>
                    <p><strong>Brak wpływu na PrestaShop</strong> — obecny mechanizm <code>VariantProfile</code> pozostaje bez zmian.</p>
                </div>
            </aside>
        </section>

        <section class="ops-card">
            <div class="ops-card__head ops-card__head--inline">
                <div>
                    <p class="ops-card__eyebrow">Słownik wspólny</p>
                    <h2>Lista definicji</h2>
                    <p>Widoczna liczba projektów pochodzi z relacji projektu z daną definicją.</p>
                </div>
                <span class="text-badge text-badge--muted">{{ items|length }} wyników</span>
            </div>

            <div class="table-responsive">
                <table class="data-table production-variant-table">
                    <thead>
                    <tr>
                        <th>Rodzaj</th>
                        <th>Kod i etykieta</th>
                        <th>Składniki</th>
                        <th>Projekty</th>
                        <th>Stan</th>
                        <th>Akcje</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for row in items %}
                        {% set definition = row.definition %}
                        <tr>
                            <td>
                                <strong>{{ definition.productType.name }}</strong>
                                <small class="text-muted d-block">{{ definition.productType.code ?: 'bez kodu' }}</small>
                            </td>
                            <td>
                                <span class="mono-badge">{{ definition.code }}</span>
                                <strong class="production-variant-table__label">{{ definition.label }}</strong>
                                <small class="text-muted d-block">kolejność: {{ definition.sortOrder }}</small>
                            </td>
                            <td>
                                <div class="production-component-pills">
                                    {% for component in definition.componentsJson %}
                                        <span class="production-component-pill">
                                            <small>{{ component.label }}</small>
                                            <strong>{{ component.value_label }}</strong>
                                            <code>{{ component.key }}:{{ component.value_code }}</code>
                                        </span>
                                    {% endfor %}
                                </div>
                            </td>
                            <td><span class="text-badge">{{ row.projectCount }}</span></td>
                            <td>
                                {% if definition.active %}
                                    <span class="text-badge">aktywna</span>
                                {% else %}
                                    <span class="text-badge text-badge--muted">nieaktywna</span>
                                {% endif %}
                            </td>
                            <td>
                                <div class="button-row button-row--compact">
                                    <a
                                        class="button button--tiny"
                                        href="{{ path('app_production_variant_edit', {
                                            id: definition.id,
                                            product_type: selected_product_type ? selected_product_type.id : null,
                                            q: search ?: null
                                        }) }}"
                                    >Edytuj</a>
                                    <form method="post" action="{{ path('app_production_variant_toggle', { id: definition.id }) }}">
                                        <input type="hidden" name="_token" value="{{ csrf_token('toggle_production_variant_' ~ definition.id) }}">
                                        <input type="hidden" name="active" value="{{ definition.active ? '0' : '1' }}">
                                        <input type="hidden" name="_filter_product_type" value="{{ selected_product_type ? selected_product_type.id : '' }}">
                                        <input type="hidden" name="_filter_q" value="{{ search }}">
                                        <button type="submit" class="button button--tiny {{ definition.active ? 'button--danger' : '' }}">
                                            {{ definition.active ? 'Dezaktywuj' : 'Aktywuj' }}
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    {% else %}
                        <tr>
                            <td colspan="6">Brak definicji pasujących do filtrów.</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </section>
    </div>
{% endblock %}