package com.craigvg.lichun_android.ui.screens.onboarding

import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.scale
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.craigvg.lichun_android.ui.theme.AppColors
import com.craigvg.lichun_android.ui.theme.AppSpacing
import com.craigvg.lichun_android.ui.theme.AppTypography
import kotlinx.coroutines.delay

/**
 * Character setup form for configuring player attributes
 * Ported from iOS CharacterSetupView.swift
 */
@Composable
fun CharacterSetupScreen(
    onContinue: (name: String, age: Int, sex: String) -> Unit = { _, _, _ -> }
) {
    var name by remember { mutableStateOf("") }
    var age by remember { mutableIntStateOf(5) }
    var sex by remember { mutableStateOf("Male") }
    var isLoaded by remember { mutableStateOf(false) }
    var showAgePicker by remember { mutableStateOf(false) }

    LaunchedEffect(Unit) {
        delay(100)
        isLoaded = true
    }

    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(
                Brush.linearGradient(
                    colors = listOf(
                        AppColors.background,
                        AppColors.background
                    )
                )
            )
    ) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .verticalScroll(rememberScrollState())
                .padding(horizontal = AppSpacing.xl),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Spacer(modifier = Modifier.height(AppSpacing.xl))

            // Header
            Column(
                horizontalAlignment = Alignment.CenterHorizontally,
                modifier = Modifier.alpha(if (isLoaded) 1f else 0f)
            ) {
                Icon(
                    imageVector = Icons.Default.PersonAdd,
                    contentDescription = null,
                    tint = AppColors.primary,
                    modifier = Modifier
                        .size(56.dp)
                        .shadow(elevation = 12.dp, spotColor = AppColors.primary.copy(alpha = 0.3f))
                )

                Spacer(modifier = Modifier.height(AppSpacing.md))

                Text(
                    text = "Create Your Character",
                    fontSize = 32.sp,
                    fontWeight = FontWeight.Bold,
                    color = AppColors.primaryText,
                    textAlign = TextAlign.Center
                )

                Spacer(modifier = Modifier.height(AppSpacing.xs))

                Text(
                    text = "Tell us about yourself",
                    style = AppTypography.body,
                    color = AppColors.secondaryText
                )
            }

            Spacer(modifier = Modifier.height(AppSpacing.xl))

            // Name input card
            Card(
                modifier = Modifier
                    .fillMaxWidth()
                    .alpha(if (isLoaded) 1f else 0f),
                shape = RoundedCornerShape(AppSpacing.cornerRadius),
                colors = CardDefaults.cardColors(containerColor = AppColors.surfaceElevated)
            ) {
                Column(
                    modifier = Modifier.padding(AppSpacing.md)
                ) {
                    Row(
                        verticalAlignment = Alignment.CenterVertically
                    ) {
                        Icon(
                            imageVector = Icons.Default.Edit,
                            contentDescription = null,
                            tint = AppColors.primary,
                            modifier = Modifier.size(18.dp)
                        )
                        Spacer(modifier = Modifier.width(AppSpacing.sm))
                        Text(
                            text = "What's your name?",
                            style = AppTypography.headline,
                            color = AppColors.primaryText
                        )
                    }

                    Spacer(modifier = Modifier.height(AppSpacing.sm))

                    OutlinedTextField(
                        value = name,
                        onValueChange = { name = it },
                        placeholder = {
                            Text("Enter your name", color = AppColors.disabledText)
                        },
                        modifier = Modifier.fillMaxWidth(),
                        colors = OutlinedTextFieldDefaults.colors(
                            focusedBorderColor = AppColors.primary,
                            unfocusedBorderColor = AppColors.surfaceSubtle
                        ),
                        shape = RoundedCornerShape(AppSpacing.cornerRadius),
                        keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done),
                        singleLine = true
                    )
                }
            }

            Spacer(modifier = Modifier.height(AppSpacing.md))

            // Gender selection card
            Card(
                modifier = Modifier
                    .fillMaxWidth()
                    .alpha(if (isLoaded) 1f else 0f),
                shape = RoundedCornerShape(AppSpacing.cornerRadius),
                colors = CardDefaults.cardColors(containerColor = AppColors.surfaceElevated)
            ) {
                Column(
                    modifier = Modifier.padding(AppSpacing.md)
                ) {
                    Row(
                        verticalAlignment = Alignment.CenterVertically
                    ) {
                        Icon(
                            imageVector = Icons.Default.People,
                            contentDescription = null,
                            tint = AppColors.primary,
                            modifier = Modifier.size(18.dp)
                        )
                        Spacer(modifier = Modifier.width(AppSpacing.sm))
                        Text(
                            text = "Select your gender",
                            style = AppTypography.headline,
                            color = AppColors.primaryText
                        )
                    }

                    Spacer(modifier = Modifier.height(AppSpacing.md))

                    Row(
                        modifier = Modifier.fillMaxWidth(),
                        horizontalArrangement = Arrangement.spacedBy(AppSpacing.md)
                    ) {
                        GenderButton(
                            icon = Icons.Default.Man,
                            label = "Male",
                            isSelected = sex == "Male",
                            onClick = { sex = "Male" },
                            modifier = Modifier.weight(1f)
                        )
                        GenderButton(
                            icon = Icons.Default.Woman,
                            label = "Female",
                            isSelected = sex == "Female",
                            onClick = { sex = "Female" },
                            modifier = Modifier.weight(1f)
                        )
                    }
                }
            }

            Spacer(modifier = Modifier.height(AppSpacing.md))

            // Age selection card
            Card(
                modifier = Modifier
                    .fillMaxWidth()
                    .alpha(if (isLoaded) 1f else 0f),
                shape = RoundedCornerShape(AppSpacing.cornerRadius),
                colors = CardDefaults.cardColors(containerColor = AppColors.surfaceElevated)
            ) {
                Column(
                    modifier = Modifier.padding(AppSpacing.md)
                ) {
                    Row(
                        verticalAlignment = Alignment.CenterVertically
                    ) {
                        Icon(
                            imageVector = Icons.Default.CalendarMonth,
                            contentDescription = null,
                            tint = AppColors.primary,
                            modifier = Modifier.size(18.dp)
                        )
                        Spacer(modifier = Modifier.width(AppSpacing.sm))
                        Text(
                            text = "Starting age",
                            style = AppTypography.headline,
                            color = AppColors.primaryText
                        )
                    }

                    Spacer(modifier = Modifier.height(AppSpacing.sm))

                    // Age selector
                    Row(
                        modifier = Modifier
                            .fillMaxWidth()
                            .clip(RoundedCornerShape(AppSpacing.cornerRadius))
                            .background(AppColors.background.copy(alpha = 0.5f))
                            .padding(AppSpacing.md),
                        horizontalArrangement = Arrangement.SpaceBetween,
                        verticalAlignment = Alignment.CenterVertically
                    ) {
                        IconButton(
                            onClick = { if (age > 5) age-- },
                            enabled = age > 5
                        ) {
                            Icon(
                                imageVector = Icons.Default.Remove,
                                contentDescription = "Decrease",
                                tint = if (age > 5) AppColors.primary else AppColors.disabledText
                            )
                        }

                        Text(
                            text = "$age years old",
                            style = AppTypography.headline,
                            color = AppColors.primaryText
                        )

                        IconButton(
                            onClick = { if (age < 99) age++ },
                            enabled = age < 99
                        ) {
                            Icon(
                                imageVector = Icons.Default.Add,
                                contentDescription = "Increase",
                                tint = if (age < 99) AppColors.primary else AppColors.disabledText
                            )
                        }
                    }
                }
            }

            Spacer(modifier = Modifier.height(AppSpacing.md))

            // Preview card
            Card(
                modifier = Modifier
                    .fillMaxWidth()
                    .alpha(if (isLoaded) 1f else 0f),
                shape = RoundedCornerShape(AppSpacing.cornerRadius),
                colors = CardDefaults.cardColors(
                    containerColor = AppColors.primary.copy(alpha = 0.15f)
                )
            ) {
                Column(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(AppSpacing.md),
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {
                    Text(
                        text = "YOUR CHARACTER",
                        style = AppTypography.caption,
                        color = AppColors.secondaryText,
                        letterSpacing = 1.sp
                    )

                    Spacer(modifier = Modifier.height(AppSpacing.xs))

                    Text(
                        text = name.ifEmpty { "..." },
                        fontSize = 24.sp,
                        fontWeight = FontWeight.Bold,
                        color = AppColors.primaryText
                    )

                    Spacer(modifier = Modifier.height(AppSpacing.xs))

                    Row(
                        horizontalArrangement = Arrangement.Center,
                        verticalAlignment = Alignment.CenterVertically
                    ) {
                        Icon(
                            imageVector = Icons.Default.CalendarMonth,
                            contentDescription = null,
                            tint = AppColors.secondaryText,
                            modifier = Modifier.size(14.dp)
                        )
                        Spacer(modifier = Modifier.width(4.dp))
                        Text(
                            text = "$age years",
                            style = AppTypography.caption,
                            color = AppColors.secondaryText
                        )

                        Spacer(modifier = Modifier.width(AppSpacing.md))

                        Icon(
                            imageVector = if (sex == "Male") Icons.Default.Man else Icons.Default.Woman,
                            contentDescription = null,
                            tint = AppColors.secondaryText,
                            modifier = Modifier.size(14.dp)
                        )
                        Spacer(modifier = Modifier.width(4.dp))
                        Text(
                            text = sex,
                            style = AppTypography.caption,
                            color = AppColors.secondaryText
                        )
                    }
                }
            }

            Spacer(modifier = Modifier.height(AppSpacing.xl))

            // Continue button
            Button(
                onClick = { onContinue(name, age, sex) },
                modifier = Modifier
                    .fillMaxWidth()
                    .height(AppSpacing.buttonHeight)
                    .alpha(if (isLoaded) 1f else 0f),
                enabled = name.isNotEmpty(),
                colors = ButtonDefaults.buttonColors(
                    containerColor = AppColors.primary,
                    disabledContainerColor = AppColors.disabledText
                ),
                shape = RoundedCornerShape(AppSpacing.cornerRadius)
            ) {
                Text(
                    text = "Continue",
                    style = AppTypography.button
                )
            }

            Spacer(modifier = Modifier.height(AppSpacing.lg))
        }
    }
}

