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

{% block head %}
{{ block.super }}
<script>
    function join_with_or(items) {
        if (items.length === 1) {
            return items[0];
        }

        if (items.length === 2) {
            return items[0] + ' or ' + items[1];
        }

        let all_but_last = items.slice(0, -1);
        let last = items[items.length - 1];

        return all_but_last.join(', ') + ', or ' + last;
    }

    function render_summary(json_data) {
        let summary_container = $('#config-summary');
        summary_container.empty();

        if (!json_data || !json_data.sync) {
            summary_container.html('<p>Invalid configuration.</p>');
            return;
        }

        let sleep_time = json_data.sync.sleep_time || 30;
        let paths = json_data.sync.paths || [];

        if (!Array.isArray(paths) || paths.length === 0) {
            summary_container.html(
                '<p><strong>PmisSync</strong> runs every <strong>' + sleep_time +
                ' seconds</strong>, but no directories are configured.</p>'
            );
            return;
        }

        paths.forEach(function (path_item) {
            let remote_path = path_item.remote_path || 'undefined';
            let suffixs = path_item.suffixs || [];
            let matches = path_item.matches || [];
            let rename_suffix = path_item.rename_suffix || '';

            let sentence = '';

            sentence += 'Every <span class="highlight-value">' + sleep_time +
                ' seconds</span>, ';
            sentence += '<strong>pmis_sync</strong> checks ';
            sentence += '<span class="highlight-path">' + remote_path + '</span>';

            if (suffixs.length > 0) {
                let has_noext = suffixs.indexOf('noext') !== -1;
                let real_exts = suffixs.filter(function (s) {
                    return s !== 'noext';
                });

                if (has_noext && real_exts.length === 0) {
                    sentence += ' for files with <span class="highlight-value">no file extension</span>';
                } else if (!has_noext && real_exts.length > 0) {
                    sentence += ' for files with extension <span class="highlight-value">' +
                        join_with_or(real_exts) + '</span>';
                } else if (has_noext && real_exts.length > 0) {
                    sentence += ' for files with <span class="highlight-value">no file extension</span> or extension <span class="highlight-value">' +
                        join_with_or(real_exts) + '</span>';
                }
            }

            if (matches.length > 0) {
                sentence += ' matching pattern <span class="highlight-pattern">' +
                    matches.join(', ') + '</span>';
            }

            sentence += ' and moves them to <span class="highlight-path">/opt/dosis2/pmis/live</span> ';

            if (rename_suffix) {
                sentence += ' and renames them to <span class="highlight-value">&lt;filename&gt;' +
                    rename_suffix + '</span>';
            }

            summary_container.append(
                '<div class="summary-block">' + sentence + '</div>'
            );
        });
    }


    $(function () {
        let container = document.getElementById('json-editor-container');

        let options = {
            mode: 'code',
            onChange: function () {
                try {
                    let current_json = editor.get();
                    render_summary(current_json);
                } catch (error) {
                    $('#config-summary').html('<p>Invalid JSON</p>');
                }
            },
            onValidate: function (json) {
                let errors = [];

                if (!json.sync) {
                    errors.push({
                        path: ['sync'],
                        message: 'Missing sync object'
                    });
                    return errors;
                }

                if (!Array.isArray(json.sync.paths)) {
                    errors.push({
                        path: ['sync', 'paths'],
                        message: 'paths must be an array'
                    });
                } else {
                    json.sync.paths.forEach(function (path_item, index) {
                        if (!('matches' in path_item)) {
                            errors.push({
                                path: ['sync', 'paths', index],
                                message: 'Missing matches'
                            });
                        }

                        if (!('remote_path' in path_item)) {
                            errors.push({
                                path: ['sync', 'paths', index],
                                message: 'Missing remote_path'
                            });
                        }

                        if (!('rename_suffix' in path_item)) {
                            errors.push({
                                path: ['sync', 'paths', index],
                                message: 'Missing rename_suffix'
                            });
                        }

                        if (!Array.isArray(path_item.suffixs)) {
                            errors.push({
                                path: ['sync', 'paths', index],
                                message: 'suffixs must be an array'
                            });
                        }
                    });
                }

                if (!('sleep_time' in json.sync)) {
                    errors.push({
                        path: ['sync'],
                        message: 'Missing sleep_time'
                    });
                }

                return errors;
            }
        };


        let editor = new JSONEditor(container, options);

        let initial_json = '{{ old_conf|escapejs }}';
        try {
            editor.set(JSON.parse(initial_json));
        } catch (error) {
            editor.setText(initial_json);
        }

        $('#generate-default').on('click', function () {
            let default_json = {
                sync: {
                    paths: [
                        {
                            matches: [],
                            remote_path: '/mnt/pmis/host_data',
                            rename_suffix: '',
                            suffixs: ['noext']
                        }
                    ],
                    sleep_time: '30'
                }
            };

            let current_json;

            try {
                current_json = editor.get();
            } catch (error) {
                alert('Current JSON is invalid. Please fix it before generating default.');
                return;
            }

            let current_string = JSON.stringify(current_json);
            let default_string = JSON.stringify(default_json);

            if (current_string !== default_string) {
                let confirmed = window.confirm(
                    'This will overwrite your current configuration. Continue?'
                );

                if (!confirmed) {
                    return;
                }
            }

            editor.set(default_json);
            render_summary(default_json);
        });

        $('#revert-to-original').on('click', function () {
            let current_json;
            try {
                current_json = editor.get();
            } catch (error) {
                current_json = null;
            }

            if (current_json && JSON.stringify(current_json) !== JSON.stringify(initial_json)) {
                let confirmed = window.confirm(
                    'This will discard your unsaved changes and restore the original configuration. Continue?'
                );

                if (!confirmed) {
                    return;
                }
            }

            editor.set(JSON.parse(initial_json));
            render_summary(editor.get());
        });


        $('#save-config').on('click', function () {
            let banner = $('#success-or-failure-banner');
            let payload;

            try {
                payload = editor.get();  // ensures valid JSON
            } catch (error) {
                let error_message = 'Your configuration contains invalid formatting.';

                if (error && error.message) {
                    let line_match = error.message.match(/line (\d+)/i);

                    if (line_match) {
                        error_message =
                            'There is a formatting issue near line ' +
                            line_match[1] +
                            '. Please check for a missing comma, bracket, or quotation mark.';
                    } else {
                        error_message =
                            'There is a formatting issue in the configuration. Please check for missing commas, brackets, or quotation marks.';
                    }
                }

                banner.removeClass('banner-success banner-error').addClass('banner-error').html('<ul><li>' + error_message + '</li></ul>').show();
                return;
            }

            $.ajax({
                url: "{% url 'support:data-tools-save-pmis-config' %}",   // <-- replace with your real URL
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(payload),
                headers: {
                    'X-CSRFToken': '{{csrf_token}}'
                },
                success: function (response) {
                    banner.removeClass('banner-success banner-error').addClass('banner-success').html('Configuration saved successfully.').show();
                },
                error: function (xhr) {
                    let banner = $('#success-or-failure-banner');
                    let error_list = ['Unexpected error.'];

                    if (xhr.responseJSON && xhr.responseJSON.error) {
                        if (Array.isArray(xhr.responseJSON.error)) {
                            error_list = xhr.responseJSON.error;
                        } else {
                            error_list = [xhr.responseJSON.error];
                        }
                    }

                    let list_html = '<ul>';
                    error_list.forEach(function (error_message) {
                        list_html += '<li>' + error_message + '</li>';
                    });
                    list_html += '</ul>';

                    banner.removeClass('banner-success banner-error').addClass('banner-error').html(list_html).show();
                }
            });
        });

        render_summary(editor.get());
    });
