package com.tt.honeyDue.ui.screens.onboarding

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowForward
import androidx.compose.material.icons.filled.Home
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import com.tt.honeyDue.ui.theme.*
import com.tt.honeyDue.viewmodel.OnboardingViewModel
import honeydue.composeapp.generated.resources.*
import org.jetbrains.compose.resources.stringResource

@Composable
fun OnboardingNameResidenceContent(
    viewModel: OnboardingViewModel,
    onContinue: () -> Unit
) {
    val residenceName by viewModel.residenceName.collectAsStateWithLifecycle()
    var localName by remember { mutableStateOf(residenceName) }

    WarmGradientBackground(
        modifier = Modifier.fillMaxSize()
    ) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .imePadding()
                .padding(horizontal = OrganicSpacing.xl),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Spacer(modifier = Modifier.weight(1f))

            // Header with icon
            Column(
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.spacedBy(OrganicSpacing.lg)
            ) {
                // Icon with OrganicIconContainer
                OrganicIconContainer(
                    icon = Icons.Default.Home,
                    size = 100.dp,
                    iconSize = 50.dp,
                    contentDescription = null // decorative
                )

                // Title and subtitle
                Column(
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.spacedBy(OrganicSpacing.sm)
                ) {
                    Text(
                        text = stringResource(Res.string.onboarding_name_residence_title),
                        style = MaterialTheme.typography.headlineMedium,
                        fontWeight = FontWeight.Bold,
                        color = MaterialTheme.colorScheme.onBackground
                    )

                    Text(
                        text = stringResource(Res.string.onboarding_name_residence_subtitle),
                        style = MaterialTheme.typography.bodyLarge,
                        color = MaterialTheme.colorScheme.onSurfaceVariant,
                        textAlign = TextAlign.Center
                    )
                }
            }

            Spacer(modifier = Modifier.height(OrganicSpacing.xl * 2))

            // Name input
            OutlinedTextField(
                value = localName,
                onValueChange = { localName = it },
                placeholder = {
                    Text(
                        stringResource(Res.string.onboarding_name_residence_placeholder),
                        color = MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.6f)
                    )
                },
                modifier = Modifier.fillMaxWidth(),
                shape = RoundedCornerShape(OrganicRadius.md),
                singleLine = true,
                colors = OutlinedTextFieldDefaults.colors(
                    focusedBorderColor = MaterialTheme.colorScheme.primary,
                    unfocusedBorderColor = MaterialTheme.colorScheme.outline.copy(alpha = 0.5f)
                )
            )

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

            Text(
                text = stringResource(Res.string.onboarding_name_residence_hint),
                style = MaterialTheme.typography.bodySmall,
                color = MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.7f)
            )

            Spacer(modifier = Modifier.weight(1f))

            // Continue button
            OrganicPrimaryButton(
                text = stringResource(Res.string.onboarding_continue),
                onClick = {
                    viewModel.setResidenceName(localName)
                    onContinue()
                },
                modifier = Modifier.fillMaxWidth(),
                enabled = localName.isNotBlank(),
                icon = Icons.AutoMirrored.Filled.ArrowForward
            )

            Spacer(modifier = Modifier.height(OrganicSpacing.xl * 2))
        }
    }
}