@Composable
private fun GenderButton(
    icon: androidx.compose.ui.graphics.vector.ImageVector,
    label: String,
    isSelected: Boolean,
    onClick: () -> Unit,
    modifier: Modifier = Modifier
) {
    val backgroundColor by animateColorAsState(
        targetValue = if (isSelected) AppColors.primary else AppColors.background.copy(alpha = 0.5f),
        label = "bgColor"
    )
    val contentColor by animateColorAsState(
        targetValue = if (isSelected) Color.White else AppColors.primaryText,
        label = "contentColor"
    )
    val scale by animateFloatAsState(
        targetValue = if (isSelected) 1.02f else 1f,
        label = "scale"
    )

    Column(
        modifier = modifier
            .scale(scale)
            .clip(RoundedCornerShape(AppSpacing.cornerRadius))
            .background(backgroundColor)
            .border(
                width = if (isSelected) 2.dp else 1.dp,
                color = if (isSelected) AppColors.primary else AppColors.surfaceSubtle,
                shape = RoundedCornerShape(AppSpacing.cornerRadius)
            )
            .clickable(onClick = onClick)
            .padding(AppSpacing.md),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Icon(
            imageVector = icon,
            contentDescription = null,
            tint = contentColor,
            modifier = Modifier.size(32.dp)
        )
        Spacer(modifier = Modifier.height(AppSpacing.sm))
        Text(
            text = label,
            style = AppTypography.bodyBold,
            color = contentColor
        )
    }
}