package com.example.uitugasakhir

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.ui.text.style.TextAlign
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.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.runtime.*
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.spring
import androidx.compose.runtime.*
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.foundation.gestures.detectTapGestures
import com.example.uitugasakhir.ViewModel.SensorViewModel
import com.example.uitugasakhir.ViewModel.MainViewModel




@Composable
fun DashboardScreen(
    navController: NavController,
    sensorVm: SensorViewModel,
    mainVm: MainViewModel
) {

    val unreadCount = sensorVm.unreadCount

    Box(modifier = Modifier.fillMaxSize()) {

        // HEADER
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(160.dp),
            contentAlignment = Alignment.TopCenter
        ) {
            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 = "Beranda",
                        fontSize = 16.sp,
                        fontFamily = Inter,
                        fontWeight = FontWeight.Bold,
                        color = Color.White
                    )
                }
            }
        }

        // BODY
        Card(
            modifier = Modifier
                .padding(top = 64.dp)
                .fillMaxSize(),
            shape = RoundedCornerShape(topStart = 24.dp),
            colors = CardDefaults.cardColors(
                containerColor = Color.White
            )
        ) {

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

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

                Text(
                    text = "Selamat Datang!",
                    fontSize = 20.sp,
                    fontFamily = Inria_Bold,
                    fontWeight = FontWeight.Bold,
                    modifier = Modifier
                        .align(Alignment.Start)
                        .padding(horizontal = 28.dp)
                )

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

                Text(
                    text = "Monitoring & Penyiraman",
                    fontSize = 15.sp,
                    fontFamily = Inria_Regular,
                    modifier = Modifier
                        .align(Alignment.Start)
                        .padding(horizontal = 28.dp)
                )

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

                Text(
                    text = "Kopi & Kakao",
                    fontSize = 15.sp,
                    fontFamily = Inria_Regular,
                    modifier = Modifier
                        .align(Alignment.Start)
                        .padding(horizontal = 28.dp)
                )

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

                // 🔥 CARD MENU (SUDAH FIX)
                Card(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(horizontal = 25.dp),
                    shape = RoundedCornerShape(24.dp),
                    colors = CardDefaults.cardColors(
                        containerColor = Color(0xFF2F6F4E)
                    )
                ) {
                    Column(
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(20.dp),
                        verticalArrangement = Arrangement.spacedBy(15.dp)
                    ) {

                        Row(
                            modifier = Modifier.fillMaxWidth(),
                            horizontalArrangement = Arrangement.spacedBy(15.dp)
                        ) {
                            MenuCard(
                                "Monitoring &\nPenyiraman",
                                modifier = Modifier.weight(1f),
                                imageRes = R.drawable.sprinkler_irigation,
                                onClick = { navController.navigate("manual") }
                            )

                            MenuCard(
                                title = "Notifikasi",
                                modifier = Modifier.weight(1f),
                                imageRes = R.drawable.notification,
                                badgeCount = unreadCount,
                                onClick = {
                                    navController.navigate("notifikasi")
                                }
                            )
                        }

                        Row(
                            modifier = Modifier.fillMaxWidth(),
                            horizontalArrangement = Arrangement.spacedBy(15.dp)
                        ) {
                            MenuCard(
                                "Riwayat",
                                modifier = Modifier.weight(1f),
                                imageRes = R.drawable.chronometer,
                                onClick = { navController.navigate("riwayat") }
                            )

                            MenuCard(
                                "Pengaturan",
                                modifier = Modifier.weight(1f),
                                imageRes = R.drawable.cogwheel,
                                onClick = { navController.navigate("pengaturan") }
                            )
                        }
                    }
                }
            }
        }
    }
}

@Composable
fun MenuCard(
    title: String,
    modifier: Modifier = Modifier,
    badgeCount: Int = 0,
    onClick: () -> Unit,
    imageRes: Int
) {
    var pressed by remember { mutableStateOf(false) }

    val scale by animateFloatAsState(
        targetValue = if (pressed) 1.1f else 1f, // zoom
        animationSpec = spring(
            dampingRatio = 0.5f,
            stiffness = 300f
        ),
        label = ""
    )

    Box(
        modifier = modifier
            .height(150.dp)
            .width(140.dp)
            .graphicsLayer {
                scaleX = scale
                scaleY = scale
            }
            .pointerInput(Unit) {
                detectTapGestures(
                    onPress = {
                        pressed = true
                        tryAwaitRelease() // tunggu sampai dilepas
                        pressed = false
                    },
                    onTap = {
                        onClick()
                    }
                )
            }
    ) {

        Card(
            modifier = Modifier.fillMaxSize(),
            shape = RoundedCornerShape(24.dp),
            colors = CardDefaults.cardColors(
                containerColor = Color(0xFFDCEFE3)
            )
        ) {
            Box(
                contentAlignment = Alignment.Center,
                modifier = Modifier
                    .fillMaxSize()
                    .padding(16.dp)
            ) {

                Column {

                    Image(
                        painter = painterResource(id = imageRes),
                        contentDescription = title,
                        modifier = Modifier
                            .size(30.dp)
                            .align(Alignment.CenterHorizontally)
                    )

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

                    Text(
                        text = title,
                        textAlign = TextAlign.Center
                    )
                }
            }
        }

        // 🔴 BADGE
        if (badgeCount > 0) {
            Box(
                modifier = Modifier
                    .align(Alignment.TopEnd)
                    .offset(x = (-6).dp, y = 6.dp)
                    .size(22.dp)
                    .background(Color.Red, RoundedCornerShape(50)),
                contentAlignment = Alignment.Center
            ) {
                Text(
                    text = badgeCount.toString(),
                    color = Color.White,
                    fontSize = 11.sp,
                    fontWeight = FontWeight.Bold
                )
            }
        }
    }
}