<?php
if (! class_exists('AI_App_Onsite_Model_Settings')) {
    class AI_App_Onsite_Model_Settings
    {

        public static function render_model_settings()
        {
            ob_start(); ?>

            <!--  Render your plugin setting tab page here -->
            <div class="modal-setting-content">
                <div id="modal-setting-msg-container"></div>
                <form class="form-wrapper" id="ai_app_onsite_reset_modal-setting"> <?php wp_nonce_field('ai_app_onsite_model_settings_nonce', 'ai_app_onsite_model_settings_nonce_field'); ?> 
                    <div class="row">
                        <div class="col-lg-12">
                            <label for="app-selector" class="d-block fs-medium-14 mb-only-4 font-semibold">Choose Engine/Model </label>
                            <div class="select-box-icon mb-20">
                                <span class="field-icon">
                                    <div class="assets-engine-icon"></div>
                                </span>
                                <select id="model" name="model" class="border border-1 w-100 mb-1 fs-regular-14 neutral-black-fs-60 radius-6 px-10 py-8">
                                    <option value="">Please select Model</option>
                                </select>
                                <span id="model-help-text" class="text-danger"></span>
                                <p id="model-error" class="fields-error"></p>
                            </div>
                        </div>
                    </div>
                    <div id="model-dependent-fields" class="row">
                    <div class="col-lg-6 mb-20">
                        <div class="form-group">
                        <label class="fs-medium-14">Max Tokens</label>
                        <div class="select-box-icon">
                            <span class="field-icon">
                            <div class="assets-token-icon"></div>
                            </span>
                            <input type="text" name="max-tokens" placeholder="3000" id="max-tokens" class="border border-1 w-100 fs-regular-14 neutral-black-fs-60  radius-6 px-10 py-8" value="3000">
                            <span class="small-text text-muted">Maximum number of tokens (words & characters) allowed in response.</span>
                        </div>
                        </div>
                    </div>
                    <div class="col-lg-6 mb-20">
                        <div class="form-group">
                        <label class="fs-medium-14">Temperature</label>
                        <div class="select-box-icon">
                            <span class="field-icon">
                            <div class="assets-temprature-icon"></div>
                            </span>
                            <input type="text" name="temperature" placeholder="1" id="temperature" class="border border-1 w-100 fs-regular-14 neutral-black-fs-60  radius-6 px-10 py-8" value="0.7">
                            <span class="small-text text-muted">Controls creativity — higher value = more random responses.</span>
                        </div>
                        </div>
                    </div>
                    <div class="col-lg-6 mb-20">
                        <div class="form-group">
                        <label class="fs-medium-14">Top P</label>
                        <div class="select-box-icon">
                            <span class="field-icon">
                            <div class="assets-temprature-icon"></div>
                            </span>
                            <input type="text" name="top-p" placeholder="1" id="top-p" class="border border-1 w-100 fs-regular-14 neutral-black-fs-60  radius-6 px-10 py-8" value="1">
                            <span class="small-text text-muted">Controls diversity — lower value = more focused responses.</span>
                        </div>
                        </div>
                    </div>
                    <div class="col-lg-6 mb-20">
                        <div class="form-group mb-0">
                        <label class="fs-medium-14">F. Penalty</label>
                        <div class="select-box-icon">
                            <span class="field-icon">
                            <div class="assets-penalty-icon"></div>
                            </span>
                            <input type="text" name="f-penalty" placeholder="0" id="f-penalty" class="border border-1 w-100  fs-regular-14 neutral-black-fs-60  radius-6 px-10 py-8" value="0">
                            <span class="small-text text-muted">Reduces repetition of existing words in the response.</span>
                        </div>
                        </div>
                    </div>
                    <div class="col-lg-6 mb-20">
                        <div class="form-group mb-0">
                        <label class="fs-medium-14">P. Penalty</label>
                        <div class="select-box-icon">
                            <span class="field-icon">
                            <div class="assets-penalty-icon"></div>
                            </span>
                            <input type="text" name="p-penalty" placeholder="0" id="p-penalty" class="border border-1 w-100 fs-regular-14 neutral-black-fs-60  radius-6 px-10 py-8" value="0">
                            <span class="small-text text-muted">Reduces repetition of new words in the response.</span>
                        </div>
                        </div>
                    </div>
                    </div>
                    <div class="divider-light"></div>
                    <div class="row justify-content-center">
                    <div class="col-lg-6" id="api-key-management">
                        <div class="api-key-icon select-box-icon d-flex justify-content-around align-items-center" onclick="ai_app_onsite_get_openapi_data()">
                        <span class="#">
                            <div class="assets-api-key-icon"></div>
                        </span>
                        <p class="mb-0 fs-6 cursor-pointer" data-bs-toggle="modal" data-bs-target="#apiinfoModal"> API Key Management </p>
                        <span class="mb-0">
                            <p id="key-status" class="mb-0 font-semibold fs-6"></p>
                        </span>
                        </div>
                        <p id="manage-key-error" class="mt-2 ml-3 fields-error"></p>
                    </div>
                    <div class="col-lg-6">
                        <div class="text-end">
                        <button type="button" id="cancel_ai_app_plugin_settings_data" role="button" class="btn fs-medium-14 neutral-black-fs-60 radius-6 py-8 px-16 border border-2 bg-white" name="save-plugin-settings" onclick="reset()">Reset to Default</button>
                        <button type="button" id="save_ai_app_modal_settings_data" 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" name="save-plugin-settings" onclick="ai_app_onsite_save_model_settings()">Save</button>
                        </div>
                    </div>
                    </div>
                </form>
                <!-- Modal -->
                <div class="modal fade bd-example-modal-sm plugin-setting" id="apiinfoModal" tabindex="-1" role="dialog" aria-labelledby="apiinfoModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-sm modal-400 modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div id="modal-message-container" class="message-container"></div>
                        <div class="modal-header">
                        <h5 class="fs-bold-16 mb-0 logo-bg-fixed-sm" id="terms_conditions_modal_label">Foundation Model API Key</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                        <p class="fs-regular-14 neutral-black-fs-100">Please enter your OpenAI API key below. You can get an API key from your <a href="https://openai.com/api/" class="neutral-black-fs-100 underline open-new-tab"> OpenAI account dashboard.</a>
                        </p>
                        <div class="form-group mb-0">
                            <label class="fs-medium-14 fw-semibold">API Key</label>
                            <div class="select-box-icon right-icon">
                            <span class="field-icon copy-api-key">
                                <div class="assets-copy-icon"></div>
                            </span>
                            <input type="text" name="openai-key" placeholder="Enter text" class="border border-1 w-100 fs-regular-14 neutral-black-fs-60  radius-6 px-10 py-8" id="openai-key">
                            <input type="hidden" name="openai-key-hidden" id="openai-key-hidden">
                            </div>
                            <div class="d-flex justify-content-start align-items-center mt-2 key-toggle">
                            <span id="maskToggle" class="text-muted me-3 mask__toggle">Show Key</span>
                            </div>
                            <p id="openai-key-error" class="fields-error"></p>
                        </div>
                        <p class="fs-regular-12 neutral-black-fs-60 mb-1 mt-2">Note: Your API key will be stored locally and securely in your hosting server and never shared.</p>
                        <div class="flex-row alignment-items-center mt-3 mb-3">
                            <div class="col-50">
                            <button class="btn remove-btn align-items-center" id="key-remove-btn" onclick="ai_app_onsite_clear_openapi_Key_field()">
                                <span class="btn-icon me-1">
                                <div class="assets-delete-icon"></div>
                                </span> Remove API Key </button>
                            </div>
                            <div class="col-50">
                            <div class="enable-switch-box d-flex justify-content-between align-items-baseline">
                                <span class="fs-medium-14 text-switch me-2" id="text-switch">Disabled</span>
                                <label class="switch">
                                <input type="checkbox" id="api-disable-btn" onchange="ai_app_onsite_disable_openapi_key()">
                                <span class="slider round"></span>
                                </label>
                            </div>
                            </div>
                        </div>
                        <div class="divider-light mt-2 mb-3"></div>
                        <div class="button-wrap">
                            <button type="button" role="button" class="btn fs-medium-14 neutral-black-fs-60 radius-6 py-6 px-16 border  border-2 bg-white" name="save-plugin-settings" data-bs-dismiss="modal">Cancel</button>
                            <button type="button" class="btn btn-purple fs-medium-14 neutral-black-fs-60 radius-6 py-6 px-16 border border-2  bg-purple text-white" name="save-openapi-key" id="save-openapi-key" onclick="save_openapi_key()">Save</button>
                        </div>
                        </div>
                    </div>
                    </div>
                </div>
                <!-- Modal -->
            </div>
            <div id="model-settings-msg-container" class="message-container"></div>
<?php
            return ob_get_clean();
        }
    }
}
