package id.iiyh.inatrading.feature.profile.presentation

import androidx.compose.foundation.background
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.Row
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.rememberScrollState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Verified
import androidx.compose.material.icons.outlined.AccountBalanceWallet
import androidx.compose.material.icons.outlined.Description
import androidx.compose.material.icons.outlined.Favorite
import androidx.compose.material.icons.outlined.Grade
import androidx.compose.material.icons.outlined.HelpCenter
import androidx.compose.material.icons.outlined.Info
import androidx.compose.material.icons.outlined.Inventory2
import androidx.compose.material.icons.outlined.LocalShipping
import androidx.compose.material.icons.outlined.LocationOn
import androidx.compose.material.icons.outlined.Logout
import androidx.compose.material.icons.outlined.Payments
import androidx.compose.material.icons.outlined.Edit
import androidx.compose.material.icons.outlined.PrivacyTip
import androidx.compose.material.icons.outlined.Settings
import androidx.compose.material.icons.outlined.ChevronRight
import androidx.compose.material.icons.outlined.Shield
import androidx.compose.material.icons.outlined.Lock
import androidx.compose.material.icons.outlined.VerifiedUser
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.material3.ripple
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.rotate
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.hilt.navigation.compose.hiltViewModel
import coil.compose.AsyncImage
import id.iiyh.inatrading.R
import id.iiyh.inatrading.core.ui.components.InaCard
import id.iiyh.inatrading.core.ui.components.InaChip
import id.iiyh.inatrading.core.ui.components.InaChipVariant
import id.iiyh.inatrading.core.ui.components.InaPrimaryButton
import id.iiyh.inatrading.core.ui.theme.AccentBlue
import id.iiyh.inatrading.core.ui.theme.AccentPurple
import id.iiyh.inatrading.core.ui.theme.AccentPurpleContainer
import id.iiyh.inatrading.core.ui.theme.Background
import id.iiyh.inatrading.core.ui.theme.BrandRed
import id.iiyh.inatrading.core.ui.theme.ManropeFontFamily
import id.iiyh.inatrading.core.ui.theme.OnSurface
import id.iiyh.inatrading.core.ui.theme.OnSurfaceVariant
import id.iiyh.inatrading.core.ui.theme.SurfaceContainerHighest
import id.iiyh.inatrading.core.ui.theme.SurfaceContainerLow
import id.iiyh.inatrading.core.ui.theme.SurfaceContainerLowest

@Composable
fun ProfileScreen(
    onLoginClick: () -> Unit,
    onEditProfile: () -> Unit,
    onChangePassword: () -> Unit,
    onShippingAddresses: () -> Unit,
    onFavoritesClick: () -> Unit,
    onPaymentMethods: () -> Unit,
    onHelpCenterClick: () -> Unit,
    onTermsClick: () -> Unit,
    onPrivacyPolicyClick: () -> Unit,
    onAboutClick: () -> Unit,
    viewModel: ProfileViewModel = hiltViewModel(),
) {
    val uiState by viewModel.uiState.collectAsState()

    if (uiState.isLoggedIn && uiState.user != null) {
        ProfileLoggedInContent(
            user                 = uiState.user!!,
            orderCounts          = uiState.orderCounts,
            onEditProfile        = onEditProfile,
            onChangePassword     = onChangePassword,
            onShippingAddresses  = onShippingAddresses,
            onFavoritesClick     = onFavoritesClick,
            onPaymentMethods     = onPaymentMethods,
            onHelpCenterClick    = onHelpCenterClick,
            onTermsClick         = onTermsClick,
            onPrivacyPolicyClick = onPrivacyPolicyClick,
            onAboutClick         = onAboutClick,
            onLogout             = viewModel::logout,
        )
    } else {
        ProfileGuestContent(
            onLoginClick         = onLoginClick,
            onHelpCenterClick    = onHelpCenterClick,
            onTermsClick         = onTermsClick,
            onPrivacyPolicyClick = onPrivacyPolicyClick,
            onAboutClick         = onAboutClick,
        )
    }
}

// ─── Logged In ────────────────────────────────────────────────────────────────

