@file:Suppress("AssignedValueIsNeverRead")

package eu.gaudian.translator.view.composable

import androidx.compose.animation.animateColorAsState
import androidx.compose.foundation.ScrollState
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.Column
import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.foundation.layout.IntrinsicSize
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.navigationBarsPadding
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.DropdownMenu
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.LocalContentColor
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.ModalBottomSheet
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.OutlinedTextFieldDefaults
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.material3.TextFieldDefaults
import androidx.compose.material3.rememberModalBottomSheetState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
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.geometry.Size
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.layout.onGloballyPositioned
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.DpOffset
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.toSize
import androidx.compose.ui.window.Dialog
import androidx.compose.ui.window.PopupProperties
import eu.gaudian.translator.R

// =========================================
// UNIFIED DROPDOWN STYLES & CONSTANTS
// =========================================

object DropdownDefaults {
    val shape = RoundedCornerShape(8.dp)
    val itemPaddingHorizontal = 8.dp
    val itemPaddingVertical = 2.dp

    @Composable
    fun containerColor(): Color = MaterialTheme.colorScheme.surface
    
    @Composable
    fun itemBackground(selected: Boolean): Color {
        return if (selected) {
            MaterialTheme.colorScheme.primaryContainer.copy(alpha = 0.6f)
        } else {
            Color.Transparent
        }
    }
    
    @Composable
    fun itemContentColor(selected: Boolean, enabled: Boolean): Color {
        return when {
            !enabled -> MaterialTheme.colorScheme.onSurface.copy(alpha = 0.38f)
            selected -> MaterialTheme.colorScheme.primary
            else -> MaterialTheme.colorScheme.onSurface
        }
    }
}

/**
 * A drop-in replacement for [androidx.compose.material3.DropdownMenu] that opens
 * as a BottomSheet. Compatible with the standard M3 signature.
 */

@Suppress("unused", "HardCodedStringLiteral")
@Composable
fun AppDropDownMenu(
    expanded: Boolean,
    onDismissRequest: () -> Unit,
    modifier: Modifier = Modifier,
    offset: DpOffset = DpOffset(0.dp, 0.dp), // Retained for signature compatibility
    scrollState: ScrollState = rememberScrollState(),
    properties: PopupProperties = PopupProperties(focusable = true), // Retained for signature compatibility
    content: @Composable ColumnScope.() -> Unit
) {
    if (expanded) {
        // skipPartiallyExpanded = true ensures it behaves more like a menu
        // (fully open or completely closed) rather than a peekable sheet.
        val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)

        ModalBottomSheet(
            onDismissRequest = onDismissRequest,
            sheetState = sheetState,
            // Container color, shape, etc., can be linked to your DropdownDefaults here if needed.
        ) {
            Column(
                modifier = modifier
                    .fillMaxWidth()
                    .verticalScroll(scrollState)
            ) {
                // Execute standard DropdownMenuItems here
                content()

                // Extra padding to ensure the last item isn't hidden behind the system navigation bar
                Spacer(modifier = Modifier.navigationBarsPadding().height(16.dp))
            }
        }
    }
}

// =========================================
// UNIFIED DROPDOWN CONTAINER
// =========================================

/**
 * A unified dropdown container that provides consistent styling and behavior
 * for all dropdown menus in the app.
 * 
 * @param expanded Whether the dropdown is currently expanded
 * @param onDismissRequest Callback when the dropdown should be dismissed
 * @param onExpandRequest Callback when the dropdown should expand (click on button)
 * @param buttonText The text to display on the dropdown button
 * @param modifier Modifier for the container
 * @param enabled Whether the dropdown is enabled
 * @param showSearch Whether to show the search field at the top of the dropdown
 * @param searchQuery Current search query (only used if showSearch is true)
 * @param onSearchQueryChange Callback when search query changes (only used if showSearch is true)
 * @param searchPlaceholder Placeholder text for search field
 * @param showDoneButton Whether to show a "Done" button at the bottom (for multi-select)
 * @param onDoneClick Callback when Done button is clicked
 * @param buttonContent Custom content for the button (if null, uses default text-based button)
 * @param dropdownContent Content to display inside the dropdown menu
 */
