package com.syaroful.agrilinkvocpro.commodity_price_prediction_feature.presentation.prediction

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import com.syaroful.agrilinkvocpro.presentation.screen.detail.component.DynamicBottomSheet
import com.syaroful.agrilinkvocpro.presentation.theme.MainGreen

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun PricePredictionScreen() {
    val commodityOptions = listOf("Labu Kabocha", "Melon", "Strawberry", "kentang", "Bayam")
    val locationOptions = listOf("Malang", "Jombang", "Surabaya")

    Scaffold(
        topBar = {
            TopAppBar(
                title = {
                    Column(
                        horizontalAlignment = Alignment.CenterHorizontally,
                        modifier = Modifier.fillMaxWidth()
                    ) {
                        Text(
                            "Prediksi Harga Komoditas",
                            style = MaterialTheme.typography.titleMedium
                        )
                    }
                },
                navigationIcon = {
                    IconButton(onClick = { }) {
                        Icon(Icons.AutoMirrored.Filled.ArrowBack, contentDescription = "Back")
                    }
                },
            )
        }
    ) { innerPadding ->
        Column(
            modifier = Modifier.padding(innerPadding)
        ) {
            Column(
                modifier = Modifier
                    .padding(16.dp)
                    .background(
                        color = MaterialTheme.colorScheme.surfaceContainerHigh,
                        shape = RoundedCornerShape(12.dp)
                    )
                    .padding(16.dp),
                verticalArrangement = Arrangement.spacedBy(12.dp)
            ) {
                Text(text = "Pilih Komoditas", style = MaterialTheme.typography.labelLarge)
                DynamicBottomSheet(
                    width = 1f,
                    options = commodityOptions,
                    modifier = Modifier.background(
                        color = MaterialTheme.colorScheme.surfaceContainer,
                        shape = RoundedCornerShape(8.dp)
                    )
                ) {

                }
                Text(text = "Pilih Lokasi", style = MaterialTheme.typography.labelLarge)
                DynamicBottomSheet(
                    width = 1f,
                    options = locationOptions,
                    modifier = Modifier.background(
                        color = MaterialTheme.colorScheme.surfaceContainer,
                        shape = RoundedCornerShape(8.dp)
                    )
                ) {

                }
            }
            Column(
                modifier = Modifier
                    .padding(16.dp)
                    .fillMaxWidth()
                    .background(
                        color = MaterialTheme.colorScheme.surfaceContainerHigh,
                        shape = RoundedCornerShape(12.dp)
                    )
                    .padding(16.dp),
                verticalArrangement = Arrangement.spacedBy(12.dp)
            ) {
                Text(
                    text = "Harga Hari Ini",
                    style = MaterialTheme.typography.labelMedium,
                    modifier = Modifier.alpha(0.5f)
                )
                Row(
                    horizontalArrangement = Arrangement.SpaceBetween
                ) {
                    Text(
                        text = "Rp 30.000  ",
                        style = MaterialTheme.typography.headlineMedium.copy(fontWeight = FontWeight.W400)
                    )
                    Text(
                        text = "↑ 2.5%",
                        style = MaterialTheme.typography.bodyLarge,
                        color = MainGreen
                    )
                }
                Text(
                    text = "Prediksi Besok",
                    style = MaterialTheme.typography.labelMedium,
                    modifier = Modifier.alpha(0.5f)
                )
                Row(
                    horizontalArrangement = Arrangement.SpaceBetween
                ) {
                    Text(
                        text = "Rp 28.000  ",
                        style = MaterialTheme.typography.headlineMedium,
                        color = MainGreen
                    )
                    Text(
                        text = "↓ 7,6%",
                        style = MaterialTheme.typography.bodyLarge,
                        color = Color.Red
                    )
                }
                PriceChart(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(140.dp),
                    day = listOf(1, 2, 3, 4, 5, 6, 7),
                    values = listOf(5000.0, 6000.0, 4000.0, 7000.0, 8500.0, 5450.0, 6400.0),
                )
            }
        }
    }

}