@Composable
private fun ProfileLoggedInContent(
    user: UserProfile,
    orderCounts: OrderCounts,
    onEditProfile: () -> Unit,
    onChangePassword: () -> Unit,
    onShippingAddresses: () -> Unit,
    onFavoritesClick: () -> Unit,
    onPaymentMethods: () -> Unit,
    onHelpCenterClick: () -> Unit,
    onTermsClick: () -> Unit,
    onPrivacyPolicyClick: () -> Unit,
    onAboutClick: () -> Unit,
    onLogout: () -> Unit,
) {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Background)
            .verticalScroll(rememberScrollState())
            .padding(horizontal = 24.dp)
            .padding(bottom = 32.dp),
        verticalArrangement = Arrangement.spacedBy(20.dp),
    ) {
        // ── Profile Header dengan Brand Slope ─────────────────────────────
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .padding(top = 16.dp),
        ) {
            // Brand Slope background
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .offset(x = (-16).dp)
                    .width(420.dp)
                    .height(128.dp)
                    .rotate(-2f)
                    .clip(RoundedCornerShape(40.dp))
                    .background(SurfaceContainerHighest)
            )

            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(top = 12.dp, bottom = 4.dp),
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.spacedBy(16.dp),
            ) {
                // Avatar + verified badge
                Box {
                    AsyncImage(
                        model             = user.avatarUrl.ifEmpty { null },
                        contentDescription = user.name,
                        contentScale      = ContentScale.Crop,
                        modifier          = Modifier
                            .size(72.dp)
                            .clip(RoundedCornerShape(12.dp))
                            .background(SurfaceContainerLow),
                    )
                    // Verified badge
                    Box(
                        modifier = Modifier
                            .size(22.dp)
                            .align(Alignment.BottomEnd)
                            .offset(x = 4.dp, y = 4.dp)
                            .background(AccentPurple, CircleShape)
                            .clip(CircleShape),
                        contentAlignment = Alignment.Center,
                    ) {
                        Icon(
                            imageVector        = Icons.Filled.Verified,
                            contentDescription = null,
                            tint               = Color.White,
                            modifier           = Modifier.size(14.dp),
                        )
                    }
                }

                // Name, email, chip + settings button
                Row(
                    modifier = Modifier.weight(1f),
                    verticalAlignment = Alignment.CenterVertically,
                ) {
                    Column(modifier = Modifier.weight(1f)) {
                        Text(
                            text       = user.name,
                            fontFamily = ManropeFontFamily,
                            fontWeight = FontWeight.ExtraBold,
                            fontSize   = 21.sp,
                            color      = OnSurface,
                        )
                        Text(
                            text  = user.email,
                            style = MaterialTheme.typography.bodySmall,
                            color = OnSurfaceVariant,
                        )
                    }

                    // Settings shortcut
                    Box(
                        modifier = Modifier
                            .size(36.dp)
                            .clip(RoundedCornerShape(8.dp))
                            .background(SurfaceContainerLow)
                            .clickable(onClick = onEditProfile),
                        contentAlignment = Alignment.Center,
                    ) {
                        Icon(
                            imageVector        = Icons.Outlined.Settings,
                            contentDescription = null,
                            tint               = BrandRed,
                            modifier           = Modifier.size(20.dp),
                        )
                    }
                }
            }
        }

        // ── My Orders ─────────────────────────────────────────────────────
        InaCard {
            Row(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.SpaceBetween,
                verticalAlignment = Alignment.CenterVertically,
            ) {
                Text(
                    text       = stringResource(R.string.profile_my_orders),
                    fontFamily = ManropeFontFamily,
                    fontWeight = FontWeight.Bold,
                    fontSize   = 17.sp,
                    color      = OnSurface,
                )
                Text(
                    text  = stringResource(R.string.profile_view_all),
                    style = MaterialTheme.typography.labelMedium,
                    fontWeight = FontWeight.SemiBold,
                    color = BrandRed,
                )
            }

            Spacer(modifier = Modifier.height(20.dp))

            Row(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.SpaceAround,
            ) {
                OrderTab(icon = Icons.Outlined.AccountBalanceWallet, label = stringResource(R.string.profile_to_pay))
                OrderTab(icon = Icons.Outlined.LocalShipping, label = stringResource(R.string.profile_to_ship), badge = orderCounts.toShip)
                OrderTab(icon = Icons.Outlined.Inventory2, label = stringResource(R.string.profile_to_receive))
                OrderTab(icon = Icons.Outlined.Grade, label = stringResource(R.string.profile_review))
            }
        }

        // ── Settings & Info ───────────────────────────────────────────────
        Text(
            text       = stringResource(R.string.profile_settings_section),
            style      = MaterialTheme.typography.labelMedium,
            fontWeight = FontWeight.Bold,
            color      = OnSurfaceVariant.copy(alpha = 0.7f),
            letterSpacing = 2.sp,
        )

        // Bento Grid: Edit Profile + Shipping Addresses
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.spacedBy(16.dp),
        ) {
            BentoCard(
                modifier = Modifier.weight(1f),
                icon     = Icons.Outlined.Edit,
                iconTint = AccentBlue,
                label    = stringResource(R.string.profile_edit_profile),
                onClick  = onEditProfile,
            )
            BentoCard(
                modifier = Modifier.weight(1f),
                icon     = Icons.Outlined.LocationOn,
                iconTint = AccentPurple,
                label    = stringResource(R.string.profile_shipping_addresses),
                onClick  = onShippingAddresses,
            )
        }

        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.spacedBy(16.dp),
        ) {
            BentoCard(
                modifier = Modifier.weight(1f),
                icon = Icons.Outlined.Lock,
                iconTint = BrandRed,
                label = stringResource(R.string.profile_change_password),
                onClick = onChangePassword,
            )
            Spacer(modifier = Modifier.weight(1f))
        }

        // List Settings
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .clip(RoundedCornerShape(12.dp))
                .background(SurfaceContainerLowest),
        ) {
            SettingsListItem(icon = Icons.Outlined.Favorite,    label = stringResource(R.string.profile_my_favorites), onClick = onFavoritesClick)
            SettingsListItem(icon = Icons.Outlined.Payments,    label = stringResource(R.string.profile_payment_methods), onClick = onPaymentMethods)
            SettingsListItem(icon = Icons.Outlined.Info,        label = stringResource(R.string.settings_about), onClick = onAboutClick)
            SettingsListItem(icon = Icons.Outlined.Description, label = stringResource(R.string.settings_terms), onClick = onTermsClick)
            SettingsListItem(icon = Icons.Outlined.Shield,      label = stringResource(R.string.settings_privacy_policy), onClick = onPrivacyPolicyClick)
            SettingsListItem(icon = Icons.Outlined.HelpCenter,  label = stringResource(R.string.settings_help_center), onClick = onHelpCenterClick, showDivider = false)
        }

        // ── Logout ────────────────────────────────────────────────────────
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .clip(RoundedCornerShape(12.dp))
                .background(BrandRed.copy(alpha = 0.06f))
                .clickable(onClick = onLogout)
                .padding(vertical = 16.dp),
            contentAlignment = Alignment.Center,
        ) {
            Row(
                horizontalArrangement = Arrangement.spacedBy(8.dp),
                verticalAlignment = Alignment.CenterVertically,
            ) {
                Icon(Icons.Outlined.Logout, contentDescription = null, tint = BrandRed, modifier = Modifier.size(20.dp))
                Text(
                    text       = stringResource(R.string.profile_logout),
                    fontFamily = ManropeFontFamily,
                    fontWeight = FontWeight.Bold,
                    color      = BrandRed,
                )
            }
        }

        // ── Footer ────────────────────────────────────────────────────────
        Column(
            modifier = Modifier.fillMaxWidth(),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.spacedBy(4.dp),
        ) {
            Text(
                text  = stringResource(R.string.app_version).uppercase(),
                style = MaterialTheme.typography.labelSmall,
                color = OnSurfaceVariant.copy(alpha = 0.5f),
                letterSpacing = 2.sp,
            )
            Text(
                text  = stringResource(R.string.app_tagline),
                style = MaterialTheme.typography.bodySmall,
                color = OnSurfaceVariant.copy(alpha = 0.4f),
            )
        }
    }
}

