<?php

if (!class_exists('AI_App_Onsite_Prompt_Editor')) {
    class AI_App_Onsite_Prompt_Editor
    {
        public static function render_prompt_editor()
        {
            ob_start(); ?>

            <div>
                <form class="form-wrapper" id="prompt-editor" method="post">
                    <?php wp_nonce_field('ai_app_onsite_prompt_editor_nonce', 'ai_app_onsite_prompt_editor_nonce_field'); ?>

                    <div class="form-group mb-4">
                        <label class="d-block font-bold fs-medium-14 mb-2">Available Fields</label>
                        <p class="text-danger small mb-1">
                            <strong>IMPORTANT:</strong> Private user data should never be included in the prompt.
                        </p>
                        <p class="text-muted small">
                            <em>Note:</em> Click on a variable to copy it into the prompt.
                        </p>
                        <span id="prompt-max-token-value"></span>

                        <div class="select-box-icon select-box-icon-textarea mb-30 rounded shadow-sm bg-white">
                            <span class="field-icon">
                                <div class="assets-font-color-icon"></div>
                            </span>
                            <div id="available-fields" class="border text-write w-100 fs-regular-14 neutral-black-fs-100 radius-6"></div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="d-block fs-medium-14 mb-only-4 fw-semibold">Enter Prompt Below</label>

                        <!-- Quill Toolbar -->
                        <div id="toolbar-container"></div>

                        <!-- Quill Editor -->
                        <div class="quill-wrapper">
                            <div id="quill-editor" class="quill-editor" style="height: 100%"></div>
                        </div>
                        <input type="hidden" name="editor_prompt_aiapp" id="editor_prompt_aiapp"></input>

                        <div id="word-count" class="mt-2"></div>
                        <p id="prompt-error" class="fields-error"></p>
                    </div>

                    <div class="mt-3 mb-3">
                        <div class="col-50">
                            <div class="text-end">
                                <button type="button" class="btn fs-medium-14 neutral-black-fs-60 radius-6 py-8 px-16 border border-2 bg-white" name="cancel-settings">Cancel</button>
                                <button type="button" class="btn btn-purple fs-medium-14 neutral-black-fs-60 radius-6 py-8 px-16 border border-2 bg-purple-100 text-white" id="ai_app_onsite_save_prompt_editor">Save</button>
                            </div>
                        </div>
                    </div>
                </form>

                <div id="ai_app_onsite_prompt_editor-msg-container" class="message-container"></div>
            </div>

          

            <?php
            return ob_get_clean();
        }
    }
}
