package com.vpn.fastestvpnservice.screensTV

import android.app.Activity
import android.util.Log
import android.widget.Toast
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.Image
import androidx.compose.foundation.LocalOverscrollConfiguration
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.focusable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ColumnScope
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.size
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.Message
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.draw.clip
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.focus.focusRequester
import androidx.compose.ui.focus.onFocusChanged
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.graphics.toArgb
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.input.key.Key
import androidx.compose.ui.input.key.KeyEventType
import androidx.compose.ui.input.key.key
import androidx.compose.ui.input.key.onKeyEvent
import androidx.compose.ui.input.key.type
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalView
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.TextUnit
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.core.view.WindowCompat
import androidx.navigation.NavHostController
import com.vpn.fastestvpnservice.R
import com.vpn.fastestvpnservice.beans.isDarkTheme
import com.vpn.fastestvpnservice.navigation.customNavigation
import com.vpn.fastestvpnservice.navigation.isHelpScreenPressed
import com.vpn.fastestvpnservice.navigation.isSecondItemPressed
import com.vpn.fastestvpnservice.navigation.isThirdItemPressed
import com.vpn.fastestvpnservice.sealedClass.BottomBarScreen
import com.vpn.fastestvpnservice.sealedClass.Screen

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun HelpTV(navHostController: NavHostController) {
    val focusRequester1 = remember { FocusRequester() }
    val focusRequester2 = remember { FocusRequester() }
    val context = LocalContext.current

    CompositionLocalProvider(
        LocalOverscrollConfiguration provides null
    ) {
        Box(
            modifier = Modifier
                .background(colorResource(id = R.color.background_color_gray))
                .fillMaxSize()
                .padding(vertical = 10.dp)
                .verticalScroll(rememberScrollState()),
//        contentAlignment = Alignment.Center
        ) {
            val view = LocalView.current
            val window = (view.context as Activity).window
            window.statusBarColor = Color.Transparent.toArgb()
            window.navigationBarColor = Color.Transparent.toArgb()
            WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = !isDarkTheme.value

            if (isHelpScreenPressed.value) {
                LaunchedEffect(Unit) {
                    focusRequester1.requestFocus()
                }
                isHelpScreenPressed.value = false
            }

            Column(
                verticalArrangement = Arrangement.Top,
                horizontalAlignment = Alignment.Start,
                modifier = Modifier
                    .padding(start = 16.dp, end = 24.dp)
                    .fillMaxSize()
            ) {
                Spacer(modifier = Modifier.height(50.dp))
                AddTextHelpTV(
                    text = "Help",
                    size = 28.sp,
                    color = MaterialTheme.colorScheme.inversePrimary
                )
                Spacer(modifier = Modifier.height(22.dp))
                AddRowTV(
                    icon = R.drawable.faq3x,
                    text = "FAQ", navHostController = navHostController,
                    topPadding = 22.dp,
                    focusRequester1 = focusRequester1,
                    onClick = {navHostController.navigate(
                        Screen.FAQ.route
                    )},
                )
                AddRowTV(
                    icon = R.drawable.privacy3x,
                    text = "Privacy Policy",
                    navHostController = navHostController,
                    onClick = {
                        navHostController.navigate(
                        Screen.PrivacyPolicy.route
                    )
                    },
                )
                AddRowTV(
                    icon = R.drawable.terms3x,
                    text = "Terms and Conditions",
                    navHostController = navHostController,
                    onClick = {
                        navHostController.navigate(
                            Screen.TermsAndConditions.route
                        )
                    },
                )
                AddRowTV(
                    icon = R.drawable.about3x,
                    text = "About Fastest VPN",
                    navHostController = navHostController,
                    onClick = {
                        navHostController.navigate(
                            Screen.About.route
                        )
                    },
                )
                AddRowTV(
                    icon = R.drawable.faq3x,
                    text = "Customer Support",
                    navHostController = navHostController,
                    onClick = {
                        navHostController.navigate(
                            Screen.CustomerSupport.route
                        )
                    },
                    isIconTV = false
                )
                AddRowTV(
                    icon = R.drawable.customer_support3x,
                    text = "Email Us",
                    navHostController = navHostController,
                    onClick = {
                        navHostController.navigate(
                            Screen.EmailUs.route
                        )
                    },
                    isLastRow = true
                )
            }
        }
    }
}

