/**
 * 第 4 章配套代码 · 组件全家福（每个基础组件最小可运行示例）
 *
 * 文件位置：shared/src/commonMain/kotlin/com/example/kuikly/pages/ComponentGalleryPage.kt
 *
 * 一个 Pager 展示所有基础组件，方便对照查阅。
 * 学习时建议在 IDE 里一段段注释/取消注释，观察效果。
 */

package com.example.kuikly.pages

import com.tencent.kuikly.core.annotations.Page
import com.tencent.kuikly.core.base.Border
import com.tencent.kuikly.core.base.BorderStyle
import com.tencent.kuikly.core.base.BoxShadow
import com.tencent.kuikly.core.base.Color
import com.tencent.kuikly.core.base.ColorStop
import com.tencent.kuikly.core.base.Direction
import com.tencent.kuikly.core.base.ViewBuilder
import com.tencent.kuikly.core.pager.Pager
import com.tencent.kuikly.core.views.Image
import com.tencent.kuikly.core.views.Scroller
import com.tencent.kuikly.core.views.Text
import com.tencent.kuikly.core.views.View

@Page("ComponentGalleryPage")
internal class ComponentGalleryPage : Pager() {

    override fun body(): ViewBuilder = {
        Scroller {
            attr {
                flex(1f)
                backgroundColor(Color(0xFFF5F5F7L))
                paddingHorizontal(16f)
                paddingTop(20f)
            }

            // ───── 1. View：渐变 + 阴影卡片 ─────
            sectionTitle("1. View / 渐变 / 阴影")
            View {
                attr {
                    height(100f)
                    borderRadius(12f)
                    allCenter()
                    backgroundLinearGradient(
                        Direction.TO_RIGHT,
                        ColorStop(Color(0xFF667EEAL), 0f),
                        ColorStop(Color(0xFF764BA2L), 1f),
                    )
                    boxShadow(BoxShadow(0f, 6f, 12f, Color(0x40000000L)))
                    marginBottom(20f)
                }
                Text {
                    attr {
                        text("Premium Card")
                        color(Color.WHITE)
                        fontSize(20f)
                        fontWeightBold()
                    }
                }
            }

            // ───── 2. Text：富文本 + 限行 ─────
            sectionTitle("2. Text / 限行省略")
            View {
                attr {
                    backgroundColor(Color.WHITE)
                    padding(12f)
                    borderRadius(8f)
                    marginBottom(20f)
                }
                Text {
                    attr {
                        text(
                            "Kuikly 是腾讯开源的、基于 Kotlin Multiplatform 的跨端 UI 框架。" +
                            "支持 Android / iOS / HarmonyOS / Web / 小程序 / macOS 6 端通用，" +
                            "采用原生控件渲染，包体小、性能贴近原生。"
                        )
                        fontSize(14f)
                        color(Color.BLACK)
                        lineHeight(22f)
                        numberOfLines(2)
                        textOverFlowEllipsis()
                    }
                }
            }

            // ───── 3. Image：圆形头像 ─────
            sectionTitle("3. Image / 圆形头像")
            View {
                attr {
                    flexDirectionRow()
                    alignItemsCenter()
                    marginBottom(20f)
                }
                Image {
                    attr {
                        src("https://example.com/avatar.png")
                        size(60f, 60f)
                        borderRadius(30f)
                        backgroundColor(Color(0xFFE0E0E0L))
                        marginRight(12f)
                    }
                }
                View {
                    attr { flex(1f) }
                    Text { attr { text("张三"); fontSize(16f); fontWeightBold() } }
                    Text {
                        attr {
                            text("圆形头像 = 正方形 + borderRadius(size/2)")
                            fontSize(12f)
                            color(Color(0xFF9E9E9EL))
                            marginTop(4f)
                        }
                    }
                }
            }

            // ───── 4. Image：毛玻璃背景 ─────
            sectionTitle("4. Image / 高斯模糊")
            View {
                attr {
                    height(120f)
                    borderRadius(12f)
                    backgroundColor(Color(0xFFCFD8DCL))
                    marginBottom(20f)
                }
                Image {
                    attr {
                        src("https://example.com/cover.jpg")
                        absolutePosition(top = 0f, left = 0f, right = 0f, bottom = 0f)
                        borderRadius(12f)
                        blurRadius(20f)
                        opacity(0.7f)
                    }
                }
                Text {
                    attr {
                        text("毛玻璃标题")
                        color(Color.WHITE)
                        fontSize(20f)
                        fontWeightBold()
                        absolutePosition(bottom = 16f, left = 16f)
                    }
                }
            }

            // ───── 5. View + Text：带边框圆角胶囊 ─────
            sectionTitle("5. 标签 / 胶囊（View + Text）")
            View {
                attr {
                    flexDirectionRow()
                    flexWrapWrap()
                    marginBottom(20f)
                }
                listOf(
                    "Kotlin" to 0xFF7F52FFL,
                    "Compose" to 0xFF1976D2L,
                    "KMP" to 0xFFFF5722L,
                    "Flexbox" to 0xFF388E3CL,
                ).forEach { (name, color) ->
                    View {
                        attr {
                            paddingHorizontal(12f)
                            paddingVertical(4f)
                            marginRight(8f)
                            marginBottom(8f)
                            borderRadius(12f)
                            border(Border(1f, BorderStyle.SOLID, Color(color)))
                        }
                        Text {
                            attr {
                                text(name)
                                fontSize(12f)
                                color(Color(color))
                            }
                        }
                    }
                }
            }

            // ───── 6. View：模拟按钮三态 ─────
            sectionTitle("6. 按钮三态（View + click）")
            View { attr { flexDirectionRow(); marginBottom(20f) } }
            renderButton("正常按钮", Color(0xFF1976D2L), 1f, "✓")
            renderButton("禁用按钮", Color(0xFFBDBDBDL), 0.6f, "✕")
            renderButton("加载中", Color(0xFF90CAF9L), 1f, "⟳")
        }
    }

    /** 抽出来的「区块标题」ViewBuilder */
    private fun sectionTitle(title: String): ViewBuilder = {
        Text {
            attr {
                text(title)
                fontSize(14f)
                fontWeightBold()
                color(Color(0xFF424242L))
                marginBottom(8f)
            }
        }
    }

    /** 抽出来的「按钮」ViewBuilder（演示参数化复用） */
    private fun renderButton(
        title: String,
        bg: Color,
        opacity: Float,
        icon: String,
    ): ViewBuilder = {
        View {
            attr {
                height(40f)
                allCenter()
                backgroundColor(bg)
                opacity(opacity)
                borderRadius(20f)
                marginBottom(8f)
            }
            event { click { /* TODO */ } }
            Text {
                attr {
                    text("$icon  $title")
                    color(Color.WHITE)
                    fontSize(14f)
                    fontWeightBold()
                }
            }
        }
    }
}