package com.aiosman.ravenow.ui.index.tabs.profile.composable

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp
import com.aiosman.ravenow.LocalNavController
import com.aiosman.ravenow.entity.MomentEntity
import com.aiosman.ravenow.ui.composables.CustomAsyncImage
import com.aiosman.ravenow.ui.modifiers.noRippleClickable
import com.aiosman.ravenow.ui.navigateToPost
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.ui.Alignment
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.sp
import com.aiosman.ravenow.LocalAppTheme
import com.aiosman.ravenow.R
import androidx.compose.material3.Text
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.lazy.grid.itemsIndexed
import androidx.compose.foundation.lazy.grid.rememberLazyGridState
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import com.aiosman.ravenow.AppState
import com.aiosman.ravenow.ui.composables.rememberDebouncer

@Composable
fun GalleryItem(
    moment: MomentEntity,
    idx: Int = 0
) {
    val navController = LocalNavController.current
    val AppColors = LocalAppTheme.current
    val debouncer = rememberDebouncer()

    Box(
        modifier = Modifier
            .fillMaxWidth()
            .let {
                val firstImage = moment.images.firstOrNull()
                if (firstImage?.width != null &&
                    firstImage.height != null &&
                    firstImage.width!! > 0 &&
                    firstImage.height!! > 0
                ) {
                    val ratio = firstImage.width!!.toFloat() / firstImage.height!!.toFloat()
                    return@let it.aspectRatio(ratio.coerceIn(0.7f, 1.5f))
                } else {
                    return@let it.aspectRatio(if (idx % 3 == 0) 1.5f else 1f)
                }
            }
            .clip(RoundedCornerShape(8.dp))
            .noRippleClickable {
                debouncer {
                    navController.navigateToPost(
                        moment.id
                    )
                }
            }
    ) {
        // 检查图片列表是否为空
        if (moment.images.isEmpty()) {
            // 显示占位符内容，类似于EmptyAgentsView
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(vertical = 60.dp),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Image(
                    painter = painterResource(R.mipmap.qs_dt_qs_img),
                    contentDescription = "暂无图片",
                    modifier = Modifier.size(181.dp),
                )

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

                Text(
                    text = "故事还没开始",
                    fontSize = 16.sp,
                    color = AppColors.text,
                    fontWeight = FontWeight.W600
                )

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

                Text(
                    text = "发布一条动态，和世界打个招呼吧",
                    fontSize = 14.sp,
                    color = AppColors.secondaryText,
                    fontWeight = FontWeight.W400
                )
            }
        } else {
            CustomAsyncImage(
                LocalContext.current,
                moment.images[0].thumbnail,
                modifier = Modifier
                    .fillMaxSize(),
                contentDescription = "",
                contentScale = ContentScale.Crop,
            )
        }
    }
}


@Composable
fun GalleryGrid(
    moments: List<MomentEntity>
) {
    val navController = LocalNavController.current
    val AppColors = LocalAppTheme.current
    val gridState = rememberLazyGridState()
    val debouncer = rememberDebouncer()

    if (moments.isEmpty()) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .verticalScroll(rememberScrollState())
                .padding(vertical = 60.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Image(
                painter = painterResource(
                    id = if(AppState.darkMode) R.mipmap.qs_dt_qs_as_img
                    else R.mipmap.qs_dt_qs_img),
                contentDescription = "暂无图片",
                modifier = Modifier.size(181.dp),
            )

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

            Text(
                text = "故事还没开始",
                fontSize = 16.sp,
                color = AppColors.text,
                fontWeight = FontWeight.W600
            )

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

            Text(
                text = "发布一条动态，和世界打个招呼吧",
                fontSize = 14.sp,
                color = AppColors.secondaryText,
                fontWeight = FontWeight.W400
            )
        }
    } else {
        LazyVerticalGrid(
            columns = GridCells.Fixed(3),
            state = gridState,
            modifier = Modifier.fillMaxSize().padding(bottom = 8.dp),
        ) {
            itemsIndexed(moments) { idx, moment ->
                if (moment != null) {
                    val itemDebouncer = rememberDebouncer()
                    Box(
                        modifier = Modifier
                            .fillMaxWidth()
                            .aspectRatio(1f)
                            .padding(2.dp)
                            .noRippleClickable {
                                itemDebouncer {
                                    navController.navigateToPost(
                                        id = moment.id,
                                        highlightCommentId = 0,
                                        initImagePagerIndex = 0
                                    )
                                }
                            }
                    ) {
                        CustomAsyncImage(
                            imageUrl = moment.images[0].thumbnail,
                            contentDescription = "",
                            modifier = Modifier.fillMaxSize(),
                            context = LocalContext.current
                        )
                        if (moment.images.size > 1) {
                            Box(
                                modifier = Modifier
                                    .padding(top = 8.dp, end = 8.dp)
                                    .align(Alignment.TopEnd)
                            ) {
                                Image(
                                    modifier = Modifier.size(24.dp),
                                    painter = painterResource(R.drawable.rider_pro_picture_more),
                                    contentDescription = "",
                                )
                            }
                        }
                    }
                }
            }
            item {
                Spacer(modifier = Modifier.height(120.dp))
            }
        }
    }
}


