package eu.gaudian.translator.view.translation

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.animateContentSize
import androidx.compose.animation.core.FastOutSlowInEasing
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.tween
import androidx.compose.animation.expandHorizontally
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.shrinkHorizontally
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.RowScope
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
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.rotate
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import eu.gaudian.translator.R
import eu.gaudian.translator.view.composable.AppIcons
import eu.gaudian.translator.view.composable.SourceLanguageDropdown
import eu.gaudian.translator.view.composable.TargetLanguageDropdown
import eu.gaudian.translator.view.hints.Hint
import eu.gaudian.translator.view.hints.WithHint
import eu.gaudian.translator.viewmodel.LanguageViewModel

/**
 * A shared composable for a modern, pill-shaped action bar.
 */
@Composable
fun ActionBar(
    modifier: Modifier = Modifier,
    containerColor: Color = MaterialTheme.colorScheme.surfaceVariant,
    contentHorizontalArrangement: Arrangement.Horizontal = Arrangement.SpaceEvenly,
    content: @Composable RowScope.() -> Unit
) {
    Surface(
        // FIXED: Enforce standard height (48.dp) to align with ExpandableActionBar
        modifier = modifier.height(48.dp),
        shape = RoundedCornerShape(percent = 50),
        color = containerColor,
        tonalElevation = 2.dp
    ) {
        Row(
            modifier = Modifier.padding(horizontal = 0.dp), //0 here is okay since every icon has enpough padding
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = contentHorizontalArrangement,
            content = content
        )
    }
}

@Composable
fun TopBarActions(
    languageViewModel: LanguageViewModel,
    onSettingsClick: () -> Unit,
    onNavigateBack: (() -> Unit)? = null,
    hintContent: Hint? = null
) {

    ActionBar(modifier = Modifier.padding(horizontal = 8.dp, vertical = 8.dp)) {
        if (onNavigateBack != null) {
            IconButton(onClick = onNavigateBack) {
                Icon(
                    imageVector = AppIcons.ArrowBack,
                    contentDescription = stringResource(R.string.cd_navigate_back)
                )
            }
        }

        if (hintContent != null) {
            WithHint(hintContent = hintContent) {
            }
        }

        LanguageSelectorBar(
            languageViewModel = languageViewModel,
            modifier = Modifier.weight(1f)
        )

        IconButton(onClick = onSettingsClick) {
            Icon(imageVector = AppIcons.Settings, contentDescription = stringResource(R.string.translation_prompt_settings))
        }
    }
}

@Composable
fun LanguageSelectorBar(languageViewModel: LanguageViewModel, modifier: Modifier = Modifier) {
    var isSwapped by remember { mutableStateOf(false) }
    @Suppress("HardCodedStringLiteral") val rotationAngle by animateFloatAsState(
        targetValue = if (isSwapped) 180f else 0f,
        animationSpec = tween(durationMillis = 300),
        label = "rotation"
    )

    Row(
        modifier = modifier,
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.SpaceEvenly
    ) {
        Box(modifier = Modifier.weight(1f)) {
            SourceLanguageDropdown(languageViewModel = languageViewModel, autoEnabled = true, iconEnabled = false, noBorder = true)
        }

        IconButton(onClick = {
            isSwapped = !isSwapped
            languageViewModel.switchLanguages()
        }) {
            Icon(
                imageVector = AppIcons.SwapHoriz,
                contentDescription = stringResource(R.string.cd_switch_languages),
                modifier = Modifier.rotate(rotationAngle)
            )
        }

        Box(modifier = Modifier.weight(1f)) {
            TargetLanguageDropdown(languageViewModel = languageViewModel, iconEnabled = false,noBorder = true)
        }
    }
}

/**
 * A modern, expandable action bar that shows a single button when collapsed
 * and reveals a row of actions when expanded.
 */
@Composable
fun ExpandableActionBar(
    modifier: Modifier = Modifier,
    expandIcon: ImageVector = AppIcons.ArrowRight,
    content: @Composable RowScope.() -> Unit
) {
    var isExpanded by remember { mutableStateOf(false) }

    Surface(
        // FIXED: Enforce standard height (48.dp)
        modifier = modifier.wrapContentWidth().height(48.dp),
        shape = RoundedCornerShape(percent = 50),
        color = MaterialTheme.colorScheme.surfaceVariant,
        tonalElevation = 2.dp
    ) {

        Row(
            modifier = Modifier
                .animateContentSize(animationSpec = tween(50, easing = FastOutSlowInEasing))
                .padding(horizontal = 0.dp),
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.Start
        ) {

            IconButton(
                onClick = { isExpanded = !isExpanded },
                // FIXED: Default size matches other buttons
            ) {
                val rotation by animateFloatAsState(targetValue = if (isExpanded) 180f else 0f)
                Icon(
                    imageVector = expandIcon,
                    contentDescription = stringResource(R.string.label_show_more_actions),
                    modifier = Modifier.rotate(rotation),
                    tint = MaterialTheme.colorScheme.onSurfaceVariant
                )
            }

            AnimatedVisibility(
                visible = isExpanded,
                enter = expandHorizontally(expandFrom = Alignment.Start) + fadeIn(),
                exit = shrinkHorizontally(shrinkTowards = Alignment.Start) + fadeOut()
            ) {
                Row(
                    verticalAlignment = Alignment.CenterVertically,
                    horizontalArrangement = Arrangement.spacedBy(0.dp),
                    content = content
                )
            }
        }
    }
}