/**
 * 第 6 章配套代码 · 瀑布流（小红书风格 2 列）
 *
 * 文件位置：shared/src/commonMain/kotlin/com/example/kuikly/pages/WaterfallNotesPage.kt
 *
 * 演示 WaterfallList 用法 + 高度可变的 item。
 */

package com.example.kuikly.pages

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.directives.vfor
import com.tencent.kuikly.core.pager.Pager
import com.tencent.kuikly.core.reactive.collection.observableListOf
import com.tencent.kuikly.core.views.Image
import com.tencent.kuikly.core.views.Text
import com.tencent.kuikly.core.views.View
import com.tencent.kuikly.core.views.WaterfallList

data class Note(
    val id: Int,
    val coverUrl: String,
    val coverHeight: Float,    // 不同图片高度不同 → 瀑布流效果
    val title: String,
    val author: String,
    val likes: Int,
)

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

    private val notes = observableListOf<Note>()

    override fun created() {
        super.created()
        // 模拟数据：每个 note 高度 100~300 之间随机
        repeat(30) { i ->
            notes.add(
                Note(
                    id = i + 1,
                    coverUrl = "https://example.com/note/${i + 1}.jpg",
                    coverHeight = (100..300).random().toFloat(),
                    title = "笔记 #${i + 1} · " + listOf("旅行", "美食", "穿搭", "健身", "读书").random(),
                    author = "用户${i + 1}",
                    likes = (10..9999).random(),
                )
            )
        }
    }

    override fun body(): ViewBuilder {
        val ctx = this
        return {
            attr { backgroundColor(Color(0xFFF5F5F7L)) }

            // 顶栏
            View {
                attr {
                    height(48f); flexDirectionRow(); allCenter()
                    backgroundColor(Color.WHITE)
                }
                Text {
                    attr {
                        text("发现")
                        fontSize(17f)
                        fontWeightBold()
                    }
                }
            }

            // 瀑布流
            WaterfallList {
                attr {
                    flex(1f)
                    columnCount(2)            // 2 列
                    columnSpacing(8f)         // 列间距
                    rowSpacing(8f)            // 行间距
                    paddingHorizontal(8f)
                    paddingVertical(8f)
                }

                vfor({ ctx.notes }) { note ->
                    renderNoteCard(note).invoke(this)
                }
            }
        }
    }

    /** 单个笔记卡片：高度可变（封面图高度不同） */
    private fun renderNoteCard(note: Note): ViewBuilder = {
        View {
            attr {
                backgroundColor(Color.WHITE)
                borderRadius(8f)
            }
            event { click { /* TODO 进入详情 */ } }

            // 封面图（高度可变 → 瀑布流的"灵魂"）
            Image {
                attr {
                    src(note.coverUrl)
                    width(100f)
                    height(note.coverHeight)
                    backgroundColor(Color(0xFFE0E0E0L))
                    borderRadius(8f)
                }
            }

            // 标题
            Text {
                attr {
                    text(note.title)
                    fontSize(13f)
                    color(Color.BLACK)
                    padding(8f)
                    numberOfLines(2)
                    lineHeight(18f)
                }
            }

            // 作者 + 点赞
            View {
                attr {
                    flexDirectionRow()
                    alignItemsCenter()
                    paddingHorizontal(8f)
                    paddingBottom(8f)
                    justifyContentSpaceBetween()
                }

                Text {
                    attr {
                        text(note.author)
                        fontSize(11f)
                        color(Color(0xFF9E9E9EL))
                    }
                }

                View {
                    attr { flexDirectionRow(); alignItemsCenter() }
                    Text {
                        attr {
                            text("♡")
                            fontSize(11f)
                            color(Color(0xFF9E9E9EL))
                            marginRight(2f)
                        }
                    }
                    Text {
                        attr {
                            text("${note.likes}")
                            fontSize(11f)
                            color(Color(0xFF9E9E9EL))
                        }
                    }
                }
            }
        }
    }
}