package com.suno.android.common_ui.components.text_fields

import android.content.res.Configuration
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.foundation.text.selection.LocalTextSelectionColors
import androidx.compose.foundation.text.selection.TextSelectionColors
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.suno.android.common_ui.components.buttons.RoundedPillContainer
import com.suno.android.common_ui.theme.ExtendedTheme
import com.suno.android.common_ui.theme.SunoTheme

@Composable
fun CustomModeInputTextField(
    modifier: Modifier = Modifier,
    textFieldPadding: PaddingValues? = PaddingValues(0.dp),
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
    placeHolderText: String,
    inputText: String,
    onValueChange: (String) -> Unit = {},
    disableTextInput: Boolean? = false,
    bottomContent: @Composable () -> Unit = {},
) {
    var value by remember { mutableStateOf(inputText) }

    // Update value when inputText changes
    LaunchedEffect(inputText) {
        value = inputText
    }

    Column(
        modifier = modifier.fillMaxWidth(),
    ) {
        val customTextSelectionColors = TextSelectionColors(
            handleColor = ExtendedTheme.colors.sunoPink,
            backgroundColor = ExtendedTheme.colors.sunoPink.copy(alpha = 0.3f),
        )

        CompositionLocalProvider(LocalTextSelectionColors provides customTextSelectionColors) {
            BasicTextField(
                enabled = disableTextInput != true,
                modifier = Modifier
                    .padding(textFieldPadding ?: PaddingValues(0.dp))
                    .weight(1f),
                value = value,
                onValueChange = {
                    value = it
                    onValueChange(it)
                },
                textStyle = ExtendedTheme.typography.body.copy(color = ExtendedTheme.colors.textPrimary),
                keyboardOptions = keyboardOptions,
                cursorBrush = SolidColor(ExtendedTheme.colors.aukPink),
                decorationBox = { innerTextField ->
                    innerTextField()
                    if (value.isEmpty()) {
                        Text(
                            text = placeHolderText,
                            style = ExtendedTheme.typography.body,
                            color = ExtendedTheme.colors.foregroundInactive,
                        )
                    }
                },
            )
        }

        Row(modifier = Modifier.padding(2.dp)) {
            bottomContent.invoke()
        }
    }
}

@Preview(
    showSystemUi = true,
    uiMode = Configuration.UI_MODE_NIGHT_NO,
)
@Composable
private fun LargeInputTextField_Preview() {
    SunoTheme {
        CustomModeInputTextField(
            modifier = Modifier
                .fillMaxWidth()
                .height(300.dp),
            placeHolderText = "Enter your own styles of music",
            inputText = "",
        )
    }
}

@Preview(
    showSystemUi = true,
    uiMode = Configuration.UI_MODE_NIGHT_YES,
)
@Composable
private fun SmallInputTextField_Preview() {
    SunoTheme {
        CustomModeInputTextField(
            modifier = Modifier
                .fillMaxWidth()
                .height(80.dp),
            placeHolderText = "Title",
            inputText = "",
        )
    }
}

@Preview(
    showSystemUi = true,
    uiMode = Configuration.UI_MODE_NIGHT_YES,
)
@Composable
private fun LargeInputTextField_WithContent_Preview() {
    SunoTheme {
        CustomModeInputTextField(
            modifier = Modifier
                .fillMaxWidth()
                .height(300.dp),
            placeHolderText = "Enter your own styles of music",
            inputText = "",
            bottomContent = {
                LazyRow(
                    modifier = Modifier.height(56.dp),
                    verticalAlignment = Alignment.CenterVertically,
                ) {
                    item {
                        RoundedPillContainer {
                            Text(
                                text = "Item 1",
                                style = ExtendedTheme.typography.smallBody,
                            )
                        }
                    }

                    item {
                        RoundedPillContainer {
                            Text(
                                text = "Item 2",
                                style = ExtendedTheme.typography.smallBody,
                            )
                        }
                    }

                    item {
                        RoundedPillContainer {
                            Text(
                                text = "Item 3",
                                style = ExtendedTheme.typography.smallBody,
                            )
                        }
                    }
                }
            },
        )
    }
}