{{ component('js_localize', keys="admin.admin.ai.prompt_engineering.empty, common.confirm, admin.admin.ai.prompt_engineering.changes_saved, common.ai.prompt.validation.more_than") }}

<button type="button" class="btn btn-link" data-toggle="modal" data-target="#modal-{{module}}">
    <ion-icon name="create-outline"></ion-icon>
</button>

<div class="modal fade" id="modal-{{ module }}" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title font-weight-bold text-capitalize">
                    {{ lmsg('admin.admin.ai.prompt_engineering.title', module) }}
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body p-4">
                <p class="text-muted mb-4">
                    {{ lmsg('admin.admin.ai.prompt_engineering.info') }}
                </p>

                <div class="mb-4">
                    <h6 class="font-weight-bold mb-2 small text-uppercase text-muted">
                        {{ lmsg('admin.ai.prompt.suggestions_title') }}
                    </h6>
                    <div class="d-flex flex-wrap">
                        {% if module == 'image' %}
                            <button type="button" class="btn btn-secondary btn-sm mb-2 mr-2 js-suggestion" 
                                    data-prompt="{{ lmsg('admin.ai.prompt.image.photograph.instruction') }}">
                                {{ lmsg('admin.ai.prompt.image.photograph.label') }}
                            </button>
                            <button type="button" class="btn btn-secondary btn-sm mb-2 mr-2 js-suggestion" 
                                    data-prompt="{{ lmsg('admin.ai.prompt.image.digital_art.instruction') }}">
                                {{ lmsg('admin.ai.prompt.image.digital_art.label') }}
                            </button>
                            <button type="button" class="btn btn-secondary btn-sm mb-2 mr-2 js-suggestion" 
                                    data-prompt="{{ lmsg('admin.ai.prompt.image.landscape.instruction') }}">
                                {{ lmsg('admin.ai.prompt.image.landscape.label') }}
                            </button>
                            <button type="button" class="btn btn-secondary btn-sm mb-2 mr-2 js-suggestion" 
                                    data-prompt="{{ lmsg('admin.ai.prompt.image.sketch.instruction') }}">
                                {{ lmsg('admin.ai.prompt.image.sketch.label') }}
                            </button>
                            <button type="button" class="btn btn-secondary btn-sm mb-2 mr-2 js-suggestion" 
                                    data-prompt="{{ lmsg('admin.ai.prompt.image.watercolor.instruction') }}">
                                {{ lmsg('admin.ai.prompt.image.watercolor.label') }}
                            </button>
                            <button type="button" class="btn btn-secondary btn-sm mb-2 mr-2 js-suggestion" 
                                    data-prompt="{{ lmsg('admin.ai.prompt.image.cyberpunk.instruction') }}">
                                {{ lmsg('admin.ai.prompt.image.cyberpunk.label') }}
                            </button>
                            <button type="button" class="btn btn-secondary btn-sm mb-2 mr-2 js-suggestion" 
                                    data-prompt="{{ lmsg('admin.ai.prompt.image.pop_art.instruction') }}">
                                {{ lmsg('admin.ai.prompt.image.pop_art.label') }}
                            </button>
                        {% else %}
                            <button type="button" class="btn btn-secondary btn-sm mb-2 mr-2 js-suggestion" 
                                    data-prompt="{{ lmsg('admin.ai.prompt.text.professional.instruction') }}">
                                {{ lmsg('admin.ai.prompt.text.professional.label') }}
                            </button>
                            <button type="button" class="btn btn-secondary btn-sm mb-2 mr-2 js-suggestion" 
                                    data-prompt="{{ lmsg('admin.ai.prompt.text.concise.instruction') }}">
                                {{ lmsg('admin.ai.prompt.text.concise.label') }}
                            </button>
                            <button type="button" class="btn btn-secondary btn-sm mb-2 mr-2 js-suggestion" 
                                    data-prompt="{{ lmsg('admin.ai.prompt.text.simple.instruction') }}">
                                {{ lmsg('admin.ai.prompt.text.simple.label') }}
                            </button>
                            <button type="button" class="btn btn-secondary btn-sm mb-2 mr-2 js-suggestion" 
                                    data-prompt="{{ lmsg('admin.ai.prompt.text.structured.instruction') }}">
                                {{ lmsg('admin.ai.prompt.text.structured.label') }}
                            </button>
                            <button type="button" class="btn btn-secondary btn-sm mb-2 mr-2 js-suggestion" 
                                    data-prompt="{{ lmsg('admin.ai.prompt.text.friendly.instruction') }}">
                                {{ lmsg('admin.ai.prompt.text.friendly.label') }}
                            </button>
                        {% endif %}
                    </div>
                </div>

                <div>
                    <h6 class="font-weight-bold mb-3">
                        {{ lmsg('admin.admin.ai.prompt_engineering.instructions') }}
                    </h6>
                    <div class="list-group list-group-flush border-top js-prompt-list"></div>

                        <div class="js-prompt-field-wrapper d-none mt-3 p-3 bg-light rounded">
                            <div class="row no-gutters align-items-start">
                                <div class="col-12 col-md-8 mr-md-2">
                                    <input type="text" class="form-control js-prompt-input" placeholder="{{ lmsg('admin.admin.ai.prompt_engineering.enter_instruction') }}" required minlength="3">
                                    <div class="invalid-feedback">{{ lmsg('common.ai.prompt.validation.more_than', 3) }}</div>
                                </div>
                                <div class="col mt-2 mt-md-0">
                                    <div class="d-flex">
                                        <button type="button" class="btn btn-primary btn-block mt-0 mr-2 js-save-prompt">
                                            {{ lmsg('admin.admin.ai.prompt_engineering.save') }}
                                        </button>
                                        <button type="button" class="btn btn-secondary btn-block mt-0 js-cancel-prompt">
                                            {{ lmsg('admin.admin.ai.prompt_engineering.cancel') }}
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>


                    <div class="d-flex align-items-center justify-content-between">
                        <button type="button" class="btn btn-secondary btn-sm mt-3 js-add-prompt">
                            <ion-icon name="add-outline" class="mr-1"></ion-icon>
                            {{ lmsg('admin.admin.ai.prompt_engineering.add_instruction') }}
                        </button>

                        <small class="text-muted">
                            <span class="js-instruction-count">{{ prompts|length }}</span>/{{ maxInstructions }}
                        </small>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">
                    {{ lmsg('admin.admin.ai.prompt_engineering.cancel') }}
                </button>
                <button type="button" class="btn btn-primary js-final-save">
                    <span class="spinner-border spinner-border-sm d-none js-save-spinner" role="status"></span>
                    {{ lmsg('admin.admin.ai.prompt_engineering.save_changes') }}
                </button>
            </div>
        </div>
    </div>
