{% extends 'base.html' %}
{% from "macros.html" import render_field, render_included_field %}

{% block title %}Create or Edit Tenant{% endblock %}

{% block content_title %}Create or Edit Tenant{% endblock %}
{% block content_description %}Create or Edit Tenant{% endblock %}

{% block content %}
    <form method="post">
        {{ form.hidden_tag() }}
        <!-- Main Tenant Information -->
        {% set main_fields = ['name', 'website', 'default_language', 'allowed_languages', 'rag_context', 'type'] %}
        {% for field in form %}
            {{ render_included_field(field, disabled_fields=[], include_fields=main_fields) }}
        {% endfor %}

        <!-- Nav Tabs -->
        <div class="row mt-5">
            <div class="col-lg-12">
                <div class="nav-wrapper position-relative end-0">
                    <ul class="nav nav-pills nav-fill p-1" role="tablist">
                        <li class="nav-item" role="presentation">
                            <a class="nav-link mb-0 px-0 py-1 active" data-toggle="tab" href="#model-info-tab" role="tab" aria-controls="model-info" aria-selected="true">
                                Model Information
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link mb-0 px-0 py-1" data-toggle="tab" href="#license-info-tab" role="tab" aria-controls="license-info" aria-selected="false">
                                License Information
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link mb-0 px-0 py-1" data-toggle="tab" href="#chunking-tab" role="tab" aria-controls="chunking" aria-selected="false">
                                Chunking
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link mb-0 px-0 py-1" data-toggle="tab" href="#embedding-search-tab" role="tab" aria-controls="html-chunking" aria-selected="false">
                                Embedding Search
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link mb-0 px-0 py-1" data-toggle="tab" href="#tuning-tab" role="tab" aria-controls="html-chunking" aria-selected="false">
                                Tuning
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="tab-content tab-space">
                    <!-- Model Information Tab -->
                    <div class="tab-pane fade show active" id="model-info-tab" role="tabpanel">
                        {% set model_fields = ['embedding_model', 'llm_model'] %}
                        {% for field in form %}
                            {{ render_included_field(field, disabled_fields=[], include_fields=model_fields) }}
                        {% endfor %}
                    </div>
                    <!-- License Information Tab -->
                    <div class="tab-pane fade" id="license-info-tab" role="tabpanel">
                        {% set license_fields = ['currency', 'usage_email', ] %}
                        {% for field in form %}
                            {{ render_included_field(field, disabled_fields=[], include_fields=license_fields) }}
                        {% endfor %}
                        <!-- Register API Key Button -->
                        <button type="button" class="btn btn-primary" onclick="generateNewChatApiKey()">Register Chat API Key</button>
                        <button type="button" class="btn btn-primary" onclick="generateNewApiKey()">Register API Key</button>
                        <!-- API Key Display Field -->
                        <div id="chat-api-key-field" style="display:none;">
                            <label for="chat-api-key">Chat API Key:</label>
                            <input type="text" id="chat-api-key" class="form-control" readonly>
                            <button type="button" id="copy-chat-button" class="btn btn-primary">Copy to Clipboard</button>
                            <p id="copy-chat-message" style="display:none;color:green;">Chat API key copied to clipboard</p>
                        </div>
                        <div id="api-key-field" style="display:none;">
                            <label for="api-key">API Key:</label>
                            <input type="text" id="api-key" class="form-control" readonly>
                            <button type="button" id="copy-api-button" class="btn btn-primary">Copy to Clipboard</button>
                            <p id="copy-message" style="display:none;color:green;">API key copied to clipboard</p>
                        </div>
                    </div>
                    <!-- Chunking Settings Tab -->
                    <div class="tab-pane fade" id="chunking-tab" role="tabpanel">
                        {% set html_fields = ['html_tags', 'html_end_tags', 'html_included_elements', 'html_excluded_elements', 'html_excluded_classes', 'min_chunk_size', 'max_chunk_size'] %}
                        {% for field in form %}
                            {{ render_included_field(field, disabled_fields=[], include_fields=html_fields) }}
                        {% endfor %}
                    </div>
                    <!-- Embedding Search Settings Tab -->
                    <div class="tab-pane fade" id="embedding-search-tab" role="tabpanel">
                        {% set es_fields = ['es_k', 'es_similarity_threshold', ] %}
                        {% for field in form %}
                            {{ render_included_field(field, disabled_fields=[], include_fields=es_fields) }}
                        {% endfor %}
                    </div>
                    <!-- Tuning Settings Tab -->
                    <div class="tab-pane fade" id="tuning-tab" role="tabpanel">
                        {% set tuning_fields = ['embed_tuning', 'rag_tuning', ] %}
                        {% for field in form %}
                            {{ render_included_field(field, disabled_fields=[], include_fields=tuning_fields) }}
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
        <button type="submit" class="btn btn-primary">Save Tenant</button>
    </form>
{% endblock %}


