local runtime = require("@rave/runtime")
local reactive = require("@rave/reactive")
local task = require("@rave/task")
local ui = require("@rave/ui")

assert(runtime.is_client, "This script must run on the client")

local clicks = reactive.source(0)
local elapsed = reactive.source(0)

ui.mount(function()
    return ui.panel {
        align = "center",
        color = "#090E1A",
        padding = 6,

        children = {
            ui.column {
                color = "#151E32",
                padding = 28,
                gap = 12,
                width = 420,

                children = {
                    ui.text {
                        text = "RAVE ENGINE BABYY",
                        color = "#8B5CF6",
                        font_size = 18,
                    },

                    ui.text {
                        text = "Client Script Test",
                        color = "#F4F7FF",
                        font_size = 28,
                    },

                    ui.text {
                        text = "Reactive UI",
                        color = "#94A3B8",
                        font_size = 15,
                    },

                    ui.spacer {
                        size = 12,
                    },

                    ui.panel {
                        color = "#0E1628",
                        padding = 14,

                        children = {
                            ui.text {
                                text = function()
                                    return string.format(
                                        "Running for %.1f seconds",
                                        elapsed()
                                    )
                                end,

                                color = "#46BE6E",
                            },
                        },
                    },

                    ui.spacer {
                        size = 8,
                    },

                    ui.button {
                        text = function()
                            if clicks() == 0 then
                                return "Try the reactive button"
                            end

                            return string.format(
                                "Clicked %d %s  ✓",
                                clicks(),
                                clicks() == 1 and "time" or "times"
                            )
                        end,

                        color = function()
                            return clicks() > 0 and "#16A36A" or "#6D4CE8"
                        end,

                        accessibility_label = "Press to do +1",

                        pressed = function()
                            clicks:update(function(value)
                                return value + 1
                            end)

                            print(string.format(
                                "Client button clicked: %d",
                                clicks()
                            ))
                        end,
                    },

                    ui.spacer {
                        size = 4,
                    },

                    ui.text {
                        text = "Peepeepoopoo",
                        color = "#64748B",
                        font_size = 13,
                    },
                },
            },
        },
    }
end)