@Composable
fun AppDropdownContainer(
    expanded: Boolean,
    onDismissRequest: () -> Unit,
    onExpandRequest: () -> Unit,
    buttonText: String,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    showSearch: Boolean = false,
    searchQuery: String = "",
    onSearchQueryChange: ((String) -> Unit)? = null,
    searchPlaceholder: String? = null,
    showDoneButton: Boolean = false,
    onDoneClick: (() -> Unit)? = null,
    buttonContent: @Composable (() -> Unit)? = null,
    dropdownContent: @Composable ColumnScope.() -> Unit
) {
    Box(
        modifier = modifier.fillMaxWidth(),
        contentAlignment = Alignment.TopCenter
    ) {
        // Dropdown Button
        if (buttonContent != null) {
            AppOutlinedButton(
                onClick = onExpandRequest,
                modifier = Modifier.fillMaxWidth(),
                enabled = enabled
            ) {
                buttonContent()
            }
        } else {
            AppOutlinedButton(
                shape = DropdownDefaults.shape,
                onClick = onExpandRequest,
                modifier = Modifier.fillMaxWidth(),
                enabled = enabled
            ) {
                Row(
                    modifier = Modifier.fillMaxWidth(),
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    Text(
                        text = buttonText,
                        modifier = Modifier.weight(1f),
                        textAlign = TextAlign.Center,
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                    Icon(
                        imageVector = if (expanded) AppIcons.ArrowDropUp else AppIcons.ArrowDropDown,
                        contentDescription = if (expanded)
                            stringResource(R.string.cd_collapse)
                        else
                            stringResource(R.string.cd_expand)
                    )
                }
            }
        }

        // Bottom Sheet "Dropdown" Menu
        if (expanded) {
            val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)

            ModalBottomSheet(
                onDismissRequest = onDismissRequest,
                sheetState = sheetState,
                containerColor = DropdownDefaults.containerColor()
            ) {
                Column(
                    modifier = Modifier.fillMaxWidth()
                ) {
                    // Pinned Search field (optional)
                    if (showSearch && onSearchQueryChange != null) {
                        DropdownSearchField(
                            searchQuery = searchQuery,
                            onSearchQueryChange = onSearchQueryChange,
                            placeholder = {
                                Text(searchPlaceholder ?: stringResource(R.string.text_search))
                            }
                        )
                        HorizontalDivider()
                    }

                    // Scrollable Content
                    // Weight ensures this takes up available space without pushing
                    // the done button off-screen if the list is very long.
                    Column(
                        modifier = Modifier
                            .fillMaxWidth()
                            .weight(1f, fill = false)
                            .verticalScroll(rememberScrollState())
                    ) {
                        dropdownContent()
                    }

                    // Pinned Done button (optional, for multi-select)
                    if (showDoneButton && onDoneClick != null) {
                        HorizontalDivider(modifier = Modifier.padding(vertical = 4.dp))
                        AppButton(
                            onClick = {
                                onDoneClick()
                                onDismissRequest() // Often expected to close on 'Done'
                            },
                            modifier = Modifier
                                .fillMaxWidth()
                                .padding(horizontal = 8.dp, vertical = 4.dp)
                        ) {
                            Text(stringResource(R.string.label_done))
                        }
                    }

                    // Extra padding for the system navigation bar so the bottom
                    // item/button isn't cut off by gesture hints or software keys.
                    Spacer(modifier = Modifier.navigationBarsPadding().height(16.dp))
                }
            }
        }
    }
}

// =========================================
// UNIFIED DROPDOWN SEARCH FIELD
// =========================================

/**
 * A standardized search field for dropdown menus.
 * Provides consistent styling across all dropdowns with search functionality.
 */
@Composable
fun DropdownSearchField(
    modifier: Modifier = Modifier,
    searchQuery: String,
    onSearchQueryChange: (String) -> Unit,
    placeholder: @Composable () -> Unit = { Text(stringResource(R.string.text_search)) },
) {
    Row(
        modifier = modifier
            .fillMaxWidth()
            .padding(horizontal = 8.dp, vertical = 8.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Icon(
            imageVector = AppIcons.Search,
            contentDescription = null,
            modifier = Modifier.size(20.dp),
            tint = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.6f)
        )
        Spacer(modifier = Modifier.width(8.dp))
        TextField(
            value = searchQuery,
            onValueChange = onSearchQueryChange,
            placeholder = placeholder,
            singleLine = true,
            colors = TextFieldDefaults.colors(
                focusedContainerColor = Color.Transparent,
                unfocusedContainerColor = Color.Transparent,
                disabledContainerColor = Color.Transparent,
                focusedIndicatorColor = Color.Transparent,
                unfocusedIndicatorColor = Color.Transparent,
                cursorColor = MaterialTheme.colorScheme.primary,
            ),
            modifier = Modifier.weight(1f)
        )
        if (searchQuery.isNotBlank()) {
            IconButton(
                onClick = { onSearchQueryChange("") },
                modifier = Modifier.size(24.dp)
            ) {
                Icon(
                    imageVector = AppIcons.Close,
                    contentDescription = stringResource(R.string.cd_clear_search),
                    modifier = Modifier.size(16.dp)
                )
            }
        }
    }
}

