package com.aiosman.ravenow.ui.composables

import androidx.compose.foundation.Image
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.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.res.painterResource
import androidx.compose.animation.core.animateDpAsState
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.tween
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.aiosman.ravenow.LocalAppTheme
import com.aiosman.ravenow.R
import com.aiosman.ravenow.ui.modifiers.noRippleClickable
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.text.font.FontWeight
/**
 * 可复用的标签页组件
 */
@Composable
fun TabItem(
    text: String,
    isSelected: Boolean,
    onClick: () -> Unit,
    modifier: Modifier = Modifier
) {
    val AppColors = LocalAppTheme.current
    
    Column(
        modifier = modifier
            .wrapContentWidth()
            .noRippleClickable { onClick() },
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = text,
            fontSize = 15.sp,
            color = if (isSelected) AppColors.tabSelectedText else AppColors.tabUnselectedText,
            modifier = Modifier
                .clip(RoundedCornerShape(12.dp))
                .background(if (isSelected) AppColors.tabSelectedBackground else AppColors.tabUnselectedBackground)
                .padding(horizontal = 16.dp, vertical = 8.dp)
        )
    }
}

/**
 * 标签页之间的间隔组件
 */
@Composable
fun TabSpacer() {
    Spacer(modifier = Modifier.width(8.dp))
}


@Composable
fun UnderlineTabItem(
    text: String,
    isSelected: Boolean,
    onClick: () -> Unit,
    modifier: Modifier = Modifier
) {
    val AppColors = LocalAppTheme.current
    
    // 动画化字体大小和padding
    val animatedFontSize by animateFloatAsState(
        targetValue = if (isSelected) 17f else 15f,
        animationSpec = tween(durationMillis = 200),
        label = "fontSize"
    )
    val animatedPadding by animateDpAsState(
        targetValue = if (isSelected) 20.dp else 16.dp,
        animationSpec = tween(durationMillis = 200),
        label = "padding"
    )

    Box(
        modifier = modifier
            .noRippleClickable { onClick() },
        contentAlignment = Alignment.Center
    ) {
        // 文本层 - 始终居中，不受下划线影响
        Text(
            text = text,
            fontSize = animatedFontSize.sp,
            fontWeight = FontWeight.ExtraBold,
            color = if (isSelected) AppColors.text else AppColors.text.copy(alpha = 0.6f),
            textAlign = androidx.compose.ui.text.style.TextAlign.Center,
            modifier = Modifier
                .padding(horizontal = animatedPadding)
        )
        
        // 下划线层 - 固定在底部，不影响文本位置
        if (isSelected) {
            Box(
                modifier = Modifier
                    .align(Alignment.BottomCenter)
                    .size(24.dp)
                    .offset(y = (15).dp),
                contentAlignment = Alignment.Center
            ) {
                Image(
                    painter = painterResource(id = R.mipmap.underline),
                    contentDescription = "selected indicator",
                    modifier = Modifier.fillMaxSize()
                )
            }
        }
    }
}