package com.socialapp.presentation.ui.screens

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
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.shape.RoundedCornerShape
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.hilt.navigation.compose.hiltViewModel
import com.socialapp.presentation.ui.theme.AccentMagenta
import com.socialapp.presentation.ui.theme.PrimaryBlue
import com.socialapp.presentation.viewmodel.AuthViewModel
import com.socialapp.presentation.viewmodel.AuthState

@Composable
fun OnboardingScreen(
    onGetStartedClick: () -> Unit = {},
    onLoginClick: () -> Unit = {}
) {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(AccentMagenta),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = androidx.compose.foundation.layout.Arrangement.Center
    ) {
        // Title
        Text(
            text = "Explore your\nfavorite things",
            fontSize = 44.sp,
            fontWeight = FontWeight.Bold,
            color = MaterialTheme.colorScheme.background,
            textAlign = TextAlign.Center,
            modifier = Modifier.padding(horizontal = 24.dp, vertical = 16.dp)
        )

        // Subtitle
        Text(
            text = "Connect with people who share your\npassion.",
            fontSize = 16.sp,
            color = MaterialTheme.colorScheme.background.copy(alpha = 0.9f),
            textAlign = TextAlign.Center,
            modifier = Modifier.padding(horizontal = 24.dp, vertical = 24.dp)
        )

        Spacer(modifier = Modifier.height(32.dp))

        // App Preview Box (placeholder)
        Box(
            modifier = Modifier
                .fillMaxWidth(0.8f)
                .height(400.dp)
                .background(MaterialTheme.colorScheme.background, shape = RoundedCornerShape(24.dp)),
            contentAlignment = Alignment.Center
        ) {
            Text(
                text = "App Preview\nHopenity",
                fontSize = 18.sp,
                color = AccentMagenta,
                fontWeight = FontWeight.SemiBold,
                textAlign = TextAlign.Center
            )
        }

        Spacer(modifier = Modifier.height(40.dp))

        // Get Started Button
        Button(
            onClick = onGetStartedClick,
            modifier = Modifier
                .fillMaxWidth(0.85f)
                .height(56.dp),
            colors = ButtonDefaults.buttonColors(containerColor = MaterialTheme.colorScheme.background),
            shape = RoundedCornerShape(20.dp)
        ) {
            Text(
                text = "Get Started",
                fontSize = 16.sp,
                fontWeight = FontWeight.SemiBold,
                color = AccentMagenta
            )
        }

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

        // Login Link
        Text(
            text = "Already have an account? Log In",
            fontSize = 14.sp,
            color = MaterialTheme.colorScheme.background.copy(alpha = 0.8f),
            modifier = Modifier.padding(16.dp)
        )
    }
}

@Composable
fun LoginScreen(
    viewModel: AuthViewModel = hiltViewModel(),
    onLoginSuccess: () -> Unit = {},
    onSignUpClick: () -> Unit = {}
) {
    val email = remember { mutableStateOf("") }
    val password = remember { mutableStateOf("") }
    val errorMessage = viewModel.errorMessage.value
    val isLoading = viewModel.isLoading.value
    val authState = viewModel.authState.value

    // Handle successful login
    if (authState is AuthState.Success) {
        onLoginSuccess()
    }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(MaterialTheme.colorScheme.background)
            .padding(24.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = androidx.compose.foundation.layout.Arrangement.Center
    ) {
        // Logo
        Text(
            text = "Hopenity",
            fontSize = 40.sp,
            fontWeight = FontWeight.Bold,
            color = AccentMagenta,
            modifier = Modifier.padding(bottom = 32.dp)
        )

        Text(
            text = "Welcome Back",
            fontSize = 16.sp,
            color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.7f),
            modifier = Modifier.padding(bottom = 32.dp)
        )

        // Email Field
        OutlinedTextField(
            value = email.value,
            onValueChange = { email.value = it },
            label = { Text("Email") },
            modifier = Modifier
                .fillMaxWidth()
                .padding(bottom = 16.dp),
            singleLine = true
        )

        // Password Field
        OutlinedTextField(
            value = password.value,
            onValueChange = { password.value = it },
            label = { Text("Password") },
            modifier = Modifier
                .fillMaxWidth()
                .padding(bottom = 24.dp),
            singleLine = true,
            visualTransformation = PasswordVisualTransformation()
        )

        // Error Message
        if (errorMessage != null) {
            Text(
                text = errorMessage,
                fontSize = 12.sp,
                color = MaterialTheme.colorScheme.error,
                modifier = Modifier.padding(bottom = 16.dp)
            )
        }

        // Login Button
        Button(
            onClick = {
                if (email.value.isNotEmpty() && password.value.isNotEmpty()) {
                    viewModel.login(email.value, password.value)
                }
            },
            modifier = Modifier
                .fillMaxWidth()
                .height(48.dp)
                .padding(bottom = 16.dp),
            enabled = !isLoading,
            colors = ButtonDefaults.buttonColors(containerColor = AccentMagenta),
            shape = RoundedCornerShape(20.dp)
        ) {
            Text(if (isLoading) "Logging in..." else "Log In", fontWeight = FontWeight.SemiBold)
        }

        // Sign Up Link
        Text(
            text = "Don't have an account? Sign up",
            fontSize = 14.sp,
            color = AccentMagenta,
            modifier = Modifier.padding(top = 16.dp)
        )
    }
}

