/**
 * 第 1 章配套代码 · Hello Kuikly 最小示例
 *
 * 这是一个最小可运行的 Kuikly 页面。先看一眼整体结构，理解每一部分是干啥的，
 * 不需要完全看懂细节 —— 后面 3、4、5 章会逐个拆开讲。
 *
 * 文件应放置在你的 KMP 工程 `commonMain/kotlin/com/example/` 目录下。
 */

package com.example.kuikly.demo

import com.tencent.kuikly.core.annotations.Page
import com.tencent.kuikly.core.base.Color
import com.tencent.kuikly.core.base.ViewBuilder
import com.tencent.kuikly.core.pager.Pager
import com.tencent.kuikly.core.reactive.handler.observable
import com.tencent.kuikly.core.views.Button
import com.tencent.kuikly.core.views.Text

/**
 * @Page 注解：把这个类注册成一个可以被路由的页面。
 *   - "HelloKuikly" 是页面名字，宿主 App 通过这个名字跳转到本页面
 *   - KSP 在编译期会扫描所有 @Page 注解，自动生成路由注册代码
 */
@Page("HelloKuikly")
internal class HelloKuiklyPage : Pager() {

    /**
     * 响应式字段：每次 +1 都会触发 UI 自动更新，不需要手动刷新。
     * `by observable(0)` 让 count 这个变量"被监听"，谁读它谁就被自动追踪。
     */
    private var count by observable(0)

    /**
     * body() 是 Pager 必须实现的方法，返回一个 ViewBuilder 闭包。
     * ViewBuilder 描述了"页面长什么样"，Kuikly 引擎会按这个描述渲染。
     */
    override fun body(): ViewBuilder {
        // 把 this 存成 ctx，方便在闭包里访问页面的字段（这是 Kuikly 的常见写法）
        val ctx = this

        return {
            // 整个页面的根布局属性
            attr {
                allCenter()                 // 所有子组件居中
                backgroundColor(Color.WHITE)
            }

            // 文本组件：显示当前计数
            Text {
                attr {
                    text("Hello Kuikly! 计数: ${ctx.count}")
                    fontSize(20f)
                    fontWeightBold()
                    color(Color(0xFF7F52FFL))   // Kotlin 紫
                }
            }

            // 右下角的按钮
            Button {
                attr {
                    absolutePosition(bottom = 30f, right = 30f)
                    size(80f, 80f)
                    borderRadius(10f)
                    backgroundColor(Color.BLUE)
                    titleAttr {
                        text("点我 +1")
                        fontSize(14f)
                        color(Color.WHITE)
                        fontWeightBold()
                    }
                }
                event {
                    click {
                        // 点击 → count + 1 → Text 自动重新渲染
                        ctx.count++
                    }
                }
            }
        }
    }
}