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

{% block title %}PrestaShop | Integracje{% endblock %}

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

    <div class="ops-page prestashop-config-page">
        <section class="ops-hero ops-hero--presta">
            <div class="ops-hero__content">
                <div class="ops-kicker">
                    <span class="ui-icon">shopping_cart</span>
                    Integracja / Konfiguracja
                </div>
                <h1>PrestaShop Connector</h1>
                <p>
                    Konfiguracja połączenia z modułem <code>miceyproductconnector</code>. Requesty są podpisywane HMAC, a słowniki produktu są pobierane z endpointów modułu.
                </p>
            </div>
            <div class="ops-hero__actions">
                <a href="{{ path('app_integrations') }}" class="button button--ghost">
                    <span class="ui-icon">arrow_back</span>
                    Wróć do integracji
                </a>
            </div>
        </section>

        <section class="ops-stat-grid ops-stat-grid--five">
            <article class="ops-stat-card">
                <span class="ops-stat-card__icon ui-icon">lan</span>
                <span class="ops-stat-card__label">Status</span>
                <strong>{{ integration.status }}</strong>
            </article>
            <article class="ops-stat-card">
                <span class="ops-stat-card__icon ui-icon">power_settings_new</span>
                <span class="ops-stat-card__label">Aktywna</span>
                <strong>{{ integration.enabled ? 'tak' : 'nie' }}</strong>
            </article>
            <article class="ops-stat-card">
                <span class="ops-stat-card__icon ui-icon">encrypted</span>
                <span class="ops-stat-card__label">Secret</span>
                <strong>{{ has_secret ? 'ustawiony' : 'brak' }}</strong>
            </article>
            <article class="ops-stat-card">
                <span class="ops-stat-card__icon ui-icon">network_ping</span>
                <span class="ops-stat-card__label">Ostatni ping</span>
                <strong>{{ integration.lastPingAt ? integration.lastPingAt|date('d-m H:i') : '—' }}</strong>
            </article>
            <article class="ops-stat-card">
                <span class="ops-stat-card__icon ui-icon">sync</span>
                <span class="ops-stat-card__label">Synchronizacja</span>
                <strong>{{ integration.lastSyncAt ? integration.lastSyncAt|date('d-m H:i') : '—' }}</strong>
            </article>
        </section>

        {% if integration.lastError %}
            <div class="ops-note ops-note--error">
                <span class="ui-icon">error</span>
                <p><strong>Ostatni błąd:</strong> {{ integration.lastError }}</p>
            </div>
        {% endif %}

        <section class="ops-layout ops-layout--main-aside">
            <article class="ops-card ops-card--form">
                <div class="ops-card__head">
                    <div>
                        <span class="ops-card__eyebrow">Ustawienia połączenia</span>
                        <h2>Konfiguracja PrestaShop</h2>
                        <p>Wpisz adres sklepu, identyfikator aplikacji i secret zgodny z konfiguracją modułu po stronie PrestaShop.</p>
                    </div>
                </div>

                {{ form_start(form, { attr: { class: 'ops-form presta-config-form' } }) }}
                    <div class="ops-form-grid ops-form-grid--two">
                        <div class="form-row ops-form-row">{{ form_row(form.name) }}</div>
                        <div class="form-row ops-form-row">{{ form_row(form.shop_url) }}</div>
                        <div class="form-row ops-form-row">{{ form_row(form.app_id) }}</div>
                        <div class="form-row ops-form-row">{{ form_row(form.shared_secret) }}</div>
                    </div>

                    <div class="ops-subcard ops-subcard--soft">
                        <div class="ops-subcard__head">
                            <strong>Opcje publikacji i debugowania</strong>
                            <span>Te ustawienia wpływają na publikowanie produktów oraz logowanie requestów.</span>
                        </div>
                        <div class="ops-form-row-group">
                            <div class="form-row form-row--inline">{{ form_row(form.enabled) }} {{ form_row(form.debug) }} {{ form_row(form.default_active_after_publish) }}</div>
                            <div class="form-row form-row--inline">{{ form_row(form.prestashop_auto_upload_images_after_publish) }}</div>
                            <div class="form-row ops-form-row ops-form-row--select">{{ form_row(form.default_platform_intent) }}</div>
                        </div>
                    </div>

                    <div class="ops-form-actions">
                        <button type="submit" class="button button--primary">
                            <span class="ui-icon">save</span>
                            Zapisz konfigurację
                        </button>
                    </div>
                {{ form_end(form) }}
            </article>

            <aside class="ops-card ops-card--aside">
                <div class="ops-card__head">
                    <div>
                        <span class="ops-card__eyebrow">Bezpieczeństwo</span>
                        <h2>HMAC i zgodność modułu</h2>
                    </div>
                </div>
                <div class="ops-guide-list">
                    <div>
                        <span class="ui-icon">encrypted</span>
                        <p><strong>Shared secret</strong> musi być taki sam w aplikacji i module PrestaShop.</p>
                    </div>
                    <div>
                        <span class="ui-icon">http</span>
                        <p><strong>Shop URL</strong> wpisuj bez końcowego slasha, np. domena sklepu lub środowisko testowe.</p>
                    </div>
                    <div>
                        <span class="ui-icon">bug_report</span>
                        <p><strong>Debug</strong> włączaj tylko na czas diagnozy, żeby nie przeładować logów integracji.</p>
                    </div>
                </div>
            </aside>
        </section>

        <section class="ops-card">
            <div class="ops-card__head ops-card__head--inline">
                <div>
                    <span class="ops-card__eyebrow">Endpointy</span>
                    <h2>Test i synchronizacja</h2>
                    <p>Do publikacji produktu potrzebne są słowniki formularza produktu, pobierane z endpointu <code>product-form-dictionaries</code>.</p>
                </div>
            </div>

            <div class="ops-endpoint-grid">
                <div class="ops-endpoint-card">
                    <span>Ping</span>
                    <code>{{ ping_endpoint }}</code>
                </div>
                <div class="ops-endpoint-card">
                    <span>Dictionaries</span>
                    <code>{{ dictionaries_endpoint }}</code>
                </div>
                <div class="ops-endpoint-card">
                    <span>Product form dictionaries</span>
                    <code>{{ product_form_dictionaries_endpoint }}</code>
                </div>
            </div>

            <div class="ops-action-row">
                <form method="post" action="{{ path('app_prestashop_test_connection') }}">
                    <input type="hidden" name="_token" value="{{ csrf_token('prestashop_test_connection') }}">
                    <button type="submit" class="button button--primary">
                        <span class="ui-icon">network_ping</span>
                        Testuj połączenie
                    </button>
                </form>

                <form method="post" action="{{ path('app_prestashop_sync_dictionaries') }}">
                    <input type="hidden" name="_token" value="{{ csrf_token('prestashop_sync_dictionaries') }}">
                    <button type="submit" class="button button--ghost">
                        <span class="ui-icon">sync_alt</span>
                        Synchronizuj bazowe słowniki
                    </button>
                </form>

                <form method="post" action="{{ path('app_prestashop_sync_product_form_dictionaries') }}">
                    <input type="hidden" name="_token" value="{{ csrf_token('prestashop_sync_product_form_dictionaries') }}">
                    <button type="submit" class="button button--primary">
                        <span class="ui-icon">sync</span>
                        Synchronizuj słowniki produktu
                    </button>
                </form>
            </div>
        </section>

        <section class="ops-card ops-card--compact">
            <div class="ops-card__head">
                <div>
                    <span class="ops-card__eyebrow">Etap 4.0</span>
                    <h2>Co robi synchronizacja słowników produktu?</h2>
                </div>
            </div>
            <div class="ops-note ops-note--info">
                <span class="ui-icon">info</span>
                <p>
                    Pobiera lokalnie kategorie, cechy, wartości cech, grupy atrybutów, wartości atrybutów, Perfect For, custom tagi oraz status tabel custom.
                    Te dane są później używane w tabie PrestaShop projektu i w walidacji przed publikacją.
                </p>
            </div>
        </section>
    </div>
{% endblock %}