@Composable
fun SignUpScreen(
    viewModel: AuthViewModel = hiltViewModel(),
    onSignUpSuccess: () -> Unit = {},
    onLoginClick: () -> Unit = {}
) {
    val username = remember { mutableStateOf("") }
    val email = remember { mutableStateOf("") }
    val password = remember { mutableStateOf("") }
    val confirmPassword = remember { mutableStateOf("") }
    val errorMessage = viewModel.errorMessage.value
    val isLoading = viewModel.isLoading.value
    val authState = viewModel.authState.value

    // Handle successful signup
    if (authState is AuthState.Success) {
        onSignUpSuccess()
    }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(MaterialTheme.colorScheme.background)
            .padding(24.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = androidx.compose.foundation.layout.Arrangement.Center
    ) {
        // Logo
        Text(
            text = "Hopenity",
            fontSize = 40.sp,
            fontWeight = FontWeight.Bold,
            color = AccentMagenta,
            modifier = Modifier.padding(bottom = 32.dp)
        )

        Text(
            text = "Create Your Account",
            fontSize = 16.sp,
            color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.7f),
            modifier = Modifier.padding(bottom = 32.dp)
        )

        // Username Field
        OutlinedTextField(
            value = username.value,
            onValueChange = { username.value = it },
            label = { Text("Username") },
            modifier = Modifier
                .fillMaxWidth()
                .padding(bottom = 12.dp),
            singleLine = true
        )

        // Email Field
        OutlinedTextField(
            value = email.value,
            onValueChange = { email.value = it },
            label = { Text("Email") },
            modifier = Modifier
                .fillMaxWidth()
                .padding(bottom = 12.dp),
            singleLine = true
        )

        // Password Field
        OutlinedTextField(
            value = password.value,
            onValueChange = { password.value = it },
            label = { Text("Password") },
            modifier = Modifier
                .fillMaxWidth()
                .padding(bottom = 12.dp),
            singleLine = true,
            visualTransformation = PasswordVisualTransformation()
        )

        // Confirm Password Field
        OutlinedTextField(
            value = confirmPassword.value,
            onValueChange = { confirmPassword.value = it },
            label = { Text("Confirm Password") },
            modifier = Modifier
                .fillMaxWidth()
                .padding(bottom = 24.dp),
            singleLine = true,
            visualTransformation = PasswordVisualTransformation()
        )

        // Error Message
        if (errorMessage != null) {
            Text(
                text = errorMessage,
                fontSize = 12.sp,
                color = MaterialTheme.colorScheme.error,
                modifier = Modifier.padding(bottom = 16.dp)
            )
        }

        // Sign Up Button
        Button(
            onClick = {
                if (username.value.isNotEmpty() && email.value.isNotEmpty() && password.value == confirmPassword.value) {
                    viewModel.register(username.value, email.value, password.value)
                }
            },
            modifier = Modifier
                .fillMaxWidth()
                .height(48.dp)
                .padding(bottom = 16.dp),
            enabled = !isLoading,
            colors = ButtonDefaults.buttonColors(containerColor = AccentMagenta),
            shape = RoundedCornerShape(20.dp)
        ) {
            Text(if (isLoading) "Creating account..." else "Sign Up", fontWeight = FontWeight.SemiBold)
        }

        // Login Link
        Text(
            text = "Already have an account? Log In",
            fontSize = 14.sp,
            color = AccentMagenta,
            modifier = Modifier.padding(top = 16.dp)
        )
    }
}