// ─── Guest ────────────────────────────────────────────────────────────────────

@Composable
private fun ProfileGuestContent(
    onLoginClick: () -> Unit,
    onHelpCenterClick: () -> Unit,
    onTermsClick: () -> Unit,
    onPrivacyPolicyClick: () -> Unit,
    onAboutClick: () -> Unit,
) {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Background)
            .verticalScroll(rememberScrollState())
            .padding(horizontal = 24.dp)
            .padding(bottom = 32.dp),
        verticalArrangement = Arrangement.spacedBy(20.dp),
    ) {
        // ── Hero Section ──────────────────────────────────────────────────
        Box(modifier = Modifier.fillMaxWidth()) {
            // Identity Accent
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .offset(x = (-24).dp)
                    .width(500.dp)
                    .height(280.dp)
                    .rotate(-2f)
                    .background(SurfaceContainerHighest.copy(alpha = 0.35f))
            )

            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(top = 40.dp, bottom = 24.dp),
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.spacedBy(12.dp),
            ) {
                Text(
                    text       = stringResource(R.string.profile_guest_title),
                    fontFamily = ManropeFontFamily,
                    fontWeight = FontWeight.ExtraBold,
                    fontSize   = 26.sp,
                    color      = OnSurface,
                    textAlign  = TextAlign.Center,
                )
                Text(
                    text      = stringResource(R.string.profile_guest_desc),
                    style     = MaterialTheme.typography.bodyMedium,
                    color     = OnSurfaceVariant,
                    textAlign = TextAlign.Center,
                )
                Spacer(modifier = Modifier.height(8.dp))
                InaPrimaryButton(
                    text    = stringResource(R.string.profile_guest_cta),
                    onClick = onLoginClick,
                )
            }
        }

        // ── Benefits ──────────────────────────────────────────────────────
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceBetween,
            verticalAlignment = Alignment.Bottom,
        ) {
            Text(
                text       = stringResource(R.string.profile_why_join),
                fontFamily = ManropeFontFamily,
                fontWeight = FontWeight.Bold,
                fontSize   = 20.sp,
                color      = OnSurface,
            )
            Text(
                text  = stringResource(R.string.profile_benefits_label).uppercase(),
                style = MaterialTheme.typography.labelSmall,
                color = OnSurfaceVariant.copy(alpha = 0.5f),
                letterSpacing = 2.sp,
            )
        }

        // Benefit cards
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.spacedBy(16.dp),
        ) {
            BenefitCard(
                modifier = Modifier.weight(1f),
                icon     = Icons.Outlined.LocalShipping,
                iconBg   = BrandRed.copy(alpha = 0.10f),
                iconTint = BrandRed,
                title    = stringResource(R.string.profile_benefit_track_title),
                desc     = stringResource(R.string.profile_benefit_track_desc),
            )
            BenefitCard(
                modifier = Modifier.weight(1f),
                icon     = Icons.Outlined.Favorite,
                iconBg   = AccentBlue.copy(alpha = 0.10f),
                iconTint = AccentBlue,
                title    = stringResource(R.string.profile_benefit_save_title),
                desc     = stringResource(R.string.profile_benefit_save_desc),
            )
        }

        // Wide benefit card
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .clip(RoundedCornerShape(12.dp))
                .background(AccentPurpleContainer.copy(alpha = 0.15f))
                .padding(20.dp),
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.spacedBy(20.dp),
        ) {
            Box(
                modifier = Modifier
                    .size(56.dp)
                    .clip(CircleShape)
                    .background(AccentPurple.copy(alpha = 0.15f)),
                contentAlignment = Alignment.Center,
            ) {
                Icon(Icons.Outlined.VerifiedUser, contentDescription = null, tint = AccentPurple, modifier = Modifier.size(28.dp))
            }
            Column(verticalArrangement = Arrangement.spacedBy(4.dp)) {
                Text(
                    text       = stringResource(R.string.profile_benefit_secure_title),
                    fontFamily = ManropeFontFamily,
                    fontWeight = FontWeight.Bold,
                    fontSize   = 16.sp,
                    color      = OnSurface,
                )
                Text(
                    text  = stringResource(R.string.profile_benefit_secure_desc),
                    style = MaterialTheme.typography.bodySmall,
                    color = OnSurfaceVariant,
                )
            }
        }

        // ── Info Links ────────────────────────────────────────────────────
        Text(
            text       = stringResource(R.string.profile_info_section).uppercase(),
            style      = MaterialTheme.typography.labelMedium,
            fontWeight = FontWeight.Bold,
            color      = OnSurfaceVariant.copy(alpha = 0.5f),
            letterSpacing = 2.sp,
        )

        Column(
            modifier = Modifier
                .fillMaxWidth()
                .clip(RoundedCornerShape(12.dp))
                .background(SurfaceContainerLowest),
        ) {
            SettingsListItem(icon = Icons.Outlined.Info,        label = stringResource(R.string.settings_about), onClick = onAboutClick)
            SettingsListItem(icon = Icons.Outlined.HelpCenter,  label = stringResource(R.string.settings_help_center), onClick = onHelpCenterClick)
            SettingsListItem(icon = Icons.Outlined.PrivacyTip,  label = stringResource(R.string.settings_privacy_policy), onClick = onPrivacyPolicyClick)
            SettingsListItem(icon = Icons.Outlined.Description, label = stringResource(R.string.settings_terms), onClick = onTermsClick, showDivider = false)
        }

        // ── Footer ────────────────────────────────────────────────────────
        Text(
            text      = "${stringResource(R.string.app_version)} • ${stringResource(R.string.app_tagline)}",
            style     = MaterialTheme.typography.labelSmall,
            color     = OnSurfaceVariant.copy(alpha = 0.4f),
            textAlign = TextAlign.Center,
            modifier  = Modifier.fillMaxWidth(),
            letterSpacing = 1.5.sp,
        )
    }
}

