script.js

// ============================================================
// RGB EVENT LIGHT SIMULATOR
// COMPLETE JAVASCRIPT
// RGB CONTROL + EFFECTS + AI COMMAND GATEWAY
// ============================================================


// ============================================================
// ELEMENT REFERENCES
// ============================================================

const redSlider =
    document.getElementById("red");

const greenSlider =
    document.getElementById("green");

const blueSlider =
    document.getElementById("blue");

const redValue =
    document.getElementById("redValue");

const greenValue =
    document.getElementById("greenValue");

const blueValue =
    document.getElementById("blueValue");

const light =
    document.getElementById("light");

const brightnessSlider =
    document.getElementById("brightness");

const brightnessValue =
    document.getElementById("brightnessValue");

const speedSlider =
    document.getElementById("speed");

const speedValue =
    document.getElementById("speedValue");

const powerButton =
    document.getElementById("power");

const powerStatus =
    document.getElementById("powerStatus");

const modeButtons =
    document.querySelectorAll(".mode-button");

const modeStatus =
    document.getElementById("modeStatus");

const colorValue =
    document.getElementById("colorValue");

const resetButton =
    document.getElementById("reset");

const liveIndicator =
    document.getElementById("liveIndicator");

const presetButtons =
    document.querySelectorAll(".preset");

const commandInput =
    document.getElementById("commandInput");

const commandButton =
    document.getElementById("commandButton");

const commandMessage =
    document.getElementById("commandMessage");

const exampleCommands =
    document.querySelectorAll(".example-command");


// ============================================================
// APPLICATION STATE
// ============================================================

let lightIsOn = true;

let currentMode = "static";

let modeTimer = null;

let rainbowHue = 0;


// ============================================================
// AI GATEWAY
// ============================================================

const WEBHOOK_URL =
    "https://smartexploit.app.n8n.cloud/webhook/rgb-ai-command";


// ============================================================
// SET COLOR
// ============================================================

function setColor(red, green, blue) {

    redSlider.value = Math.max(
        0,
        Math.min(255, Number(red))
    );

    greenSlider.value = Math.max(
        0,
        Math.min(255, Number(green))
    );

    blueSlider.value = Math.max(
        0,
        Math.min(255, Number(blue))
    );

    updateLight();
}


// ============================================================
// SET BRIGHTNESS
// ============================================================

function setBrightness(value) {

    brightnessSlider.value =
        Math.max(
            0,
            Math.min(
                100,
                Number(value)
            )
        );

    updateLight();
}


// ============================================================
// SET SPEED
// ============================================================

function setSpeed(value) {

    speedSlider.value =
        Math.max(
            1,
            Math.min(
                10,
                Number(value)
            )
        );

    speedValue.textContent =
        speedSlider.value;

    if (currentMode !== "static") {

        selectMode(currentMode);

    }
}


// ============================================================
// SET POWER
// ============================================================

function setPower(state) {

    lightIsOn = Boolean(state);

    if (lightIsOn) {

        powerButton.textContent = "ON";

        powerButton.classList.remove("off");

        powerButton.classList.add("on");

    } else {

        powerButton.textContent = "OFF";

        powerButton.classList.remove("on");

        powerButton.classList.add("off");

        stopMode();
    }

    updateLight();
}


// ============================================================
// SET LIGHT MODE
// ============================================================

function setLightMode(mode) {

    if (!lightIsOn) {

        setPower(true);

    }

    selectMode(mode);
}


// ============================================================
// UPDATE LIGHT
// ============================================================

