package id.iiyh.inatrading.core.ui.components

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.outlined.ArrowBack
import androidx.compose.material3.Icon
import androidx.compose.material3.ripple
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import id.iiyh.inatrading.R
import id.iiyh.inatrading.core.ui.theme.BrandRed
import id.iiyh.inatrading.core.ui.theme.OnSurface

/**
 * Top App Bar untuk inner screen (tanpa BottomNav).
 *
 * Layout: [Back Arrow (merah)] ——— [Logo center] ———
 *
 * Frosted glass sama seperti main TopAppBar.
 */
@Composable
fun InaInnerTopAppBar(
    onBack: (() -> Unit)?,
    modifier: Modifier = Modifier,
) {
    Box(
        modifier = modifier
            .fillMaxWidth()
            .background(Color.White.copy(alpha = 0.85f))
            .padding(horizontal = 20.dp, vertical = 14.dp),
    ) {
        // Back arrow — kiri (hidden when onBack is null)
        if (onBack != null) {
            Box(
                modifier = Modifier
                    .size(40.dp)
                    .align(Alignment.CenterStart)
                    .clickable(
                        interactionSource = remember { MutableInteractionSource() },
                        indication        = ripple(bounded = false, radius = 20.dp),
                        onClick           = onBack,
                    ),
                contentAlignment = Alignment.Center,
            ) {
                Icon(
                    imageVector        = Icons.AutoMirrored.Outlined.ArrowBack,
                    contentDescription = stringResource(R.string.topbar_menu),
                    tint               = BrandRed,
                    modifier           = Modifier.size(24.dp),
                )
            }
        }

        // Logo — center
        InaLogo(
            modifier = Modifier.align(Alignment.Center),
            size     = LogoSize.Small,
        )
    }
}
