package eu.gaudian.translator.view.composable

import androidx.compose.animation.animateContentSize
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.BoxScope
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.rotate
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import eu.gaudian.translator.R
import eu.gaudian.translator.ui.theme.semanticColors


@Composable
fun AppBox(
    modifier: Modifier = Modifier,
    title: String? = null,
    text: String? = null,
    expandable: Boolean = false,
    initiallyExpanded: Boolean = false,
    contentAlignment: Alignment = Alignment.TopStart,
    propagateMinConstraints: Boolean = false,
    content: @Composable BoxScope.() -> Unit,
) {
    // State to track whether the box is expanded
    var isExpanded by remember { mutableStateOf(initiallyExpanded) }

    // Rotation animation for the chevron icon
    @Suppress("HardCodedStringLiteral") val rotationState by animateFloatAsState(
        targetValue = if (isExpanded) 180f else 0f,
        label = "Chevron Rotation"
    )

    Box(
        modifier = modifier
            .clip(ComponentDefaults.NoShape)
            .animateContentSize().padding(0.dp),
        propagateMinConstraints = propagateMinConstraints
    ) {
        Column(modifier = Modifier.fillMaxWidth()) {

            // Header Row: Rendered if there is a title, text, or if it is expandable
            if (title != null || text != null || expandable) {
                Row(
                    modifier = Modifier
                        .fillMaxWidth()
                        .clickable(enabled = expandable) { isExpanded = !isExpanded }
                        .padding(16.dp), // Standard internal padding for the header
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    // Title and Text column
                    Column(modifier = Modifier.weight(1f)) {
                        if (!title.isNullOrBlank()) {
                            Text(
                                text = title,
                                style = MaterialTheme.typography.titleMedium,
                                color = MaterialTheme.colorScheme.onSurface
                            )
                        }
                        if (!text.isNullOrBlank()) {
                            Text(
                                text = text,
                                style = MaterialTheme.typography.bodySmall,
                                color = MaterialTheme.colorScheme.onSurfaceVariant
                            )
                        }
                    }

                    // Chevron Icon (Only if expandable)
                    if (expandable) {
                        Icon(
                            imageVector = AppIcons.ArrowDropDown,
                            contentDescription = if (isExpanded) stringResource(R.string.label_collapse) else stringResource(R.string.label_expand),
                            modifier = Modifier.rotate(rotationState),
                            tint = MaterialTheme.colorScheme.onSurface
                        )
                    }
                }
            }

            // Content Area logic
            // 1. If NOT expandable: Show content always.
            // 2. If expandable: Show content only if isExpanded is true.
            if (!expandable || isExpanded) {
                Box(
                    modifier = Modifier.fillMaxWidth().fillMaxSize().padding(0.dp),
                    contentAlignment = contentAlignment
                ) {
                    content()
                }
            }
        }
    }
}

@Suppress("HardCodedStringLiteral")
@Preview
@Composable
fun AppBoxPreview() {
    AppBox(
        modifier = Modifier.background(color = MaterialTheme.semanticColors.success),
        contentAlignment = Alignment.Center
    ) {
        Text(text = "This is a preview of the AppBox")
    }
}