package com.jishisongfu.duobibi.ui

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.RowScope
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.statusBars
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.windowInsetsPadding
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

/**
 * 通用 hero 顶栏 —— 替代每个 Tab 屏的 TopAppBar。
 *
 * 关键差异(为何"看起来像 app"而不是 demo):
 *  - **顶到状态栏**:用 `windowInsetsPadding(WindowInsets.statusBars)` 把渐变色一路盖到屏幕最顶,
 *    跟状态栏色融为一体,不再有"白底 + 灰状态栏"的割裂感。
 *  - **品牌渐变背景**:每个 Tab 一套独立渐变(见 [DbbGradients]),切 Tab 像换了页面气质。
 *  - **icon + title + subtitle 三层信息密度**:取代之前的"光秃秃白底 TopAppBar"。
 *  - **trailing slot**:右侧给 actions(刷新/帮助/筛选)留口子,接管 TopAppBar 原 actions 角色。
 *
 * 调用方:Scaffold 的 `topBar` slot 留空,把 HeroBanner 作为 Scaffold content 的第一个 Composable,
 * 同时 Scaffold 设 `contentWindowInsets = WindowInsets(0)` 让 inset 由 HeroBanner 自己接管。
 */
@Composable
fun HeroBanner(
    title: String,
    subtitle: String,
    icon: ImageVector,
    gradient: List<Color>,
    modifier: Modifier = Modifier,
    trailing: @Composable RowScope.() -> Unit = {},
) {
    Box(
        modifier
            .fillMaxWidth()
            .background(Brush.verticalGradient(gradient))
            .windowInsetsPadding(WindowInsets.statusBars),
    ) {
        Row(
            Modifier
                .fillMaxWidth()
                .padding(horizontal = 18.dp, vertical = 18.dp),
            verticalAlignment = Alignment.CenterVertically,
        ) {
            Box(
                Modifier
                    .size(44.dp)
                    .clip(RoundedCornerShape(14.dp))
                    .background(Color.White.copy(alpha = 0.20f)),
                contentAlignment = Alignment.Center,
            ) {
                Icon(icon, contentDescription = null, tint = Color.White, modifier = Modifier.size(24.dp))
            }
            Spacer(Modifier.width(12.dp))
            Column(Modifier.weight(1f), verticalArrangement = Arrangement.spacedBy(2.dp)) {
                Text(
                    title,
                    color = Color.White,
                    fontWeight = FontWeight.ExtraBold,
                    fontSize = 20.sp,
                )
                Text(
                    subtitle,
                    color = Color.White.copy(alpha = 0.88f),
                    fontSize = 12.sp,
                )
            }
            trailing()
        }
    }
}

/**
 * Hero 下方的"过渡条":一条 14dp 高的 Bg 色矩形,顶部带 18dp 圆角,
 * 视觉上像内容从 hero 下方"卷起来",参考小红书首页 hero→正文的过渡。
 * 上层是 hero 渐变,这条卷在 hero 之下,圆角处会"咬掉"一点 hero 色。
 */
@Composable
fun HeroBottomFade(modifier: Modifier = Modifier) {
    Box(
        modifier
            .fillMaxWidth()
            .height(14.dp)
            .clip(RoundedCornerShape(topStart = 18.dp, topEnd = 18.dp))
            .background(com.jishisongfu.duobibi.ui.theme.DbbColors.Bg),
    )
}
