package com.aiosman.riderpro.ui.index

import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.core.tween
import androidx.compose.animation.slideInHorizontally
import androidx.compose.animation.slideOutHorizontally
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.navigationBars
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.material3.Icon
import androidx.compose.material3.NavigationBar
import androidx.compose.material3.NavigationBarItem
import androidx.compose.material3.NavigationBarItemColors
import androidx.compose.material3.Scaffold
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.unit.dp
import androidx.navigation.navOptions
import com.aiosman.riderpro.LocalNavController
import com.aiosman.riderpro.ui.NavigationRoute
import com.aiosman.riderpro.ui.index.tabs.add.AddPage
import com.aiosman.riderpro.ui.index.tabs.message.NotificationsScreen
import com.aiosman.riderpro.ui.index.tabs.moment.MomentsList
import com.aiosman.riderpro.ui.index.tabs.profile.ProfilePage
import com.aiosman.riderpro.ui.index.tabs.search.DiscoverScreen
import com.aiosman.riderpro.ui.index.tabs.search.SearchScreen
import com.aiosman.riderpro.ui.index.tabs.shorts.ShortVideo
import com.aiosman.riderpro.ui.index.tabs.street.StreetPage
import com.aiosman.riderpro.ui.message.MessagePage
import com.aiosman.riderpro.ui.post.NewPostViewModel
import com.google.accompanist.systemuicontroller.rememberSystemUiController
import kotlinx.coroutines.launch

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun IndexScreen() {
    val model = IndexViewModel
    val navigationBarHeight = with(LocalDensity.current) {
        WindowInsets.navigationBars.getBottom(this).toDp()
    }
    val navController = LocalNavController.current
    val item = listOf(
        NavigationItem.Home,
        NavigationItem.Search,
        NavigationItem.Add,
        NavigationItem.Notification,
        NavigationItem.Profile
    )
    val systemUiController = rememberSystemUiController()
    val pagerState = rememberPagerState(pageCount = { item.size })
    val coroutineScope = rememberCoroutineScope()

    LaunchedEffect(Unit) {
        systemUiController.setNavigationBarColor(Color.Transparent)
    }
    Scaffold(
        bottomBar = {
            NavigationBar(
                modifier = Modifier.height(56.dp + navigationBarHeight),
                containerColor = Color.Black
            ) {
                item.forEachIndexed { idx, it ->
                    val isSelected = model.tabIndex == idx
                    val iconTint by animateColorAsState(
                        targetValue = if (isSelected) Color.White else Color.White,
                        animationSpec = tween(durationMillis = 250), label = ""
                    )
                    NavigationBarItem(
                        selected = isSelected,
                        onClick = {
                            if (it.route === NavigationItem.Add.route) {
                                NewPostViewModel.asNewPost()
                                navController.navigate(NavigationRoute.NewPost.route)
                                return@NavigationBarItem
                            }
                            coroutineScope.launch {
                                pagerState.scrollToPage(idx)
                            }
                            model.tabIndex = idx
                        },
                        colors = NavigationBarItemColors(
                            selectedTextColor = Color.Red,
                            selectedIndicatorColor = Color.Black,
                            unselectedTextColor = Color.Red,
                            disabledIconColor = Color.Red,
                            disabledTextColor = Color.Red,
                            selectedIconColor = iconTint,
                            unselectedIconColor = iconTint,
                        ),
                        icon = {
                            Icon(
                                modifier = Modifier.size(24.dp),
                                imageVector = if (isSelected) it.selectedIcon() else it.icon(),
                                contentDescription = null,
                                tint = iconTint
                            )
                        }
                    )
                }
            }
        }
    ) { innerPadding ->
        innerPadding
        HorizontalPager(
            state = pagerState,
            modifier = Modifier.padding(0.dp),
            beyondBoundsPageCount = 5,
            userScrollEnabled = false
        ) { page ->
            when (page) {
                0 -> Home()
                1 -> DiscoverScreen()
                2 -> Add()
                3 -> Notifications()
                4 -> Profile()
            }
        }
    }
}

@Composable
fun Home() {
    val systemUiController = rememberSystemUiController()
    LaunchedEffect(Unit) {
        systemUiController.setStatusBarColor(Color.Transparent, darkIcons = true)
    }
    Column(
        modifier = Modifier
            .fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        MomentsList()
    }
}


@Composable
fun Street() {
    val systemUiController = rememberSystemUiController()
    LaunchedEffect(Unit) {
        systemUiController.setStatusBarColor(Color.Transparent, darkIcons = true)
    }
    Column(
        modifier = Modifier
            .fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        StreetPage()
    }
}

@Composable
fun Add() {
    val systemUiController = rememberSystemUiController()
    LaunchedEffect(Unit) {
        systemUiController.setStatusBarColor(Color.Black, darkIcons = false)
    }
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Black),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        AddPage()
    }
}

@Composable
fun Video() {
    val systemUiController = rememberSystemUiController()
    LaunchedEffect(Unit) {
        systemUiController.setStatusBarColor(Color.Black, darkIcons = false)
    }
    Column(
        modifier = Modifier
            .fillMaxSize(),
        verticalArrangement = Arrangement.Top,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        ShortVideo()
    }
}


@Composable
fun Profile() {
    val systemUiController = rememberSystemUiController()
    LaunchedEffect(Unit) {
        systemUiController.setStatusBarColor(Color.Transparent, darkIcons = true)
    }
    Column(
        modifier = Modifier
            .fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        ProfilePage()
    }
}

@Composable
fun Notifications() {
    val systemUiController = rememberSystemUiController()
    LaunchedEffect(Unit) {
        systemUiController.setStatusBarColor(Color.Transparent, darkIcons = true)
    }
    Column(
        modifier = Modifier
            .fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        NotificationsScreen()
    }
}