</div>

<script id="list-item-template" type="text/twig">
    {% verbatim %}
        <div class="list-group-item d-flex align-items-center px-0 border-bottom">
            <div class="pr-2 d-flex align-items-center">
                <ion-icon name="checkmark-circle" class="text-primary"></ion-icon>
            </div>
            
            <div class="flex-grow-1 px-2">
                <p class="mb-0 small text-dark">{{ text }}</p>
            </div>
            
            <div class="d-flex">
                <button type="button" class="btn btn-link p-1 js-edit" data-index="{{ index }}">
                    <ion-icon name="create-outline"></ion-icon>
                </button>
                
                <button type="button" class="btn btn-link p-1 text-danger js-delete" data-index="{{ index }}">
                    <ion-icon name="trash-outline"></ion-icon>
                </button>
            </div>
        </div>
    {% endverbatim %}
</script>

<script>
require(['jquery', 'domReady', 'twig_renderer'], function ($, domReady, twig) {
    domReady(function() {
        const PromptManager = {
            data: {{prompts|json_encode|raw}} || [],
            maxInstructions: {{ maxInstructions }},
            editIndex: null,

            init: function() {
                this.$modal = $('#modal-{{ module }}');
                this.$list = this.$modal.find('.js-prompt-list');
                this.$wrapper = this.$modal.find('.js-prompt-field-wrapper');
                this.$input = this.$modal.find('.js-prompt-input');
                this.$addBtn = this.$modal.find('.js-add-prompt');
                this.$finalSaveBtn = this.$modal.find('.js-final-save');
                this.$spinner = this.$modal.find('.js-save-spinner');

                this.bindEvents();
                this.render();
            },

            bindEvents: function() {
                this.$addBtn.on('click', () => this.toggleUI(true));
                this.$modal.on('click', '.js-cancel-prompt', () => this.toggleUI(false));
                this.$modal.on('click', '.js-save-prompt', () => this.savePrompt());
                this.$modal.on('hide.bs.modal', () => this.toggleUI(false));
                
                this.$modal.on('click', '.js-suggestion', (e) => this.handleSuggestion(e));

                this.$list.on('click', '.js-edit', (e) => this.handleEdit(e));
                this.$list.on('click', '.js-delete', (e) => this.handleDelete(e));

                this.$finalSaveBtn.on('click', () => this.save());
            },

            render: function() {
                var templateSource = $('#list-item-template').html();

                const items = this.data.map(function(text, i) {
                    return twig.render(templateSource, {
                        text,
                        index: i
                    });
                }, this).join('');

                this.$list.html(items.length > 0 ? items : '<p class="text-muted small pt-2 mb-0">' + lmsg('admin.admin.ai.prompt_engineering.empty') + '</p>');

                this.$modal.find('.js-instruction-count').text(this.data.length);

                if (this.data.length >= this.maxInstructions) {
                    this.$addBtn.prop('disabled', true);
                } else {
                    this.$addBtn.prop(false);
                }
            },

            toggleUI: function(show) {
                if (show) {
                    this.$wrapper.removeClass('d-none');
                    this.$addBtn.addClass('d-none');
                    this.$input.focus();
                } else {
                    this.$wrapper.addClass('d-none');
                    this.$addBtn.removeClass('d-none');
                    this.$input.val('').removeClass('is-invalid');
                    this.editIndex = null;
                }
            },

            handleSuggestion: function(e) {
                const text = $(e.currentTarget).data('prompt');
                this.toggleUI(true);
                this.$input.val(text).focus();
            },

            savePrompt: function() {
                const inputEl = this.$input[0];
                if (!inputEl.checkValidity()) {
                    this.$input.addClass('is-invalid');
                    return;
                }

                const val = this.$input.val().trim();
                if (this.editIndex !== null) {
                    this.data[this.editIndex] = val;
                } else {
                    this.data.push(val);
                }

                this.render();
                this.toggleUI(false);
            },

            handleEdit: function(e) {
                this.editIndex = $(e.currentTarget).data('index');
                this.$input.val(this.data[this.editIndex]);
                this.toggleUI(true);
            },

            handleDelete: function(e) {
                const index = $(e.currentTarget).data('index');
                this.data.splice(index, 1);
                this.render();
            },

            save: function() {
                this.$finalSaveBtn.prop('disabled', true);
                this.$spinner.removeClass('d-none');

                $.ajax({
                    url: '/admin/system/ai/update-prompt', 
                    method: 'POST',
                    data: {
                        prompts: this.data,
                        module: '{{ module }}'
                    },
                    success: () => {
                        this.$modal.modal('hide');

                        cla.showMessage(lmsg('admin.admin.ai.prompt_engineering.changes_saved'));
                    },
                    error: (data) => {
                        cla.showMessage(data.responseText, '', true);
                    },
                    complete: () => {
                        this.$finalSaveBtn.prop('disabled', false);
                        this.$spinner.addClass('d-none');
                    }
                });
            }
        };

        PromptManager.init();
    });
});
</script>
