{{ define "config" }}
{{ template "header" .}}

<section class="container">
    <div id="config-detail">
        <h2>Configuration</h2>
        <form action="#" id="config-form">
            {{ template "config-values" . }}
            {{ if .CanEditConfig }}
            <div class="warning-msg hidden">
                <h3>⚠️⚠️⚠️</h3>
                <h3>
                    WARNING - CHANGING THIS CONFIG WILL RESTART THE CLASSIC PROXY
                </h3>
            </div>
            <div class="config-form-cta">
                <button type="button" class="primary" id="edit-config-btn">Edit Config</button>
                <button type="submit" class="success hidden" id="save-config-btn">Save</button>
                <button type="button" class="cancel hidden" id="cancel-config-btn">Cancel</button>
            </div>
            {{ else }}
            <b>Config cannot be edited</b>
            {{ end }}
        </form>
    </div>
</section>

    <script>
        const canEditConfig = {{.CanEditConfig }}
        let config = {{.Config }}
        const editableFields = {{.EditableFields }}
        const baseUrl = "http://localhost:" + {{.Port }};


        if (canEditConfig) {
            const configForm = document.getElementById('config-form');
            const editConfigBtn = document.getElementById('edit-config-btn');
            const saveConfigBtn = document.getElementById('save-config-btn');
            const cancelConfigBtn = document.getElementById('cancel-config-btn');
            const warningMsg = document.querySelector('.warning-msg');

            editConfigBtn?.addEventListener("click", () => {
                warningMsg.classList.remove("hidden");
                toggleEditableFields();
                toggleButtonVisibility();
            })

            configForm?.addEventListener("submit", (e) => {
                e.preventDefault();

                const formData = new FormData(configForm);

                configForm.querySelectorAll("input[type=checkbox]").forEach(cb => {
                    if (!formData.has(cb.name)) {
                        formData.set(cb.name, false);
                    } else {
                        formData.set(cb.name, true);
                    }
                });

                const rawData = Object.fromEntries(formData.entries());

                let jsonData = {};

                for (const [key, value] of Object.entries(rawData)) {
                    if (value === "true") {
                        jsonData[key] = true;
                    } else if (value === "false") {
                        jsonData[key] = false;
                    } else if (!isNaN(value) && value.trim() !== "") {
                        jsonData[key] = Number(value);
                    } else {
                        jsonData[key] = value;
                    }
                }

                saveConfig(jsonData);
            })

            cancelConfigBtn?.addEventListener("click", () => {
                warningMsg.classList.add("hidden");
                setFormConfigValues(config);
                toggleEditableFields();
                toggleButtonVisibility();
            })

            function toggleButtonVisibility() {
                editConfigBtn.classList.toggle("hidden");
                saveConfigBtn.classList.toggle("hidden");
                cancelConfigBtn.classList.toggle("hidden");
            }

            function setFormConfigValues(config) {
                Object.entries(config).forEach(([key, value]) => {
                    const field = document.getElementById(key);
                    field.value = value;
                })
            }

            function toggleEditableFields() {
                editableFields.forEach(fieldName => {
                    const field = document.getElementById(fieldName);
                    field.disabled = !field.disabled;
                })
            }

            async function saveConfig(payload) {
                try {
                    saveConfigBtn.disabled = true;
                    cancelConfigBtn.disabled = true;
                    const response = await betterFetch(baseUrl + "/config", { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify(payload) });
                    config = response;
                    setFormConfigValues(config);
                    toggleEditableFields();
                    toggleButtonVisibility();
                    warningMsg.classList.add("hidden");
                    showToast("Config saved successfully", "success");
                } catch (error) {
                    showToast("Failed to save config " + error?.message, "error");
                } finally {
                    saveConfigBtn.disabled = false;
                    cancelConfigBtn.disabled = false;
                }
            }
        }
    </script>

{{ template "footer" . }}
{{ end }}