package com.img.rabbit.components

import android.annotation.SuppressLint
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
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.width
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.MutableIntState
import androidx.compose.runtime.MutableState
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.img.rabbit.R
import com.img.rabbit.bean.local.ClothingBean
import com.img.rabbit.bean.local.FormatBean
import com.img.rabbit.bean.local.HairstyleBean
import com.img.rabbit.bean.local.ResizeBean

/**
 * 底部画板(证件)选择器
 */
@Composable
fun DrawingBoardCertificatePicker(
    //尺寸
    sizes: MutableList<ResizeBean>,
    selectedSize: MutableState<ResizeBean>
){
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(top = 8.dp)
            .background(Color(0xFFFFFFFF), shape = RoundedCornerShape(18.dp))
    ) {
        DrawingBoardSizePicker(sizes = sizes, selectedSize = selectedSize, singleSelect = false)
    }
}


/**
 * 底部画板(格式)选择器
 */
@Composable
fun DrawingBoardFormatPicker(
    formats: MutableList<FormatBean>,
    selectedFormat: MutableState<FormatBean?>
){
    val currentFormat = remember { mutableStateOf(selectedFormat.value ?: formats[0]) }
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(top = 8.dp)
            .background(Color(0xFFFFFFFF), shape = RoundedCornerShape(18.dp))
    ) {
        Box(
            modifier = Modifier.fillMaxWidth().wrapContentHeight().padding(top = 6.dp)
        ){
            Text(
                text = "格式转换",
                color = Color(0xFF000000),
                fontSize = 16.sp,
                modifier = Modifier.align(Alignment.Center).padding(bottom = 6.dp)
            )
            Image(
                painter = painterResource(id = R.mipmap.ic_cutout_base_color_tag),
                contentDescription = "格式转换选择器",
                modifier = Modifier.align(Alignment.BottomCenter)
            )
        }

        Box(modifier = Modifier.fillMaxWidth().height(12.dp))

        Box(modifier = Modifier.fillMaxWidth().height(0.5.dp).background(Color(0xFFF4F4F4)).align(Alignment.CenterHorizontally))

        LazyRow(
            modifier = Modifier
                .fillMaxWidth()
                .padding(top = 20.dp)
                .align(Alignment.CenterHorizontally),
            horizontalArrangement = Arrangement.spacedBy(12.dp), // 列表项之间的间距
            contentPadding = PaddingValues(horizontal = 16.dp) // 额外的左右内边距
        ) {
            items(formats.size){ index ->
                val item = formats[index]
                FormatItem(
                    format = item,
                    isSelected = item.id == currentFormat.value.id,
                    onClick = {
                        currentFormat.value = item
                        selectedFormat.value = item
                    }
                )
            }
        }

        Box(modifier = Modifier.fillMaxWidth().height(20.dp))
    }
}

/**
 * 底部画板(外观)选择器
 */
