package dev.ulfrx.recipe.ui.components.recipe

import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicText
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.vector.ImageVector
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 com.composables.icons.lucide.Lucide
import com.composables.icons.lucide.Minus
import com.composables.icons.lucide.Plus
import com.composeunstyled.UnstyledButton
import com.composeunstyled.UnstyledIcon
import dev.ulfrx.recipe.ui.theme.RecipeTheme

/**
 * Pill-shaped servings stepper. Flat surface with the standard `colors.surface`
 * fill and `borderCard` outline — the same visual treatment used by every
 * static editable control across the app (chips, calendar pill, ingredient
 * card) so the stepper reads as "part of the page" rather than "floating glass
 * chrome".
 */
@Composable
fun RecipeServingsStepper(
    servings: Int,
    servingsRange: IntRange,
    decrementContentDescription: String,
    incrementContentDescription: String,
    onServingsChange: (Int) -> Unit,
    modifier: Modifier = Modifier,
) {
    val colors = RecipeTheme.colors
    val shape = RoundedCornerShape(STEPPER_HEIGHT / 2)
    Box(
        modifier =
            modifier
                .height(STEPPER_HEIGHT)
                .clip(shape)
                .background(colors.surface)
                .border(width = SurfaceBorderWidth, color = colors.borderCard, shape = shape),
    ) {
        Row(
            modifier = Modifier.fillMaxHeight(),
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.spacedBy(RecipeTheme.spacing.xs),
        ) {
            StepperButton(
                icon = Lucide.Minus,
                contentDescription = decrementContentDescription,
                enabled = servings > servingsRange.first,
                onClick = { onServingsChange(servings - 1) },
            )
            BasicText(
                text = servings.toString(),
                style =
                    RecipeTheme.typography.body.copy(
                        color = colors.content,
                        fontWeight = FontWeight.SemiBold,
                        fontSize = SERVINGS_VALUE_TEXT_SIZE,
                        textAlign = TextAlign.Center,
                    ),
                modifier = Modifier.width(SERVINGS_VALUE_WIDTH),
            )
            StepperButton(
                icon = Lucide.Plus,
                contentDescription = incrementContentDescription,
                enabled = servings < servingsRange.last,
                onClick = { onServingsChange(servings + 1) },
            )
        }
    }
}

@Composable
private fun StepperButton(
    icon: ImageVector,
    contentDescription: String,
    enabled: Boolean,
    onClick: () -> Unit,
) {
    val colors = RecipeTheme.colors
    UnstyledButton(
        onClick = onClick,
        enabled = enabled,
        modifier = Modifier.width(STEPPER_BUTTON_WIDTH).requiredHeight(STEPPER_TAP_TARGET_HEIGHT),
    ) {
        Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
            UnstyledIcon(
                imageVector = icon,
                contentDescription = contentDescription,
                tint = if (enabled) colors.content else colors.contentMuted.copy(alpha = 0.45f),
                modifier = Modifier.size(STEPPER_ICON_SIZE),
            )
        }
    }
}

private val SurfaceBorderWidth = 1.dp
private val STEPPER_HEIGHT = 36.dp
private val STEPPER_TAP_TARGET_HEIGHT = 44.dp
private val STEPPER_BUTTON_WIDTH = 36.dp
private val STEPPER_ICON_SIZE = 14.dp
private val SERVINGS_VALUE_WIDTH = 22.dp
private val SERVINGS_VALUE_TEXT_SIZE = 13.sp