@Suppress("HardCodedStringLiteral")
@Preview(showBackground = true, name = "Search Field - Empty")
@Composable
fun DropdownSearchFieldEmptyPreview() {
    MaterialTheme {
        Surface {
            DropdownSearchField(
                searchQuery = "",
                onSearchQueryChange = {}
            )
        }
    }
}

@Suppress("HardCodedStringLiteral")
@Preview(showBackground = true, name = "Search Field - Filled")
@Composable
fun DropdownSearchFieldFilledPreview() {
    MaterialTheme {
        Surface {
            DropdownSearchField(
                searchQuery = "English",
                onSearchQueryChange = {}
            )
        }
    }
}

@Suppress("HardCodedStringLiteral")
@Preview(showBackground = true, name = "Search Field - With Close Button")
@Composable
fun DropdownSearchFieldWithClosePreview() {
    MaterialTheme {
        Surface {
            DropdownSearchField(
                searchQuery = "German",
                onSearchQueryChange = {}
                // Providing this triggers the right-most close icon
            )
        }
    }
}

@Suppress("HardCodedStringLiteral")
@Preview(showBackground = true, name = "Search Field - Interactive")
@Composable
fun DropdownSearchFieldInteractivePreview() {
    MaterialTheme {
        Surface {
            var query by remember { mutableStateOf("") }
            DropdownSearchField(
                searchQuery = query,
                onSearchQueryChange = { query = it }
            )
        }
    }
}

// =========================================
// UNIFIED DROPDOWN HEADER
// =========================================

/**
 * A standardized header for dropdown sections.
 * Provides consistent styling for section headers like "Favorites", "Recent", etc.
 */
@Composable
fun DropdownHeader(
    text: String,
    modifier: Modifier = Modifier,
) {
    Text(
        text = text,
        style = MaterialTheme.typography.labelLarge.copy(fontWeight = FontWeight.Bold),
        color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.8f),
        modifier = modifier.padding(horizontal = 16.dp, vertical = 8.dp)
    )
}

// =========================================
// UNIFIED DROPDOWN ITEM COMPONENT
// =========================================

@Composable
fun AppDropdownMenuItem(
    text: @Composable () -> Unit,
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    leadingIcon: @Composable (() -> Unit)? = null,
    trailingIcon: @Composable (() -> Unit)? = null,
    selected: Boolean = false,
) {
    val contentColor by animateColorAsState(
        targetValue = DropdownDefaults.itemContentColor(selected, enabled),
        label = "contentColor"
    )
    val backgroundColor by animateColorAsState(
        targetValue = DropdownDefaults.itemBackground(selected),
        label = "backgroundColor"
    )

    Box(
        modifier = modifier
            .fillMaxWidth()
            .padding(
                horizontal = DropdownDefaults.itemPaddingHorizontal,
                vertical = DropdownDefaults.itemPaddingVertical
            )
            .clip(DropdownDefaults.shape)
            .background(backgroundColor)
            .clickable(enabled = enabled) { onClick() }
    ) {
        Row(
            modifier = Modifier.fillMaxWidth(),
            verticalAlignment = Alignment.CenterVertically
        ) {
            leadingIcon?.invoke()
            if (leadingIcon != null) {
                Spacer(modifier = Modifier.width(12.dp))
            }
            Box(modifier = Modifier.weight(1f)) {
                CompositionLocalProvider(LocalContentColor provides contentColor) {
                    text()
                }
            }
            if (trailingIcon != null) {
                Spacer(modifier = Modifier.width(12.dp))
                trailingIcon()
            }
        }
    }
}

/**
 * A lightweight, modern dropdown menu composable with a clean text field and dropdown list.
 */
