package com.syaroful.agrilinkvocpro.presentation.screen.detail.component

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
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.graphics.painter.Painter
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.syaroful.agrilinkvocpro.R
import com.syaroful.agrilinkvocpro.presentation.theme.MainGreen

@Composable
fun DataSensorBar(
    label: String,
    percentage: Float,
    painter: Painter,
    value: Number = 0
) {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier
            .background(
                color = MaterialTheme.colorScheme.surfaceContainer,
                shape = RoundedCornerShape(8.dp)
            )
            .fillMaxWidth()
            .padding(16.dp)
    ) {
        Image(
            painter = painter,
            contentDescription = "Sensor Icon"
        )
        Spacer(modifier = Modifier.width(16.dp))
        Column(
        ) {
            Row(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.SpaceBetween
            ) {
                Text(label, style = MaterialTheme.typography.titleMedium)
                Text("$value", style = MaterialTheme.typography.titleMedium)
            }
            Spacer(modifier = Modifier.height(8.dp))
            CustomLinearProgressIndicator(
                progress = percentage,
                modifier = Modifier.fillMaxWidth()
            )
        }
    }
}

@Composable
private fun CustomLinearProgressIndicator(
    progress: Float,
    modifier: Modifier = Modifier,
    color: Color = MainGreen,
    backgroundColor: Color = MainGreen.copy(alpha = 0.1f)
) {
    Box(
        modifier = modifier
            .height(6.dp)
            .clip(RoundedCornerShape(8.dp)) // pastikan tidak ada rounded corner
            .background(backgroundColor)
    ) {
        Box(
            modifier = Modifier
                .fillMaxHeight()
                .fillMaxWidth(progress)
                .background(color)
        )
    }
}


@Preview
@Composable
fun DataSensorBarPreview() {
    DataSensorBar(
        label = "Nitrogen",
        percentage = 20f,
        painter = painterResource(id = R.drawable.npk),

        )
}

