package com.peachpasswords.ui.components

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.Surface
import androidx.compose.material3.Text
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.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(),
        color = peachColors.S1,
        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)
                        .defaultMinSize(minHeight = 34.dp)
                        .clickable { onSelected(segment.key) },
                    color = if (selected) accent else peachColors.S2,
                    contentColor = if (selected) peachColors.Bg 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
            if (selected) {
                Surface(
                    color = accent,
                    contentColor = peachColors.Bg,
                    shape = RoundedCornerShape(999.dp),
                ) {
                    Text(
                        segment.label.uppercase(),
                        style = PeachType.sortPill,
                        modifier = Modifier
                            .clip(RoundedCornerShape(999.dp))
                            .clickable { onSelected(segment.key) }
                            .padding(horizontal = PeachSpacing.sm, vertical = PeachSpacing.xs),
                    )
                }
            } else {
                Text(
                    segment.label.uppercase(),
                    color = peachColors.T2,
                    style = PeachType.sortPill,
                    modifier = Modifier
                        .clickable { onSelected(segment.key) }
                        .padding(vertical = PeachSpacing.xs),
                )
            }
        }
    }
}