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

{% block title %}Instrukcje AI | micey-projects{% endblock %}

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

    {% set active_fields_count = field_instructions|filter(row => row.active)|length %}
    {% set active_blocks_count = blocks|filter(block => block.active)|length %}
    {% set active_rules_count = rules|filter(rule => rule.active)|length %}
    {% set active_styles_count = styles|filter(style => style.active)|length %}
    {% set suggested_styles = [
        {
            code: 'prezentowy_celny',
            name: 'Prezentowy celny',
            icon: 'redeem',
            when: 'Opisy prezentów, kubków, koszulek i produktów kupowanych z myślą o konkretnej osobie.',
            voice: 'Ciepły, lekko zabawny, z jedną konkretną sceną z życia zamiast ogólnych obietnic.',
            avoid: 'Nie używać pustych fraz typu „na każdą okazję” ani przesłodzonego tonu.'
        },
        {
            code: 'ironia_kontrolowana',
            name: 'Ironia kontrolowana',
            icon: 'sentiment_very_satisfied',
            when: 'Nadruki humorystyczne, memiczne, relacyjne i produkty z tekstem, który ma wywołać reakcję.',
            voice: 'Celny komentarz, lekka złośliwość sytuacyjna, bez obrażania odbiorcy i bez chaosu.',
            avoid: 'Nie tłumaczyć żartu zbyt dosłownie i nie robić z opisu stand-upu.'
        },
        {
            code: 'seo_ludzki',
            name: 'SEO ludzki',
            icon: 'travel_explore',
            when: 'Kategorie, opisy produktów i sekcje, które muszą pozycjonować się, ale nadal brzmieć naturalnie.',
            voice: 'Frazy kluczowe wplecione w sens, konkretne zastosowanie produktu i język bez katalogowego nadęcia.',
            avoid: 'Nie upychać słów kluczowych i nie pisać zdań, których nikt normalnie nie wypowiada.'
        },
        {
            code: 'marketplace_krotki',
            name: 'Marketplace krótki',
            icon: 'bolt',
            when: 'Tytuły, krótkie opisy, meta dane i treści, gdzie liczy się szybka decyzja klienta.',
            voice: 'Krótko, jasno, z najważniejszą informacją na początku i bez rozbudowanej narracji.',
            avoid: 'Nie rozwlekać, nie dekorować tekstu i nie tworzyć zbyt długich wstępów.'
        }
    ] %}

    <div class="ai-instructions-page">
        <section class="ai-instructions-hero">
            <div class="ai-instructions-hero__main">
                <div class="ai-instructions-hero__eyebrow">
                    <span class="ui-icon">magic_button</span>
                    <span>AI Studio / Instrukcje</span>
                </div>
                <h2>{{ profile.name }}</h2>
                <p>
                    Zarządzasz instrukcjami generowania dla profilu AI. Te dane tworzą bazę dla master promptu,
                    pól draftu, bloków długiego opisu, reguł słownikowych i stylów komunikacji.
                </p>
                <div class="ai-instructions-hero__meta">
                    <span><strong>Platforma</strong>{{ platform ? platform.name : 'brak' }}</span>
                    <span><strong>Język</strong>{{ profile.languageCode|upper }}</span>
                    <span><strong>Rynek</strong>{{ profile.marketCode ?: 'domyślny' }}</span>
                    <span><strong>Marka</strong>{{ profile.brandName ?: 'nie ustawiono' }}</span>
                </div>
            </div>

            <div class="ai-instructions-hero__side">
                <form method="get" action="{{ path('app_ai_instructions') }}" class="ai-profile-switcher ai-profile-switcher--panel">
                    <label>Edytowany profil
                        <select class="form-control" name="profile" onchange="this.form.submit()">
                            {% for item in profiles %}
                                <option value="{{ item.id }}" {{ item.id == profile.id ? 'selected' : '' }}>
                                    {{ item.name }}{% if item.platform %} / {{ item.platform.name }}{% endif %}
                                </option>
                            {% endfor %}
                        </select>
                    </label>
                    <noscript><button class="button button--ghost" type="submit">Przełącz</button></noscript>
                </form>
                <div class="ai-instructions-hero__actions">
                    <a href="{{ path('app_ai_profiles') }}" class="button button--ghost">Profile AI</a>
                    <a href="{{ path('app_ai_examples') }}" class="button button--ghost">Przykłady</a>
                </div>
            </div>
        </section>

        <section class="ai-instructions-stats" aria-label="Podsumowanie instrukcji profilu">
            <article class="ai-instructions-stat">
                <span class="ui-icon">terminal</span>
                <strong>{{ master_prompts|length }}</strong>
                <small>Master prompty</small>
            </article>
            <article class="ai-instructions-stat">
                <span class="ui-icon">text_fields</span>
                <strong>{{ active_fields_count }}/{{ field_instructions|length }}</strong>
                <small>Aktywne pola</small>
            </article>
            <article class="ai-instructions-stat">
                <span class="ui-icon">view_agenda</span>
                <strong>{{ active_blocks_count }}/{{ blocks|length }}</strong>
                <small>Bloki opisu</small>
            </article>
            <article class="ai-instructions-stat">
                <span class="ui-icon">rule</span>
                <strong>{{ active_rules_count }}/{{ rules|length }}</strong>
                <small>Reguły</small>
            </article>
            <article class="ai-instructions-stat ai-instructions-stat--accent">
                <span class="ui-icon">record_voice_over</span>
                <strong>{{ active_styles_count }}/{{ styles|length }}</strong>
                <small>Style komunikacji</small>
            </article>
        </section>

        <section class="ai-instructions-section ai-instructions-section--master">
            <div class="ai-instructions-section__head">
                <div>
                    <span class="ai-instructions-section__kicker">Rdzeń profilu</span>
                    <h3>Master prompt profilu</h3>
                    <p>Główna instrukcja systemowa. Powinna definiować rolę AI, styl marki, format odpowiedzi i sposób korzystania z pól oraz słowników.</p>
                </div>
            </div>

            {% for prompt in master_prompts %}
                <form method="post" action="{{ path('app_ai_master_prompt_update', { id: prompt.id }) }}" class="ai-config-card ai-config-card--master stack-form">
                    <input type="hidden" name="_token" value="{{ csrf_token('ai_master_prompt_' ~ prompt.id) }}">
                    <div class="ai-config-card__top">
                        <div>
                            <span class="mono-badge">v{{ prompt.version }}</span>
                            <strong>{{ prompt.name }}</strong>
                        </div>
                        <label class="ai-toggle-pill">
                            <input type="checkbox" name="active" value="1" {{ prompt.active ? 'checked' : '' }}>
                            <span>{{ prompt.active ? 'Aktywny' : 'Nieaktywny' }}</span>
                        </label>
                    </div>
                    <div class="form-grid form-grid--two">
                        <label>Nazwa
                            <input class="form-control" name="name" value="{{ prompt.name }}" required>
                        </label>
                        <label>Wersja
                            <input class="form-control" type="number" name="version" value="{{ prompt.version }}" min="1">
                        </label>
                    </div>
                    <label>Treść master promptu
                        <textarea class="form-control ai-code-textarea" rows="10" name="content">{{ prompt.content }}</textarea>
                    </label>
                    <div class="form-actions">
                        <button class="button button--primary" type="submit">Zapisz master prompt</button>
                    </div>
                </form>
            {% else %}
                <div class="empty-state empty-state--compact">
                    <strong>Brak master promptu.</strong>
                    <span>Zapisz profil ponownie albo uruchom seed, aby system utworzył domyślny prompt.</span>
                </div>
            {% endfor %}
        </section>

        <section class="ai-instructions-section">
            <div class="ai-instructions-section__head ai-instructions-section__head--inline">
                <div>
                    <span class="ai-instructions-section__kicker">Pola draftu</span>
                    <h3>Pola pokrywane przez AI</h3>
                    <p>Włącz tylko te pola, które AI ma generować. Każde aktywne pole dostaje własną instrukcję.</p>
                </div>
                <span class="ai-instructions-count">{{ active_fields_count }} aktywne / {{ field_instructions|length }}</span>
            </div>

            <div class="ai-field-grid">
                {% for row in field_instructions %}
                    <form method="post" action="{{ path('app_ai_field_instruction_update', { id: row.id }) }}" class="ai-config-card ai-field-card {{ row.active ? 'is-active' : 'is-disabled' }} stack-form">
                        <input type="hidden" name="_token" value="{{ csrf_token('ai_field_instruction_' ~ row.id) }}">
                        <div class="ai-config-card__top">
                            <div>
                                <span class="mono-badge">{{ row.fieldCode }}</span>
                                <strong>{{ row.name }}</strong>
                            </div>
                            <label class="ai-toggle-pill">
                                <input type="checkbox" name="active" value="1" {{ row.active ? 'checked' : '' }}>
                                <span>{{ row.active ? 'AI generuje' : 'Wyłączone' }}</span>
                            </label>
                        </div>
                        <div class="form-grid form-grid--two">
                            <label>Kod pola
                                <input class="form-control" name="field_code" value="{{ row.fieldCode }}" required>
                            </label>
                            <label>Nazwa
                                <input class="form-control" name="name" value="{{ row.name }}" required>
                            </label>
                            <label>Sort
                                <input class="form-control" type="number" name="sort_order" value="{{ row.sortOrder }}">
                            </label>
                        </div>
                        <label>Instrukcja pola
                            <textarea class="form-control" name="instruction" rows="4">{{ row.instruction }}</textarea>
                        </label>
                        <div class="form-actions">
                            <button class="button button--primary" type="submit">Zapisz pole</button>
                        </div>
                    </form>
                {% else %}
                    <div class="empty-state empty-state--compact">Brak pól. Zapisz profil ponownie, aby system uzupełnił pola platformy.</div>
                {% endfor %}
            </div>

            <form method="post" class="ai-add-inline stack-form">
                <input type="hidden" name="_token" value="{{ csrf_token('ai_instruction_add') }}">
                <input type="hidden" name="profile_id" value="{{ profile.id }}">
                <input type="hidden" name="type" value="field">
                <div class="ai-add-inline__head">
                    <span class="ui-icon">add_circle</span>
                    <strong>Dodaj własne pole</strong>
                </div>
                <div class="form-grid form-grid--two">
                    <input class="form-control" name="field_code" placeholder="field_code" required>
                    <input class="form-control" name="name" placeholder="Nazwa" required>
                    <input class="form-control" type="number" name="sort_order" placeholder="Sort" value="0">
                    <label class="checkbox-row"><input type="checkbox" name="active" value="1" checked> Aktywne</label>
                </div>
                <textarea class="form-control" name="instruction" rows="3" placeholder="Instrukcja" required></textarea>
                <button class="button button--ghost" type="submit">Dodaj pole</button>
            </form>
        </section>

        <section class="ai-instructions-section">
            <div class="ai-instructions-section__head ai-instructions-section__head--inline">
                <div>
                    <span class="ai-instructions-section__kicker">Długi opis</span>
                    <h3>Bloki długiego opisu</h3>
                    <p>
                        Status w profilu: <strong>{{ profile.advancedLongDescriptionBlocksEnabled ? 'włączone' : 'wyłączone' }}</strong>.
                        Gdy są włączone, AI buduje opis z aktywnych sekcji.
                    </p>
                </div>
                <a href="{{ path('app_ai_profiles') }}" class="button button--ghost">Zmień w profilu</a>
            </div>

            {% if profile.advancedLongDescriptionBlocksEnabled %}
                <div class="ai-block-list">
                    {% for block in blocks %}
                        <form method="post" action="{{ path('app_ai_long_block_update', { id: block.id }) }}" class="ai-config-card ai-block-card stack-form">
                            <input type="hidden" name="_token" value="{{ csrf_token('ai_long_block_' ~ block.id) }}">
                            <div class="ai-config-card__top">
                                <div>
                                    <span class="mono-badge">{{ block.code }}</span>
                                    <strong>{{ block.name }}</strong>
                                </div>
                                <div class="ai-mini-flags">
                                    <span>{{ block.blockType ?: 'custom' }}</span>
                                    {% if block.required %}<span>wymagany</span>{% endif %}
                                    <span>{{ block.active ? 'aktywny' : 'wyłączony' }}</span>
                                </div>
                            </div>
                            <div class="form-grid form-grid--two">
                                <label>Kod
                                    <input class="form-control" name="code" value="{{ block.code }}" required>
                                </label>
                                <label>Nazwa
                                    <input class="form-control" name="name" value="{{ block.name }}" required>
                                </label>
                                <label>Typ bloku
                                    <input class="form-control" name="block_type" value="{{ block.blockType }}">
                                </label>
                                <label>Sort
                                    <input class="form-control" type="number" name="sort_order" value="{{ block.sortOrder }}">
                                </label>
                                <label>Min
                                    <input class="form-control" type="number" name="min_occurrences" value="{{ block.minOccurrences }}" min="0">
                                </label>
                                <label>Max
                                    <input class="form-control" type="number" name="max_occurrences" value="{{ block.maxOccurrences }}" min="0">
                                </label>
                                <label class="checkbox-row">
                                    <input type="checkbox" name="required" value="1" {{ block.required ? 'checked' : '' }}> Wymagany
                                </label>
                                <label class="checkbox-row">
                                    <input type="checkbox" name="active" value="1" {{ block.active ? 'checked' : '' }}> Aktywny
                                </label>
                            </div>
                            <div class="ai-block-card__prompts">
                                <label>Opis
                                    <textarea class="form-control" name="description" rows="2">{{ block.description }}</textarea>
                                </label>
                                <label>Instrukcja/prompt bloku
                                    <textarea class="form-control" name="instruction" rows="4">{{ block.instruction }}</textarea>
                                </label>
                            </div>
                            <div class="form-actions">
                                <button class="button button--primary" type="submit">Zapisz blok</button>
                            </div>
                        </form>
                    {% else %}
                        <div class="empty-state empty-state--compact">Brak bloków. Zapisz profil ponownie, aby uzupełnić domyślne bloki.</div>
                    {% endfor %}
                </div>

                <form method="post" class="ai-add-inline stack-form">
                    <input type="hidden" name="_token" value="{{ csrf_token('ai_instruction_add') }}">
                    <input type="hidden" name="profile_id" value="{{ profile.id }}">
                    <input type="hidden" name="type" value="block">
                    <div class="ai-add-inline__head">
                        <span class="ui-icon">add_circle</span>
                        <strong>Dodaj blok długiego opisu</strong>
                    </div>
                    <div class="form-grid form-grid--two">
                        <input class="form-control" name="code" placeholder="code" required>
                        <input class="form-control" name="name" placeholder="Nazwa" required>
                        <input class="form-control" name="block_type" placeholder="block_type" value="custom">
                        <input class="form-control" type="number" name="sort_order" placeholder="Sort" value="0">
                        <input class="form-control" type="number" name="min_occurrences" value="1" min="0">
                        <input class="form-control" type="number" name="max_occurrences" value="1" min="0">
                        <label class="checkbox-row"><input type="checkbox" name="required" value="1"> Wymagany</label>
                        <label class="checkbox-row"><input type="checkbox" name="active" value="1" checked> Aktywny</label>
                    </div>
                    <textarea class="form-control" name="description" rows="2" placeholder="Opis bloku"></textarea>
                    <textarea class="form-control" name="instruction" rows="3" placeholder="Instrukcja bloku" required></textarea>
                    <button class="button button--ghost" type="submit">Dodaj blok</button>
                </form>
            {% else %}
                <div class="empty-state empty-state--compact">
                    <strong>Zaawansowane bloki są wyłączone.</strong>
                    <span>AI użyje instrukcji pola long_description bez osobnych bloków. Włącz bloki w profilu, jeśli chcesz budować opis z sekcji.</span>
                </div>
            {% endif %}
        </section>

        <div class="ai-instructions-two-col">
            <section class="ai-instructions-section ai-instructions-section--compact">
                <div class="ai-instructions-section__head">
                    <div>
                        <span class="ai-instructions-section__kicker">Słowniki</span>
                        <h3>Reguły słowników</h3>
                        <p>Reguły mówią AI, jak korzystać z kategorii, cech, Perfect For, tagów i pozostałych danych platformy.</p>
                    </div>
                </div>

                <div class="ai-rule-list">
                    {% for rule in rules %}
                        <form method="post" action="{{ path('app_ai_dictionary_rule_update', { id: rule.id }) }}" class="ai-rule-card stack-form">
                            <input type="hidden" name="_token" value="{{ csrf_token('ai_dictionary_rule_' ~ rule.id) }}">
                            <div class="ai-rule-card__top">
                                <span class="ui-icon">rule</span>
                                <div>
                                    <strong>{{ rule.name }}</strong>
                                    <small>{{ rule.ruleType }} · priorytet {{ rule.priority }}</small>
                                </div>
                            </div>
                            <div class="form-grid form-grid--two">
                                <label>Typ reguły
                                    <input class="form-control" name="rule_type" value="{{ rule.ruleType }}" required>
                                </label>
                                <label>Nazwa
                                    <input class="form-control" name="name" value="{{ rule.name }}" required>
                                </label>
                                <label>Priorytet
                                    <input class="form-control" type="number" name="priority" value="{{ rule.priority }}">
                                </label>
                                <label class="checkbox-row">
                                    <input type="checkbox" name="active" value="1" {{ rule.active ? 'checked' : '' }}> Aktywna
                                </label>
                            </div>
                            <label>Instrukcja
                                <textarea class="form-control" name="instruction" rows="3">{{ rule.instruction }}</textarea>
                            </label>
                            <div class="form-actions">
                                <button class="button button--primary" type="submit">Zapisz regułę</button>
                            </div>
                        </form>
                    {% else %}
                        <div class="empty-state empty-state--compact">Brak reguł.</div>
                    {% endfor %}
                </div>

                <form method="post" class="ai-add-inline stack-form">
                    <input type="hidden" name="_token" value="{{ csrf_token('ai_instruction_add') }}">
                    <input type="hidden" name="profile_id" value="{{ profile.id }}">
                    <input type="hidden" name="type" value="rule">
                    <div class="ai-add-inline__head">
                        <span class="ui-icon">add_circle</span>
                        <strong>Dodaj regułę słownikową</strong>
                    </div>
                    <div class="form-grid form-grid--two">
                        <input class="form-control" name="rule_type" placeholder="category_selection" required>
                        <input class="form-control" name="name" placeholder="Nazwa" required>
                        <input class="form-control" type="number" name="priority" value="0">
                        <label class="checkbox-row"><input type="checkbox" name="active" value="1" checked> Aktywna</label>
                    </div>
                    <textarea class="form-control" name="instruction" rows="3" placeholder="Instrukcja reguły" required></textarea>
                    <button class="button button--ghost" type="submit">Dodaj regułę</button>
                </form>
            </section>

            <section class="ai-instructions-section ai-instructions-section--compact ai-style-workbench">
                <div class="ai-instructions-section__head">
                    <div>
                        <span class="ai-instructions-section__kicker">Głos marki</span>
                        <h3>Style komunikacji</h3>
                        <p>Styl decyduje o tym, jak AI ma mówić do klienta: czy bardziej prezentowo, ironicznie, SEO, krótko marketplace’owo albo ekspercko.</p>
                    </div>
                </div>

                <div class="ai-voice-principles">
                    <article>
                        <span>01</span>
                        <strong>Najpierw sens</strong>
                        <p>Styl nie dekoruje tekstu. Ma wyciągać prawdziwy powód, dla którego ktoś kupuje dany produkt.</p>
                    </article>
                    <article>
                        <span>02</span>
                        <strong>Jedna scena</strong>
                        <p>Dobry opis dostaje konkretny moment z życia: prezent, reakcję, relację, codzienny absurd albo potrzebę.</p>
                    </article>
                    <article>
                        <span>03</span>
                        <strong>SEO bez plastiku</strong>
                        <p>Frazy są ważne, ale nie mogą brzmieć jak tekst pisany wyłącznie dla wyszukiwarki.</p>
                    </article>
                </div>

                <div class="ai-suggested-styles">
                    <div class="ai-suggested-styles__head">
                        <strong>Konkretne kierunki stylu</strong>
                        <span>Możesz je przepisać lub potraktować jako bazę do własnych presetów.</span>
                    </div>
                    <div class="ai-suggested-styles__grid">
                        {% for preset in suggested_styles %}
                            <article class="ai-suggested-style-card">
                                <div class="ai-suggested-style-card__top">
                                    <span class="ui-icon">{{ preset.icon }}</span>
                                    <div>
                                        <strong>{{ preset.name }}</strong>
                                        <code>{{ preset.code }}</code>
                                    </div>
                                </div>
                                <dl>
                                    <div>
                                        <dt>Kiedy</dt>
                                        <dd>{{ preset.when }}</dd>
                                    </div>
                                    <div>
                                        <dt>Brzmienie</dt>
                                        <dd>{{ preset.voice }}</dd>
                                    </div>
                                    <div>
                                        <dt>Unikaj</dt>
                                        <dd>{{ preset.avoid }}</dd>
                                    </div>
                                </dl>
                            </article>
                        {% endfor %}
                    </div>
                </div>

                <div class="ai-style-list">
                    <div class="ai-style-list__head">
                        <strong>Style zapisane w profilu</strong>
                        <span>{{ active_styles_count }} aktywne / {{ styles|length }} razem</span>
                    </div>

                    {% for style in styles %}
                        <form method="post" action="{{ path('app_ai_style_update', { id: style.id }) }}" class="ai-style-card {{ style.active ? 'is-active' : 'is-disabled' }} stack-form">
                            <input type="hidden" name="_token" value="{{ csrf_token('ai_style_' ~ style.id) }}">
                            <div class="ai-style-card__top">
                                <div>
                                    <span class="mono-badge">{{ style.code }}</span>
                                    <strong>{{ style.name }}</strong>
                                    <small>{{ style.description ?: 'Brak krótkiego opisu stylu.' }}</small>
                                </div>
                                <label class="ai-toggle-pill">
                                    <input type="checkbox" name="active" value="1" {{ style.active ? 'checked' : '' }}>
                                    <span>{{ style.active ? 'Aktywny' : 'Wyłączony' }}</span>
                                </label>
                            </div>
                            <div class="form-grid form-grid--two">
                                <label>Kod
                                    <input class="form-control" name="code" value="{{ style.code }}" required>
                                </label>
                                <label>Nazwa
                                    <input class="form-control" name="name" value="{{ style.name }}" required>
                                </label>
                            </div>
                            <label>Opis
                                <textarea class="form-control" name="description" rows="2">{{ style.description }}</textarea>
                            </label>
                            <label>Instrukcja
                                <textarea class="form-control" name="instruction" rows="4">{{ style.instruction }}</textarea>
                            </label>
                            <div class="form-actions">
                                <button class="button button--primary" type="submit">Zapisz styl</button>
                            </div>
                        </form>
                    {% else %}
                        <div class="empty-state empty-state--compact">
                            <strong>Brak zapisanych stylów.</strong>
                            <span>Dodaj pierwszy preset, np. styl prezentowy, ironiczny, SEO albo marketplace.</span>
                        </div>
                    {% endfor %}
                </div>

                <form method="post" class="ai-add-style-form stack-form">
                    <input type="hidden" name="_token" value="{{ csrf_token('ai_instruction_add') }}">
                    <input type="hidden" name="profile_id" value="{{ profile.id }}">
                    <input type="hidden" name="type" value="style">
                    <div class="ai-add-inline__head">
                        <span class="ui-icon">add_circle</span>
                        <strong>Dodaj styl komunikacji</strong>
                    </div>
                    <div class="form-grid form-grid--two">
                        <input class="form-control" name="code" placeholder="np. prezentowy_celny" required>
                        <input class="form-control" name="name" placeholder="Nazwa stylu" required>
                        <label class="checkbox-row"><input type="checkbox" name="active" value="1" checked> Aktywny</label>
                    </div>
                    <textarea class="form-control" name="description" rows="2" placeholder="Krótki opis: kiedy używać tego stylu i jaki ma efekt."></textarea>
                    <textarea class="form-control" name="instruction" rows="4" placeholder="Instrukcja dla AI: ton, rytm zdań, czego unikać, jak traktować humor, SEO i sceny z życia." required></textarea>
                    <button class="button button--ghost" type="submit">Dodaj styl</button>
                </form>
            </section>
        </div>
    </div>
{% endblock %}