{% block content_footer %}

{% endblock %}

{% block scripts %}
<script>
    // Function to generate a new Chat API Key
    function generateNewChatApiKey() {
        generateApiKey('/admin/user/generate_chat_api_key', '#chat-api-key', '#chat-api-key-field');
    }

    // Function to generate a new general API Key
    function generateNewApiKey() {
        generateApiKey('/admin/user/generate_api_api_key', '#api-key', '#api-key-field');
    }

    // Reusable function to handle API key generation
    function generateApiKey(url, inputSelector, fieldSelector) {
        $.ajax({
            url: url,
            type: 'POST',
            contentType: 'application/json',
            success: function(response) {
                $(inputSelector).val(response.api_key);
                $(fieldSelector).show();
            },
            error: function(error) {
                alert('Error generating new API key: ' + error.responseText);
            }
        });
    }

    // Function to copy text to clipboard
    function copyToClipboard(selector, messageSelector) {
        const element = document.querySelector(selector);
        if (element) {
            const text = element.value;
            if (navigator.clipboard && navigator.clipboard.writeText) {
                navigator.clipboard.writeText(text).then(function() {
                    showCopyMessage(messageSelector);
                }).catch(function(error) {
                    alert('Failed to copy text: ' + error);
                });
            } else {
                fallbackCopyToClipboard(text, messageSelector);
            }
        } else {
            console.error('Element not found for selector:', selector);
        }
    }

    // Fallback method for copying text to clipboard
    function fallbackCopyToClipboard(text, messageSelector) {
        const textArea = document.createElement('textarea');
        textArea.value = text;
        document.body.appendChild(textArea);
        textArea.focus();
        textArea.select();
        try {
            document.execCommand('copy');
            showCopyMessage(messageSelector);
        } catch (err) {
            alert('Fallback: Oops, unable to copy', err);
        }
        document.body.removeChild(textArea);
    }

    // Function to show copy confirmation message
    function showCopyMessage(messageSelector) {
        const message = document.querySelector(messageSelector);
        if (message) {
            message.style.display = 'block';
            setTimeout(function() {
                message.style.display = 'none';
            }, 2000);
        }
    }

    // Event listeners for copy buttons
    document.getElementById('copy-chat-button').addEventListener('click', function() {
        copyToClipboard('#chat-api-key', '#copy-chat-message');
    });

    document.getElementById('copy-api-button').addEventListener('click', function() {
        copyToClipboard('#api-key', '#copy-message');
    });
</script>
<script>
    // JavaScript to detect user's timezone
    document.addEventListener('DOMContentLoaded', (event) => {
        // Detect timezone
        const userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;

        // Send timezone to the server via a POST request
        fetch('/set_user_timezone', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ timezone: userTimezone })
        }).then(response => {
            if (response.ok) {
                console.log('Timezone sent to server successfully');
            } else {
                console.error('Failed to send timezone to server');
            }
        });
    });
</script>
{% endblock %}