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

{% block title %}Zdjęcia / Drive{% endblock %}

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

    <div class="ops-page mapping-drive-page">
        <section class="ops-hero ops-hero--drive">
            <div class="ops-hero__content">
                <div class="ops-kicker">
                    <span class="ui-icon">add_to_drive</span>
                    Mapowanie / Zdjęcia
                </div>
                <h1>Zdjęcia / Google Drive</h1>
                <p>
                    Profile składania ścieżki oraz reguły folderów. Cover ustawiamy przez regułę folderu z rolą <strong>Cover</strong>.
                    Jeśli nie ma reguły cover, pierwsze wybrane zdjęcie zostanie miniaturą.
                </p>
            </div>
            <div class="ops-hero__actions">
                <a class="button button--ghost" href="{{ path('app_dictionaries_index') }}">
                    <span class="ui-icon">arrow_back</span>
                    Wróć do słowników
                </a>
            </div>
        </section>

        <section class="ops-stat-grid ops-stat-grid--four">
            <article class="ops-stat-card">
                <span class="ops-stat-card__icon ui-icon">folder_managed</span>
                <span class="ops-stat-card__label">Profile Drive</span>
                <strong>{{ profiles|length }}</strong>
            </article>
            <article class="ops-stat-card">
                <span class="ops-stat-card__icon ui-icon">storefront</span>
                <span class="ops-stat-card__label">Platformy</span>
                <strong>{{ platforms|length }}</strong>
            </article>
            <article class="ops-stat-card">
                <span class="ops-stat-card__icon ui-icon">category</span>
                <span class="ops-stat-card__label">Typy produktów</span>
                <strong>{{ product_types|length }}</strong>
            </article>
            <article class="ops-stat-card">
                <span class="ops-stat-card__icon ui-icon">photo_library</span>
                <span class="ops-stat-card__label">Atrybuty zdjęć</span>
                <strong>{{ attribute_values|length }}</strong>
            </article>
        </section>

        <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">Nowy profil</span>
                        <h2>Dodaj profil mapowania Drive</h2>
                        <p>Profil określa bazowy folder, sposób budowania ścieżki projektu i domyślne limity zdjęć.</p>
                    </div>
                </div>

                <form method="post" class="ops-form">
                    <input type="hidden" name="_token" value="{{ csrf_token('google_drive_mapping') }}">
                    <div class="ops-form-grid ops-form-grid--two">
                        <label class="ops-field">Nazwa profilu
                            <input class="form-control" name="name" placeholder="Kubki / PrestaShop">
                        </label>
                        <label class="ops-field">Platforma
                            <select class="form-control" name="platform_id">
                                <option value="">dowolna</option>
                                {% for platform in platforms %}<option value="{{ platform.id }}">{{ platform.name }}</option>{% endfor %}
                            </select>
                        </label>
                        <label class="ops-field">Typ produktu
                            <select class="form-control" name="product_type_id">
                                <option value="">dowolny</option>
                                {% for type in product_types %}<option value="{{ type.id }}">{{ type.name }}</option>{% endfor %}
                            </select>
                        </label>
                        <label class="ops-field">Root folder path
                            <input class="form-control" name="root_folder_path" placeholder="#KATALOG_Kubki">
                            <small class="form-help">W większości przypadków wystarczy nazwa/ścieżka folderu głównego na Twoim dysku.</small>
                        </label>
                        <label class="ops-field">Tryb ścieżki projektu
                            <select class="form-control" name="project_path_mode">
                                {% for label, value in path_modes %}<option value="{{ value }}">{{ label }}</option>{% endfor %}
                            </select>
                        </label>
                        <label class="ops-field">Nazwa folderu mockupów
                            <input class="form-control" name="mockups_folder_name" value="Mockups">
                        </label>
                        <label class="ops-field">Globalny limit zdjęć
                            <input class="form-control" type="number" min="0" name="max_images" placeholder="np. 10">
                        </label>
                        <div class="ops-check-list">
                            <label class="checkbox-row"><input type="checkbox" name="enabled" value="1" checked> Aktywny</label>
                        </div>
                    </div>

                    <details class="ops-details ops-details--compact">
                        <summary>
                            <span class="ui-icon">key</span>
                            Zaawansowane: Root folder ID, opcjonalnie
                        </summary>
                        <p class="panel__text">
                            Root folder ID nie jest wymagany, jeśli aplikacja ma odnaleźć folder po ścieżce, np. <code>#KATALOG_Kubki</code>.
                            Jest przydatny tylko wtedy, gdy masz kilka folderów o tej samej nazwie albo chcesz ominąć wyszukiwanie po nazwie.
                        </p>
                        <label class="ops-field">Root folder ID
                            <input class="form-control" name="root_folder_id" placeholder="opcjonalnie, np. 1AbC...">
                        </label>
                    </details>

                    <div class="ops-form-actions">
                        <button class="button button--primary" type="submit">
                            <span class="ui-icon">add</span>
                            Dodaj profil Drive
                        </button>
                    </div>
                </form>
            </article>

            <aside class="ops-card ops-card--aside">
                <div class="ops-card__head">
                    <div>
                        <span class="ops-card__eyebrow">Logika covera</span>
                        <h2>Zasady wyboru zdjęć</h2>
                    </div>
                </div>
                <div class="ops-guide-list">
                    <div>
                        <span class="ui-icon">filter_1</span>
                        <p><strong>Reguły folderów</strong> decydują, które foldery są brane do publikacji.</p>
                    </div>
                    <div>
                        <span class="ui-icon">filter_2</span>
                        <p><strong>Rola Cover</strong> ustawia folder, z którego system wybierze miniaturę produktu.</p>
                    </div>
                    <div>
                        <span class="ui-icon">filter_3</span>
                        <p><strong>Mapowanie wariantów</strong> przypisuje zdjęcia z folderu do konkretnych kombinacji atrybutów.</p>
                    </div>
                </div>
            </aside>
        </section>

        <div class="ops-stack">
            {% for profile in profiles %}
                <section class="ops-card ops-profile-card">
                    <div class="ops-card__head ops-card__head--inline">
                        <div>
                            <span class="ops-card__eyebrow">Profil Drive</span>
                            <h2>{{ profile.name }}</h2>
                            <div class="ops-meta-line">
                                <span>{{ profile.platform ? profile.platform.name : 'dowolna platforma' }}</span>
                                <span>{{ profile.productType ? profile.productType.name : 'dowolny typ' }}</span>
                                <span>Root: <strong>{{ profile.rootFolderPath ?: profile.rootFolderId ?: '—' }}</strong></span>
                                <span>Mockups: <strong>{{ profile.mockupsFolderName }}</strong></span>
                            </div>
                        </div>
                        <span class="ops-status {{ profile.enabled ? 'is-green' : 'is-muted' }}">{{ profile.enabled ? 'aktywny' : 'nieaktywny' }}</span>
                    </div>

                    <div class="ops-note ops-note--info">
                        <span class="ui-icon">info</span>
                        <p>
                            Brak folderu w konkretnym projekcie nie jest błędem. System pobierze tylko foldery, które realnie istnieją.
                            Miniaturę/cover ustaw przez regułę folderu z rolą <strong>Cover</strong> i opcjonalnie limitem <strong>1</strong>.
                        </p>
                    </div>

                    <div class="table-responsive ops-table-wrap mt-3">
                        <table class="data-table ops-table">
                            <thead>
                            <tr>
                                <th>Priority</th>
                                <th>Pattern</th>
                                <th>Match</th>
                                <th>Rola</th>
                                <th>Include</th>
                                <th>Cover</th>
                                <th>Warianty</th>
                                <th>Limit</th>
                                <th>Aktywny</th>
                                <th>Akcje</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for rule in rules_by_profile[profile.id]|default([]) %}
                                <tr>
                                    <td><strong>{{ rule.priority }}</strong></td>
                                    <td>{{ rule.folderNamePattern }}</td>
                                    <td>{{ rule.matchModeLabel }}</td>
                                    <td><span class="text-badge drive-role drive-role--{{ rule.role }}">{{ rule.roleLabel }}</span></td>
                                    <td>{{ rule.includeImages ? 'tak' : 'nie' }}</td>
                                    <td>{{ rule.coverCandidate or rule.role == 'cover' ? 'tak' : 'nie' }}</td>
                                    <td>
                                        {% if rule.assignToVariant %}
                                            <span class="ops-soft-badge">{{ rule.variantAssignmentModeLabel }}</span>
                                        {% else %}
                                            —
                                        {% endif %}
                                    </td>
                                    <td>{{ rule.maxImages ?: '—' }}</td>
                                    <td><span class="ops-status {{ rule.active ? 'is-green' : 'is-muted' }}">{{ rule.active ? 'tak' : 'nie' }}</span></td>
                                    <td>
                                        <form method="post" action="{{ path('app_mapping_drive_rule_delete', { id: rule.id }) }}">
                                            <input type="hidden" name="_token" value="{{ csrf_token('google_drive_rule_delete_' ~ rule.id) }}">
                                            <button class="button button--tiny button--danger">Usuń</button>
                                        </form>
                                    </td>
                                </tr>
                                <tr class="drive-rule-details-row ops-rule-details-row">
                                    <td colspan="10">
                                        {% if rule.variantImageRules|length > 0 %}
                                            <div class="drive-variant-rules-list ops-variant-rules-list">
                                                <strong>Mapowania wariantów:</strong>
                                                {% for variant_rule in rule.variantImageRules %}
                                                    <div class="drive-variant-rule-pill ops-variant-rule-pill">
                                                        <span>{{ variant_rule.name }}</span>
                                                        <small>{{ variant_rule.attributeSelectionLabel }} / {{ variant_rule.assignModeLabel }}</small>
                                                        <form method="post" action="{{ path('app_mapping_drive_variant_rule_delete', { id: variant_rule.id }) }}">
                                                            <input type="hidden" name="_token" value="{{ csrf_token('google_drive_variant_rule_delete_' ~ variant_rule.id) }}">
                                                            <button class="button button--tiny button--danger">Usuń</button>
                                                        </form>
                                                    </div>
                                                {% endfor %}
                                            </div>
                                        {% endif %}

                                        <details class="ops-details ops-details--compact mt-3">
                                            <summary>
                                                <span class="ui-icon">linked_camera</span>
                                                Dodaj mapowanie zdjęć tego folderu do wariantów
                                            </summary>
                                            <form method="post" action="{{ path('app_mapping_drive_variant_rule_add', { id: rule.id }) }}" class="ops-form">
                                                <input type="hidden" name="_token" value="{{ csrf_token('google_drive_variant_rule_' ~ rule.id) }}">
                                                <div class="ops-form-grid ops-form-grid--two">
                                                    <label class="ops-field">Nazwa mapowania
                                                        <input class="form-control" name="name" placeholder="np. F190 + Czerwony">
                                                    </label>
                                                    <label class="ops-field">Tryb przypisania
                                                        <select class="form-control" name="assign_mode">
                                                            {% for label, value in variant_assign_modes %}<option value="{{ value }}">{{ label }}</option>{% endfor %}
                                                        </select>
                                                    </label>
                                                </div>

                                                <div class="drive-attribute-selection-grid ops-attribute-selection-grid">
                                                    {% for i in 0..3 %}
                                                        <div class="drive-attribute-selection-row ops-attribute-selection-row">
                                                            <label class="ops-field">Grupa atrybutu
                                                                <select class="form-control" name="attribute_group_id[]">
                                                                    <option value="">— wybierz —</option>
                                                                    {% for group in attribute_groups %}
                                                                        <option value="{{ group.prestaId }}">{{ group.nameForLang }}</option>
                                                                    {% endfor %}
                                                                </select>
                                                            </label>
                                                            <label class="ops-field">Wartość atrybutu
                                                                <select class="form-control" name="attribute_value_id[]">
                                                                    <option value="">— wybierz —</option>
                                                                    {% for value in attribute_values %}
                                                                        <option value="{{ value.prestaId }}">{{ value.attributeGroup ? value.attributeGroup.nameForLang : ('Grupa ' ~ value.attributeGroupPrestaId) }}: {{ value.nameForLang }}</option>
                                                                    {% endfor %}
                                                                </select>
                                                            </label>
                                                        </div>
                                                    {% endfor %}
                                                </div>

                                                <div class="ops-form-actions">
                                                    <label class="checkbox-row"><input type="checkbox" name="active" checked> Aktywne</label>
                                                    <button class="button button--primary">Dodaj mapowanie wariantu</button>
                                                </div>
                                            </form>
                                        </details>
                                    </td>
                                </tr>
                            {% else %}
                                <tr><td colspan="10">Brak reguł folderów.</td></tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>

                    <details class="ops-details mt-3">
                        <summary>
                            <span class="ui-icon">create_new_folder</span>
                            Dodaj regułę folderu
                        </summary>
                        <form method="post" action="{{ path('app_mapping_drive_rule_add', { id: profile.id }) }}" class="ops-form">
                            <input type="hidden" name="_token" value="{{ csrf_token('google_drive_rule_' ~ profile.id) }}">
                            <div class="ops-form-grid ops-form-grid--three">
                                <label class="ops-field">Folder name pattern <input class="form-control" name="folder_name_pattern" placeholder="11oz"></label>
                                <label class="ops-field">Folder path pattern <input class="form-control" name="folder_path_pattern" placeholder="opcjonalnie"></label>
                                <label class="ops-field">Match mode <select class="form-control" name="match_mode">{% for label, value in rule_match_modes %}<option value="{{ value }}">{{ label }}</option>{% endfor %}</select></label>
                                <label class="ops-field">Rola <select class="form-control" name="role">{% for label, value in rule_roles %}<option value="{{ value }}">{{ label }}</option>{% endfor %}</select></label>
                                <label class="ops-field">Priority <input class="form-control" type="number" name="priority" value="100"></label>
                                <label class="ops-field">Max images <input class="form-control" type="number" min="0" name="max_images"></label>
                                <label class="ops-field">Tryb mapowania wariantu
                                    <select class="form-control" name="variant_assignment_mode">
                                        {% for label, value in folder_variant_assign_modes %}<option value="{{ value }}">{{ label }}</option>{% endfor %}
                                    </select>
                                </label>
                                <div class="ops-check-list">
                                    <label class="checkbox-row"><input type="checkbox" name="include_images" checked> Include images</label>
                                    <label class="checkbox-row"><input type="checkbox" name="is_cover_candidate"> Cover candidate</label>
                                    <label class="checkbox-row"><input type="checkbox" name="assign_to_variant"> Przypisuj zdjęcia do wariantów</label>
                                    <label class="checkbox-row"><input type="checkbox" name="active" checked> Aktywna</label>
                                </div>
                            </div>
                            <div class="ops-form-actions">
                                <button class="button button--primary">Dodaj regułę</button>
                            </div>
                        </form>
                    </details>
                </section>
            {% else %}
                <section class="ops-card">
                    <div class="ops-empty-state">
                        <span class="ui-icon">add_to_drive</span>
                        <strong>Brak profili Drive</strong>
                        <p>Dodaj pierwszy profil, aby aplikacja mogła składać ścieżki do mockupów i wybierać zdjęcia do publikacji.</p>
                    </div>
                </section>
            {% endfor %}
        </div>
    </div>
{% endblock %}