package id.iiyh.inatrading.core.ui.components

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.fillMaxWidth
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.navigationBarsPadding
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
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.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import id.iiyh.inatrading.core.ui.theme.BrandRed
import id.iiyh.inatrading.core.ui.theme.OnSurface
import id.iiyh.inatrading.core.ui.theme.OnSurfaceVariant
import id.iiyh.inatrading.navigation.BottomNavItem
import id.iiyh.inatrading.navigation.Screen
import id.iiyh.inatrading.navigation.bottomNavItems

/**
 * Bottom Navigation Bar bersama untuk 4 main screen.
 *
 * - Frosted glass: putih 85% opacity
 * - Active tab: background merah/10 + filled icon + label bold
 * - Inner screens: tidak menampilkan BottomNav ini
 */
@Composable
fun InaBottomNavBar(
    currentRoute: String?,
    onTabSelected: (Screen) -> Unit,
    modifier: Modifier = Modifier,
) {
    Box(
        modifier = modifier
            .fillMaxWidth()
            .shadow(
                elevation    = 0.dp,
                ambientColor = OnSurface.copy(alpha = 0.04f),
                spotColor    = OnSurface.copy(alpha = 0.04f),
            )
            .background(Color.White.copy(alpha = 0.85f))
            .clip(RoundedCornerShape(topStart = 24.dp, topEnd = 24.dp))
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .navigationBarsPadding()
                .padding(horizontal = 10.dp, vertical = 8.dp),
            horizontalArrangement = Arrangement.SpaceAround,
            verticalAlignment = Alignment.CenterVertically,
        ) {
            bottomNavItems.forEach { item ->
                BottomNavTab(
                    modifier = Modifier.weight(1f),
                    item       = item,
                    isSelected = currentRoute == item.screen.route,
                    onClick    = { onTabSelected(item.screen) },
                )
            }
        }
    }
}

@Composable
private fun BottomNavTab(
    modifier: Modifier = Modifier,
    item: BottomNavItem,
    isSelected: Boolean,
    onClick: () -> Unit,
) {
    val bgColor    = if (isSelected) BrandRed.copy(alpha = 0.10f) else Color.Transparent
    val iconTint   = if (isSelected) BrandRed else OnSurfaceVariant
    val labelColor = if (isSelected) BrandRed else OnSurfaceVariant
    val icon       = if (isSelected) item.iconSelected else item.icon

    Column(
        modifier = modifier
            .clip(RoundedCornerShape(16.dp))
            .background(bgColor)
            .clickable(
                interactionSource = remember { MutableInteractionSource() },
                indication        = ripple(color = BrandRed.copy(alpha = 0.12f)),
                onClick           = onClick,
            )
            .heightIn(min = 52.dp)
            .padding(horizontal = 10.dp, vertical = 6.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.spacedBy(2.dp, Alignment.CenterVertically),
    ) {
        Icon(
            imageVector        = icon,
            contentDescription = stringResource(item.labelRes),
            tint               = iconTint,
            modifier           = Modifier.size(22.dp),
        )
        Text(
            text       = stringResource(item.labelRes),
            style      = MaterialTheme.typography.labelSmall,
            fontWeight = if (isSelected) FontWeight.Bold else FontWeight.Medium,
            color      = labelColor,
            maxLines   = 1,
            overflow   = TextOverflow.Ellipsis,
            textAlign  = TextAlign.Center,
        )
    }
}
