package com.example.lexilearn.ui.views.pDetailMaterial

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.material.icons.Icons
import androidx.compose.material.icons.filled.VolumeUp
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
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.graphics.Color
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.data.model.MaterialDataModel
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.ctextBlack
import com.example.lexilearn.ui.theme.ctextGray
import com.example.lexilearn.ui.theme.cwhite

@Composable
fun DetailMaterialScreen(navController: NavController, materialListData: List<MaterialDataModel>) {
    val viewModel: DetailMaterialViewModel = viewModel()
    LaunchedEffect(materialListData) {
        viewModel.fetchMaterial(materialListData)
    }

    val materialList by viewModel.materialList.collectAsState()

    val isTTSInitialized = viewModel.isTTSInitialized.observeAsState(false)

    Surface(modifier = Modifier.fillMaxSize()) {
        GradientQuiz(
            navController = navController,
            headerText = "Detail 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) { dataMat ->
                        ConstraintLayout(modifier = Modifier.fillMaxWidth()) {
                            val (refButton) = createRefs()
                            IconButton(
                                onClick = {
                                    viewModel.speakLetter(dataMat.enName)
                                },
                                modifier = Modifier
                                    .size(80.dp).constrainAs(refButton) {
                                        top.linkTo(parent.top)
                                        end.linkTo(parent.end)
                                    } // 🔥 Ukuran tombol bisa disesuaikan
                            ) {
                                Icon(
                                    imageVector = Icons.Filled.VolumeUp, // 🔥 Ikon Speaker dari Material Icons
                                    contentDescription = "Speaker Icon",
                                    tint = Color.Black // 🔥 Warna ikon
                                )
                            }
                            Column {
                                Card(
                                    modifier = Modifier
                                        .fillMaxWidth()
                                        .border(2.dp, color = ctextBlack, RoundedCornerShape(8.dp))
                                        .clickable {
                                            viewModel.speakLetter(dataMat.enName)
                                        },
                                    shape = RoundedCornerShape(8.dp),
                                    colors = CardDefaults.cardColors(containerColor = Color.White)
                                ) {
                                    Row(verticalAlignment = Alignment.CenterVertically) {
                                        Card(
                                            modifier = Modifier
                                                .border(
                                                    2.dp,
                                                    color = ctextBlack,
                                                    RoundedCornerShape(8.dp)
                                                ),
                                            shape = RoundedCornerShape(8.dp),
                                            colors = CardDefaults.cardColors(containerColor = Color.White)
                                        ) {
                                            Column(
                                                horizontalAlignment = Alignment.CenterHorizontally,
                                                modifier = Modifier.padding(12.dp)
                                            ) {
                                                Box(
                                                    contentAlignment = Alignment.Center,
                                                    modifier = Modifier
                                                        .size(120.dp) // 🔥 Ukuran gambar
                                                        .clip(RoundedCornerShape(12.dp)) // 🔥 Memberikan sudut lengkung (radius)
                                                ) {
                                                    FirebaseImage(
                                                        path = dataMat.image,
                                                        contentScale = ContentScale.Crop,
                                                        modifier = Modifier.matchParentSize()
                                                    ) // 🔥 Pastikan gambar mengisi Box
                                                }
                                                Spacer(modifier = Modifier.height(20.dp))
                                                Text(
                                                    text = "${dataMat.enName}",
                                                    color = cAccent,
                                                    fontSize = 20.sp,
                                                    fontWeight = FontWeight.Bold
                                                )
                                                Text(
                                                    text = "${dataMat.idName}",
                                                    color = ctextGray,
                                                    fontSize = 16.sp,
                                                    fontWeight = FontWeight.Bold
                                                )
                                            }
                                        }
                                        Text(
                                            text = "${dataMat.idDescription}",
                                            color = ctextGray,
                                            fontSize = 14.sp,
                                            modifier = Modifier.padding(12.dp)
                                        )
                                    }
                                }
                                Spacer(modifier = Modifier.height(20.dp))
                            }
                        }
                    }
                }
            }
        }
    }
}