function updateLight() {

    const red =
        Number(redSlider.value);

    const green =
        Number(greenSlider.value);

    const blue =
        Number(blueSlider.value);

    const brightness =
        Number(brightnessSlider.value);

    const rgbColor =
        `rgb(${red}, ${green}, ${blue})`;


    // ------------------------------
    // VALUE DISPLAYS
    // ------------------------------

    redValue.textContent =
        red;

    greenValue.textContent =
        green;

    blueValue.textContent =
        blue;

    brightnessValue.textContent =
        `${brightness}%`;

    speedValue.textContent =
        speedSlider.value;

    colorValue.textContent =
        rgbColor;


    // ------------------------------
    // LIGHT OFF
    // ------------------------------

    if (!lightIsOn) {

        light.style.background =
            "#020617";

        light.style.boxShadow =
            "none";

        light.style.opacity =
            "0";

        powerStatus.textContent =
            "OFF";

        powerStatus.style.color =
            "#ef4444";

        liveIndicator.style.opacity =
            "0.35";

        return;
    }


    // ------------------------------
    // LIGHT ON
    // ------------------------------

    powerStatus.textContent =
        "ON";

    powerStatus.style.color =
        "#22c55e";

    liveIndicator.style.opacity =
        "1";


    const brightnessAmount =
        brightness / 100;


    light.style.opacity =
        brightnessAmount;

    light.style.background =
        rgbColor;

    light.style.boxShadow = `
        0 0 ${30 * brightnessAmount}px ${rgbColor},
        0 0 ${60 * brightnessAmount}px ${rgbColor},
        0 0 ${100 * brightnessAmount}px ${rgbColor}
    `;
}


// ============================================================
// STOP MODE
// ============================================================

function stopMode() {

    if (modeTimer !== null) {

        clearInterval(modeTimer);

        modeTimer = null;
    }
}


// ============================================================
// STATIC MODE
// ============================================================

function staticMode() {

    stopMode();

    currentMode = "static";

    updateLight();
}


// ============================================================
// FLASH MODE
// ============================================================

function flashMode() {

    stopMode();

    currentMode = "flash";

    let visible = true;

    const interval =
        1100 -
        (
            Number(speedSlider.value) * 100
        );


    modeTimer =
        setInterval(
            function () {

                if (!lightIsOn) {
                    return;
                }

                visible = !visible;

                light.style.opacity =
                    visible
                        ? Number(
                            brightnessSlider.value
                        ) / 100
                        : 0;

            },
            Math.max(100, interval)
        );
}


// ============================================================
// STROBE MODE
// ============================================================

function strobeMode() {

    stopMode();

    currentMode = "strobe";

    let visible = true;

    const interval =
        420 -
        (
            Number(speedSlider.value) * 35
        );


    modeTimer =
        setInterval(
            function () {

                if (!lightIsOn) {
                    return;
                }

                visible = !visible;

                light.style.opacity =
                    visible
                        ? Number(
                            brightnessSlider.value
                        ) / 100
                        : 0;

            },
            Math.max(40, interval)
        );
}


// ============================================================
// FADE MODE
// ============================================================

function fadeMode() {

    stopMode();

    currentMode = "fade";

    let brightness = 0;

    let direction = 1;

    const interval =
        90 -
        (
            Number(speedSlider.value) * 6
        );


    modeTimer =
        setInterval(
            function () {

                if (!lightIsOn) {
                    return;
                }

                brightness +=
                    direction * 2;


                if (brightness >= 100) {

                    brightness = 100;

                    direction = -1;
                }


                if (brightness <= 0) {

                    brightness = 0;

                    direction = 1;
                }


                const userBrightness =
                    Number(
                        brightnessSlider.value
                    );


                light.style.opacity =
                    (
                        brightness / 100
                    ) *
                    (
                        userBrightness / 100
                    );

            },
            Math.max(20, interval)
        );
}


// ============================================================
// RAINBOW MODE
// ============================================================

function rainbowMode() {

    stopMode();

    currentMode = "rainbow";

    rainbowHue = 0;

    const interval =
        90 -
        (
            Number(speedSlider.value) * 6
        );


    modeTimer =
        setInterval(
            function () {

                if (!lightIsOn) {
                    return;
                }

                rainbowHue += 2;


                if (rainbowHue >= 360) {

                    rainbowHue = 0;

                }


                const color =
                    `hsl(${rainbowHue}, 100%, 50%)`;


                const brightness =
                    Number(
                        brightnessSlider.value
                    ) / 100;


                light.style.background =
                    color;

                light.style.boxShadow = `
                    0 0 ${30 * brightness}px ${color},
                    0 0 ${60 * brightness}px ${color},
                    0 0 ${100 * brightness}px ${color}
                `;

                light.style.opacity =
                    brightness;

                colorValue.textContent =
                    color;

            },
            Math.max(20, interval)
        );
}


