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

import android.content.res.Configuration
import androidx.compose.animation.Crossfade
import androidx.compose.animation.core.tween
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
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.material3.TextField
import androidx.compose.material3.TextFieldDefaults
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.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.suno.android.common_ui.theme.ExtendedTheme
import com.suno.android.common_ui.theme.SunoTheme
import com.suno.android.common_res.R as CommonResR

@Composable
fun OneBoxInputTextField(
    modifier: Modifier = Modifier,
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
    placeHolderText: String,
    inputText: String,
    onValueChange: (String) -> Unit = {},
) {
    var value by remember { mutableStateOf(inputText) }

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

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

    CompositionLocalProvider(LocalTextSelectionColors provides customTextSelectionColors) {
        TextField(
            modifier = modifier
                .height(300.dp)
                .fillMaxWidth(),
            keyboardOptions = keyboardOptions,
            value = value,
            textStyle = ExtendedTheme.typography.largeSubtitle,
            onValueChange = {
                value = it
                onValueChange.invoke(it)
            },
            placeholder = {
                Crossfade(
                    targetState = placeHolderText,
                    animationSpec = tween(durationMillis = 300),
                ) { targetText ->
                    Text(
                        text = targetText,
                        style = ExtendedTheme.typography.largeSubtitle,
                        color = ExtendedTheme.colors.foregroundInactive,
                    )
                }
            },
            colors = TextFieldDefaults.colors(
                unfocusedContainerColor = Color.Transparent,
                focusedContainerColor = Color.Transparent,
                unfocusedIndicatorColor = Color.Transparent,
                focusedIndicatorColor = Color.Transparent,
                cursorColor = ExtendedTheme.colors.sunoPink,
                focusedTextColor = ExtendedTheme.colors.textSecondary,
                unfocusedTextColor = ExtendedTheme.colors.textSecondary,
            ),
        )
    }
}

@Preview(
    showSystemUi = true,
    uiMode = Configuration.UI_MODE_NIGHT_NO,
)
@Composable
private fun OneBoxInputTextField_Preview() {
    SunoTheme {
        OneBoxInputTextField(
            modifier = Modifier.fillMaxWidth(),
            placeHolderText = stringResource(CommonResR.string.enter_own_styles_of_music),
            inputText = "",
        )
    }
}

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

@Preview(
    showSystemUi = true,
    uiMode = Configuration.UI_MODE_NIGHT_YES,
)
@Composable
private fun OneBoxInputTextField_WithContent_Preview() {
    SunoTheme {
        OneBoxInputTextField(
            placeHolderText = "Enter your own styles of music!",
            inputText = "",
        )
    }
}