</script>

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

    #json-sidebar {
        width: 35%;
        padding: 24px;
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    }

    #json-sidebar h3 {
        margin-bottom: 6px;
    }

    #json-sidebar h4 {
        margin-top: 0;
        margin-bottom: 20px;
        font-weight: 500;
        color: #666;
    }

    .interface-block {
        margin-bottom: 14px;
        padding: 10px 12px;
        background: #f7f9fc;
        border-radius: 6px;
        font-size: 14px;
    }

    #config-summary {
        margin-top: 20px;
    }

    .summary-block {
        background: #f4f6fa;
        padding: 16px;
        border-radius: 10px;
        margin-bottom: 16px;
        line-height: 1.6;
    }

    #button-group {
        display: flex;
        justify-content: space-around;
    }

    #json-sidebar button {
        display: inline-block;
        margin-top: 14px;
        margin-right: 10px;
        padding: 8px 16px;
        border-radius: 6px;
        border: 1px solid #cfd6e4;
        background: #ffffff;
        font-weight: 500;
        cursor: pointer;
    }

    #json-sidebar button:hover {
        background: #f0f4ff;
        border-color: #9db2ff;
    }

    #revert-to-original:hover {
        background: #ffeaea;
        border-color: #d99;
    }

    #save-config:hover {
        background: #173a77;
    }


    #json-editor-container {
        width: 65%;
        height: 70vh;
    }

    .summary-block {
        background: #f8f9fb;
        padding: 14px;
        border-radius: 8px;
        margin-bottom: 14px;
        line-height: 1.5;
    }

    .highlight-value {
        font-weight: 600;
        color: #1f4b99;
    }

    .highlight-path {
        font-weight: 600;
        color: #0b6b3a;
        font-family: monospace;
    }

    .highlight-pattern {
        font-weight: 600;
        color: #8a2be2;
        font-family: monospace;
    }

    .jsoneditor-format,
    .jsoneditor-compact,
    .jsoneditor-sort,
    .jsoneditor-transform,
    .jsoneditor-poweredBy {
        display: none;
    }

    #success-or-failure-banner {
        margin-bottom: 15px;
        padding: 10px 14px;
        border-radius: 6px;
        font-weight: 500;
        min-height: 24px;
        display: none;
    }

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

    .banner-error {
        background-color: #fbeaea;
        color: #a71d2a;
        border: 1px solid #f1b0b7;
    }
</style>
{% endblock %}

{% block sub-content %}
<div id="success-or-failure-banner"></div>
<div id="data-tools-wrapper">
    <div id="json-sidebar">
        <h3>Configuration Summary</h3>
        <h4>/opt/dosis2/etc/pmissync/dosis_pmis_sync.json</h4>

        {% for iface in interfaces %}
            <div class="interface-block">
                <strong>{{ iface.display_name }}</strong><br>
                <span class="highlight-path">{{ iface.path }}</span>
                {% if iface.extension %}
                    → <span class="highlight-value">{{ iface.extension }}</span>
                {% endif %}
            </div>
        {% empty %}
            <p>No interfaces configured.</p>
        {% endfor %}

        <div id="config-summary"></div>
        <div id="button-group">
            <button id="generate-default">Generate Default</button>
            <button id="revert-to-original">Reset Changes</button>
            <button id="save-config">Save Configuration</button>
        </div>
    </div>

    <div id="json-editor-container"></div>
</div>
{% endblock %}