package com.peachpasswords.ui.vault

import androidx.compose.foundation.clickable
import androidx.compose.foundation.background
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.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.foundation.shape.RoundedCornerShape
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.graphics.SolidColor
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.peachpasswords.ui.theme.LocalPeachAccent
import com.peachpasswords.ui.theme.PeachSpacing
import com.peachpasswords.ui.theme.PeachType
import com.peachpasswords.ui.theme.peachColors

/** Hard cap on additional URLs, matching the browser editor. */
const val MAX_ADDITIONAL_URLS = 5

/** Flush continuation rows for URLs beyond the primary URL field. */
@Composable
fun AdditionalUrlsEditor(
    urls: List<String>,
    onChange: (Int, String) -> Unit,
    onAdd: () -> Unit,
    onRemove: (Int) -> Unit,
) {
    val accent = LocalPeachAccent.current
    Column(Modifier.fillMaxWidth()) {
        urls.forEachIndexed { index, value ->
            Column(Modifier.fillMaxWidth()) {
                Row(
                    Modifier.fillMaxWidth().padding(horizontal = PeachSpacing.lg, vertical = PeachSpacing.sm),
                    verticalAlignment = Alignment.CenterVertically,
                ) {
                    Column(Modifier.weight(1f)) {
                        Text(
                            "URL ${index + 2}",
                            color = peachColors.T1,
                            fontFamily = PeachType.Mono,
                            fontSize = 8.sp,
                        )
                        Spacer(Modifier.height(4.dp))
                        BasicTextField(
                            value = value,
                            onValueChange = { onChange(index, it) },
                            singleLine = true,
                            textStyle = TextStyle(
                                color = peachColors.T0,
                                fontFamily = PeachType.Mono,
                                fontSize = 13.sp,
                            ),
                            cursorBrush = SolidColor(accent),
                            modifier = Modifier.fillMaxWidth().padding(vertical = 6.dp),
                        )
                    }
                    if (urls.size < MAX_ADDITIONAL_URLS) {
                        Text(
                            "+ add",
                            color = accent,
                            fontFamily = PeachType.Mono,
                            fontSize = 11.sp,
                            modifier = Modifier
                                .clip(RoundedCornerShape(6.dp))
                                .clickable(onClick = onAdd)
                                .padding(horizontal = PeachSpacing.sm, vertical = 8.dp),
                        )
                    }
                    Text(
                        "×",
                        color = peachColors.T2,
                        fontFamily = PeachType.Mono,
                        fontSize = 20.sp,
                        modifier = Modifier
                            .clip(RoundedCornerShape(6.dp))
                            .clickable { onRemove(index) }
                            .padding(start = PeachSpacing.sm, end = PeachSpacing.sm, top = 7.dp, bottom = 7.dp),
                    )
                }
                if (index < urls.lastIndex) {
                    Box(Modifier.fillMaxWidth().height(1.dp).background(peachColors.T3))
                }
            }
        }
    }
}