{% extends "base.html" %}

{% block title %}LabRat Setup{% endblock %}

{% block content %}

<h1>LabRat Setup</h1>

<h2>Logging</h2>
<strong>{{ set_mess }}</strong>

{% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
        {% for category, message in messages %}
            <div class="flash {{ category }}">{{ message }}</div>
        {% endfor %}
    {% endif %}
{% endwith %}

<!-- Logger Setup -->
<div class="setup-section">
    <p class="setup-section-title">Logger Configuration</p>

    <form method="POST" id="logger-form">

        {{ logger_form.hidden_tag() }}

        <p>
            {{ logger_form.logger_type.label }}
            {{ logger_form.logger_type() }}
        </p>

        <div id="logger-config-container">
            {% if config_form %}
                {% include "_logger_config_form.html" %}
            {% endif %}
        </div>

    </form>
</div>

<hr>

<!-- Device Setup -->
<div class="setup-section">

    <p class="setup-section-title">Device Configuration</p>

    <form method="POST" id="device-form">

        {{ device_form.hidden_tag() }}

        <div id="devices-container">

            {% for device in device_form.devices %}
            <div class="device-entry" data-index="{{ loop.index0 }}">

                <h3>
                    Device {{ loop.index }}
                    <button
                        type="button"
                        class="remove-btn remove-device-btn">
                        ✕ Remove
                    </button>
                </h3>

                {% for field in device %}
                    {% if field.name not in ['csrf_token', 'sensors', 'controls'] %}
                    <p>
                        {{ field.label }}
                        {{ field() }}

                        {% for error in field.errors %}
                            <span style="color:red;">{{ error }}</span>
                        {% endfor %}
                    </p>
                    {% endif %}
                {% endfor %}

                <div class="sensors-container">
                    {% for sensor in device.sensors %}
                    <div class="sensor-entry">

                        <h4>
                            Sensor {{ loop.index }}
                            <button
                                type="button"
                                class="remove-btn remove-sub-btn">
                                ✕
                            </button>
                        </h4>

                        {% for field in sensor %}
                            {% if field.name != "csrf_token" %}
                                <p>{{ field.label }} {{ field() }}</p>
                            {% endif %}
                        {% endfor %}

                    </div>
                    {% endfor %}
                </div>

                <button
                    type="button"
                    class="add-sensor-btn">
                    + Add Sensor
                </button>

                <div class="controls-container">
                    {% for control in device.controls %}
                    <div class="control-entry">

                        <h4>
                            Control {{ loop.index }}
                            <button
                                type="button"
                                class="remove-btn remove-sub-btn">
                                ✕
                            </button>
                        </h4>

                        {% for field in control %}
                            {% if field.name != "csrf_token" %}
                                <p>{{ field.label }} {{ field() }}</p>
                            {% endif %}
                        {% endfor %}

                    </div>
                    {% endfor %}
                </div>

                <button
                    type="button"
                    class="add-control-btn">
                    + Add Control
                </button>

            </div>
            {% endfor %}

        </div>

        <button
            type="button"
            id="add-device-btn">
            + Add Device
        </button>

        <p>
            {{ device_form.submit(class="primary-btn") }}
        </p>

    </form>

</div>

<script id="device-schema" type="application/json">
{{ schema_json | safe }}
</script>

{% if config.QUICK_START %}
<script>
setInterval(() => {
    fetch('/heartbeat', {
        method: 'POST',
        keepalive: true
    });
}, 2000);
</script>
{% endif %}

{% endblock %}

{% block scripts %}
{{ super() }}

<script>

document.addEventListener("DOMContentLoaded", () => {

    const schema =
        JSON.parse(document.getElementById("device-schema").textContent);

    const deviceProps =
        schema.properties.devices.items.properties;

    const sensorProps =
        deviceProps.sensors.items.properties;

    const controlProps =
        deviceProps.controls.items.properties;

    const deviceRequired =
        schema.properties.devices.items.required ?? [];

    const sensorRequired =
        deviceProps.sensors.items.required ?? [];

    const controlRequired =
        deviceProps.controls.items.required ?? [];

    const DEVICE_SKIP =
        new Set(["sensors", "controls"]);

    function buildField(fieldName, spec, inputName, required) {

        const p = document.createElement("p");

        const label = document.createElement("label");

        label.textContent = fieldName
            .replace(/_/g, " ")
            .replace(/\b\w/g, c => c.toUpperCase()) + ": ";

        let input;

        if (spec.enum) {

            input = document.createElement("select");
            input.name = inputName;

            const blank = document.createElement("option");
            blank.value = "";
            blank.textContent = "--Select--";

            input.appendChild(blank);

            for (const val of spec.enum) {

                const opt = document.createElement("option");

                opt.value = val;
                opt.textContent =
                    val.charAt(0).toUpperCase() + val.slice(1);

                input.appendChild(opt);
            }

        } else {

            input = document.createElement("input");

            input.name = inputName;
            input.type =
                spec.type === "integer" ? "number" : "text";

            if (spec.type === "integer") {
                input.min = "0";
            }

            if (fieldName === "device_guid") {
                input.placeholder =
                    "Auto-generated if left blank";
            }

            if (fieldName === "device_active") {
                input.max = "1";
                input.value = "1";
            }

            if (fieldName === "acquire_time") {
                input.min = "1";
                input.value = "1";
            }
        }

        if (required.includes(fieldName)) {
            input.required = true;
        }

        label.appendChild(input);
        p.appendChild(label);

        return p;
    }

    function buildSensor(deviceIndex, sensorIndex) {

        const div = document.createElement("div");
        div.className = "sensor-entry";

        div.innerHTML =
            `<h4>
                Sensor ${sensorIndex + 1}
                <button type="button"
                        class="remove-btn remove-sub-btn">
                    ✕
                </button>
            </h4>`;

        for (const [fieldName, spec] of Object.entries(sensorProps)) {

            div.appendChild(
                buildField(
                    fieldName,
                    spec,
                    `devices-${deviceIndex}-sensors-${sensorIndex}-${fieldName}`,
                    sensorRequired
                )
            );
        }

        return div;
    }

    function buildControl(deviceIndex, controlIndex) {

        const div = document.createElement("div");
        div.className = "control-entry";

        div.innerHTML =
            `<h4>
                Control ${controlIndex + 1}
                <button type="button"
                        class="remove-btn remove-sub-btn">
                    ✕
                </button>
            </h4>`;

        for (const [fieldName, spec] of Object.entries(controlProps)) {

            div.appendChild(
                buildField(
                    fieldName,
                    spec,
                    `devices-${deviceIndex}-controls-${controlIndex}-${fieldName}`,
                    controlRequired
                )
            );
        }

        return div;
    }

    function buildDevice(deviceIndex) {

        const div = document.createElement("div");

        div.className = "device-entry";
        div.dataset.index = deviceIndex;

        const heading = document.createElement("h3");

        heading.innerHTML =
            `Device ${deviceIndex + 1}
             <button type="button"
                     class="remove-btn remove-device-btn">
                 ✕ Remove
             </button>`;

        div.appendChild(heading);

        for (const [fieldName, spec] of Object.entries(deviceProps)) {

            if (DEVICE_SKIP.has(fieldName)) {
                continue;
            }

            div.appendChild(
                buildField(
                    fieldName,
                    spec,
                    `devices-${deviceIndex}-${fieldName}`,
                    deviceRequired
                )
            );
        }

        const sensorsContainer =
            document.createElement("div");

        sensorsContainer.className =
            "sensors-container";

        div.appendChild(sensorsContainer);

        div.insertAdjacentHTML(
            "beforeend",
            `<button type="button" class="add-sensor-btn">
                + Add Sensor
            </button>`
        );

        const controlsContainer =
            document.createElement("div");

        controlsContainer.className =
            "controls-container";

        div.appendChild(controlsContainer);

        div.insertAdjacentHTML(
            "beforeend",
            `<button type="button" class="add-control-btn">
                + Add Control
            </button>`
        );

        return div;
    }

    const devicesContainer =
        document.getElementById("devices-container");

    document.getElementById("add-device-btn")
    .addEventListener("click", () => {

        const deviceIndex =
            devicesContainer.children.length;

        devicesContainer.appendChild(
            buildDevice(deviceIndex)
        );
    });

    devicesContainer.addEventListener("click", (e) => {

        if (e.target.classList.contains("add-sensor-btn")) {

            const deviceDiv =
                e.target.closest(".device-entry");

            const index =
                [...devicesContainer.children].indexOf(deviceDiv);

            const container =
                deviceDiv.querySelector(".sensors-container");

            container.appendChild(
                buildSensor(index, container.children.length)
            );
        }

        if (e.target.classList.contains("add-control-btn")) {

            const deviceDiv =
                e.target.closest(".device-entry");

            const index =
                [...devicesContainer.children].indexOf(deviceDiv);

            const container =
                deviceDiv.querySelector(".controls-container");

            container.appendChild(
                buildControl(index, container.children.length)
            );
        }

        if (e.target.classList.contains("remove-sub-btn")) {
            e.target.closest(".sensor-entry, .control-entry").remove();
        }

        if (e.target.classList.contains("remove-device-btn")) {

            e.target.closest(".device-entry").remove();

            [...devicesContainer.children].forEach((entry, i) => {
                entry.dataset.index = i;
                entry.querySelector("h3").childNodes[0].textContent =
                    `Device ${i + 1} `;
            });
        }

    });

});

</script>

<script>
document.addEventListener("DOMContentLoaded", () => {

    const loggerSelect = document.getElementById("logger_type");
    const container = document.getElementById("logger-config-container");

    // Placeholder gets replaced with the real logger name before fetching
    const formUrlTemplate =
        "{{ url_for('setup.get_logger_form', logger_name='__LOGGER__') }}";

    loggerSelect.addEventListener("change", async (e) => {

        const loggerName = e.target.value;

        if (!loggerName) {
            container.innerHTML = "";
            return;
        }

        const url = formUrlTemplate.replace("__LOGGER__", encodeURIComponent(loggerName));

        try {
            const response = await fetch(url);

            if (response.status === 204) {
                container.innerHTML = "";
                return;
            }

            if (!response.ok) {
                throw new Error(`Request failed: ${response.status}`);
            }

            container.innerHTML = await response.text();

        } catch (err) {
            console.error("Failed to load logger config form:", err);
            container.innerHTML =
                '<p style="color:red;">Failed to load configuration form.</p>';
        }
    });

});
</script>

{% endblock %}