package com.suno.android.ui.bottom_sheets.country_picker

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
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.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.CenterAlignedTopAppBar
import androidx.compose.material3.ModalBottomSheet
import androidx.compose.material3.SheetState
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.LaunchedEffect
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import androidx.hilt.navigation.compose.hiltViewModel
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import com.suno.android.common_ui.components.omni.CircleIconButton
import com.suno.android.common_ui.theme.ExtendedTheme
import com.suno.android.ui.screens.onboarding.phone.input.Country
import kotlinx.coroutines.flow.collectLatest
import com.suno.android.common_res.R as CommonResR

@Composable
fun CountryPickerBottomSheet(
    vm: CountryPickerBottomSheetVM = hiltViewModel(),
    onDismiss: () -> Unit,
    onCountrySelected: (Country) -> Unit,
    sheetState: SheetState = rememberModalBottomSheetState(true),
) {
    val viewState = vm.state.collectAsStateWithLifecycle().value

    LaunchedEffect(vm) {
        vm.effects.collectLatest { effect ->
            when (effect) {
                is CountryPickerBottomSheetEffect.OnCountrySelected -> {
                    onCountrySelected(effect.country)
                    onDismiss()
                }
            }
        }
    }

    ModalBottomSheet(
        onDismissRequest = {
            onDismiss()
        },
        sheetState = sheetState,
        dragHandle = null,
    ) {
        CenterAlignedTopAppBar(
            modifier = Modifier
                .padding(end = 8.dp, bottom = 16.dp)
                .background(ExtendedTheme.colors.backgroundSecondary),
            title = {
                Text(
                    text = stringResource(CommonResR.string.your_country),
                    style = ExtendedTheme.typography.introCopy,
                )
            },
            actions = {
                CircleIconButton(
                    vectorDrawableResId = com.suno.android.common_ui.R.drawable.close,
                    contentDescription = stringResource(CommonResR.string.close),
                    onClick = onDismiss,
                )
            },
        )
        Column(
            modifier = Modifier.fillMaxSize(),
            verticalArrangement = Arrangement.SpaceBetween,
        ) {
            Row(
                modifier = Modifier.padding(start = 12.dp, end = 12.dp, bottom = 12.dp),
            ) {
                TextField(
                    modifier = Modifier
                        .fillMaxWidth()
                        .clip(RoundedCornerShape(60.dp))
                        .background(ExtendedTheme.colors.backgroundTertiary),
                    value = viewState.searchQuery,
                    onValueChange = { query ->
                        vm.sendEvent(CountryPickerBottomSheetEvent.OnSearchQueryChanged(query))
                    },
                    placeholder = {
                        Text(
                            style = ExtendedTheme.typography.body,
                            color = ExtendedTheme.colors.textTertiary,
                            text = stringResource(CommonResR.string.search_by_name_or_number),
                        )
                    },
                    textStyle = ExtendedTheme.typography.body,
                    singleLine = true,
                    colors = TextFieldDefaults.colors(
                        focusedContainerColor = Color.Transparent,
                        unfocusedContainerColor = Color.Transparent,
                        disabledContainerColor = Color.Transparent,
                        focusedIndicatorColor = Color.Transparent,
                        unfocusedIndicatorColor = Color.Transparent,
                    ),
                )
            }

            LazyColumn(
                modifier = Modifier.weight(1f),
            ) {
                items(viewState.filteredCountries) { country ->
                    CountryItem(
                        country = country,
                        onClick = {
                            vm.sendEvent(CountryPickerBottomSheetEvent.OnCountrySelected(country))
                        },
                    )
                }

                item { Spacer(modifier = Modifier.height(16.dp)) }
            }
        }
    }
}

@Composable
fun CountryItem(
    country: Country,
    onClick: () -> Unit,
) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .clickable(onClick = onClick)
            .padding(vertical = 24.dp, horizontal = 16.dp),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.spacedBy(16.dp),
    ) {
        country.flagEmoji?.let {
            Text(text = country.flagEmoji)
        }

        Text(
            text = country.name,
            style = ExtendedTheme.typography.body,
            color = ExtendedTheme.colors.textTertiary,
            modifier = Modifier.weight(1f),
        )

        Text(
            text = country.dialCode,
            style = ExtendedTheme.typography.body,
            color = ExtendedTheme.colors.textTertiary,
        )
    }
}