package com.peachpasswords.ui.components

import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.defaultMinSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
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.graphics.Color
import androidx.compose.ui.unit.dp
import com.peachpasswords.ui.theme.LocalPeachAccent
import com.peachpasswords.ui.theme.PeachSpacing
import com.peachpasswords.ui.theme.PeachType
import com.peachpasswords.ui.theme.peachColors

data class PeachSegment(
    val key: String,
    val label: String,
)

@Composable
fun PeachSegmentedControl(
    segments: List<PeachSegment>,
    selectedKey: String,
    onSelected: (String) -> Unit,
    modifier: Modifier = Modifier,
) {
    val accent = LocalPeachAccent.current
    Surface(
        modifier = modifier.fillMaxWidth(),
        // Gate 1: colorScheme.surface is PeachTheme's exact mapping of S1.
        color = MaterialTheme.colorScheme.surface,
        shape = RoundedCornerShape(999.dp),
        tonalElevation = 1.dp,
    ) {
        Row(
            modifier = Modifier.padding(PeachSpacing.xs),
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.spacedBy(PeachSpacing.xs),
        ) {
            segments.forEach { segment ->
                val selected = segment.key == selectedKey
                Surface(
                    modifier = Modifier
                        .weight(1f)
                        // MD3 minimum touch target (Gate 1 finding).
                        .defaultMinSize(minHeight = 48.dp)
                        .clickable { onSelected(segment.key) },
                    // Gate 1: colorScheme.surfaceVariant/onPrimary are PeachTheme's
                    // exact mappings of S2/Bg.
                    color = if (selected) accent else MaterialTheme.colorScheme.surfaceVariant,
                    contentColor = if (selected) MaterialTheme.colorScheme.onPrimary else peachColors.T1,
                    shape = RoundedCornerShape(999.dp),
                ) {
                    Row(
                        modifier = Modifier.padding(horizontal = PeachSpacing.sm, vertical = PeachSpacing.sm),
                        horizontalArrangement = Arrangement.Center,
                        verticalAlignment = Alignment.CenterVertically,
                    ) {
                        Text(segment.label.uppercase(), style = PeachType.sortPill)
                    }
                }
            }
        }
    }
}

/**
 * Browser-matched quiet filter row: the active option gets one small,
 * content-sized accent pill; every other option is bare text (no box,
 * no fill) sitting quietly beside it. Distinct from [PeachSegmentedControl],
 * which renders every option as an equal-weight full-width button — right for
 * a real multi-way choice (entry type), wrong for a filter/sort row, where
 * giving every option the same loud pill treatment reads as several accent
 * moments stacked instead of one (SMART/A-Z/Z-A/RECENT in the browser).
 */
@Composable
fun PeachFilterPills(
    segments: List<PeachSegment>,
    selectedKey: String,
    onSelected: (String) -> Unit,
    modifier: Modifier = Modifier,
) {
    val accent = LocalPeachAccent.current
    Row(
        modifier = modifier,
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.spacedBy(PeachSpacing.md),
    ) {
        segments.forEach { segment ->
            val selected = segment.key == selectedKey
            // One shape, always mounted — animating its own background/content
            // color between segments reads as a smooth crossfade instead of
            // the old hard swap between two entirely different composables
            // (a bare Text vs. a Surface-wrapped one) with no transition.
            val bg by animateColorAsState(
                if (selected) accent else Color.Transparent,
                animationSpec = tween(180),
                label = "pill-bg",
            )
            val fg by animateColorAsState(
                if (selected) peachColors.Bg else peachColors.T2,
                animationSpec = tween(180),
                label = "pill-fg",
            )
            Text(
                segment.label.uppercase(),
                color = fg,
                style = PeachType.sortPill,
                modifier = Modifier
                    .clip(RoundedCornerShape(999.dp))
                    .background(bg)
                    .clickable { onSelected(segment.key) }
                    .padding(horizontal = PeachSpacing.sm, vertical = PeachSpacing.xs),
            )
        }
    }
}