package com.aiosman.ravenow.ui.index.tabs.moment

import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.Image
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.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.asPaddingValues
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
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.layout.systemBars
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.Icon
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Search
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.res.vectorResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.aiosman.ravenow.AppStore
import com.aiosman.ravenow.LocalAppTheme
import com.aiosman.ravenow.LocalNavController
import com.aiosman.ravenow.R
import com.aiosman.ravenow.ui.NavigationRoute
import com.aiosman.ravenow.ui.index.tabs.moment.tabs.dynamic.Dynamic
import com.aiosman.ravenow.ui.index.tabs.moment.tabs.expolre.Explore
import com.aiosman.ravenow.ui.index.tabs.moment.tabs.hot.HotMomentsList
import com.aiosman.ravenow.ui.index.tabs.moment.tabs.timeline.TimelineMomentsList
import com.aiosman.ravenow.ui.index.tabs.search.SearchViewModel
import com.aiosman.ravenow.ui.modifiers.noRippleClickable
import kotlinx.coroutines.launch
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.ColorFilter
import com.aiosman.ravenow.ui.composables.TabItem
import com.aiosman.ravenow.ui.composables.TabSpacer
import com.aiosman.ravenow.ui.composables.rememberDebouncer

/**
 * 动态列表
 */
@OptIn(ExperimentalMaterialApi::class, ExperimentalFoundationApi::class)
@Composable
fun MomentsList() {
    val AppColors = LocalAppTheme.current
    val navController = LocalNavController.current
    val navigationBarPaddings =
        WindowInsets.navigationBars.asPaddingValues().calculateBottomPadding() + 48.dp
    val statusBarPaddingValues = WindowInsets.systemBars.asPaddingValues()
    // 游客模式下不显示timeline，只显示2个tab：Dynamic、Hot    // 游客模式下不显示timeline，只显示3个tab：Explore、Dynamic、Hot
    val tabCount = if (AppStore.isGuest) 2 else 3        // val tabCount = if (AppStore.isGuest) 3 else 4
    var pagerState = rememberPagerState { tabCount }
    var scope = rememberCoroutineScope()
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(
                top = statusBarPaddingValues.calculateTopPadding(),
                bottom = navigationBarPaddings
            ),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .height(44.dp)
                .padding(horizontal = 16.dp),
            // center the tabs
            horizontalArrangement = Arrangement.Start,
            verticalAlignment = Alignment.CenterVertically
        ) {
            //原探索//
//            Column(
//                modifier = Modifier
//                    .noRippleClickable {
//                        scope.launch {
//                            pagerState.animateScrollToPage(0)
//                        }
//                    }.padding(start = 16.dp),
//                verticalArrangement = Arrangement.Center,
//                horizontalAlignment = Alignment.CenterHorizontally
//
//            ) {
//                Text(
//                    text = stringResource(R.string.index_worldwide),
//                    fontSize = if (pagerState.currentPage == 0)18.sp else 16.sp,
//                    color = if (pagerState.currentPage == 0) AppColors.text else AppColors.nonActiveText,
//                    fontWeight = FontWeight.W600)
//                Spacer(modifier = Modifier.height(4.dp))
//
//                Image(
//                    painter = painterResource(
//                        if (pagerState.currentPage == 0) R.mipmap.tab_indicator_selected
//                        else R.drawable.tab_indicator_unselected
//                    ),
//                    contentDescription = "tab indicator",
//                    modifier = Modifier
//                        .width(34.dp)
//                        .height(4.dp)
//                )
//
//            }
//            Spacer(modifier = Modifier.width(16.dp))
            val lastClickTime = remember { mutableStateOf(0L) }
            val clickDelay = 500L
            Text(
                text = stringResource(R.string.moment),
                fontSize = 20.sp,
                fontWeight = FontWeight.W900,
                color = AppColors.text,
                modifier = Modifier
                    .align(Alignment.CenterVertically)
            )

            Spacer(modifier = Modifier.weight(1f))

            Image(
                painter = painterResource(id = R.drawable.rider_pro_nav_search),
                contentDescription = "search",
                modifier = Modifier
                    .size(24.dp)
                    .noRippleClickable {
                        val currentTime = System.currentTimeMillis()
                        if (currentTime - lastClickTime.value > clickDelay) {
                            lastClickTime.value = currentTime
                            navController.navigate(NavigationRoute.Search.route)
                        }
                    },
                colorFilter = ColorFilter.tint(AppColors.text)
            )
        }

        Spacer(modifier = Modifier.height(23.dp))

        Row(
            modifier = Modifier
                .fillMaxWidth()
                .wrapContentHeight()
                .padding(start = 16.dp, bottom = 16.dp),
            horizontalArrangement = Arrangement.Start,
            verticalAlignment = Alignment.Bottom
        ) {
            val tabDebouncer = rememberDebouncer()

            // 新探索标签
            Box {
                CustomTabItem(
                    text = stringResource(R.string.index_worldwide),
                    isSelected = pagerState.currentPage == 0,
                    onClick = {
                        tabDebouncer {
                            scope.launch {
                                pagerState.animateScrollToPage(0)
                            }
                        }
                    }
                )
            }

            TabSpacer()

            // 只有非游客用户才显示"关注"tab
            if (!AppStore.isGuest) {
                Box {
                    CustomTabItem(
                        text = stringResource(R.string.index_following),
                        isSelected = pagerState.currentPage == 1,
                        onClick = {
                            tabDebouncer {
                                scope.launch {
                                    pagerState.animateScrollToPage(1)
                                }
                            }
                        }
                    )
                }

                TabSpacer()

                // 热门标签
                Box {
                    CustomTabItem(
                        text = stringResource(R.string.index_hot),
                        isSelected = pagerState.currentPage == 2,
                        onClick = {
                            tabDebouncer {
                                scope.launch {
                                    pagerState.animateScrollToPage(2)
                                }
                            }
                        }
                    )
                }
            } else {
                // 热门标签 (游客模式)
                Box {
                    CustomTabItem(
                        text = stringResource(R.string.index_hot),
                        isSelected = pagerState.currentPage == 1,
                        onClick = {
                            tabDebouncer {
                                scope.launch {
                                    pagerState.animateScrollToPage(1)
                                }
                            }
                        }
                    )
                }
            }
        }

        HorizontalPager(
            state = pagerState,
            modifier = Modifier
                .fillMaxWidth()
                .weight(1f)
        ) {
            if (AppStore.isGuest) {
                // 游客模式：Dynamic(0), Hot(1)
                when (it) {
                    0 -> {
                        Dynamic()
                    }
                    1 -> {
                        HotMomentsList()
                    }
                }
            } else {
                // 正常用户：Dynamic(0), Timeline(1), Hot(2)
                when (it) {
                    0 -> {
                        Dynamic()
                    }
                    1 -> {
                        TimelineMomentsList()
                    }
                    2 -> {
                        HotMomentsList()
                    }
                }
            }
        }
    }
}
@Composable
fun CustomTabItem(
    text: String,
    isSelected: Boolean,
    onClick: () -> Unit,
    modifier: Modifier = Modifier
) {
    val AppColors = LocalAppTheme.current

    Column(
        modifier = modifier
            .noRippleClickable { onClick() },
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = text,
            fontSize = 15.sp,
            color = if (isSelected) AppColors.tabSelectedText else AppColors.tabUnselectedText,
            modifier = Modifier
                .clip(RoundedCornerShape(12.dp))
                .background(if (isSelected) AppColors.tabSelectedBackground else AppColors.tabUnselectedBackground)
                .padding(horizontal = 16.dp, vertical = 8.dp)
        )
    }
}