@Composable
fun DrawingBoardPicker(
    //颜色
    colors: List<Color>,
    //服装
    clothingForMans: MutableList<ClothingBean>,
    clothingForFemales: MutableList<ClothingBean>,
    //发型
    hairstyleForMans: MutableList<HairstyleBean>,
    hairstyleForFemales: MutableList<HairstyleBean>,
    //尺寸
    sizes: MutableList<ResizeBean>,
    //选中
    selectedAppearance: MutableState<AppearanceType>,//底部：背景、服装、发型、尺寸
    selectedColorIndex: MutableIntState,//选中背景色索引
    selectedClothing: MutableState<ClothingBean?>,//选中服装
    selectedHairstyle: MutableState<HairstyleBean?>,//选中发型
    selectedSize: MutableState<ResizeBean>,//选中尺寸
    onClothingSelected: (ClothingBean) -> Unit,
    onHairstyleSelected: (HairstyleBean) -> Unit
){
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(top = 8.dp)
            .background(Color(0xFFFFFFFF), shape = RoundedCornerShape(18.dp))
    ) {

        when (selectedAppearance.value) {
            AppearanceType.BACKGROUND -> {
                DrawingBoardBaseColorPicker(colors = colors,selectedColorIndex = selectedColorIndex)
            }
            AppearanceType.CLOTHING -> {
                DrawingBoardClothingPicker(clothingForFemales = clothingForFemales, clothingForMans = clothingForMans, selectedClothing = selectedClothing, onClothingSelected = onClothingSelected)
            }
            AppearanceType.HAIRSTYLE -> {
                DrawingBoardHairstylePicker(hairstyleForFemales = hairstyleForFemales, hairstyleForMans = hairstyleForMans, selectedHairstyle = selectedHairstyle, onHairstyleSelected = onHairstyleSelected)
            }
            AppearanceType.SIZE -> {
                DrawingBoardSizePicker(sizes = sizes, selectedSize = selectedSize)
            }
        }

        Box(modifier = Modifier.fillMaxWidth().height(0.5.dp).padding(top = 35.dp, start = 16.dp, end = 16.dp).background(Color(0xFFEDEDED)))

        Row(
            modifier = Modifier.fillMaxWidth().padding(start = 16.dp, end = 16.dp, top = 16.dp, bottom = 20.dp).align(Alignment.CenterHorizontally)
        ) {
            AppearancePicker(
                selectedAppearance = selectedAppearance,
                onAppearanceSelected = {appearance -> selectedAppearance.value = appearance }
            )
        }
    }
}


/**
 * 底部画板(基础色)
 * @param selectedColorIndex 选中的基础色索引
 */
@Composable
fun DrawingBoardBaseColorPicker(colors: List<Color>,selectedColorIndex: MutableIntState){
    //底部画板(基础色)
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(top = 6.dp)
            .wrapContentHeight()
    ) {
        Box(
            modifier = Modifier.wrapContentWidth().wrapContentHeight().align(Alignment.CenterHorizontally)
        ){
            Text(
                text = "基础色",
                color = Color(0xFF000000),
                fontSize = 16.sp,
                modifier = Modifier.align(Alignment.Center).padding(bottom = 6.dp)
            )
            Image(
                painter = painterResource(id = R.mipmap.ic_cutout_base_color_tag),
                contentDescription = "颜色选择器",
                modifier = Modifier.align(Alignment.BottomCenter)
            )
        }

        Row(
            modifier = Modifier.fillMaxWidth().padding(top = 23.dp, start = 16.dp, end = 16.dp).align(Alignment.CenterHorizontally)
        ) {
            // 使用颜色选择控件
            ColorPicker(
                colors = colors,
                selectedIndex = selectedColorIndex.intValue,
                onColorSelected = {index -> selectedColorIndex.intValue = index }
            )
        }
    }
}


/**
 * 底部画板(衣服)
 * @param clothingForFemales 女装衣服列表
 * @param clothingForMans 男装衣服列表
 * @param selectedClothing 选中的衣服
 */