// ============================================================
// PARTY MODE
// ============================================================

function partyMode() {

    stopMode();

    currentMode = "party";

    const interval =
        1100 -
        (
            Number(speedSlider.value) * 100
        );


    modeTimer =
        setInterval(
            function () {

                if (!lightIsOn) {
                    return;
                }


                const red =
                    Math.floor(
                        Math.random() * 256
                    );

                const green =
                    Math.floor(
                        Math.random() * 256
                    );

                const blue =
                    Math.floor(
                        Math.random() * 256
                    );


                redSlider.value =
                    red;

                greenSlider.value =
                    green;

                blueSlider.value =
                    blue;


                updateLight();

            },
            Math.max(100, interval)
        );
}


// ============================================================
// SELECT MODE
// ============================================================

function selectMode(mode) {

    currentMode = mode;


    modeButtons.forEach(
        function (button) {

            button.classList.remove(
                "active"
            );

        }
    );


    const selectedButton =
        document.querySelector(
            `[data-mode="${mode}"]`
        );


    if (selectedButton) {

        selectedButton.classList.add(
            "active"
        );

    }


    modeStatus.textContent =
        mode.charAt(0).toUpperCase() +
        mode.slice(1);


    if (mode === "static") {

        staticMode();

    } else if (mode === "flash") {

        flashMode();

    } else if (mode === "fade") {

        fadeMode();

    } else if (mode === "strobe") {

        strobeMode();

    } else if (mode === "rainbow") {

        rainbowMode();

    } else if (mode === "party") {

        partyMode();

    }
}


// ============================================================
// SLIDER EVENTS
// ============================================================

redSlider.addEventListener(
    "input",
    function () {

        selectMode("static");

        updateLight();

    }
);


greenSlider.addEventListener(
    "input",
    function () {

        selectMode("static");

        updateLight();

    }
);


blueSlider.addEventListener(
    "input",
    function () {

        selectMode("static");

        updateLight();

    }
);


brightnessSlider.addEventListener(
    "input",
    function () {

        updateLight();

    }
);


speedSlider.addEventListener(
    "input",
    function () {

        speedValue.textContent =
            speedSlider.value;


        if (currentMode !== "static") {

            selectMode(currentMode);

        }

    }
);


// ============================================================
// POWER EVENT
// ============================================================

powerButton.addEventListener(
    "click",
    function () {

        setPower(!lightIsOn);

    }
);


// ============================================================
// RESET
// ============================================================

resetButton.addEventListener(
    "click",
    function () {

        stopMode();


        redSlider.value = 255;

        greenSlider.value = 0;

        blueSlider.value = 0;


        brightnessSlider.value = 100;

        speedSlider.value = 5;


        lightIsOn = true;


        powerButton.textContent =
            "ON";

        powerButton.classList.remove(
            "off"
        );

        powerButton.classList.add(
            "on"
        );


        selectMode("static");


        commandInput.value = "";

        commandMessage.textContent =
            "Waiting for a command...";


        updateLight();

    }
);


// ============================================================
// PRESET EVENTS
// ============================================================

presetButtons.forEach(
    function (button) {

        button.addEventListener(
            "click",
            function () {

                const red =
                    Number(
                        button.dataset.red
                    );

                const green =
                    Number(
                        button.dataset.green
                    );

                const blue =
                    Number(
                        button.dataset.blue
                    );


                setColor(
                    red,
                    green,
                    blue
                );

                setPower(true);

                setLightMode("static");

            }
        );

    }
);


// ============================================================
// MODE BUTTON EVENTS
// ============================================================

modeButtons.forEach(
    function (button) {

        button.addEventListener(
            "click",
            function () {

                const mode =
                    button.dataset.mode;

                setLightMode(mode);

            }
        );

    }
);


// ============================================================
// LOCAL COMMAND INTERPRETER
// ============================================================

