package com.example.initiateaphonecallapp.ui.LoginSms


import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.lifecycle.viewmodel.compose.viewModel

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun LoginSmsScreen(
    viewModel: LoginSmsViewModel = viewModel(),
    onLoginSuccess: (String) -> Unit = {},
    onSwitchToPasswordLogin: () -> Unit = {} // 切换到密码登录的回调
) {
    val loginState by viewModel.loginState.collectAsState()

    // 监听登录成功状态
    LaunchedEffect(loginState.isLoginSuccess) {
        if (loginState.isLoginSuccess && loginState.authToken != null) {
            onLoginSuccess(loginState.authToken!!)
        }
    }

    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.White)
            .padding(horizontal = 32.dp),
        contentAlignment = Alignment.Center
    ) {
        Column(
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center,
            modifier = Modifier.fillMaxWidth()
        ) {
            // Logo/标题区域
            Icon(
                painter = painterResource(id = android.R.drawable.ic_dialog_email),
                contentDescription = "App Logo",
                modifier = Modifier.size(80.dp),
                tint = Color(0xFF10A37F)
            )

            Spacer(modifier = Modifier.height(40.dp))

            // 标题
            Text(
                text = "验证码登录",
                fontSize = 24.sp,
                fontWeight = FontWeight.Bold,
                color = Color.Black,
                textAlign = TextAlign.Center,
                modifier = Modifier.fillMaxWidth()
            )

            Spacer(modifier = Modifier.height(8.dp))

            Text(
                text = "请输入手机号获取验证码",
                fontSize = 14.sp,
                color = Color.Gray,
                textAlign = TextAlign.Center,
                modifier = Modifier.fillMaxWidth()
            )

            Spacer(modifier = Modifier.height(40.dp))

            // 手机号输入框
            OutlinedTextField(
                value = loginState.phone,
                onValueChange = viewModel::onPhoneChange,
                label = { Text("手机号") },
                placeholder = { Text("请输入您的手机号") },
                singleLine = true,
                modifier = Modifier
                    .fillMaxWidth()
                    .clip(RoundedCornerShape(12.dp)),
                colors = TextFieldDefaults.outlinedTextFieldColors(
                    focusedBorderColor = Color(0xFF10A37F),
                    unfocusedBorderColor = Color(0xFFE5E5E5),
                    focusedTextColor = Color.Black,
                    focusedPlaceholderColor = Color(0xFF999999),
                    unfocusedTextColor = Color.Black,
                    unfocusedPlaceholderColor = Color(0xFF999999)
                ),
                keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Phone)
            )

            Spacer(modifier = Modifier.height(20.dp))

            // 验证码输入框和获取验证码按钮
            Row(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.spacedBy(12.dp)
            ) {
                // 验证码输入框
                OutlinedTextField(
                    value = loginState.code,
                    onValueChange = viewModel::onCodeChange,
                    label = { Text("验证码") },
                    placeholder = { Text("请输入验证码") },
                    singleLine = true,
                    modifier = Modifier
                        .weight(1f)
                        .clip(RoundedCornerShape(12.dp)),
                    colors = TextFieldDefaults.outlinedTextFieldColors(
                        focusedBorderColor = Color(0xFF10A37F),
                        unfocusedBorderColor = Color(0xFFE5E5E5),
                        focusedTextColor = Color.Black,
                        focusedPlaceholderColor = Color(0xFF999999),
                        unfocusedTextColor = Color.Black,
                        unfocusedPlaceholderColor = Color(0xFF999999)
                    ),
                    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number)
                )

                // 获取验证码按钮
                val countdown = loginState.countdown
                val isGetCodeLoading = loginState.isGetCodeLoading
                Button(
                    onClick = { viewModel.getCode() },
                    modifier = Modifier
                        .width(100.dp)
                        .height(56.dp)
                        .clip(RoundedCornerShape(12.dp)),
                    colors = ButtonDefaults.buttonColors(
                        containerColor = if (countdown > 0) Color(0xFFCCCCCC) else Color(0xFF10A37F),
                        disabledContainerColor = Color(0xFFCCCCCC)
                    ),
                    enabled = countdown == 0 && !isGetCodeLoading
                ) {
                    if (isGetCodeLoading) {
                        CircularProgressIndicator(
                            modifier = Modifier.size(20.dp),
                            color = Color.White,
                            strokeWidth = 2.dp
                        )
                    } else {
                        Text(
                            text = if (countdown > 0) "${countdown}s" else "获取验证码",
                            fontSize = 12.sp,
                            fontWeight = FontWeight.Medium
                        )
                    }
                }
            }

            // 错误信息显示
            if (loginState.errorMessage.isNotEmpty()) {
                Spacer(modifier = Modifier.height(16.dp))
                Text(
                    text = loginState.errorMessage,
                    color = Color.Red,
                    fontSize = 14.sp,
                    textAlign = TextAlign.Center,
                    modifier = Modifier.fillMaxWidth()
                )
            }

            Spacer(modifier = Modifier.height(40.dp))

            // 登录按钮
            Button(
                onClick = {
                    viewModel.loginSms()
                },
                modifier = Modifier
                    .fillMaxWidth()
                    .height(50.dp)
                    .clip(RoundedCornerShape(12.dp)),
                colors = ButtonDefaults.buttonColors(
                    containerColor = Color(0xFF10A37F),
                    disabledContainerColor = Color(0xFFCCCCCC)
                ),
                enabled = !loginState.isLoading
            ) {
                if (loginState.isLoading) {
                    CircularProgressIndicator(
                        modifier = Modifier.size(20.dp),
                        color = Color.White,
                        strokeWidth = 2.dp
                    )
                } else {
                    Text(
                        text = "登录",
                        fontSize = 16.sp,
                        fontWeight = FontWeight.Medium
                    )
                }
            }

            Spacer(modifier = Modifier.height(20.dp))

            // 切换到密码登录
            TextButton(
                onClick = onSwitchToPasswordLogin
            ) {
                Text(
                    text = "使用密码登录",
                    fontSize = 14.sp,
                    color = Color(0xFF10A37F)
                )
            }
        }
    }
}