@Suppress("unused", "HardCodedStringLiteral")
@Composable
fun AppDropdownMenu(
    expanded: Boolean,
    onDismissRequest: () -> Unit,
    modifier: Modifier = Modifier,
    label: @Composable (() -> Unit)? = null,
    enabled: Boolean = true,
    placeholder: @Composable (() -> Unit)? = null,
    selectedText: String = "",
    onExpandRequest: () -> Unit = {},
    content: @Composable ColumnScope.() -> Unit,
) {
    var textFieldSize by remember { mutableStateOf(Size.Zero) }
    val interactionSource = remember { MutableInteractionSource() }

    Column(modifier = modifier) {
        OutlinedTextField(
            value = selectedText,
            onValueChange = {},
            modifier = Modifier
                .fillMaxWidth()
                .onGloballyPositioned { coordinates ->
                    textFieldSize = coordinates.size.toSize()
                }
                .clickable(
                    enabled = enabled,
                    onClick = onExpandRequest,
                    interactionSource = interactionSource,
                    indication = null
                ),
            readOnly = true,
            label = label,
            placeholder = placeholder,
            trailingIcon = {
                Icon(
                    imageVector = if (expanded) AppIcons.ArrowDropUp else AppIcons.ArrowDropDown,
                    contentDescription = if (expanded) stringResource(R.string.cd_collapse) else stringResource(R.string.cd_expand),
                    tint = MaterialTheme.colorScheme.onSurfaceVariant
                )
            },
            shape = DropdownDefaults.shape,
            colors = OutlinedTextFieldDefaults.colors(
                focusedBorderColor = MaterialTheme.colorScheme.primary,
                unfocusedBorderColor = MaterialTheme.colorScheme.outline.copy(alpha = 0.6f),
                focusedLabelColor = MaterialTheme.colorScheme.primary,
                cursorColor = MaterialTheme.colorScheme.primary,
                disabledBorderColor = MaterialTheme.colorScheme.outline.copy(alpha = 0.3f),
                disabledLabelColor = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.38f)
            ),
            enabled = enabled,
            interactionSource = interactionSource
        )

        DropdownMenu(
            expanded = expanded,
            onDismissRequest = onDismissRequest,
            modifier = Modifier.width(with(LocalDensity.current) { textFieldSize.width.toDp() }),
            offset = DpOffset(0.dp, 2.dp),
            properties = PopupProperties(focusable = true),
            shape = DropdownDefaults.shape,
            containerColor = DropdownDefaults.containerColor()
        ) {
            content()
        }
    }
}

// =========================================
// LEGACY COMPONENTS (UPDATED TO USE UNIFIED STYLES)
// =========================================
@Composable
fun BottomSheetMenuItem(
    icon: ImageVector,
    title: String,
    subtitle: String,
    onClick: () -> Unit
) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .clickable { onClick() }
            .padding(horizontal = 24.dp, vertical = 16.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        // Circular Icon Background
        Surface(
            shape = CircleShape,
            color = MaterialTheme.colorScheme.surfaceVariant,
            modifier = Modifier.size(52.dp)
        ) {
            Box(contentAlignment = Alignment.Center) {
                Icon(
                    imageVector = icon,
                    contentDescription = null,
                    tint = MaterialTheme.colorScheme.onSurfaceVariant,
                    modifier = Modifier.size(28.dp)
                )
            }
        }

        Spacer(modifier = Modifier.width(16.dp))

        // Title and Subtitle Column
        Column(modifier = Modifier.weight(1f)) {
            Text(
                text = title,
                style = MaterialTheme.typography.titleMedium,
                fontWeight = FontWeight.Bold,
                color = MaterialTheme.colorScheme.onSurface
            )
            Spacer(modifier = Modifier.height(2.dp))
            Text(
                text = subtitle,
                style = MaterialTheme.typography.bodyMedium,
                color = MaterialTheme.colorScheme.onSurfaceVariant
            )
        }
    }
}
@Composable
fun LargeDropdownMenuItem(
    text: String,
    selected: Boolean,
    enabled: Boolean,
    onClick: () -> Unit,
) {
    val contentColor = DropdownDefaults.itemContentColor(selected, enabled)
    val backgroundColor = DropdownDefaults.itemBackground(selected)
    val fontWeight = if (selected) FontWeight.SemiBold else FontWeight.Normal

    CompositionLocalProvider(LocalContentColor provides contentColor) {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .padding(
                    horizontal = DropdownDefaults.itemPaddingHorizontal,
                    vertical = DropdownDefaults.itemPaddingVertical
                )
                .clip(DropdownDefaults.shape)
                .background(backgroundColor)
                .clickable(enabled) { onClick() }
                .padding(horizontal = 16.dp, vertical = 14.dp)
        ) {
            Text(
                text = text,
                style = MaterialTheme.typography.titleSmall.copy(fontWeight = fontWeight),
            )
        }
    }
}