@Composable
fun ColumnScope.AddRowTV(
    icon: Int,
    text: String,
    navHostController: NavHostController,
    topPadding: Dp = 40.dp,
    focusRequester1: FocusRequester = FocusRequester(),
    onClick: () -> Unit,
    isIconTV: Boolean = true,
    isLastRow: Boolean = false
) {
    var isRowFocused by remember { mutableStateOf(false) }
    val context = LocalContext.current
    val icon1 = painterResource(id = icon)
    val icon2 = Icons.AutoMirrored.Filled.Message
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(top = 5.dp)
            .clip(RoundedCornerShape(4.dp))
            .background(if (isRowFocused) Color.LightGray else Color.White)
            .height(61.dp)
            .onKeyEvent {
                if (isLastRow) {
                    if (it.type == KeyEventType.KeyDown && it.key == Key.DirectionDown) {
                        Toast
                            .makeText(
                                context, "KeyDown & DirectionDown Email", Toast.LENGTH_SHORT
                            )
                            .show()
//                        customNavigation(navHostController, BottomBarScreen.Help)
                        isThirdItemPressed.value = true
                        true
                    }
                    else if (it.type == KeyEventType.KeyUp && it.key == Key.DirectionUp) {
                        Toast
                            .makeText(
                                context, "KeyUp & DirectionUp Email", Toast.LENGTH_SHORT
                            )
                            .show()
                        false
                    }
                    else {
                        false
                    }
                } else { false }
            }
            .focusRequester(focusRequester1)
            .onFocusChanged {
                isRowFocused = it.isFocused
            }
            .focusable()
//            .clickable {
//                Log.d("test_row", "Clicked Row ${onClick.toString()}")
//                Toast.makeText(
//                    context, text, Toast.LENGTH_SHORT
//                ).show()
////                onClick()
//            }
        ,
        horizontalArrangement = Arrangement.Start,
        verticalAlignment = Alignment.CenterVertically
    ) {

        Surface(
            modifier = Modifier.padding(start = 20.dp),
            color = Color.Transparent
        ) {
            if (isIconTV) {
                Image(
                    icon1,
                    contentDescription = "World",
                    modifier = Modifier
                        .padding(start = 0.dp)
                        .size(24.dp)
                        .weight(1f),
                    colorFilter = ColorFilter.tint(
                        MaterialTheme.colorScheme.inversePrimary)
                )
            } else {
                Image(
                    icon2,
                    contentDescription = "World",
                    modifier = Modifier
                        .padding(start = 0.dp)
                        .size(24.dp)
                        .weight(1f),
                    colorFilter = ColorFilter.tint(
                        MaterialTheme.colorScheme.inversePrimary)
                )
            }
        }

        Surface(
            modifier = Modifier.padding(start = 0.dp),
            color = Color.Transparent
        ) {
            Text(text = text,
                color = MaterialTheme.colorScheme.inversePrimary,
                style = MaterialTheme.typography.titleSmall,
                maxLines = 2,
                modifier = Modifier
                    .padding(start = 18.dp, end = 0.dp)
                    .weight(1f)
            )
        }
        Spacer(modifier = Modifier.weight(1f))

        Surface(
            modifier = Modifier
                .padding(end = 20.dp)
                .align(Alignment.CenterVertically),
            color = Color.Transparent

        ) {
            Image(
                painter = painterResource(
                    id = R.drawable.frontarrow3x),
                contentDescription = "Front_Arrow",
                modifier = Modifier
                    .padding(start = 0.dp, end = 3.dp)
                    .size(10.dp, 18.dp)
                    .weight(1f)
                    .alpha(1F),
                colorFilter = ColorFilter.tint(
                    MaterialTheme.colorScheme.inversePrimary)
            )
        }


    }
}

@Composable
fun ColumnScope.AddRowIconTV(
    icon: ImageVector,
    text: String,
    navHostController: NavHostController,
    topPadding: Dp = 40.dp,
    onClick: () -> Unit
) {
    var isRowFocused by remember { mutableStateOf(false) }
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(top = 5.dp)
            .background(if (isRowFocused) Color.LightGray else Color.White)
            .height(61.dp)
            .onFocusChanged {
                isRowFocused = it.isFocused
            }
//            .pointerInput(Unit) {
//                detectTapGestures {
//                    Log.d("test_row", "Clicked Row ${onClick().toString()}")
//                    onClick()
//                }
//            }
//            .clickable {
//                Log.d("test_row", "Clicked Row ${onClick.toString()}")
//                onClick()
//            }
        ,
        horizontalArrangement = Arrangement.Start,
        verticalAlignment = Alignment.CenterVertically
    ) {

        Surface(
            modifier = Modifier.padding(start = 20.dp),
            color = Color.Transparent
        ) {
            Image(
                imageVector = icon,
                contentDescription = "World",
                modifier = Modifier
                    .padding(start = 0.dp)
                    .size(24.dp)
                    .weight(1f),
                colorFilter = ColorFilter.tint(
                    MaterialTheme.colorScheme.inversePrimary)
            )
        }

        Surface(
            modifier = Modifier.padding(start = 0.dp),
            color = Color.Transparent
        ) {
            Text(text = text,
                color = MaterialTheme.colorScheme.inversePrimary,
                style = MaterialTheme.typography.titleSmall,
                maxLines = 2,
                modifier = Modifier
                    .padding(start = 18.dp, end = 0.dp)
                    .weight(1f)
            )
        }
        Spacer(modifier = Modifier.weight(1f))

        Surface(
            modifier = Modifier
                .padding(end = 20.dp)
                .align(Alignment.CenterVertically),
            color = Color.Transparent

        ) {
            Image(
                painter = painterResource(
                    id = R.drawable.frontarrow3x),
                contentDescription = "Front_Arrow",
                modifier = Modifier
                    .padding(start = 0.dp, end = 3.dp)
                    .size(10.dp, 18.dp)
                    .weight(1f)
                    .alpha(1F),
                colorFilter = ColorFilter.tint(
                    MaterialTheme.colorScheme.inversePrimary)
            )
        }


    }
}

@Composable
fun ColumnScope.AddTextHelpTV(text: String, size: TextUnit, color: Color) {
    Text(
        text = text,
        color = color,
        style = MaterialTheme.typography.headlineLarge,
    )
}