{% extends "data-tools-container.html" %}

{% block head %}
{{ block.super }}
<script>



    function copy_pg_tune(button) {
        let text = document.getElementById('pg_tune_output_new').innerText;

        let textarea = document.createElement('textarea');
        textarea.value = text;

        document.body.appendChild(textarea);
        textarea.select();
        document.execCommand('copy');
        document.body.removeChild(textarea);

        let original_text = button.innerText;
        button.innerText = 'Copied';

        setTimeout(function () {
            button.innerText = original_text;
        }, 2500);
    }


    function apply_pg_tune() {
        let pg_tune_conf = $('#pg_tune_output_new').text();
        let banner = $('#success-or-failure-banner');

        banner
            .removeClass('banner-success banner-error')
            .addClass('banner-warning')
            .text('Applying new config, this may take a few seconds…')
            .show();

        $.ajax({
            url: "{% url 'support:data-tools-apply-tune' %}",
            type: 'POST',
            data: {
                csrfmiddlewaretoken: '{{ csrf_token }}',
                pg_tune_conf: pg_tune_conf
            },
            success: function (response) {
                banner
                    .removeClass('banner-warning banner-error')
                    .addClass('banner-success')
                    .text(response);
            },
            error: function (xhr) {
                let message = xhr.responseText || 'Failed to apply pg_tune';
                banner
                    .removeClass('banner-warning banner-success')
                    .addClass('banner-error')
                    .text(message);
            }
        });
    }


    $(function () {
        let memory_total_kb = {{memory_total_kb}};
        let memory_total_mb = {{memory_total_mb}};
        let memory_total_gb = {{memory_total_gb}};
        let core_count = {{core_count}};

        function update_ram_totals() {
            let ram_field = $('#memory_total_gb');
            let value = parseFloat(ram_field.val());

            if (value < 1) {
                ram_field.val(1);
                return;
            }

            value = Math.floor(value);
            ram_field.val(value)

            memory_total_gb = value;
            memory_total_mb = memory_total_gb * 1024;
            memory_total_kb = memory_total_gb * Math.pow(1024, 2);
        }


        function generate_pg_tune() {
            update_ram_totals();

            let max_connections = parseInt($('#max_connections').val(), 10);
            let cpu_cores = parseInt($('#core_count').val(), 10);
            let data_storage = $('#data_storage').val();

            let shared_buffers = Math.floor(memory_total_mb * 0.25);
            let effective_cache_size = Math.floor(memory_total_mb * 0.75);
            let maintenance_work_mem = memory_total_gb >= 32 ? 2048 : Math.floor(memory_total_gb * 64);
            let max_parallel_workers_per_gather = Math.min(4, Math.max(1, Math.ceil(cpu_cores / 2)))

            let free_mem_kb = memory_total_kb - (shared_buffers * 1024);
            let work_mem = Math.floor((free_mem_kb) / (max_connections * 3) / 2)

            // wal_buffers is technically dynamic at less than 2GB, but we will not physically send something out with that little RAM
            // above 2GB it is always 16MB, so just hardcoding 16
            let wal_buffers = '16';
            let huge_pages = memory_total_gb >= 32 ? 'try' : 'off';
            let random_page_cost = data_storage === 'SSD' ? '1.1' : '4';
            let effective_io_concurrency = data_storage === 'SSD' ? '200' : '2';

            let config = [];
            config.push(`# DB Version: 10`);
            config.push(`# OS Type: Linux`);
            config.push(`# DB Type: Mixed`);
            config.push(`# Total Memory (RAM): ${memory_total_gb}GB`);
            config.push(`# CPUs num: ${core_count}`);
            config.push(`# Connections num: ${max_connections}`);
            config.push(`# Data Storage: ssd\n`);
            config.push(`max_connections = ${max_connections}`);
            config.push(`shared_buffers = ${shared_buffers}MB`);
            config.push(`effective_cache_size = ${effective_cache_size}MB`);
            config.push(`maintenance_work_mem = ${maintenance_work_mem}MB`);
            config.push(`checkpoint_completion_target = 0.9`);
            config.push(`wal_buffers = ${wal_buffers}MB`);
            config.push(`default_statistics_target = 100`);
            config.push(`random_page_cost = ${random_page_cost}`);
            config.push(`effective_io_concurrency = ${effective_io_concurrency}`);
            config.push(`work_mem = ${work_mem}kB`);
            config.push(`huge_pages = ${huge_pages}`);
            config.push(`min_wal_size = 1GB`)
            config.push(`max_wal_size = 4GB`)
            config.push(`max_worker_processes = ${cpu_cores}`);
            config.push(`max_parallel_workers_per_gather = ${max_parallel_workers_per_gather}`);
            config.push(`max_parallel_workers = ${cpu_cores}`);

            $('#pg_tune_output_new').text(config.join('\n'));
        }

        $('#memory_total_gb').on('change', update_ram_totals);

        $('#max_connections').on('change', function() {
            let max_connections = $('#max_connections')
            let tmp = max_connections.val();
            if (tmp < 100) {
                max_connections.val(100);
                return
            }

            max_connections.val(Math.ceil(value / 100) * 100);
        });

        $('#core_count').on('change', function() {
            let core_count = $('#core_count')
            let value = parseFloat(core_count.val());
            if (value < 1) {
                value = 1
            }

            value = Math.floor(value);
            core_count.val(value);
        });

        let form = $('#data-tools-form');
        form.on('input change', 'input, select', function () {
            generate_pg_tune();
        });

        generate_pg_tune();
    });
