package dev.lonami.talaria.ui

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.text.KeyboardActions
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.material.TextField
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalFocusManager
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import dev.lonami.talaria.R
import dev.lonami.talaria.ui.theme.TalariaTheme

enum class LoginStage {
    ASK_PHONE,
    ASK_CODE,
}

fun isPhoneValid(phone: String): Boolean = phone.trim('+', ' ').isNotEmpty()
fun isLoginCodeValid(code: String): Boolean = code.trim().count { it.isDigit() } == 5

@Composable
fun PhoneInput(phone: String, onPhoneChanged: (String) -> Unit, onSendCode: () -> Unit) {
    val focusManager = LocalFocusManager.current

    Text(stringResource(R.string.enter_phone))
    TextField(
        phone,
        label = { Text(stringResource(R.string.phone_international)) },
        placeholder = { Text(stringResource(R.string.phone_example)) },
        singleLine = true,
        keyboardOptions = KeyboardOptions(
            keyboardType = KeyboardType.Phone,
            imeAction = ImeAction.Done
        ),
        keyboardActions = KeyboardActions(onDone = { focusManager.clearFocus() }),
        modifier = Modifier.fillMaxWidth(),
        onValueChange = onPhoneChanged
    )
    Spacer(Modifier.height(16.dp))
    Button(
        enabled = isPhoneValid(phone),
        modifier = Modifier.fillMaxWidth(),
        onClick = onSendCode
    ) {
        Text(stringResource(R.string.send_otp))
    }
}

@Composable
fun OtpInput(otp: String, onOtpChanged: (String) -> Unit, onConfirmOtp: () -> Unit) {
    val focusManager = LocalFocusManager.current

    Text(stringResource(R.string.enter_otp))
    TextField(
        otp,
        label = { Text(stringResource(R.string.otp)) },
        placeholder = { Text(stringResource(R.string.otp_example)) },
        singleLine = true,
        keyboardOptions = KeyboardOptions(
            keyboardType = KeyboardType.Number,
            imeAction = ImeAction.Done
        ),
        keyboardActions = KeyboardActions(onDone = { focusManager.clearFocus() }),
        modifier = Modifier.fillMaxWidth(),
        onValueChange = onOtpChanged
    )
    Spacer(Modifier.height(16.dp))
    Button(
        enabled = isLoginCodeValid(otp),
        modifier = Modifier.fillMaxWidth(),
        onClick = onConfirmOtp
    ) {
        Text(stringResource(R.string.do_login))
    }
}

@Composable
fun LoginScreen() {
    var stage by remember { mutableStateOf(LoginStage.ASK_PHONE) }
    var phone by remember { mutableStateOf("") }
    var otp by remember { mutableStateOf("") }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        verticalArrangement = Arrangement.Center
    ) {
        Text(
            stringResource(R.string.welcome_to, stringResource(R.string.app_name)),
            fontSize = 24.sp,
            fontWeight = FontWeight.Bold,
            modifier = Modifier
                .fillMaxWidth()
                .wrapContentWidth(Alignment.CenterHorizontally)
                .padding(16.dp)
        )
        when (stage) {
            LoginStage.ASK_PHONE -> PhoneInput(
                phone,
                onPhoneChanged = { phone = it },
                onSendCode = { stage = LoginStage.ASK_CODE })
            LoginStage.ASK_CODE -> OtpInput(otp, onOtpChanged = { otp = it }, onConfirmOtp = {

            })
        }
    }
}

@Preview(showBackground = true)
@Composable
fun LoginPreview() {
    TalariaTheme {
        LoginScreen()
    }
}