package com.example.lexilearn.ui.views.pNavMaterial

import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.livedata.observeAsState
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.constraintlayout.compose.ConstraintLayout
import androidx.lifecycle.viewmodel.compose.viewModel
import androidx.navigation.NavController
import com.example.lexilearn.ui.components.FirebaseImage
import com.example.lexilearn.ui.components.GradientQuiz
import com.example.lexilearn.ui.components.HorizontalLine
import com.example.lexilearn.ui.theme.cAccent
import com.example.lexilearn.ui.theme.cGray
import com.example.lexilearn.ui.theme.ctextGray
import com.example.lexilearn.ui.theme.cwhite
import com.google.gson.Gson

@Composable
fun NavMaterialScreen(navController: NavController, materialId: String) {
    val viewModel: NavMaterialViewModel = viewModel()
    LaunchedEffect(materialId) {
        viewModel.fetchMaterial(materialId)
    }

    val materialList by viewModel.materialList.collectAsState()

    val isTTSInitialized = viewModel.isTTSInitialized.observeAsState(false)

    Surface(modifier = Modifier.fillMaxSize()) {
        GradientQuiz(
            navController = navController,
            headerText = "Belajar Hewan",
            modifier = Modifier.fillMaxSize()
        ) {
            Column(
                modifier = Modifier.fillMaxSize(),
                horizontalAlignment = Alignment.CenterHorizontally,
            ) {

                Spacer(modifier = Modifier.height(70.dp))
                HorizontalLine()
                LazyColumn(
                    modifier = Modifier.fillMaxSize(),
                    contentPadding = PaddingValues(16.dp)
                ) {
                    items(materialList) { chunk ->
                        ConstraintLayout(modifier = Modifier.fillMaxWidth()) {
                            val (space, boxItem, centerLine) = createRefs()
                            Box(modifier = Modifier
                                .background(color = cwhite, shape = RoundedCornerShape(12.dp))
                                .constrainAs(boxItem) {
                                    start.linkTo(parent.start)
                                    top.linkTo(parent.top)
                                }
                            ) {
                                Row(
                                    horizontalArrangement = Arrangement.SpaceEvenly,
                                    modifier = Modifier
                                        .fillMaxWidth()
                                        .padding(12.dp).clickable {
                                            println("testingkus")
//                                            val jsonList = Gson().toJson(chunk) // 🔥 Konversi List ke JSON String
//                                            navController.navigate("detailMaterial/$jsonList")
                                            navController.currentBackStackEntry?.savedStateHandle?.set("materialList", chunk)
                                            navController.navigate("detailMaterial")

                                        },
                                ) {
                                    chunk.forEachIndexed { index, material ->
                                        if(index!=1){
                                            Column(horizontalAlignment = Alignment.CenterHorizontally) {
                                                Box(
                                                    contentAlignment = Alignment.Center,
                                                    modifier = Modifier
                                                        .size(80.dp) // 🔥 Ukuran gambar
                                                        .clip(RoundedCornerShape(12.dp)) // 🔥 Memberikan sudut lengkung (radius)
                                                        .border(2.dp, cGray, RoundedCornerShape(12.dp)) // 🔥 Memberikan border
                                                ) {
                                                    FirebaseImage(path = material.image, contentScale = ContentScale.Crop, modifier = Modifier.matchParentSize()) // 🔥 Pastikan gambar mengisi Box
                                                }
                                                Spacer(modifier = Modifier.height(50.dp))
                                                Text(text = "${material.enName}", color = cAccent, fontSize = 18.sp, fontWeight = FontWeight.Bold)
                                                Text(text = "${material.idName}", color = ctextGray, fontSize = 14.sp, fontWeight = FontWeight.Bold)
                                            }
                                        }else{
                                            Column(horizontalAlignment = Alignment.CenterHorizontally) {
                                                Text(text = "${material.enName}", color = cAccent, fontSize = 18.sp, fontWeight = FontWeight.Bold)
                                                Text(text = "${material.idName}", color = ctextGray, fontSize = 14.sp, fontWeight = FontWeight.Bold)
                                                Spacer(modifier = Modifier.height(50.dp))
                                                FirebaseImage(path = material.image, modifier = Modifier.size(80.dp))
                                            }
                                        }

                                    }
                                }
                            }
                            Box(
                                modifier = Modifier
                                    .fillMaxWidth()
                                    .background(color = cGray)
                                    .height(2.dp)
                                    .constrainAs(centerLine) {
                                        top.linkTo(boxItem.top)
                                        bottom.linkTo(boxItem.bottom)
                                    })
                            Spacer(modifier = Modifier
                                .height(20.dp)
                                .constrainAs(space) {
                                    top.linkTo(boxItem.bottom)
                                    start.linkTo(boxItem.start)
                                })
                        }
                    }
                }
            }
        }
    }
}