@Composable
fun DrawingBoardClothingPicker(clothingForFemales: MutableList<ClothingBean>, clothingForMans: MutableList<ClothingBean>, selectedClothing: MutableState<ClothingBean?>, onClothingSelected: (ClothingBean) -> Unit){
    //注意：ClothingBean-id: 0~6 女装， 7~13 男装
    //女装（0） OR 男装（1）
    val tab = remember { mutableIntStateOf(if(selectedClothing.value == null || selectedClothing.value!!.id<7) 0 else 1) }
    //选中服装
    val currentClothing = remember { mutableStateOf(if(selectedClothing.value == null) clothingForFemales[0] else if(selectedClothing.value!!.id<7) clothingForFemales[selectedClothing.value!!.index] else clothingForMans[selectedClothing.value!!.index] ) }

    //底部画板(衣服)
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(top = 6.dp)
            .background(Color(0xFFFFFFFF), shape = RoundedCornerShape(36.dp))
    ) {

        Row(
            modifier = Modifier.fillMaxWidth().align(Alignment.CenterHorizontally), horizontalArrangement = Arrangement.SpaceEvenly
        ) {
            Column(
                modifier = Modifier
                    .wrapContentSize()
                    .clickable(
                        indication = null,
                        interactionSource = remember { MutableInteractionSource() }
                    ) { tab.intValue = 0 }
            ) {
                Box(
                    modifier = Modifier.wrapContentWidth().wrapContentHeight().align(Alignment.CenterHorizontally)
                ){
                    Text(
                        text = "女装",
                        color = if(tab.intValue == 0) Color(0xFF1A1A1A) else Color(0xFFAAAAAA),
                        fontSize = 16.sp,
                        modifier = Modifier.align(Alignment.Center).padding(bottom = 6.dp)
                    )
                    Image(
                        painter = painterResource(id = R.mipmap.ic_cutout_base_color_tag),
                        contentDescription = "女装选择器",
                        modifier = Modifier.alpha(if(tab.intValue == 0) 1f else 0f).align(Alignment.BottomCenter)
                    )
                }
            }

            Column(
                modifier = Modifier
                    .wrapContentSize()
                    .clickable(
                        indication = null,
                        interactionSource = remember { MutableInteractionSource() }
                    ) { tab.intValue = 1 }
            ) {
                Box(
                    modifier = Modifier.wrapContentWidth().wrapContentHeight().align(Alignment.CenterHorizontally)
                ){
                    Text(
                        text = "男装",
                        color = if(tab.intValue == 1) Color(0xFF1A1A1A) else Color(0xFFAAAAAA),
                        fontSize = 16.sp,
                        modifier = Modifier.align(Alignment.Center).padding(bottom = 6.dp)
                    )
                    Image(
                        painter = painterResource(id = R.mipmap.ic_cutout_base_color_tag),
                        contentDescription = "男装选择器",
                        modifier = Modifier.alpha(if(tab.intValue == 1) 1f else 0f).align(Alignment.BottomCenter)
                    )
                }
            }
        }


        LazyRow(
            modifier = Modifier
                .fillMaxWidth()
                .padding(top = 8.dp)
                .align(Alignment.CenterHorizontally),
            horizontalArrangement = Arrangement.spacedBy(12.dp), // 列表项之间的间距
            contentPadding = PaddingValues(horizontal = 16.dp) // 额外的左右内边距
        ) {
            if (tab.intValue == 0){
                items(clothingForFemales.size){ index ->
                    val item = clothingForFemales[index]
                    ClothingItem(
                        clothing = item,
                        isSelected = item.id == currentClothing.value.id,
                        onClick = {
                            currentClothing.value = item
                            selectedClothing.value = item
                            onClothingSelected(item)
                        }
                    )
                }
            }else{
                items(clothingForMans.size){ index ->
                    val item = clothingForMans[index]
                    ClothingItem(
                        clothing = item,
                        isSelected = item.id == currentClothing.value.id,
                        onClick = {
                            currentClothing.value = item
                            selectedClothing.value = item
                            onClothingSelected(item)
                        }
                    )
                }
            }
        }


    }
}


/**
 * 底部画板(发型)
 * @param hairstyleForFemales 女装发型列表
 * @param hairstyleForMans 男装发型列表
 * @param selectedHairstyle 选中的发型
 */
