package io.oxygenhub.android.ui

import androidx.compose.foundation.layout.*

import androidx.compose.foundation.text.KeyboardOptions

import androidx.compose.material.icons.Icons

import androidx.compose.material.icons.filled.Lock

import androidx.compose.material.icons.filled.Person

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.input.KeyboardType

import androidx.compose.ui.text.input.PasswordVisualTransformation

import androidx.compose.ui.unit.dp

import androidx.compose.ui.unit.sp

import androidx.compose.foundation.Image

import androidx.compose.ui.res.painterResource

import io.oxygenhub.android.R

@Composable

fun LoginScreen(onLoginSuccess: () -> Unit) {

    var username by remember { mutableStateOf("") }

    var password by remember { mutableStateOf("") }

    var serverUrl by remember { mutableStateOf("https://oxygenhub.io") }

    var twoFactorCode by remember { mutableStateOf("") }

    var is2FaRequired by remember { mutableStateOf(false) }

    var isLoading by remember { mutableStateOf(false) }

    Column(

        modifier = Modifier

            .fillMaxSize()

            .padding(24.dp),

        horizontalAlignment = Alignment.CenterHorizontally,

        verticalArrangement = Arrangement.Center

    ) {

        Image(

            painter = painterResource(id = R.drawable.mark),

            contentDescription = "OxygenHub Logo",

            modifier = Modifier.size(64.dp)

        )

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

        Text(

            text = "OxygenHub",

            fontSize = 36.sp,

            fontWeight = FontWeight.Bold,

            color = MaterialTheme.colorScheme.primary

        )

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

        Text(

            text = "Sign in to delegate your identity",

            style = MaterialTheme.typography.bodyLarge,

            color = MaterialTheme.colorScheme.onSurfaceVariant

        )

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

        OutlinedTextField(

            value = serverUrl,

            onValueChange = { serverUrl = it },

            label = { Text("Server URL") },

            modifier = Modifier.fillMaxWidth(),

            singleLine = true

        )

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

        OutlinedTextField(

            value = username,

            onValueChange = { username = it },

            label = { Text("Username or Email") },

            leadingIcon = { Icon(Icons.Filled.Person, contentDescription = "Username") },

            modifier = Modifier.fillMaxWidth(),

            singleLine = true

        )

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

        OutlinedTextField(

            value = password,

            onValueChange = { password = it },

            label = { Text("Password") },

            leadingIcon = { Icon(Icons.Filled.Lock, contentDescription = "Password") },

            visualTransformation = PasswordVisualTransformation(),

            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),

            modifier = Modifier.fillMaxWidth(),

            singleLine = true

        )

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

        if (is2FaRequired) {

            OutlinedTextField(

                value = twoFactorCode,

                onValueChange = { twoFactorCode = it },

                label = { Text("2FA Authenticator Code") },

                keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),

                modifier = Modifier.fillMaxWidth(),

                singleLine = true

            )

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

        } else {

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

        }

        Button(

            onClick = {

                if (!is2FaRequired) {

                    // Step 1: Simulate checking credentials and discovering 2FA is needed

                    is2FaRequired = true

                } else {

                    // Step 2: Simulate verifying the 2FA code and logging in

                    isLoading = true

                    onLoginSuccess()

                }

            },

            modifier = Modifier

                .fillMaxWidth()

                .height(50.dp),

            enabled = username.isNotBlank() && password.isNotBlank() && (!is2FaRequired || twoFactorCode.isNotBlank())

        ) {

            if (isLoading) {

                CircularProgressIndicator(

                    modifier = Modifier.size(24.dp),

                    color = MaterialTheme.colorScheme.onPrimary

                )

            } else {

                Text(if (is2FaRequired) "Verify & Log In" else "Log In", fontSize = 16.sp)

            }

        }

    }

}