@file:Suppress("HardCodedStringLiteral")

package eu.gaudian.translator.view.composable

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.RowScope
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBackIosNew
import androidx.compose.material3.CenterAlignedTopAppBar
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBarColors
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.rememberModalBottomSheetState
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.graphics.vector.ImageVector
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import eu.gaudian.translator.R
import eu.gaudian.translator.ui.theme.ThemePreviews
import eu.gaudian.translator.view.hints.Hint
import eu.gaudian.translator.view.hints.HintBottomSheet
import eu.gaudian.translator.view.hints.LocalShowHints

@Composable
fun AppTopAppBar(
    modifier: Modifier = Modifier,
    title: String,
    onNavigateBack: (() -> Unit)? = null,
    navigationIcon: @Composable (() -> Unit)? = null,
    actions: @Composable RowScope.() -> Unit = {},
    colors: TopAppBarColors = TopAppBarDefaults.topAppBarColors(),
    hintContent: Hint? = null
) {
    val sheetState = rememberModalBottomSheetState()
    var showBottomSheet by remember { mutableStateOf(false) }

    // Changed to CenterAlignedTopAppBar to perfectly match the design requirements
    CenterAlignedTopAppBar(
        modifier = modifier.height(56.dp),
        windowInsets = WindowInsets(0.dp),
        colors = colors,
        title = {
            val showHints = LocalShowHints.current
            if (showHints && hintContent != null) {
                // Simplified row: keeps the title and hint icon neatly centered together
                Row(
                    verticalAlignment = Alignment.CenterVertically,
                    horizontalArrangement = Arrangement.Center
                ) {
                    Text(
                        text = title,
                        style = MaterialTheme.typography.titleLarge,
                        fontWeight = FontWeight.Bold,
                        modifier = Modifier.weight(1f),
                        textAlign = androidx.compose.ui.text.style.TextAlign.Center
                    )
                    IconButton(onClick = { showBottomSheet = true }) {
                        Icon(
                            imageVector = AppIcons.Help,
                            contentDescription = stringResource(R.string.show_hint),
                            tint = MaterialTheme.colorScheme.secondary
                        )
                    }
                }
            } else {
                Text(
                    text = title,
                    style = MaterialTheme.typography.titleLarge,
                    fontWeight = FontWeight.Bold,
                    textAlign = androidx.compose.ui.text.style.TextAlign.Center
                )
            }
        },
        navigationIcon = {
            if (onNavigateBack != null) {
                IconButton(
                    onClick = onNavigateBack,
                    modifier = Modifier
                        .clip(CircleShape)
                        .background(MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.5f))
                ) {
                    Icon(
                        imageVector = Icons.Default.ArrowBackIosNew,
                        contentDescription = "Back",
                        modifier = Modifier.size(18.dp),
                        tint = MaterialTheme.colorScheme.primary
                    )
                }
            } else if (navigationIcon != null) {
                navigationIcon()
            }
        },
        actions = actions
    )

    if (showBottomSheet) {
        hintContent?.let {
            HintBottomSheet(
                onDismissRequest = {
                    @Suppress("AssignedValueIsNeverRead")
                    showBottomSheet = false
                },
                sheetState = sheetState,
                content = it

            )
        }
    }
}

/**
 * A composable that acts as a TopAppBar, containing a back navigation icon
 * and an [AppTabLayout].
 */
@Composable
fun <T : TabItem> TabbedTopAppBar(
    tabs: List<T>,
    selectedTab: T,
    onTabSelected: (T) -> Unit,
    onNavigateBack: () -> Unit,
    modifier: Modifier = Modifier
) {
    Surface(
        modifier = modifier.fillMaxWidth(),
        color = MaterialTheme.colorScheme.surface
    ) {
        Row(
            modifier = Modifier.fillMaxWidth(),
            verticalAlignment = Alignment.CenterVertically
        ) {
            // Updated back icon here as well to keep your entire app consistent!
            IconButton(
                onClick = onNavigateBack,
                modifier = Modifier
                    .padding(start = 8.dp, end = 4.dp)
                    .clip(CircleShape)
                    .background(MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.5f))
            ) {
                Icon(
                    imageVector = AppIcons.ArrowBack,
                    contentDescription = stringResource(R.string.cd_navigate_back),
                    tint = MaterialTheme.colorScheme.primary
                )
            }

            AppTabLayout(
                tabs = tabs,
                selectedTab = selectedTab,
                onTabSelected = onTabSelected,
                modifier = Modifier.weight(1f)
            )
        }
    }
}

// ... [Previews remain exactly the same below]

@Suppress("HardCodedStringLiteral")
@ThemePreviews
@Composable
fun TabbedTopAppBarPreview() {
    data class SampleTabItem(override val title: String, override val icon: ImageVector) : TabItem

    val tabs = listOf(
        SampleTabItem("All Vocabulary", AppIcons.Home),
        SampleTabItem("Flashcards", AppIcons.Search),
        SampleTabItem("Settings", AppIcons.Settings)
    )

    var selectedTab by remember { mutableStateOf(tabs.first()) }

    MaterialTheme {
        TabbedTopAppBar(
            tabs = tabs,
            selectedTab = selectedTab,
            onTabSelected = { selectedTab = it },
            onNavigateBack = {}
        )
    }
}

@Suppress("HardCodedStringLiteral")
@ThemePreviews
@Composable
fun AppTopAppBarPreview() {
    AppTopAppBar(
        title = "Previwe Title"
    )
}

@ThemePreviews
@Composable
fun AppTopAppBarWithNavigationIconPreview() {
    AppTopAppBar(
        title = "Preview Title",
        onNavigateBack = {}
    )
}

@ThemePreviews
@Composable
fun AppTopAppBarWithActionsPreview() {
    AppTopAppBar(
        title = "Preview Title",
        actions = {
            IconButton(onClick = {}) {
                Icon(AppIcons.Settings, contentDescription = stringResource(R.string.title_settings))
            }
            IconButton(onClick = {}) {
                Icon(AppIcons.ArrowBack, contentDescription = null)
            }
        }
    )
}