@Composable
fun <T> LargeDropdownMenu(
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    label: String,
    notSetLabel: String? = null,
    items: List<T>,
    selectedIndex: Int = -1,
    onItemSelected: (index: Int, item: T) -> Unit,
    selectedItemToString: (T) -> String = { item: T -> item.toString() },
    drawItem: @Composable (T, Boolean, Boolean, () -> Unit) -> Unit = { item: T, selected: Boolean, _: Boolean, onClick: () -> Unit ->
        LargeDropdownMenuItem(
            text = item.toString(),
            selected = selected,
            enabled = true,
            onClick = onClick,
        )
    },
) {
    var expanded by remember { mutableStateOf(false) }

    Box(modifier = modifier.height(IntrinsicSize.Min)) {
        OutlinedTextField(
            label = { Text(label) },
            value = items.getOrNull(selectedIndex)?.let { selectedItemToString(it) } ?: "",
            enabled = enabled,
            modifier = Modifier.fillMaxWidth(),
            trailingIcon = {
                val icon: ImageVector = if (expanded) AppIcons.ArrowDropUp else AppIcons.ArrowDropDown
                Icon(icon, contentDescription = "")
            },
            onValueChange = { },
            readOnly = true,
        )

        Surface(
            modifier = Modifier
                .fillMaxSize()
                .padding(top = 8.dp)
                .clip(MaterialTheme.shapes.extraSmall)
                .clickable(enabled = enabled) { expanded = true },
            color = Color.Transparent,
        ) {}
    }

    if (expanded) {
        Dialog(onDismissRequest = { expanded = false }) {
            Surface(
                shape = RoundedCornerShape(16.dp),
                color = MaterialTheme.colorScheme.surface,
                tonalElevation = 6.dp
            ) {
                val listState = rememberLazyListState()
                if (selectedIndex > -1) {
                    LaunchedEffect("ScrollToSelected") {
                        listState.scrollToItem(index = selectedIndex)
                    }
                }

                LazyColumn(
                    modifier = Modifier.fillMaxWidth(),
                    state = listState,
                    contentPadding = PaddingValues(vertical = 8.dp)
                ) {
                    if (notSetLabel != null) {
                        item {
                            LargeDropdownMenuItem(
                                text = notSetLabel,
                                selected = false,
                                enabled = false,
                                onClick = { },
                            )
                        }
                    }
                    itemsIndexed(items) { index: Int, item: T ->
                        val selectedItem = index == selectedIndex
                        drawItem(
                            item,
                            selectedItem,
                            true
                        ) {
                            onItemSelected(index, item)
                            expanded = false
                        }
                    }
                }
            }
        }
    }
}

// ============== PREVIEWS ==============

@Suppress("HardCodedStringLiteral")
@Preview(showBackground = true)
@Composable
fun LargeDropdownMenuItemPreview() {
    LargeDropdownMenuItem(
        text = "Sample Item",
        selected = false,
        enabled = true,
        onClick = {}
    )
}

@Suppress("HardCodedStringLiteral")
@Preview(showBackground = true)
@Composable
fun LargeDropdownMenuItemSelectedPreview() {
    LargeDropdownMenuItem(
        text = "Selected Item",
        selected = true,
        enabled = true,
        onClick = {}
    )
}

@Suppress("HardCodedStringLiteral")
@Preview(showBackground = true)
@Composable
fun AppDropdownMenuItemPreview() {
    AppDropdownMenuItem(
        text = { Text("Sample Item") },
        onClick = {},
        selected = false,
        enabled = true
    )
}

@Suppress("HardCodedStringLiteral")
@Preview(showBackground = true)
@Composable
fun AppDropdownMenuItemSelectedPreview() {
    AppDropdownMenuItem(
        text = { Text("Selected Item") },
        onClick = {},
        selected = true,
        enabled = true
    )
}

@Suppress("HardCodedStringLiteral")
@Preview(showBackground = true)
@Composable
fun LargeDropdownMenuPreview() {
    val options = listOf("Option 1", "Option 2", "Option 3", "Option 4", "Option 5")
    var selectedIndex by remember { mutableIntStateOf(1) }

    LargeDropdownMenu(
        label = "Select Option",
        items = options,
        selectedIndex = selectedIndex,
        onItemSelected = { index: Int, _: String ->
            selectedIndex = index
        }
    )
}