function interpretCommand(command) {

    const text =
        command
            .toLowerCase()
            .trim();


    if (!text) {

        return {
            action: "error",
            message: "Please enter a command."
        };

    }


    // ------------------------------
    // POWER
    // ------------------------------

    if (
        text.includes("turn off") ||
        text.includes("switch off") ||
        text === "off"
    ) {

        return {
            action: "power",
            state: false
        };

    }


    if (
        text.includes("turn on") ||
        text.includes("switch on") ||
        text === "on"
    ) {

        return {
            action: "power",
            state: true
        };

    }


    // ------------------------------
    // BRIGHTNESS
    // ------------------------------

    const brightnessMatch =
        text.match(
            /(?:brightness|bright|light)\s*(?:to|at)?\s*(\d{1,3})/
        );


    if (brightnessMatch) {

        return {
            action: "set_brightness",
            brightness:
                Math.max(
                    0,
                    Math.min(
                        100,
                        Number(
                            brightnessMatch[1]
                        )
                    )
                )
        };

    }


    // ------------------------------
    // SPEED
    // ------------------------------

    const speedMatch =
        text.match(
            /speed\s*(?:to|at)?\s*(\d{1,2})/
        );


    if (speedMatch) {

        return {
            action: "set_speed",
            speed:
                Math.max(
                    1,
                    Math.min(
                        10,
                        Number(
                            speedMatch[1]
                        )
                    )
                )
        };

    }


    // ------------------------------
    // COLORS
    // ------------------------------

    let color = null;


    if (text.includes("purple")) {

        color = {
            red: 128,
            green: 0,
            blue: 255
        };

    } else if (text.includes("red")) {

        color = {
            red: 255,
            green: 0,
            blue: 0
        };

    } else if (text.includes("green")) {

        color = {
            red: 0,
            green: 255,
            blue: 0
        };

    } else if (text.includes("blue")) {

        color = {
            red: 0,
            green: 0,
            blue: 255
        };

    } else if (text.includes("yellow")) {

        color = {
            red: 255,
            green: 255,
            blue: 0
        };

    } else if (text.includes("cyan")) {

        color = {
            red: 0,
            green: 255,
            blue: 255
        };

    } else if (text.includes("pink")) {

        color = {
            red: 255,
            green: 0,
            blue: 150
        };

    } else if (text.includes("white")) {

        color = {
            red: 255,
            green: 255,
            blue: 255
        };

    }


    // ------------------------------
    // MODES
    // ------------------------------

    let mode = null;


    if (text.includes("rainbow")) {

        mode = "rainbow";

    } else if (text.includes("strobe")) {

        mode = "strobe";

    } else if (text.includes("flash")) {

        mode = "flash";

    } else if (text.includes("fade")) {

        mode = "fade";

    } else if (text.includes("party")) {

        mode = "party";

    } else if (text.includes("static")) {

        mode = "static";

    }


    // ------------------------------
    // COLOR + MODE
    // ------------------------------

    if (color && mode) {

        return {
            action: "set_light",
            color: color,
            mode: mode
        };

    }


    // ------------------------------
    // COLOR ONLY
    // ------------------------------

    if (color) {

        return {
            action: "set_light",
            color: color,
            mode: "static"
        };

    }


    // ------------------------------
    // MODE ONLY
    // ------------------------------

    if (mode) {

        return {
            action: "mode",
            mode: mode
        };

    }


    return {
        action: "error",
        message:
            "I don't understand that command yet."
    };
}


// ============================================================
// LOCAL COMMAND EXECUTOR
// ============================================================