@Composable
fun DrawingBoardHairstylePicker(hairstyleForFemales: MutableList<HairstyleBean>, hairstyleForMans: MutableList<HairstyleBean>, selectedHairstyle: MutableState<HairstyleBean?>, onHairstyleSelected: (HairstyleBean) -> Unit){
    //女生（0） OR 男生（1）发型
    val tab = remember { mutableIntStateOf(if(selectedHairstyle.value == null || selectedHairstyle.value!!.id<7) 0 else 1) }
    //选中发型
    val currentHairstyle = remember { mutableStateOf(if(selectedHairstyle.value == null) hairstyleForFemales[0] else if(selectedHairstyle.value!!.id<7) hairstyleForFemales[selectedHairstyle.value!!.index] else hairstyleForMans[selectedHairstyle.value!!.index] ) }

    //底部画板(发型)
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(top = 6.dp)
            .background(Color(0xFFFFFFFF), shape = RoundedCornerShape(36.dp))
    ) {

        Row(
            modifier = Modifier.fillMaxWidth().align(Alignment.CenterHorizontally), horizontalArrangement = Arrangement.SpaceEvenly
        ) {
            Column(
                modifier = Modifier
                    .wrapContentSize()
                    .clickable(
                        indication = null,
                        interactionSource = remember { MutableInteractionSource() }
                    ) { tab.intValue = 0 }
            ) {
                Box(
                    modifier = Modifier.wrapContentWidth().wrapContentHeight()
                ){
                    Text(
                        text = "女生",
                        color = if(tab.intValue == 0) Color(0xFF1A1A1A) else Color(0xFFAAAAAA),
                        fontSize = 16.sp,
                        modifier = Modifier.align(Alignment.Center).padding(bottom = 6.dp)
                    )
                    Image(
                        painter = painterResource(id = R.mipmap.ic_cutout_base_color_tag),
                        contentDescription = "女生发型选择器",
                        modifier = Modifier.alpha(if(tab.intValue == 0) 1f else 0f).align(Alignment.BottomCenter)
                    )
                }
            }


            Column(
                modifier = Modifier
                    .wrapContentSize()
                    .clickable(
                        indication = null,
                        interactionSource = remember { MutableInteractionSource() }
                    ) { tab.intValue = 1 }
            ) {
                Box(
                    modifier = Modifier.wrapContentWidth().wrapContentHeight()
                ){
                    Text(
                        text = "男生",
                        color = if(tab.intValue == 1) Color(0xFF1A1A1A) else Color(0xFFAAAAAA),
                        fontSize = 16.sp,
                        modifier = Modifier.align(Alignment.Center).padding(bottom = 6.dp)
                    )
                    Image(
                        painter = painterResource(id = R.mipmap.ic_cutout_base_color_tag),
                        contentDescription = "男生发型选择器",
                        modifier = Modifier.alpha(if(tab.intValue == 1) 1f else 0f).align(Alignment.BottomCenter)
                    )
                }
            }
        }


        LazyRow(
            modifier = Modifier
                .fillMaxWidth()
                .padding(top = 8.dp)
                .align(Alignment.CenterHorizontally),
            horizontalArrangement = Arrangement.spacedBy(12.dp), // 列表项之间的间距
            contentPadding = PaddingValues(horizontal = 16.dp) // 额外的左右内边距
        ) {
            if (tab.intValue == 0){
                items(hairstyleForFemales.size){ index ->
                    val item = hairstyleForFemales[index]
                    HairstyleItem(
                        hairstyle = item,
                        isSelected = item.id == currentHairstyle.value.id,
                        onClick = {
                            currentHairstyle.value = item
                            selectedHairstyle.value = item
                            onHairstyleSelected(item)
                        }
                    )
                }
            }else{
                items(hairstyleForMans.size){ index ->
                    val item = hairstyleForMans[index]
                    HairstyleItem(
                        hairstyle = item,
                        isSelected = item.id == currentHairstyle.value.id,
                        onClick = {
                            currentHairstyle.value = item
                            selectedHairstyle.value = item
                            onHairstyleSelected(item)
                        }
                    )
                }
            }
        }


    }
}

