package de.tsschulz.tt_tagebuch.app.ui

import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.unit.dp
import cafe.adriel.voyager.core.screen.Screen
import cafe.adriel.voyager.koin.getScreenModel
import cafe.adriel.voyager.navigator.LocalNavigator
import de.tsschulz.tt_tagebuch.app.viewmodel.LoginScreenModel
import de.tsschulz.tt_tagebuch.app.viewmodel.LoginState
import de.tsschulz.tt_tagebuch.app.ui.HomeScreen

class LoginScreen : Screen {
    @Composable
    override fun Content() {
        val navigator = LocalNavigator.current
        val viewModel = getScreenModel<LoginScreenModel>()
        val state by viewModel.state.collectAsState()

        var email by remember { mutableStateOf("") }
        var password by remember { mutableStateOf("") }

        Column(
            modifier = Modifier.fillMaxSize().padding(16.dp),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text("Trainingstagebuch", style = MaterialTheme.typography.h4)
            Spacer(modifier = Modifier.height(32.dp))

            TextField(
                value = email,
                onValueChange = { email = it },
                label = { Text("Email") },
                modifier = Modifier.fillMaxWidth()
            )
            Spacer(modifier = Modifier.height(16.dp))

            TextField(
                value = password,
                onValueChange = { password = it },
                label = { Text("Passwort") },
                visualTransformation = PasswordVisualTransformation(),
                modifier = Modifier.fillMaxWidth()
            )
            Spacer(modifier = Modifier.height(32.dp))

            Button(
                onClick = { viewModel.login(email, password) },
                enabled = state !is LoginState.Loading,
                modifier = Modifier.fillMaxWidth()
            ) {
                if (state is LoginState.Loading) {
                    CircularProgressIndicator(color = MaterialTheme.colors.onPrimary)
                } else {
                    Text("Login")
                }
            }

            if (state is LoginState.Error) {
                Text(
                    text = (state as LoginState.Error).message,
                    color = MaterialTheme.colors.error,
                    modifier = Modifier.padding(top = 16.dp)
                )
            }
            
            LaunchedEffect(state) {
                if (state is LoginState.Success) {
                    // Login succeeded. Do not hardcode navigation to a specific club here;
                    // the platform-specific host (e.g. AppRoot) decides the next screen.
                    // Try to pop this screen if there is a previous entry.
                    try {
                        navigator?.pop()
                    } catch (_: Exception) {
                        // ignore
                    }
                }
            }
        }
    }
}