function executeLocalCommand(command) {

    if (command.action === "error") {

        commandMessage.textContent =
            command.message;

        return;
    }


    if (command.action === "power") {

        setPower(command.state);

        commandMessage.textContent =
            command.state
                ? "Light turned on."
                : "Light turned off.";

        return;
    }


    if (command.action === "set_light") {

        setColor(
            command.color.red,
            command.color.green,
            command.color.blue
        );


        if (command.mode) {

            setLightMode(
                command.mode
            );

        }


        commandMessage.textContent =
            `Light set to RGB(${command.color.red}, ${command.color.green}, ${command.color.blue}) in ${command.mode} mode.`;

        return;
    }


    if (command.action === "set_brightness") {

        setBrightness(
            command.brightness
        );


        commandMessage.textContent =
            `Brightness set to ${command.brightness}%.`;

        return;
    }


    if (command.action === "set_speed") {

        setSpeed(
            command.speed
        );


        commandMessage.textContent =
            `Speed set to ${command.speed}.`;

        return;
    }


    if (command.action === "mode") {

        setLightMode(
            command.mode
        );


        commandMessage.textContent =
            `Light mode changed to ${command.mode}.`;

    }
}


// ============================================================
// GET CURRENT STATE
// ============================================================

function getCurrentState() {

    return {

        power:
            lightIsOn,

        brightness:
            Number(
                brightnessSlider.value
            ),

        speed:
            Number(
                speedSlider.value
            ),

        mode:
            currentMode

    };
}


// ============================================================
// EXTRACT AI RESPONSE
//
// THIS IS THE IMPORTANT FIX.
//
// n8n may return:
// 1. Direct JSON
// 2. { response: {...} }
// 3. { response: "..." }
// 4. Groq/OpenAI style:
//    { choices: [{ message: { content: "..." }}] }
// 5. JSON embedded inside a string
// ============================================================

function extractJSON(value) {

    if (!value) {
        return null;
    }


    if (
        typeof value === "object"
    ) {

        return value;

    }


    if (
        typeof value !== "string"
    ) {

        return null;

    }


    const text =
        value.trim();


    if (!text) {
        return null;
    }


    try {

        return JSON.parse(text);

    } catch (error) {

        // Try to find JSON inside text.

        const firstBrace =
            text.indexOf("{");

        const lastBrace =
            text.lastIndexOf("}");


        if (
            firstBrace !== -1 &&
            lastBrace !== -1 &&
            lastBrace > firstBrace
        ) {

            try {

                return JSON.parse(
                    text.substring(
                        firstBrace,
                        lastBrace + 1
                    )
                );

            } catch (innerError) {

                return null;

            }

        }

    }


    return null;
}


// ============================================================
// NORMALIZE AI RESPONSE
// ============================================================

