package com.example.uitugasakhir


import androidx.compose.foundation.Image
import androidx.compose.foundation.clickable
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.runtime.mutableStateOf
import com.example.app.ui.theme.Inria_Regular
import com.example.app.ui.theme.Inter
import androidx.navigation.NavController
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.draw.clip
import androidx.compose.foundation.background
import androidx.compose.runtime.remember
import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue


@Composable
fun OtomatisScreen(navController: NavController) {

    var selected by remember { mutableStateOf("Manual") }
    var selectedPump by remember { mutableStateOf("Matikan pompa") }

    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
                ) {

                    Image(
                        painter = painterResource(id = R.drawable.back),
                        contentDescription = "kembali",
                        modifier = Modifier
                            .size(15.dp)
                            .offset(x = -160.dp, y = 1.dp)
                            .clickable {
                                navController.popBackStack()
                            }
                    )

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

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

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

                Text(
                    text = "Mode Penyiraman",
                    fontSize = 15.sp,
                    fontFamily = Inria_Regular,
                    fontWeight = FontWeight.Medium,
                    color = Color(0XFF6B6666).copy(alpha = 0.7f),
                    modifier = Modifier
                        .align(Alignment.Start)
                        .padding(horizontal = 28.dp)
                )

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

                Box(
                    modifier = Modifier
                        .wrapContentHeight()
                        .padding(bottom = 15.dp)
                        .padding(horizontal = 25.dp),
                    contentAlignment = Alignment.TopCenter
                ) {
                    Card(
                        modifier = Modifier
                            .size(width = 333.dp, height = 100.dp),
                        shape = RoundedCornerShape(24.dp),
                        colors = CardDefaults.cardColors(
                            containerColor = Color(0xFFEDEDED)
                        )
                    ) {
                        Row(
                            modifier = Modifier
                                .fillMaxWidth()
                                .padding(horizontal = 12.dp)
                                .offset(y = 23.dp)
                                .height(55.dp)
                                .clip(RoundedCornerShape(50.dp))
                                .background(Color(0xFFD9D9D9))
                                .padding(4.dp),
                            verticalAlignment = Alignment.CenterVertically
                        ) {

                            // OTOMATIS
                            Box(
                                modifier = Modifier
                                    .weight(1f)
                                    .fillMaxHeight()
                                    .clip(RoundedCornerShape(20.dp))
                                    .background(
                                        if (selected == "Otomatis") Color(0xFF2F6F4E) else Color.Transparent
                                    )
                                    .clickable { selected = "Otomatis"
                                        navController.navigate("otomatis") },

                                contentAlignment = Alignment.Center
                            ) {
                                Text(
                                    text = "Otomatis",
                                    color = if (selected == "Otomatis") Color.White else Color.Black
                                )
                            }

                            // MANUAL
                            Box(
                                modifier = Modifier
                                    .weight(1f)
                                    .fillMaxHeight()
                                    .clip(RoundedCornerShape(20.dp))
                                    .background(
                                        if (selected == "Manual") Color(0xFF2F6F4E) else Color.Transparent
                                    )
                                    .clickable { selected = "Manual"
                                        navController.navigate("manual")},
                                contentAlignment = Alignment.Center
                            ) {
                                Text(
                                    text = "Manual",
                                    color = if (selected == "Manual") Color.White else Color.Black
                                )
                            }
                        }
                    }}

                Text(
                    text = "Pemantauan sensor",
                    fontSize = 15.sp,
                    fontFamily = Inria_Regular,
                    fontWeight = FontWeight.Medium,
                    color = Color(0XFF6B6666).copy(alpha = 0.7f),
                    modifier = Modifier
                        .align(Alignment.Start)
                        .padding(horizontal = 28.dp)
                )

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

                Box(
                    modifier = Modifier
                        .wrapContentHeight()
                        .padding(bottom = 15.dp)
                        .padding(horizontal = 25.dp),
                    contentAlignment = Alignment.TopCenter
                ) {
                    Card(
                        modifier = Modifier
                            .size(width = 333.dp, height = 100.dp),
                        shape = RoundedCornerShape(24.dp),
                        colors = CardDefaults.cardColors(
                            containerColor = Color(0xFFEDEDED)
                        )
                    ) {}}


                Text(
                    text = "Penyiraman",
                    fontSize = 15.sp,
                    fontFamily = Inria_Regular,
                    fontWeight = FontWeight.Medium,
                    color = Color(0XFF6B6666).copy(alpha = 0.7f),
                    modifier = Modifier
                        .align(Alignment.Start)
                        .padding(horizontal = 28.dp)
                )

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

                Box(
                    modifier = Modifier
                        .wrapContentHeight()
                        .padding(bottom = 15.dp)
                        .padding(horizontal = 25.dp),
                    contentAlignment = Alignment.TopCenter
                ) {
                    Card(
                        modifier = Modifier
                            .size(width = 333.dp, height = 100.dp),
                        shape = RoundedCornerShape(24.dp),
                        colors = CardDefaults.cardColors(
                            containerColor = Color(0xFFEDEDED)
                        )
                    ) {
                        Row(
                            modifier = Modifier
                                .fillMaxWidth()
                                .padding(horizontal = 12.dp)
                                .offset(y = 23.dp)
                                .height(55.dp)
                                .clip(RoundedCornerShape(50.dp))
                                .background(Color(0xFFD9D9D9))
                                .padding(4.dp),
                            verticalAlignment = Alignment.CenterVertically
                        ) {

                            // OTOMATIS
                            Box(
                                modifier = Modifier
                                    .weight(1f)
                                    .height(60.dp)
                                    .clip(RoundedCornerShape(20.dp))
                                    .background(
                                        if (selectedPump == "Hidupkan pompa") Color(0xFF2F6F4E) else Color.Transparent
                                    )
                                    .clickable { selectedPump = "Hidupkan pompa" },
                                contentAlignment = Alignment.Center
                            ) {
                                Text(
                                    text = "Hidupkan pompa",
                                    color = if (selectedPump == "Hidupkan pompa") Color.White else Color.Black
                                )
                            }

                            // MANUAL
                            Box(
                                modifier = Modifier
                                    .weight(1f)
                                    .height(60.dp)
                                    .clip(RoundedCornerShape(20.dp))
                                    .background(
                                        if (selectedPump == "Matikan pompa") Color(0xFFD81F23) else Color.Transparent
                                    )
                                    .clickable { selectedPump = "Matikan pompa" },
                                contentAlignment = Alignment.Center
                            ) {
                                Text(
                                    text = "Matikan pompa",
                                    color = if (selectedPump == "Matikan pompa") Color.White else Color.Black
                                )
                            }
                        }
                    }}

                Text(
                    text = "Riwayat penyiraman",
                    fontSize = 15.sp,
                    fontFamily = Inria_Regular,
                    fontWeight = FontWeight.Medium,
                    color = Color(0XFF6B6666).copy(alpha = 0.7f),
                    modifier = Modifier
                        .align(Alignment.Start)
                        .padding(horizontal = 28.dp)
                )

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

                Box(
                    modifier = Modifier
                        .wrapContentHeight()
                        .padding(bottom = 15.dp)
                        .padding(horizontal = 25.dp),
                    contentAlignment = Alignment.TopCenter
                ) {
                    Card(
                        modifier = Modifier
                            .size(width = 333.dp, height = 100.dp),
                        shape = RoundedCornerShape(24.dp),
                        colors = CardDefaults.cardColors(
                            containerColor = Color(0xFFEDEDED)
                        )
                    ) {}}
            }
        }
    }
}