@Composable
fun DrawingBoardSizePicker(sizes: MutableList<ResizeBean>, selectedSize: MutableState<ResizeBean>, singleSelect: Boolean = true) {
    //选中尺寸
    val currentSize = remember { mutableStateOf(selectedSize.value) }
    //底部画板(尺寸)
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .wrapContentHeight()
            .padding(top = 6.dp,bottom = if(!singleSelect) 20.dp else 0.dp)
    ) {
        Box(
            modifier = Modifier.fillMaxWidth().wrapContentHeight()
        ){
            Text(
                text = "选择尺寸",
                color = Color(0xFF000000),
                fontSize = 16.sp,
                modifier = Modifier.align(Alignment.Center).padding(bottom = 6.dp)
            )
            Image(
                painter = painterResource(id = R.mipmap.ic_cutout_base_color_tag),
                contentDescription = "尺寸选择器",
                modifier = Modifier.align(Alignment.BottomCenter)
            )
        }

        if(!singleSelect){
            Box(modifier = Modifier.fillMaxWidth().height(12.dp))

            Box(modifier = Modifier.fillMaxWidth().height(0.5.dp).background(Color(0xFFF4F4F4)).align(Alignment.CenterHorizontally))
        }

        LazyRow(
            modifier = Modifier
                .fillMaxWidth()
                .padding(top = 20.dp)
                .align(Alignment.CenterHorizontally),
            horizontalArrangement = Arrangement.spacedBy(12.dp), // 列表项之间的间距
            contentPadding = PaddingValues(horizontal = 16.dp) // 额外的左右内边距
        ) {
            items(sizes.size){ index ->
                val item = sizes[index]
                SizeItem(
                    item = item,
                    isSelected = item.id == currentSize.value.id,
                    onClick = {
                        currentSize.value = item
                        selectedSize.value = item
                    }
                )
            }
        }


        if(singleSelect){

            Box( modifier = Modifier.fillMaxWidth().height(12.dp) )
            Box( modifier = Modifier.fillMaxWidth().height(0.5.dp).background(Color(0xFFF4F4F4)).align(Alignment.CenterHorizontally) )
        }
    }
}



/**
 * 底部画板(外观)
 * @param selectedAppearance 选中的外观类型
 * @param onAppearanceSelected 外观选择回调
 */
@Composable
fun AppearancePicker(
    selectedAppearance: MutableState<AppearanceType>,
    onAppearanceSelected: (AppearanceType) -> Unit,
    modifier: Modifier = Modifier
) {
    // 定义颜色列表（与您提供的示例完全匹配）
    val appearances = remember {
        listOf(
            AppearanceType.BACKGROUND,          // 第一个：背景
            AppearanceType.CLOTHING,            // 第二个：服装
            AppearanceType.HAIRSTYLE,           // 第三个：发型
            AppearanceType.SIZE                 // 最后一个：尺寸
        )
    }

    Row(
        modifier = modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.SpaceEvenly,
        verticalAlignment = Alignment.CenterVertically
    ) {
        appearances.forEachIndexed { _, appearance ->
            AppearanceOption(
                appearance = appearance,
                isSelected = appearance == selectedAppearance.value,
                onClick = { onAppearanceSelected(appearance) },
            )
        }
    }
}

/**
 * 底部画板(外观)选项
 * @param appearance 外观类型
 * @param isSelected 是否选中
 * @param onClick 点击回调
 */
