---@type RuntimeUi
local runtime_ui = runtime.import("runtime_ui")
---@type RuntimeWidgets
local widgets = runtime.import("runtime_widgets")
local state = runtime.import("state")

widgets.configure({
  primary = "#ff2563eb",
  secondary = "#ff475569",
  success = "#ff22c55e",
  overlay = "#99000000",
  surface = "#ff1e293b",
  surfaceAlt = "#ff334155",
  card = "#ee111827",
  text = "#ffe2e8f0",
  muted = "#ff94a3b8",
  progress = "#ff22c55e",
  transparent = "#00000000"
})

---@class TemplateUi
local ui = {}

---@return RuntimeNode[]
function ui.create_nodes()
  return {
    runtime_ui.rect("template_bg", {
      x = 0,
      y = 0,
      w = 720,
      h = 720,
      color = "#ff0f172a"
    }),
    runtime_ui.panel("template_card", {
      x = 72,
      y = 96,
      w = 576,
      h = 360,
      color = "#ee111827",
      radius = 18,
      layer = 5
    }),
    widgets.section_title("template_title", {
      text = "Lua Runtime Template",
      x = 104,
      y = 132,
      w = 420,
      h = 34,
      color = "#ffe2e8f0",
      fontSize = 24,
      layer = 10
    }),
    widgets.label("template_desc", {
      text = "最小接入示例：一个 manifest、一个 main.lua、一组 RuntimeNode。",
      x = 104,
      y = 178,
      w = 500,
      h = 24,
      color = "#ff94a3b8",
      fontSize = 14,
      layer = 10
    }),
    runtime_ui.button("template_start", {
      text = state.started and "Started" or "Start",
      x = 104,
      y = 236,
      w = 144,
      h = 44,
      handler = "template_start",
      color = state.started and "#ff16a34a" or "#ff2563eb",
      radius = 12,
      fontSize = 15,
      layer = 10
    }),
    runtime_ui.text("template_counter", "Clicks: " .. tostring(state.clicks), 272, 246, 180, 24, {
      color = "#ffe2e8f0",
      fontSize = 15,
      layer = 10
    }),
    runtime_ui.text("template_status", state.status, 104, 320, 500, 24, {
      color = "#fffacc15",
      fontSize = 13,
      layer = 10
    })
  }
end

---@return RuntimeNodeUpdate[]
function ui.state_updates()
  return {
    runtime_ui.update("template_start", {
      text = state.started and "Started" or "Start",
      color = state.started and "#ff16a34a" or "#ff2563eb"
    }),
    runtime_ui.text_update("template_counter", "Clicks: " .. tostring(state.clicks)),
    runtime_ui.text_update("template_status", state.status)
  }
end

return ui