</script>

<style>
    #data-tools-wrapper {
        display: flex;
        justify-content: space-evenly;
        gap: 32px;
        width: 100%;
        margin-bottom: 32px;
    }

    #data-tools-form {
        display: flex;
        flex-direction: column;
        gap: 16px;
        min-width: 280px;
        padding: 16px;
        border: 1px solid #ddd;
        border-radius: 6px;
        background-color: #f9f9f9;
        flex: 1;
        justify-content: center;
    }


    #data-tools-form label {
        display: flex;
        flex-direction: column;
        gap: 6px;
        font-weight: bold;
    }

    #data-tools-form input,
    #data-tools-form select {
        padding: 6px 8px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    .data-tools-output {
        display: flex;
        flex-direction: column;
        align-items: center;
        min-width: 320px
    }

    .output-title {
        font-weight: bold;
        margin-bottom: 6px;
    }

    #pg_tune_output_new,
    #pg_tune_output_old {
        font-family: monospace;
        white-space: pre;
        width: 100%;
        font-size: 14px;
        line-height: 1.4;
        flex: 1;
        margin-bottom: 0;
    }

    .pg-tune-actions {
        display: flex;
        gap: 12px;
        margin-top: 12px;
        width: 100%;
    }

    .pg-tune-actions button {
        flex: 1;
        padding: 10px 0;
        font-size: 14px;
        cursor: pointer;
    }

    #data_storage {
        height: auto;
    }

    #success-or-failure-banner {
        display: none;
        padding: 10px 14px;
        margin-bottom: 16px;
        border-radius: 4px;
        font-weight: bold;
    }

    .banner-success {
        background-color: #e6f4ea;
        color: #1e7e34;
        border: 1px solid #b7e1c1;
    }

    .banner-error {
        background-color: #fbeaea;
        color: #a71d2a;
        border: 1px solid #f1b0b7;
    }

    .banner-warning {
        background-color: #fff3cd;
        color: #856404;
        border: 1px solid #ffeeba;
    }
</style>
{% endblock %}

{% block sub-content %}
<div id="success-or-failure-banner"></div>
<div id="data-tools-wrapper">
    <div class="data-tools-output">
        <div class="output-title">PC Settings</div>
        <div id="data-tools-form">
            <label>
                Max connections
                <input type="number" id="max_connections" min="100" step="100" value="{{ max_connections }}">
            </label>

            <label>
                Total memory (GB)
                <input type="number" id="memory_total_gb" min="1" step="1" value="{{ memory_total_gb }}">
            </label>

            <label>
                CPU cores
                <input type="number" id="core_count" min="1" step="1" value="{{ core_count }}">
            </label>

            <label>
                Data storage
                <select id="data_storage">
                    <option value="SSD">SSD Storage</option>
                    <option value="HDD">HDD Storage</option>
                </select>
            </label>
            <div>Current Max Connections: {{current_max_connections}}</div>
        </div>
    </div>

    <div class="data-tools-output">
        <div class="output-title">New postgresql.conf</div>
        <pre id="pg_tune_output_new"></pre>

        <div class="pg-tune-actions">
            <button type="button" onclick="copy_pg_tune(this)">Copy</button>
            <button type="button" onclick="apply_pg_tune()">Apply</button>
        </div>
    </div>

    <div class="data-tools-output">
        <div class="output-title">Current postgresql.conf</div>
        <pre id="pg_tune_output_old">{{ old_conf }}</pre>
    </div>
</div>
{% endblock %}