@Composable
private fun AppearanceOption(
    appearance: AppearanceType,
    isSelected: Boolean,
    onClick: (AppearanceType) -> Unit,
){
    Box(
        modifier = Modifier
            .wrapContentWidth()
            .wrapContentHeight()
            .background(
                Color(0x00000000),
                shape = RoundedCornerShape(359.dp),
            )
            .border(
                width = 1.dp,
                color = if(isSelected) Color(0xFF000000) else Color(0xFFEDEDED),
                shape = RoundedCornerShape(359.dp)
            )
            .clickable(
                indication = null,
                interactionSource = remember { MutableInteractionSource() }
            ) {
                onClick(appearance)
            }
    ) {
        Row(
            modifier = Modifier
                .align(Alignment.Center)
                .padding(start = 11.dp, end = 18.dp)
                .alpha(if(isSelected) 1f else 0f)
        ) {
            Image(
                painter = painterResource(id = appearance.icon),
                contentDescription = "图标",
                modifier = Modifier
                    .wrapContentWidth()
                    .wrapContentHeight()
                    .align(Alignment.CenterVertically)
                //.alpha(if(isSelected) 1f else 0f)
            )
            Text(
                appearance.title,
                color = if(isSelected) Color(0xFF1A1A1A) else Color(0xFFAAAAAA),
                fontSize = 14.sp,
                fontWeight = FontWeight.Bold,
                modifier = Modifier
                    .wrapContentWidth()
                    .wrapContentHeight()
                    .padding(vertical = 7.dp)
            )
        }
        Text(
            appearance.title,
            color = if(isSelected) Color(0xFF1A1A1A) else Color(0xFFAAAAAA),
            fontSize = 14.sp,
            fontWeight = FontWeight.Bold,
            modifier = Modifier
                .wrapContentWidth()
                .wrapContentHeight()
                .align(Alignment.Center)
                .padding(vertical = 7.dp)
                .alpha(if(!isSelected) 1f else 0f),
            textAlign = TextAlign.Center
        )
    }
}

/**
 * 底部画板(衣服)选项
 * @param clothing 衣服类型
 * @param isSelected 是否选中
 * @param onClick 点击回调
 */
@Composable
private fun ClothingItem(
    clothing: ClothingBean,
    isSelected: Boolean,
    onClick: (ClothingBean) -> Unit,
){

    Box(
        modifier = Modifier
            .clickable(
                indication = null,
                interactionSource = remember { MutableInteractionSource() }
            ){
                onClick(clothing)
            }
            .width(65.dp)
            .height(82.dp)
            .background(
                brush = Brush.verticalGradient(
                    colors = listOf(
                        Color(0xFFF4F4F4),
                        Color(0x00FFFFFF)
                    )
            ),
            shape = RoundedCornerShape(4.dp)
        ).border(
            width = 1.86.dp,
            color = if(isSelected) Color(0xFFC2FF43) else Color(0x00000000),
            shape = RoundedCornerShape(4.dp)
        )
    ){
        Image(
            painter = painterResource(id = clothing.icon),
            contentDescription = "图标",
            modifier = Modifier
                .wrapContentWidth()
                .wrapContentHeight()
                .align(Alignment.Center)
        )

        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(16.dp)
                .align(Alignment.BottomCenter)
                .background(
                    Color(0x4D000000),
                    shape = RoundedCornerShape(4.dp)
                )
        ){
            Text(
                clothing.title,
                color = Color(0xFF1A1A1A),
                fontSize = 10.sp,
                lineHeight = 10.sp,
                modifier = Modifier
                    .wrapContentWidth()
                    .wrapContentHeight()
                    .align(Alignment.Center)
            )
        }
    }

}

/**
 * 底部画板(发型)选项
 * @param hairstyle 发型类型
 * @param isSelected 是否选中
 * @param onClick 点击回调
 */
@Composable
private fun HairstyleItem(
    hairstyle: HairstyleBean,
    isSelected: Boolean,
    onClick: (HairstyleBean) -> Unit,
){

    Box(
        modifier = Modifier
            .clickable(
                indication = null,
                interactionSource = remember { MutableInteractionSource() }
            ){
                onClick(hairstyle)
            }
            .width(65.dp)
            .height(82.dp)
            .background(
                brush = Brush.verticalGradient(
                    colors = listOf(
                        Color(0xFFF4F4F4),
                        Color(0x00FFFFFF)
                    )
                ),
                shape = RoundedCornerShape(4.dp)
            ).border(
                width = 1.86.dp,
                color = if(isSelected) Color(0xFFC2FF43) else Color(0x00000000),
                shape = RoundedCornerShape(4.dp)
            )
    ){
        Image(
            painter = painterResource(id = hairstyle.icon),
            contentDescription = "图标",
            modifier = Modifier
                .wrapContentWidth()
                .wrapContentHeight()
                .align(Alignment.Center)
        )

        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(16.dp)
                .align(Alignment.BottomCenter)
                .background(
                    Color(0x4D000000),
                    shape = RoundedCornerShape(4.dp)
                )
        ){
            Text(
                hairstyle.title,
                color = Color(0xFF1A1A1A),
                fontSize = 10.sp,
                lineHeight = 10.sp,
                modifier = Modifier
                    .wrapContentWidth()
                    .wrapContentHeight()
                    .align(Alignment.Center)
            )
        }
    }
}