function normalizeAIResponse(gatewayData) {

    console.log(
        "RAW AI GATEWAY RESPONSE:",
        gatewayData
    );


    let data =
        gatewayData;


    // ----------------------------------------
    // UNWRAP COMMON n8n RESPONSE WRAPPERS
    // ----------------------------------------

    if (
        data &&
        data.response !== undefined
    ) {

        const parsedResponse =
            extractJSON(
                data.response
            );


        if (parsedResponse) {

            data = {
                ...data,
                ...parsedResponse
            };

        }

    }


    // ----------------------------------------
    // GROQ / OPENAI STYLE RESPONSE
    // ----------------------------------------

    if (
        data &&
        Array.isArray(data.choices) &&
        data.choices.length > 0
    ) {

        const content =
            data.choices[0]
                ?.message
                ?.content;


        const parsedContent =
            extractJSON(content);


        if (parsedContent) {

            data = {
                ...data,
                ...parsedContent
            };

        }

    }


    // ----------------------------------------
    // IF response STILL contains JSON
    // ----------------------------------------

    if (
        data &&
        typeof data.response === "string"
    ) {

        const parsed =
            extractJSON(
                data.response
            );


        if (parsed) {

            data = {
                ...data,
                ...parsed
            };

        }

    }


    // ----------------------------------------
    // INTERPRETED COMMAND MAY ITSELF
    // CONTAIN JSON
    // ----------------------------------------

    if (
        data &&
        typeof data.interpretedCommand === "string"
    ) {

        const interpretedJSON =
            extractJSON(
                data.interpretedCommand
            );


        if (interpretedJSON) {

            data = {
                ...data,
                ...interpretedJSON
            };

        }

    }


    // ----------------------------------------
    // COLOR
    // ----------------------------------------

    const rawColor =
        data?.color || {};


    const red =
        Number(
            rawColor.r ??
            rawColor.red ??
            0
        );


    const green =
        Number(
            rawColor.g ??
            rawColor.green ??
            0
        );


    const blue =
        Number(
            rawColor.b ??
            rawColor.blue ??
            0
        );


    // ----------------------------------------
    // BRIGHTNESS
    // ----------------------------------------

    let brightness = null;


    if (
        data?.brightness !== undefined &&
        data?.brightness !== null
    ) {

        const value =
            Number(
                data.brightness
            );


        if (!Number.isNaN(value)) {

            brightness =
                Math.max(
                    0,
                    Math.min(
                        100,
                        value
                    )
                );

        }

    }


    // ----------------------------------------
    // SPEED
    // ----------------------------------------

    let speed = null;


    if (
        data?.speed !== undefined &&
        data?.speed !== null
    ) {

        const value =
            Number(
                data.speed
            );


        if (!Number.isNaN(value)) {

            speed =
                Math.max(
                    1,
                    Math.min(
                        10,
                        value
                    )
                );

        }

    }


    // ----------------------------------------
    // MODE
    // ----------------------------------------

    let mode = null;


    if (
        typeof data?.mode === "string"
    ) {

        mode =
            data.mode
                .toLowerCase()
                .trim();

    }


    // ----------------------------------------
    // POWER
    // ----------------------------------------

    let power = null;


    if (
        typeof data?.power === "boolean"
    ) {

        power =
            data.power;

    }


    // ----------------------------------------
    // INTERPRETED COMMAND
    // ----------------------------------------

    let interpretedCommand =
        data?.interpretedCommand ??
        data?.command ??
        data?.message ??
        data?.text ??
        "";


    if (
        typeof interpretedCommand !== "string"
    ) {

        interpretedCommand =
            String(
                interpretedCommand
            );

    }


    // ----------------------------------------
    // RESULT
    // ----------------------------------------

    const result = {

        success:
            data?.success !== false,

        provider:
            data?.provider ??
            "Groq",

        interpretedCommand:
            interpretedCommand ||
            "Command processed by AI gateway.",

        color: {

            red:
                Math.max(
                    0,
                    Math.min(
                        255,
                        red
                    )
                ),

            green:
                Math.max(
                    0,
                    Math.min(
                        255,
                        green
                    )
                ),

            blue:
                Math.max(
                    0,
                    Math.min(
                        255,
                        blue
                    )
                )

        },

        brightness:
            brightness,

        speed:
            speed,

        mode:
            mode,

        power:
            power

    };


    console.log(
        "NORMALIZED AI RESPONSE:",
        result
    );


    return result;
}


// ============================================================
// EXECUTE AI COMMAND
// ============================================================

function executeAICommand(aiData) {

    // ----------------------------------------
    // POWER
    // ----------------------------------------

    if (
        aiData.power !== null
    ) {

        setPower(
            aiData.power
        );

    }


    // ----------------------------------------
    // COLOR
    // ----------------------------------------

    if (
        aiData.color
    ) {

        setColor(
            aiData.color.red,
            aiData.color.green,
            aiData.color.blue
        );

    }


    // ----------------------------------------
    // BRIGHTNESS
    // ----------------------------------------

    if (
        aiData.brightness !== null
    ) {

        setBrightness(
            aiData.brightness
        );

    }


    // ----------------------------------------
    // SPEED
    // ----------------------------------------

    if (
        aiData.speed !== null
    ) {

        setSpeed(
            aiData.speed
        );

    }


    // ----------------------------------------
    // MODE
    // ----------------------------------------

    if (
        aiData.mode
    ) {

        const validModes = [
            "static",
            "flash",
            "fade",
            "strobe",
            "rainbow",
            "party"
        ];


        if (
            validModes.includes(
                aiData.mode
            )
        ) {

            setLightMode(
                aiData.mode
            );

        }

    }


    // ----------------------------------------
    // DISPLAY RESULT
    // ----------------------------------------

    const rgb =
        `RGB(${aiData.color.red}, ${aiData.color.green}, ${aiData.color.blue})`;


    commandMessage.textContent =
        `AI executed: ${aiData.interpretedCommand} — ${rgb}, ` +
        `${aiData.brightness ?? Number(brightnessSlider.value)}% brightness, ` +
        `speed ${aiData.speed ?? Number(speedSlider.value)}, ` +
        `${aiData.mode ?? currentMode} mode.`;
}