// ─── Shared sub-composables ───────────────────────────────────────────────────

@Composable
private fun OrderTab(
    icon: ImageVector,
    label: String,
    badge: Int = 0,
) {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.spacedBy(8.dp),
        modifier = Modifier.clickable(
            interactionSource = remember { MutableInteractionSource() },
            indication = ripple(bounded = false, radius = 32.dp),
            onClick = {},
        ),
    ) {
        Box {
            Box(
                modifier = Modifier
                    .size(48.dp)
                    .clip(RoundedCornerShape(12.dp))
                    .background(SurfaceContainerLow),
                contentAlignment = Alignment.Center,
            ) {
                Icon(icon, contentDescription = label, tint = OnSurfaceVariant, modifier = Modifier.size(22.dp))
            }
            if (badge > 0) {
                Box(
                    modifier = Modifier
                        .size(16.dp)
                        .align(Alignment.TopEnd)
                        .offset(x = 4.dp, y = (-4).dp)
                        .background(BrandRed, CircleShape),
                    contentAlignment = Alignment.Center,
                ) {
                    Text(badge.toString(), style = MaterialTheme.typography.labelSmall.copy(fontSize = 9.sp), color = Color.White)
                }
            }
        }
        Text(
            text  = label.uppercase(),
            style = MaterialTheme.typography.labelSmall.copy(fontSize = 9.sp),
            color = OnSurfaceVariant,
            fontWeight = FontWeight.Bold,
            letterSpacing = 0.5.sp,
        )
    }
}

