{% 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 %}

<!-- Database Setup Form -->
<div class="setup-section">
    <p class="setup-section-title">Database Configuration</p>
    <form method="POST">
        {{ db_form.hidden_tag() }}
        <p>
            {{ db_form.file_path.label }}
            {{ db_form.file_path(size=60) }}
            {% for error in db_form.file_path.errors %}
                <span style="color: red;">{{ error }}</span>
            {% endfor %}
        </p>
        <p>{{ db_form.submit() }}</p>
    </form>
</div>

<hr>

<!-- Device Setup Form -->
 <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">
            {# Render any server-side entries (e.g. on validation failure / repopulation) #}
            {% 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() }}</p>
    </form>
</div>

{# Pass the schema to JS as JSON - single source of truth #}
<script id="device-schema" type="application/json">
    {{ schema_json | safe }}
</script>

{% endblock %}


{% block scripts %}
{{ super() }}
<script>
document.addEventListener("DOMContentLoaded", () => {

    // ── Load schema from the page (injected by Flask) ──────────────────────
    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 ?? [];

    // Sub-objects rendered separately — skip at top level
    const DEVICE_SKIP = new Set(["sensors", "controls"]);

    // ── Field builder ───────────────────────────────────────────────────────
    /**
     * Build a <p> containing label + input from a schema property.
     *
     * @param {string} fieldName   - property key in the schema
     * @param {object} spec        - schema spec for that property
     * @param {string} inputName   - HTML name attribute for the input
     * @param {string[]} required  - list of required field names
     */
    function buildField(fieldName, spec, inputName, required) {
        const p = document.createElement("p");
        const label = document.createElement("label");
        // Convert snake_case to Title Case for display
        label.textContent = fieldName
            .replace(/_/g, " ")
            .replace(/\b\w/g, c => c.toUpperCase()) + ": ";

        let input;

        if (spec.enum) {
            // Render a <select> for enum fields
            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;
    }

    // ── Section builders ────────────────────────────────────────────────────
    function buildSensor(deviceIndex, sensorIndex) {
        const div = document.createElement("div");
        div.className = "sensor-entry";

        const heading = document.createElement("h4");
        const removeBtn = document.createElement("button");
        removeBtn.type = "button";
        removeBtn.className = "remove-btn remove-sub-btn";
        removeBtn.textContent = "✕";
        heading.textContent = `Sensor ${sensorIndex + 1} `;
        heading.appendChild(removeBtn);
        div.appendChild(heading);

        for (const [fieldName, spec] of Object.entries(sensorProps)) {
            const inputName =
                `devices-${deviceIndex}-sensors-${sensorIndex}-${fieldName}`;
            div.appendChild(buildField(fieldName, spec, inputName, sensorRequired));
        }
        return div;
    }

    function buildControl(deviceIndex, controlIndex) {
        const div = document.createElement("div");
        div.className = "control-entry";

        const heading = document.createElement("h4");
        const removeBtn = document.createElement("button");
        removeBtn.type = "button";
        removeBtn.className = "remove-btn remove-sub-btn";
        removeBtn.textContent = "✕";
        heading.textContent = `Control ${controlIndex + 1} `;
        heading.appendChild(removeBtn);
        div.appendChild(heading);

        for (const [fieldName, spec] of Object.entries(controlProps)) {
            const inputName =
                `devices-${deviceIndex}-controls-${controlIndex}-${fieldName}`;
            div.appendChild(buildField(fieldName, spec, inputName, controlRequired));
        }
        return div;
    }

    function buildDevice(deviceIndex) {
        const div = document.createElement("div");
        div.className = "device-entry";
        div.dataset.index = deviceIndex;

        const heading = document.createElement("h3");
        const removeBtn = document.createElement("button");
        removeBtn.type = "button";
        removeBtn.className = "remove-btn remove-device-btn";
        removeBtn.textContent = "✕ Remove";
        heading.textContent = `Device ${deviceIndex + 1} `;
        heading.appendChild(removeBtn);
        div.appendChild(heading);

        // Top-level device scalar fields (skip sensors/controls)
        for (const [fieldName, spec] of Object.entries(deviceProps)) {
            if (DEVICE_SKIP.has(fieldName)) continue;
            const inputName = `devices-${deviceIndex}-${fieldName}`;
            div.appendChild(buildField(fieldName, spec, inputName, deviceRequired));
        }

        // Sensors sub-section
        const sensorsContainer = document.createElement("div");
        sensorsContainer.className = "sensors-container";
        div.appendChild(sensorsContainer);

        const addSensorBtn = document.createElement("button");
        addSensorBtn.type = "button";
        addSensorBtn.className = "add-sensor-btn";
        addSensorBtn.textContent = "+ Add Sensor";
        div.appendChild(addSensorBtn);

        // Controls sub-section
        const controlsContainer = document.createElement("div");
        controlsContainer.className = "controls-container";
        div.appendChild(controlsContainer);

        const addControlBtn = document.createElement("button");
        addControlBtn.type = "button";
        addControlBtn.className = "add-control-btn";
        addControlBtn.textContent = "+ Add Control";
        div.appendChild(addControlBtn);

        return div;
    }

    // ── Event wiring ────────────────────────────────────────────────────────
    const devicesContainer = document.getElementById("devices-container");

    document.getElementById("add-device-btn").addEventListener("click", () => {
        const deviceIndex = devicesContainer.children.length;
        const deviceBlock = buildDevice(deviceIndex);
        devicesContainer.appendChild(deviceBlock);
        const firstInput = deviceBlock.querySelector("input, select");
        setTimeout(() => {
            firstInput.scrollIntoView({ behavior: "smooth", block: "center" });
            firstInput.focus();
        }, 50);
    });

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

        // Add sensor
        if (e.target.classList.contains("add-sensor-btn")) {
            const deviceDiv = e.target.closest(".device-entry");
            const deviceIndex = [...devicesContainer.children].indexOf(deviceDiv);
            const container = deviceDiv.querySelector(".sensors-container");
            const sensorBlock = buildSensor(deviceIndex, container.children.length);
            container.appendChild(sensorBlock);
            const firstInput = sensorBlock.querySelector("input, select");
            setTimeout(() => {
                firstInput.scrollIntoView({ behavior: "smooth", block: "center" });
                firstInput.focus();
            }, 50);
        }

        if (e.target.classList.contains("add-control-btn")) {
            const deviceDiv = e.target.closest(".device-entry");
            const deviceIndex = [...devicesContainer.children].indexOf(deviceDiv);
            const container = deviceDiv.querySelector(".controls-container");
            const controlBlock = buildControl(deviceIndex, container.children.length);
            container.appendChild(controlBlock);
            const firstInput = controlBlock.querySelector("input, select");
            setTimeout(() => {
                firstInput.scrollIntoView({ behavior: "smooth", block: "center" });
                firstInput.focus();
            }, 50);
        }

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

        // Remove device
        if (e.target.classList.contains("remove-device-btn")) {
            e.target.closest(".device-entry").remove();
            // Re-number remaining device headings
            [...devicesContainer.children].forEach((d, i) => {
                d.dataset.index = i;
                d.querySelector("h3").childNodes[0].textContent = `Device ${i + 1} `;
            });
        }
    });
});
</script>
{% endblock %}