// ============================================================
// PROCESS COMMAND
// ============================================================

async function processCommand(command) {

    const userCommand =
        command.trim();


    // ----------------------------------------
    // EMPTY COMMAND
    // ----------------------------------------

    if (!userCommand) {

        commandMessage.textContent =
            "Please enter a command.";

        return;
    }


    // ----------------------------------------
    // DISABLE BUTTON
    // ----------------------------------------

    commandButton.disabled = true;


    commandMessage.textContent =
        "Sending command to AI gateway...";


    try {

        // ------------------------------------
        // SEND REQUEST TO n8n
        // ------------------------------------

        const response =
            await fetch(
                WEBHOOK_URL,
                {

                    method: "POST",

                    headers: {

                        "Content-Type":
                            "application/json",

                        "Accept":
                            "application/json"

                    },

                    body:
                        JSON.stringify({

                            command:
                                userCommand,

                            currentState:
                                getCurrentState()

                        })

                }
            );


        // ------------------------------------
        // HTTP ERROR
        // ------------------------------------

        if (!response.ok) {

            throw new Error(
                `Gateway returned HTTP ${response.status}`
            );

        }


        // ------------------------------------
        // READ RESPONSE
        // ------------------------------------

        const rawText =
            await response.text();


        console.log(
            "AI GATEWAY RAW TEXT:",
            rawText
        );


        if (!rawText) {

            throw new Error(
                "AI gateway returned an empty response."
            );

        }


        // ------------------------------------
        // PARSE JSON
        // ------------------------------------

        let gatewayData;


        try {

            gatewayData =
                JSON.parse(
                    rawText
                );

        } catch (error) {

            const extracted =
                extractJSON(
                    rawText
                );


            if (!extracted) {

                throw new Error(
                    "AI gateway returned invalid JSON."
                );

            }


            gatewayData =
                extracted;

        }


        console.log(
            "AI Gateway Response:",
            gatewayData
        );


        // ------------------------------------
        // NORMALIZE RESPONSE
        // ------------------------------------

        const aiData =
            normalizeAIResponse(
                gatewayData
            );


        // ------------------------------------
        // CHECK SUCCESS
        // ------------------------------------

        if (
            aiData.success === false
        ) {

            throw new Error(
                aiData.interpretedCommand ||
                "AI gateway reported an unsuccessful command."
            );

        }


        // ------------------------------------
        // EXECUTE
        // ------------------------------------

        executeAICommand(
            aiData
        );


    } catch (error) {

        console.error(
            "AI Gateway Error:",
            error
        );


        commandMessage.textContent =
            `AI gateway error: ${error.message}`;


    } finally {

        commandButton.disabled =
            false;

    }
}


// ============================================================
// EXECUTE BUTTON
// ============================================================

commandButton.addEventListener(
    "click",
    function () {

        processCommand(
            commandInput.value
        );

    }
);


// ============================================================
// ENTER KEY
// ============================================================

commandInput.addEventListener(
    "keydown",
    function (event) {

        if (
            event.key === "Enter"
        ) {

            event.preventDefault();

            processCommand(
                commandInput.value
            );

        }

    }
);


// ============================================================
// EXAMPLE COMMANDS
// ============================================================

exampleCommands.forEach(
    function (button) {

        button.addEventListener(
            "click",
            function () {

                const command =
                    button.dataset.command;


                commandInput.value =
                    command;


                processCommand(
                    command
                );

            }
        );

    }
);


// ============================================================
// INITIAL STATE
// ============================================================

setPower(true);

selectMode("static");

updateLight();


// ============================================================
// DEBUG INFORMATION
// ============================================================

console.log(
    "RGB Event Light Simulator loaded."
);

console.log(
    "AI Gateway:",
    WEBHOOK_URL
);

console.log(
    "Current State:",
    getCurrentState()
);