@Composable
private fun BentoCard(
    icon: ImageVector,
    iconTint: Color,
    label: String,
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
) {
    Column(
        modifier = modifier
            .height(128.dp)
            .clip(RoundedCornerShape(12.dp))
            .background(SurfaceContainerLowest)
            .clickable(onClick = onClick)
            .padding(20.dp),
        verticalArrangement = Arrangement.SpaceBetween,
    ) {
        Icon(icon, contentDescription = null, tint = iconTint, modifier = Modifier.size(24.dp))
        Text(
            text       = label,
            fontFamily = ManropeFontFamily,
            fontWeight = FontWeight.Bold,
            fontSize   = 13.sp,
            color      = OnSurface,
        )
    }
}

@Composable
private fun BenefitCard(
    icon: ImageVector,
    iconBg: Color,
    iconTint: Color,
    title: String,
    desc: String,
    modifier: Modifier = Modifier,
) {
    Column(
        modifier = modifier
            .clip(RoundedCornerShape(12.dp))
            .background(SurfaceContainerLowest)
            .padding(20.dp),
        verticalArrangement = Arrangement.spacedBy(12.dp),
    ) {
        Box(
            modifier = Modifier
                .size(44.dp)
                .clip(RoundedCornerShape(12.dp))
                .background(iconBg),
            contentAlignment = Alignment.Center,
        ) {
            Icon(icon, contentDescription = null, tint = iconTint, modifier = Modifier.size(22.dp))
        }
        Column(verticalArrangement = Arrangement.spacedBy(4.dp)) {
            Text(title, fontFamily = ManropeFontFamily, fontWeight = FontWeight.Bold, fontSize = 14.sp, color = OnSurface)
            Text(desc, style = MaterialTheme.typography.bodySmall, color = OnSurfaceVariant)
        }
    }
}

@Composable
private fun SettingsListItem(
    icon: ImageVector,
    label: String,
    onClick: () -> Unit = {},
    showDivider: Boolean = true,
) {
    Column {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .clickable(
                    interactionSource = remember { MutableInteractionSource() },
                    indication = ripple(color = OnSurface.copy(alpha = 0.06f)),
                    onClick = onClick,
                )
                .padding(horizontal = 20.dp, vertical = 16.dp),
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.spacedBy(16.dp),
        ) {
            Icon(icon, contentDescription = null, tint = OnSurfaceVariant.copy(alpha = 0.6f), modifier = Modifier.size(22.dp))
            Text(label, style = MaterialTheme.typography.bodyMedium, fontWeight = FontWeight.SemiBold, color = OnSurface, modifier = Modifier.weight(1f))
            Icon(
                Icons.Outlined.ChevronRight,
                contentDescription = null,
                tint = OnSurfaceVariant.copy(alpha = 0.25f),
                modifier = Modifier.size(18.dp),
            )
        }
        if (showDivider) {
            Box(modifier = Modifier.fillMaxWidth().height(4.dp).background(SurfaceContainerLow))
        }
    }
}
