package io.oxygenhub.android.ui.signin

import androidx.compose.foundation.Image

import androidx.compose.foundation.layout.Arrangement

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.imePadding

import androidx.compose.foundation.layout.padding

import androidx.compose.foundation.layout.safeDrawingPadding

import androidx.compose.foundation.layout.size

import androidx.compose.foundation.layout.widthIn

import androidx.compose.foundation.rememberScrollState

import androidx.compose.foundation.text.KeyboardActions

import androidx.compose.foundation.text.KeyboardOptions

import androidx.compose.foundation.verticalScroll

import androidx.compose.material.icons.Icons

import androidx.compose.material.icons.automirrored.outlined.OpenInNew

import androidx.compose.material.icons.outlined.Dns

import androidx.compose.material3.Button

import androidx.compose.material3.Card

import androidx.compose.material3.CardDefaults

import androidx.compose.material3.CircularProgressIndicator

import androidx.compose.material3.Icon

import androidx.compose.material3.LinearProgressIndicator

import androidx.compose.material3.MaterialTheme

import androidx.compose.material3.OutlinedTextField

import androidx.compose.material3.Surface

import androidx.compose.material3.Text

import androidx.compose.material3.TextButton

import androidx.compose.runtime.Composable

import androidx.compose.runtime.getValue

import androidx.compose.ui.Alignment

import androidx.compose.ui.Modifier

import androidx.compose.ui.platform.LocalUriHandler

import androidx.compose.ui.res.painterResource

import androidx.compose.ui.semantics.contentDescription

import androidx.compose.ui.semantics.semantics

import androidx.compose.ui.text.font.FontFamily

import androidx.compose.ui.text.font.FontWeight

import androidx.compose.ui.text.input.ImeAction

import androidx.compose.ui.text.input.KeyboardType

import androidx.compose.ui.text.style.TextAlign

import androidx.compose.ui.unit.dp

import androidx.compose.ui.unit.sp

import androidx.lifecycle.compose.collectAsStateWithLifecycle

import io.oxygenhub.android.R

import io.oxygenhub.android.api.DeviceCode

@Composable

fun SignInScreen(vm: SignInViewModel) {

    val hub by vm.hub.collectAsStateWithLifecycle()

    val state by vm.state.collectAsStateWithLifecycle()

    val ended by vm.ended.collectAsStateWithLifecycle()

    SignInContent(

        hub = hub,

        state = state,

        notice = ended,

        onHubChange = vm::setHub,

        onSignIn = vm::signIn,

        onCancel = vm::cancel,

    )

}

@Composable

fun SignInContent(

    hub: String,

    state: SignInState,

    notice: String?,

    onHubChange: (String) -> Unit,

    onSignIn: () -> Unit,

    onCancel: () -> Unit,

) {

    Surface(Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {

        Box(Modifier.fillMaxSize().safeDrawingPadding().imePadding(), contentAlignment = Alignment.Center) {

            Column(

                Modifier

                    .widthIn(max = 480.dp)

                    .fillMaxWidth()

                    .verticalScroll(rememberScrollState())

                    .padding(24.dp),

                horizontalAlignment = Alignment.CenterHorizontally,

            ) {

                Image(painterResource(R.drawable.mark), contentDescription = null, modifier = Modifier.size(width = 96.dp, height = 48.dp))

                Spacer(Modifier.height(16.dp))

                Text("OxygenHub", fontSize = 36.sp, fontWeight = FontWeight.Bold, color = MaterialTheme.colorScheme.primary)

                Spacer(Modifier.height(32.dp))

                when (state) {

                    is SignInState.Idle -> Start(hub, state.error ?: notice, onHubChange, onSignIn)

                    SignInState.Requesting -> Waiting("Asking $hub for a code…")

                    is SignInState.Approving -> Approve(state.code, onCancel)

                    SignInState.Finishing -> Waiting("Approved. Signing in…")

                }

            }

        }

    }

}

@Composable

private fun Start(hub: String, error: String?, onHubChange: (String) -> Unit, onSignIn: () -> Unit) {

    Text(

        "Sign in with your browser: the app shows a code, you approve it on the hub's web page, " +

            "signed in there with your password and second factor. The app never sees either.",

        style = MaterialTheme.typography.bodyLarge,

        color = MaterialTheme.colorScheme.onSurfaceVariant,

        textAlign = TextAlign.Center,

    )

    Spacer(Modifier.height(24.dp))

    OutlinedTextField(

        value = hub,

        onValueChange = onHubChange,

        label = { Text("Hub") },

        leadingIcon = { Icon(Icons.Outlined.Dns, contentDescription = null) },

        singleLine = true,

        isError = error != null,

        supportingText = { Text(error ?: "The hub's address; oxygenhub.io unless yours is your own.") },

        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Uri, imeAction = ImeAction.Go, autoCorrectEnabled = false),

        keyboardActions = KeyboardActions(onGo = { onSignIn() }),

        modifier = Modifier.fillMaxWidth(),

    )

    Spacer(Modifier.height(16.dp))

    Button(onClick = onSignIn, enabled = hub.isNotBlank(), modifier = Modifier.fillMaxWidth().height(50.dp)) {

        Text("Sign in", fontSize = 16.sp)

    }

}

@Composable

private fun Waiting(what: String) {

    CircularProgressIndicator()

    Spacer(Modifier.height(16.dp))

    Text(what, style = MaterialTheme.typography.bodyLarge, textAlign = TextAlign.Center)

}

@Composable

private fun Approve(code: DeviceCode, onCancel: () -> Unit) {

    val uri = LocalUriHandler.current

    Text("Approve this code on the hub", style = MaterialTheme.typography.titleLarge, textAlign = TextAlign.Center)

    Spacer(Modifier.height(16.dp))

    Card(

        colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surfaceContainerHigh),

        modifier = Modifier.fillMaxWidth(),

    ) {

        Text(

            code.userCode,

            color = MaterialTheme.colorScheme.onSurface,

            fontFamily = FontFamily.Monospace,

            fontSize = 34.sp,

            fontWeight = FontWeight.Bold,

            letterSpacing = 4.sp,

            textAlign = TextAlign.Center,

            modifier = Modifier

                .fillMaxWidth()

                .padding(vertical = 24.dp)

                .semantics { contentDescription = "Code ${code.userCode.toCharArray().joinToString(" ")}" },

        )

    }

    Spacer(Modifier.height(16.dp))

    Button(onClick = { uri.openUri(code.pageToOpen) }, modifier = Modifier.fillMaxWidth().height(50.dp)) {

        Icon(Icons.AutoMirrored.Outlined.OpenInNew, contentDescription = null)

        Spacer(Modifier.size(8.dp))

        Text("Open the hub to approve", fontSize = 16.sp)

    }

    Spacer(Modifier.height(12.dp))

    Text(

        "Or on a computer, go to ${code.verificationUri} and enter the code.",

        style = MaterialTheme.typography.bodyMedium,

        color = MaterialTheme.colorScheme.onSurfaceVariant,

        textAlign = TextAlign.Center,

    )

    Spacer(Modifier.height(24.dp))

    LinearProgressIndicator(Modifier.fillMaxWidth())

    Spacer(Modifier.height(8.dp))

    Column(horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.spacedBy(4.dp)) {

        Text("Waiting for approval…", style = MaterialTheme.typography.bodyMedium)

        TextButton(onClick = onCancel) { Text("Cancel") }

    }

}