@Composable
fun SizeItem(
    item: ResizeBean,
    isSelected: Boolean,
    onClick: (ResizeBean) -> Unit,
){
    Box(
        modifier = Modifier
            .clickable(
                indication = null,
                interactionSource = remember { MutableInteractionSource() }
            ){
                onClick(item)
            }
            .width(70.dp)
            .height(60.dp)
            .background(
                brush = Brush.verticalGradient(
                    colors = listOf(
                        Color(0xFFF4F4F4),
                        Color(0x00FFFFFF)
                    )
                ),
                shape = RoundedCornerShape(4.dp)
            )
            .border(
                width = if(isSelected) 1.86.dp else 0.5.dp,
                color = if(isSelected) Color(0xFFC2FF43) else Color(0xFFEDEDED),
                shape = RoundedCornerShape(4.dp)
            )
    ) {
        Column(
                modifier = Modifier
                    .wrapContentWidth()
                    .wrapContentHeight()
                    .align(Alignment.Center)
        ) {
            Text(
                item.title,
                color = Color(0xFF1A1A1A),
                fontSize = 12.sp,
                lineHeight = 12.sp,
                modifier = Modifier
                    .wrapContentWidth()
                    .wrapContentHeight()
            )
            Text(
                item.size,
                color = Color(0xFFAAAAAA),
                fontSize = 10.sp,
                lineHeight = 10.sp,
                modifier = Modifier
                    .wrapContentWidth()
                    .wrapContentHeight()
            )
        }
    }
}



@Composable
fun FormatItem(
    format: FormatBean,
    isSelected: Boolean,
    onClick: (FormatBean) -> Unit,
){
    Box(
        modifier = Modifier
            .clickable(
                indication = null,
                interactionSource = remember { MutableInteractionSource() }
            ) {
                onClick(format)
            }
            .wrapContentSize()
            .background(color = Color(0xFFFFFFFF), shape = RoundedCornerShape(36.dp)).border(
                width = 1.dp,
                color = if(isSelected) Color(0xFF000000) else Color(0xFFEDEDED),
                shape = RoundedCornerShape(36.dp)
            )
    ) {
        Column(
            modifier = Modifier
                .wrapContentWidth()
                .wrapContentHeight()
                .padding(horizontal = 21.dp, vertical = 7.dp)
                .align(Alignment.Center)
        ) {
            Text(
                format.title,
                color = Color(0xFF1A1A1A),
                fontSize = 12.sp,
                lineHeight = 12.sp,
                modifier = Modifier
                    .wrapContentWidth()
                    .wrapContentHeight()
            )
        }
    }
}

/**
 * 颜色选择控件
 *
 * @param selectedIndex 当前选中的颜色索引
 * @param onColorSelected 颜色选中回调
 * @param modifier 修饰符
 */
@Composable
fun ColorPicker(
    colors: List<Color>,
    selectedIndex: Int,
    onColorSelected: (Int) -> Unit,
    modifier: Modifier = Modifier
) {
    Row(
        modifier = modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.SpaceEvenly,
        verticalAlignment = Alignment.CenterVertically
    ) {
        colors.forEachIndexed { index, color ->
            ColorOption(
                size = colors.size,
                index = index,
                color = color,
                isSelected = index == selectedIndex,
                onClick = { onColorSelected(index) },
                isBordered = index == 0 || index == colors.lastIndex // 第一个和最后一个带边框
            )
        }
    }
}

