package com.example.uitugasakhir

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.runtime.Composable
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import com.example.app.ui.theme.Inria_Bold
import com.example.app.ui.theme.Inria_Regular
import com.example.app.ui.theme.Inter
import androidx.navigation.NavController
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.graphics.ColorFilter
import android.content.Context
import android.widget.Toast
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.text.input.VisualTransformation
import com.android.volley.toolbox.StringRequest
import com.android.volley.toolbox.Volley
import com.android.volley.Request



@Composable
fun RegisterScreen(navController: NavController) {

    var nama by remember { mutableStateOf("") }
    var email by remember { mutableStateOf("") }
    var password by remember { mutableStateOf("") }
    var confirmPassword by remember { mutableStateOf("") }
    var passwordVisible by remember { mutableStateOf(false) }
    var confirmPasswordVisible by remember { mutableStateOf(false) }

    val context = LocalContext.current

    fun registerUser(
        nama: String,
        email: String,
        password: String,
        confirmPassword: String,
        context: Context,
        navController: NavController
    ) {
        if (password != confirmPassword) {
            Toast.makeText(context, "Password tidak sama", Toast.LENGTH_SHORT).show()
            return
        }

        val url = "http://kopikaosmartsystem.my.id/register.php" // GANTI IP KAMU

        val request = object : StringRequest(
            Request.Method.POST, url,
            { response ->
                if (response.contains("Register berhasil")) {
                    Toast.makeText(context, "Berhasil daftar", Toast.LENGTH_SHORT).show()
                    navController.navigate("login")
                } else {
                    Toast.makeText(context, response, Toast.LENGTH_SHORT).show()
                }
            },
            { error ->
                Toast.makeText(context, "Error: ${error.message}", Toast.LENGTH_LONG).show()
            }
        ) {
            override fun getParams(): MutableMap<String, String> {
                return hashMapOf(
                    "nama" to nama,
                    "email" to email,
                    "password" to password
                )
            }
        }

        val queue = Volley.newRequestQueue(context)
        queue.add(request)
    }

    Box(
        modifier = Modifier
            .fillMaxSize()
    ) {

        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(160.dp),
            contentAlignment = Alignment.TopCenter
        ) {

            // Card hijau di atas
            Card(
                modifier = Modifier
                    .fillMaxWidth(),
                shape = RoundedCornerShape(0.dp),
                colors = CardDefaults.cardColors(
                    containerColor = Color(0xFF2F6F4E)
                )
            ) {

                Box(
                    modifier = Modifier
                        .fillMaxSize()
                        .padding(top = 22.dp),
                    contentAlignment = Alignment.TopCenter
                ) {

                    Text(
                        text = "Halaman Login",
                        fontSize = 16.sp,
                        fontFamily = Inter,
                        fontWeight = FontWeight.Bold,
                        color = Color.White
                    )
                }
            }
        }

        Card(
            modifier = Modifier
                .padding(top = 58.dp)
                .fillMaxSize(),
            shape = RoundedCornerShape(topStart = 24.dp, topEnd = 0.dp),
            colors = CardDefaults.cardColors(
                containerColor = Color(0xFFFFFFFF)
            )
        ) {

            Column(
                modifier = Modifier
                    .fillMaxSize(),
                verticalArrangement = Arrangement.Top,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {

                Image(
                    painter = painterResource(id = R.drawable.kopikakao),
                    contentDescription = "Logo Kopi",
                    Modifier.size(200.dp)
                )

                Text(
                    text = "Selamat Datang!",
                    fontSize = 20.sp,
                    fontFamily = Inria_Bold,
                    fontWeight = FontWeight.Bold,
                    color = Color.Black
                )

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

                Text(
                    text = "Silahkan masukkan email dan password anda",
                    fontSize = 15.sp,
                    fontFamily = Inria_Regular,
                    fontWeight = FontWeight.Medium,
                    color = Color.Black.copy(alpha = 0.7f)
                )

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

                Box(
                    modifier = Modifier
                        .wrapContentHeight()
                        .padding(bottom = 10.dp)
                        .padding(horizontal = 40.dp),
                    contentAlignment = Alignment.TopCenter
                ) {
                    Card(
                        modifier = Modifier
                            .size(width = 276.dp, height = 350.dp),
                        shape = RoundedCornerShape(24.dp),
                        colors = CardDefaults.cardColors(
                            containerColor = Color(0xFF2F6F4E)
                        )
                    ) {
                        Column(
                            modifier = Modifier
                                .fillMaxSize()
                                .padding(20.dp),
                            verticalArrangement = Arrangement.Top,
                            horizontalAlignment = Alignment.CenterHorizontally
                        ) {
                            Card(
                                modifier = Modifier
                                    .size(width = 235.dp, height = 46.dp),
                                shape = RoundedCornerShape(25.dp),
                                colors = CardDefaults.cardColors(
                                    containerColor = Color(0xFFFFFFFF)
                                )
                            ) {

                                Row(
                                    verticalAlignment = Alignment.CenterVertically,
                                    modifier = Modifier.fillMaxSize()
                                ) {

                                    Spacer(modifier = Modifier.width(10.dp))

                                    Image(
                                        painter = painterResource(id = R.drawable.user),
                                        contentDescription = "Nama",
                                        modifier = Modifier
                                            .size(20.dp)
                                            .padding(start = 5.dp),
                                        colorFilter = ColorFilter.tint(Color.Gray)
                                    )

                                    Spacer(modifier = Modifier.width(10.dp))

                                    BasicTextField(
                                        value = nama,
                                        onValueChange = { nama = it },
                                        modifier = Modifier.fillMaxWidth(),
                                        singleLine = true,
                                        decorationBox = { innerTextField ->
                                            if (nama.isEmpty()) {
                                                Text(
                                                    "Nama",
                                                    color = Color.Gray
                                                )
                                            }
                                            innerTextField()
                                        }
                                    )
                                }
                            }

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

                            Card(
                                modifier = Modifier
                                    .size(width = 235.dp, height = 46.dp),
                                shape = RoundedCornerShape(25.dp),
                                colors = CardDefaults.cardColors(
                                    containerColor = Color(0xFFFFFFFF)
                                )
                            ) {

                                Row(
                                    verticalAlignment = Alignment.CenterVertically,
                                    modifier = Modifier.fillMaxSize()
                                ) {

                                    Spacer(modifier = Modifier.width(10.dp))

                                    Image(
                                        painter = painterResource(id = R.drawable.mail),
                                        contentDescription = "Email",
                                        modifier = Modifier
                                            .size(20.dp)
                                            .padding(start = 5.dp),
                                        colorFilter = ColorFilter.tint(Color.Gray)
                                    )

                                    Spacer(modifier = Modifier.width(10.dp))

                                    BasicTextField(
                                        value = email,
                                        onValueChange = { email = it },
                                        modifier = Modifier.fillMaxWidth(),
                                        singleLine = true,
                                        decorationBox = { innerTextField ->
                                            if (email.isEmpty()) {
                                                Text(
                                                    "Email",
                                                    color = Color.Gray
                                                )
                                            }
                                            innerTextField()
                                        }
                                    )
                                }
                            }

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

                            Card(
                                modifier = Modifier
                                    .size(width = 235.dp, height = 46.dp),
                                shape = RoundedCornerShape(25.dp),
                                colors = CardDefaults.cardColors(
                                    containerColor = Color(0xFFFFFFFF)
                                )
                            ) {

                                Row(
                                    verticalAlignment = Alignment.CenterVertically,
                                    modifier = Modifier.fillMaxSize()
                                ) {

                                    Spacer(modifier = Modifier.width(10.dp))

                                    Image(
                                        painter = painterResource(id = R.drawable.password),
                                        contentDescription = "Password",
                                        modifier = Modifier
                                            .size(20.dp)
                                            .padding(start = 5.dp),
                                        colorFilter = ColorFilter.tint(Color.Gray)
                                    )

                                    Spacer(modifier = Modifier.width(10.dp))

                                    BasicTextField(
                                        value = password,
                                        onValueChange = { password = it },
                                        modifier = Modifier.weight(1f),
                                        singleLine = true,

                                        // 🔒 Enkripsi tampilan password
                                        visualTransformation = if (passwordVisible)
                                            VisualTransformation.None
                                        else
                                            PasswordVisualTransformation(),

                                        decorationBox = { innerTextField ->
                                            if (password.isEmpty()) {
                                                Text(
                                                    "Password",
                                                    color = Color.Gray
                                                )
                                            }
                                            innerTextField()
                                        }
                                    )

                                    // 👁️ Icon show/hide password
                                    IconButton(onClick = {
                                        passwordVisible = !passwordVisible
                                    }) {
                                        Icon(
                                            painter = painterResource(
                                                id = if (passwordVisible)
                                                    R.drawable.ic_eye_open   // mata terbuka
                                                else
                                                    R.drawable.ic_eye_closed // mata tertutup
                                            ),
                                            contentDescription = "Toggle Password",
                                            modifier = Modifier.size(18.dp),
                                            tint = Color.Gray
                                        )
                                    }
                                }
                            }

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

                            Card(
                                modifier = Modifier
                                    .size(width = 235.dp, height = 46.dp),
                                shape = RoundedCornerShape(25.dp),
                                colors = CardDefaults.cardColors(
                                    containerColor = Color(0xFFFFFFFF)
                                )
                            ) {

                                Row(
                                    verticalAlignment = Alignment.CenterVertically,
                                    modifier = Modifier.fillMaxSize()
                                ) {

                                    Spacer(modifier = Modifier.width(10.dp))

                                    Image(
                                        painter = painterResource(id = R.drawable.password),
                                        contentDescription = "ConfirmPassword",
                                        modifier = Modifier
                                            .size(20.dp)
                                            .padding(start = 5.dp),
                                        colorFilter = ColorFilter.tint(Color.Gray)
                                    )

                                    Spacer(modifier = Modifier.width(10.dp))

                                    BasicTextField(
                                        value = confirmPassword,
                                        onValueChange = { confirmPassword = it },
                                        modifier = Modifier.weight(1f),
                                        singleLine = true,

                                        // 🔒 Enkripsi tampilan password
                                        visualTransformation = if (confirmPasswordVisible)
                                            VisualTransformation.None
                                        else
                                            PasswordVisualTransformation(),

                                        decorationBox = { innerTextField ->
                                            if (confirmPassword.isEmpty()) {
                                                Text(
                                                    "Konfirmasi password",
                                                    color = Color.Gray
                                                )
                                            }
                                            innerTextField()
                                        }
                                    )

                                    // 👁️ Icon show/hide password
                                    IconButton(onClick = {
                                        confirmPasswordVisible = !confirmPasswordVisible
                                    }) {
                                        Icon(
                                            painter = painterResource(
                                                id = if (confirmPasswordVisible)
                                                    R.drawable.ic_eye_open   // mata terbuka
                                                else
                                                    R.drawable.ic_eye_closed // mata tertutup
                                            ),
                                            contentDescription = "Toggle Password",
                                            modifier = Modifier.size(18.dp),
                                            tint = Color.Gray
                                        )
                                    }
                                }
                            }

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

                            Card(
                                onClick = { registerUser(nama, email, password, confirmPassword, context, navController) },
                                modifier = Modifier
                                    .size(width = 235.dp, height = 46.dp),
                                shape = RoundedCornerShape(25.dp),
                                colors = CardDefaults.cardColors(
                                    containerColor = Color(0xFF22C55E)
                                )
                            ) {
                                Text(
                                    text = "Daftar",
                                    fontSize = 16.sp,
                                    fontFamily = Inter,
                                    fontWeight = FontWeight.Normal,
                                    color = Color.White,
                                    modifier = Modifier.padding(top = 13.dp)
                                        .align(Alignment.CenterHorizontally)
                                )
                            }
                        }
                    }
                }
            }
        }
    }
}


