package com.example.lexilearn.ui.views.pLearnNumber

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.lazy.grid.itemsIndexed
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.livedata.observeAsState
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.lifecycle.viewmodel.compose.viewModel
import androidx.navigation.NavController
import com.example.lexilearn.ui.components.ButtonHome
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.ctextBlack

@Composable
fun LearnNumberScreen(navController: NavController) {
    val viewModel: LearNumberViewModel = viewModel()

    val isTTSInitialized = viewModel.isTTSInitialized.observeAsState(false)

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

                Spacer(modifier = Modifier.height(70.dp))
                HorizontalLine()
                Spacer(modifier = Modifier.height(120.dp))
                LazyVerticalGrid(
                    columns = GridCells.Fixed(3),
                    modifier = Modifier
                        .fillMaxSize()
                        .padding(16.dp, 0.dp, 16.dp, 0.dp)
                ) {
                    // Gunakan itemsIndexed untuk iterasi menggunakan index dan item
                    itemsIndexed(viewModel.alphabetList) { index, model ->
                        // Setiap item di grid adalah Button dengan huruf dan cara bacaannya

                        ButtonHome(
                            onClick = { viewModel.speakLetter(model.alpha) },
                            modifier = Modifier
                                .fillMaxWidth()
                                .aspectRatio(1f)
                        ) {

                            Column(
                                horizontalAlignment = Alignment.CenterHorizontally,
                            ) {
                                Text(
                                    text = model.alpha,
                                    fontWeight = FontWeight.Bold,
                                    fontSize = 30.sp,
                                    color = ctextBlack
                                )

                                Text(
                                    text = model.enRead,
                                    fontWeight = FontWeight.Bold,
                                    fontSize = 18.sp,
                                    color = cAccent
                                )
                            }
                        }
                    }
                }

                // Pesan jika TTS gagal diinisialisasi
                if (!isTTSInitialized.value) {
                    Text(text = "TTS gagal diinisialisasi", color = cAccent)
                }

                // taruh grid disini
                ButtonHome(onClick = { viewModel.speakLetter("A") }) {
                    Column(horizontalAlignment = Alignment.CenterHorizontally) {
                        Text(
                            text = "A",
                            fontWeight = FontWeight.Bold,
                            fontSize = 30.sp,
                            color = ctextBlack
                        )
                        Text(
                            text = "ei",
                            fontWeight = FontWeight.Bold,
                            fontSize = 18.sp,
                            color = cAccent
                        )
                    }
                }

                // Menampilkan loading atau pesan error jika TTS gagal
                if (isTTSInitialized.value) {
                    // TTS berhasil diinisialisasi
                } else {
                    Text(text = "TTS gagal diinisialisasi", color = cAccent)
                }
            }
        }
    }
}