/**
 * 颜色选项组件
 *
 * @param color 颜色
 * @param isSelected 是否选中
 * @param onClick 点击事件
 * @param isBordered 是否显示边框
 */
@Composable
private fun ColorOption(
    size: Int,
    index: Int,
    color: Color,
    isSelected: Boolean,
    onClick: () -> Unit,
    isBordered: Boolean = false
) {
    val interactionSource = remember { MutableInteractionSource() }
    val baseSize = 22.dp
    val selectedSize = 24.dp

    // 构建修饰符
    var modifier = Modifier
        .size(if (isSelected) selectedSize else baseSize)
        .clip(CircleShape)
        .background(color)

    // 边框逻辑
    val borderColor =
        /*
        if (isSelected) {
        Color.Red // 选中时的红色边框
        } else
         */
        if (isBordered) {
            Color(0xFFAAAAAA) // 普通边框颜色
        } else {
            null
        }

    borderColor?.let {
        modifier = modifier.border(
            width = if (isSelected) 0.5.dp else 0.5.dp,
            color = it,
            shape = CircleShape
        )
    }

    if(index == 0){
        Box(modifier = Modifier.wrapContentSize()){
            Image(
                painter = painterResource(id = R.mipmap.ic_cutout_color_less),
                contentScale = ContentScale.FillWidth,
                contentDescription = "颜色选择器",
                modifier = Modifier
                    .size(if (isSelected) selectedSize else baseSize),
                alignment = Alignment.BottomCenter
            )
            Box(
                modifier = modifier.clickable(
                    indication = null,
                    interactionSource = interactionSource
                ) { onClick() },
                contentAlignment = Alignment.Center
            ) {
                // 可以根据需要添加额外内容
            }

            if(isSelected){
                Box(
                    modifier = Modifier.size(18.dp).clip(CircleShape).background(Color.Transparent).border(
                        width = 2.dp,
                        color = Color(0xFFAAAAAA),
                        shape = CircleShape
                    ).align(Alignment.Center)
                )
            }
        }
    }else{

        Box(modifier = Modifier.wrapContentSize()){
            Box(
                modifier = modifier.clickable(
                    indication = null,
                    interactionSource = interactionSource
                ) { onClick() },
                contentAlignment = Alignment.Center
            ) {
                // 可以根据需要添加额外内容
            }

            if(isSelected){
                Box(
                    modifier = Modifier.size(20.dp).clip(CircleShape).background(Color.Transparent).border(
                        width = 2.dp,
                        color = if(index == size-1) Color(0xFFAAAAAA) else Color(0xFFFFFFFF),
                        shape = CircleShape
                    ).align(Alignment.Center)
                )
            }
        }
    }
}

/**
 * 底部画板(外观)类型
 */
enum class AppearanceType(val type: String, val title: String, val icon: Int) {
    BACKGROUND(type = "background", title = "背景", icon = R.mipmap.ic_cutout_bg),
    CLOTHING(type = "clothing", title = "服装", icon = R.mipmap.ic_cutout_clothing),
    HAIRSTYLE(type = "hairstyle", title = "发型", icon = R.mipmap.ic_cutout_hairstyle),
    SIZE(type = "size", title = "尺寸", icon = R.mipmap.ic_cutout_size)
}

@SuppressLint("UnrememberedMutableState")
@Preview(showBackground = true)
@Composable
fun PreviewDrawingBoardHairstylePicker(){
    DrawingBoardHairstylePicker(hairstyleForMans = mutableListOf(), hairstyleForFemales = mutableListOf(), selectedHairstyle = mutableStateOf(null), onHairstyleSelected = {})
}