package com.fastest.pass.welcome.presentation.ui.component

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
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.layout.width
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.TextUnit
import androidx.compose.ui.unit.TextUnitType
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.fastest.pass.R
import com.fastest.pass.ui.theme.Gray_Splash
import com.fastest.pass.ui.theme.Typography
import com.fastest.pass.ui.theme.Welcome_BG
import com.fastest.pass.welcome.domain.model.Welcome
import com.google.accompanist.pager.HorizontalPager
import com.google.accompanist.pager.HorizontalPagerIndicator
import com.google.accompanist.pager.rememberPagerState

enum class ClickType {
    LOGIN_CLICK,
    SIGNUP_CLICK
}

@Composable
fun WelcomeTutorial(onClick: (ClickType) -> Unit) {
    val pagerState = rememberPagerState()

    val pages = listOf(
        Welcome(
            "Welcome to FastestPass",
            R.drawable.welcome_1,
            "FastestPass securely stores, synchronizes, \nand manages your passwords and personal \ndata across all your devices.",
        ),
        Welcome(
            "Never forget again",
            R.drawable.welcome_2,
            "With just one master password, you can \naccess all the websites you use.",
        ),
        Welcome(
            "Trusted and secure",
            R.drawable.welcome_3,
            "Your vault is secured with top-tier security \nmeasures. It's so secure that even we\n cannot access your passwords.",
        )
    )

    Column(
        modifier = Modifier
            .fillMaxWidth()
//            .windowInsetsPadding(WindowInsets.navigationBars) // Adds space for system navigation
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .height(75.dp)
                .background(colorResource(id = R.color.blue_login))
        ) { }

        Box(modifier = Modifier
            .fillMaxSize()
            .padding(bottom = 0.dp)) {

            HorizontalPager(
                count = pages.size,
                state = pagerState,
                modifier = Modifier.fillMaxSize()
            ) { page ->

                WelcomePage(
                    title = pages[page].title,
                    description = pages[page].description,
                    imageRes = pages[page].image,
                    page
                ) { type ->
                    onClick(type)
                }
            }

            // Pager Indicator
            HorizontalPagerIndicator(
                pagerState = pagerState,
                modifier = Modifier
                    .align(Alignment.BottomCenter)
                    .padding(vertical = 25.dp),
                activeColor = Gray_Splash,
                inactiveColor = colorResource(id = R.color.gray_text)
            )
        }
    }
}


@Composable
fun WelcomePage(
    title: String,
    description: String,
    imageRes: Int,
    page: Int,
    onClick: (ClickType) -> Unit
) {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Welcome_BG)
    ) {
        Column(
            modifier = Modifier
                .align(Alignment.TopCenter),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            // Reserve a fixed height for the title
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .weight(1f)
                    .height(50.dp), // Adjust this height as needed
                contentAlignment = Alignment.Center
            ) {
                Text(
                    text = title,
                    style = MaterialTheme.typography.headlineLarge.copy(
                        textAlign = TextAlign.Center
                    ),
                    color = Gray_Splash,
                    modifier = Modifier.fillMaxWidth()
                )
            }

            Spacer(Modifier.height(50.dp))

            // Image in the center
            Image(
                painter = painterResource(id = imageRes),
                contentDescription = null,
                modifier = Modifier
                    .weight(1f)
                    .padding(horizontal = 20.dp)
                    .fillMaxWidth()
                    .height(250.dp)
            )

            Spacer(Modifier.height(50.dp))

            // Reserve a fixed height for the description
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .weight(1f)
                    .height(80.dp), // Adjust this height as needed
                contentAlignment = Alignment.Center
            ) {
                Text(
                    text = description,
                    style = MaterialTheme.typography.labelLarge.copy(
                        fontSize = 18.sp
                    ),
                    color = Gray_Splash,
                    textAlign = TextAlign.Center,
                    modifier = Modifier.fillMaxWidth()
                )
            }

            Column(modifier = Modifier.weight(0.5f)) {
                Spacer(Modifier.height(0.dp))
                Row(
                    verticalAlignment = Alignment.CenterVertically,
                    horizontalArrangement = Arrangement.Center,
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(vertical = 10.dp)
                ) {
                    Text(
                        text = if (page == 2) "LOG IN" else "",
                        style = Typography.displaySmall.copy(textAlign = TextAlign.Center,
                            fontSize = TextUnit(18f,
                            TextUnitType.Sp)),

                        color = Gray_Splash,
                        modifier = Modifier.clickable {
                            onClick.invoke(ClickType.LOGIN_CLICK)
                        }
                    )
                    Spacer(modifier = Modifier.width(8.dp)) // Add spacing between "Login" and "|"
                    Text(
                        text = if (page == 2) "|" else "",
                        style = Typography.displaySmall.copy(textAlign = TextAlign.Center,
                            fontSize = TextUnit(18f,
                            TextUnitType.Sp)),

                        color = Gray_Splash
                    )
                    Spacer(modifier = Modifier.width(8.dp)) // Add spacing between "|" and "SignUp"
                    Text(
                        text = if (page == 2) "SIGN UP" else "",
                        style = Typography.displaySmall.copy(textAlign = TextAlign.Center, fontSize = TextUnit(18f,
                            TextUnitType.Sp)),

                        color = Gray_Splash,
                        modifier = Modifier.clickable {
                            onClick.invoke(ClickType.SIGNUP_CLICK)
                        }
                    )
                }
            }
        }
    }
}
