package com.aiosman.ravenow.ui.account

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.aiosman.ravenow.LocalAppTheme
import com.aiosman.ravenow.LocalNavController
import com.aiosman.ravenow.R
import com.aiosman.ravenow.ui.NavigationRoute
import com.aiosman.ravenow.ui.composables.StatusBarSpacer
import com.aiosman.ravenow.ui.modifiers.noRippleClickable

private object AccountSettingConstants {
    const val BACK_BUTTON_SIZE = 36
    const val BACK_BUTTON_ICON_SIZE = 24
    const val BACK_BUTTON_START_PADDING = 19
    const val OPTION_ITEM_HEIGHT = 56
    const val OPTION_ITEM_ICON_SIZE = 24
    const val OPTION_ITEM_HORIZONTAL_PADDING = 16
    const val OPTION_ITEM_ICON_TEXT_SPACING = 12
    const val OPTION_ITEM_TEXT_SIZE = 17
    const val HEADER_VERTICAL_PADDING = 16
    const val TITLE_OFFSET_X = 19
    const val CARD_CORNER_RADIUS = 16
}

@Composable
private fun CircularBackButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier
) {
    val appColors = LocalAppTheme.current
    Box(
        modifier = modifier
            .size(AccountSettingConstants.BACK_BUTTON_SIZE.dp)
            .background(
                color = appColors.secondaryBackground,
                shape = CircleShape
            )
            .noRippleClickable { onClick() },
        contentAlignment = Alignment.Center
    ) {
        Image(
            painter = painterResource(id = R.drawable.rider_pro_back_icon),
            contentDescription = "返回",
            modifier = Modifier.size(AccountSettingConstants.BACK_BUTTON_ICON_SIZE.dp),
            colorFilter = ColorFilter.tint(appColors.text)
        )
    }
}

@Composable
private fun SecurityOptionItem(
    iconRes: Int,
    label: String,
    onClick: () -> Unit,
    applyColorFilter: Boolean = true
) {
    val appColors = LocalAppTheme.current
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .height(AccountSettingConstants.OPTION_ITEM_HEIGHT.dp)
            .padding(horizontal = AccountSettingConstants.OPTION_ITEM_HORIZONTAL_PADDING.dp)
            .noRippleClickable { onClick() },
        verticalAlignment = Alignment.CenterVertically
    ) {
        Image(
            painter = painterResource(id = iconRes),
            contentDescription = null,
            modifier = Modifier.size(AccountSettingConstants.OPTION_ITEM_ICON_SIZE.dp),
            colorFilter = if (applyColorFilter) ColorFilter.tint(appColors.text) else null
        )
        Text(
            text = label,
            modifier = Modifier
                .padding(start = AccountSettingConstants.OPTION_ITEM_ICON_TEXT_SPACING.dp)
                .weight(1f),
            color = appColors.text,
            fontSize = AccountSettingConstants.OPTION_ITEM_TEXT_SIZE.sp,
            fontWeight = FontWeight.Medium
        )
        Image(
            painter = painterResource(id = R.drawable.rave_now_nav_right),
            contentDescription = null,
            modifier = Modifier.size(AccountSettingConstants.OPTION_ITEM_ICON_SIZE.dp),
            colorFilter = ColorFilter.tint(appColors.secondaryText)
        )
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AccountSetting() {
    val appColors = LocalAppTheme.current
    val navController = LocalNavController.current
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(appColors.background),
    ) {
        StatusBarSpacer()
        
        // 顶部标题栏
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .padding(vertical = AccountSettingConstants.HEADER_VERTICAL_PADDING.dp)
        ) {
            CircularBackButton(
                onClick = { navController.navigateUp() },
                modifier = Modifier.padding(start = AccountSettingConstants.BACK_BUTTON_START_PADDING.dp)
            )
            Text(
                text = stringResource(R.string.account_and_security),
                fontWeight = FontWeight.W800,
                fontSize = AccountSettingConstants.OPTION_ITEM_TEXT_SIZE.sp,
                color = appColors.text,
                modifier = Modifier
                    .align(Alignment.Center)
                    .offset(x = AccountSettingConstants.TITLE_OFFSET_X.dp)
            )
        }
        
        // 安全选项卡片
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .background(
                    color = appColors.background,
                    shape = RoundedCornerShape(AccountSettingConstants.CARD_CORNER_RADIUS.dp)
                )
        ) {
            SecurityOptionItem(
                iconRes = R.mipmap.icons_padlock,
                label = stringResource(R.string.change_password),
                onClick = { navController.navigate(NavigationRoute.ChangePasswordScreen.route) }
            )

            SecurityOptionItem(
                iconRes = R.mipmap.icons_block,
                label = stringResource(R.string.blocked_users),
                onClick = { navController.navigate(NavigationRoute.BlockedUsersScreen.route) }
            )

            SecurityOptionItem(
                iconRes = R.mipmap.icons_remove,
                label = stringResource(R.string.remove_account),
                onClick = { navController.navigate(NavigationRoute.RemoveAccountScreen.route) },
                applyColorFilter = false
            )
        }
    }
}