package com.craigvg.lichun_android.ui.screens.home

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.material.icons.filled.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.hilt.navigation.compose.hiltViewModel
import com.craigvg.lichun_android.ui.components.cards.BaseCard
import com.craigvg.lichun_android.ui.theme.AppColors
import com.craigvg.lichun_android.ui.theme.AppSpacing
import com.craigvg.lichun_android.ui.theme.AppTypography
import com.craigvg.lichun_android.viewmodel.GameStateViewModel
import androidx.lifecycle.compose.collectAsStateWithLifecycle

/**
 * Card-based menu screen for accessing features: Settings, Achievements, Store, etc.
 * Ported from iOS MoreView.swift
 */
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MoreScreen(
    gameStateViewModel: GameStateViewModel = hiltViewModel(),
    onBack: () -> Unit = {},
    onSettings: () -> Unit = {},
    onAchievements: () -> Unit = {},
    onAchievementCollection: () -> Unit = {},
    onDailyRewards: () -> Unit = {},
    onDailyQuests: () -> Unit = {},
    onLifeGoals: () -> Unit = {},
    onPrestige: () -> Unit = {},
    onPerformActivity: () -> Unit = {},
    onStore: () -> Unit = {},
    onRelationships: () -> Unit = {},
    onItems: () -> Unit = {},
    onEnergyRefill: () -> Unit = {}
) {
    val dailyRewardState by gameStateViewModel.dailyRewardState.collectAsStateWithLifecycle()
    val dailyQuestsState by gameStateViewModel.dailyQuestsState.collectAsStateWithLifecycle()

    val hasDailyRewardAvailable = dailyRewardState?.let { it.canClaim && !it.todaysClaimed } ?: false
    val dailyQuestsClaimableCount = dailyQuestsState?.quests?.count { it.canClaim } ?: 0

    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("More", style = AppTypography.headline) },
                navigationIcon = {
                    IconButton(onClick = onBack) {
                        Icon(Icons.AutoMirrored.Filled.ArrowBack, "Back", tint = AppColors.primaryText)
                    }
                },
                colors = TopAppBarDefaults.topAppBarColors(containerColor = AppColors.surfaceElevated)
            )
        },
        containerColor = AppColors.background
    ) { paddingValues ->
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(paddingValues)
                .verticalScroll(rememberScrollState())
                .padding(horizontal = AppSpacing.md)
        ) {
            Spacer(modifier = Modifier.height(AppSpacing.md))

            // Header
            Column(
                modifier = Modifier.fillMaxWidth(),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text("Explore features and options", style = AppTypography.body, color = AppColors.secondaryText)
            }

            Spacer(modifier = Modifier.height(AppSpacing.lg))

            // Game Features Section
            Text("Game Features", style = AppTypography.headline, color = AppColors.primaryText)
            Spacer(modifier = Modifier.height(AppSpacing.sm))

            Row(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.spacedBy(AppSpacing.sm)
            ) {
                CozyMenuCard(
                    icon = Icons.Default.People,
                    title = "Characters",
                    color = AppColors.friend,
                    onClick = onRelationships,
                    modifier = Modifier.weight(1f)
                )
                CozyMenuCard(
                    icon = Icons.Default.ShoppingBag,
                    title = "Store",
                    color = AppColors.accent,
                    onClick = onStore,
                    modifier = Modifier.weight(1f)
                )
            }

            Spacer(modifier = Modifier.height(AppSpacing.sm))

            Row(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.spacedBy(AppSpacing.sm)
            ) {
                CozyMenuCard(
                    icon = Icons.Default.EmojiEvents,
                    title = "Achievements",
                    color = AppColors.prestige,
                    onClick = onAchievements,
                    modifier = Modifier.weight(1f)
                )
                CozyMenuCard(
                    icon = Icons.Default.Inventory2,
                    title = "Items",
                    color = AppColors.accent,
                    onClick = onItems,
                    modifier = Modifier.weight(1f)
                )
            }

            Spacer(modifier = Modifier.height(AppSpacing.sm))

            Row(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.spacedBy(AppSpacing.sm)
            ) {
                CozyMenuCard(
                    icon = Icons.Default.Settings,
                    title = "Settings",
                    color = AppColors.secondary,
                    onClick = onSettings,
                    modifier = Modifier.weight(1f)
                )
                Spacer(modifier = Modifier.weight(1f))
            }

            Spacer(modifier = Modifier.height(AppSpacing.lg))

            // Progression Section (Wave 2 fun/balance)
            Text("Progression", style = AppTypography.headline, color = AppColors.primaryText)
            Spacer(modifier = Modifier.height(AppSpacing.sm))

            CozyMenuListItem(
                icon = Icons.Default.Flag,
                title = "Life Goals",
                subtitle = "Track your long-term aspirations",
                color = AppColors.prestige,
                onClick = onLifeGoals
            )
            Spacer(modifier = Modifier.height(AppSpacing.sm))
            CozyMenuListItem(
                icon = Icons.Default.EmojiEvents,
                title = "Collection",
                subtitle = "Your achievement trophy case",
                color = AppColors.accent,
                onClick = onAchievementCollection
            )
            Spacer(modifier = Modifier.height(AppSpacing.sm))
            CozyMenuListItem(
                icon = Icons.Default.WorkspacePremium,
                title = "Prestige",
                subtitle = "What your prestige unlocks",
                color = AppColors.secondary,
                onClick = onPrestige
            )
            Spacer(modifier = Modifier.height(AppSpacing.sm))
            CozyMenuListItem(
                icon = Icons.Default.Bolt,
                title = "Do an Activity",
                subtitle = "Take charge of your day",
                color = AppColors.energy,
                onClick = onPerformActivity
            )

            Spacer(modifier = Modifier.height(AppSpacing.lg))

            // Daily Activities Section
            Text("Daily Activities", style = AppTypography.headline, color = AppColors.primaryText)
            Spacer(modifier = Modifier.height(AppSpacing.sm))

            CozyMenuListItem(
                icon = Icons.Default.CalendarMonth,
                title = "Daily Rewards",
                subtitle = dailyRewardState?.let {
                    if (it.currentStreak > 0) "${it.currentStreak} day streak" else null
                },
                color = AppColors.happiness,
                hasBadge = hasDailyRewardAvailable,
                onClick = onDailyRewards
            )

            Spacer(modifier = Modifier.height(AppSpacing.sm))

            CozyMenuListItem(
                icon = Icons.Default.Checklist,
                title = "Daily Quests",
                subtitle = if (dailyQuestsClaimableCount > 0) "$dailyQuestsClaimableCount ready to claim" else null,
                color = AppColors.intelligence,
                hasBadge = dailyQuestsClaimableCount > 0,
                onClick = onDailyQuests
            )

            Spacer(modifier = Modifier.height(AppSpacing.lg))

            // Special Actions Section
            Text("Special Actions", style = AppTypography.headline, color = AppColors.primaryText)
            Spacer(modifier = Modifier.height(AppSpacing.sm))

            CozyMenuListItem(
                icon = Icons.Default.FastForward,
                title = "Time Skip",
                subtitle = "Jump ahead in time",
                color = AppColors.primary,
                onClick = { gameStateViewModel.showTimeSkipModal() }
            )

            Spacer(modifier = Modifier.height(AppSpacing.sm))

            CozyMenuListItem(
                icon = Icons.Default.BatteryChargingFull,
                title = "Energy Refill",
                subtitle = "Recharge your energy",
                color = AppColors.energy,
                onClick = onEnergyRefill
            )

            Spacer(modifier = Modifier.height(AppSpacing.xl))
        }
    }
}

@Composable
private fun CozyMenuCard(
    icon: ImageVector,
    title: String,
    color: Color,
    onClick: () -> Unit,
    modifier: Modifier = Modifier
) {
    Card(
        onClick = onClick,
        modifier = modifier.height(120.dp),
        shape = androidx.compose.foundation.shape.RoundedCornerShape(AppSpacing.cornerRadius),
        colors = CardDefaults.cardColors(containerColor = AppColors.surfaceElevated),
        elevation = CardDefaults.cardElevation(defaultElevation = 2.dp)
    ) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(AppSpacing.md),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center
        ) {
            Box(
                modifier = Modifier
                    .size(56.dp)
                    .background(color.copy(alpha = 0.15f), CircleShape),
                contentAlignment = Alignment.Center
            ) {
                Icon(icon, contentDescription = null, tint = color, modifier = Modifier.size(26.dp))
            }
            Spacer(modifier = Modifier.height(AppSpacing.sm))
            Text(title, style = AppTypography.bodyBold, color = AppColors.primaryText, textAlign = TextAlign.Center)
        }
    }
}

@Composable
private fun CozyMenuListItem(
    icon: ImageVector,
    title: String,
    subtitle: String?,
    color: Color,
    hasBadge: Boolean = false,
    onClick: () -> Unit
) {
    Card(
        onClick = onClick,
        modifier = Modifier.fillMaxWidth(),
        shape = androidx.compose.foundation.shape.RoundedCornerShape(AppSpacing.cornerRadius),
        colors = CardDefaults.cardColors(containerColor = AppColors.surfaceElevated),
        elevation = CardDefaults.cardElevation(defaultElevation = 2.dp)
    ) {
        Row(
            modifier = Modifier.padding(AppSpacing.md),
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.spacedBy(AppSpacing.md)
        ) {
            Box(contentAlignment = Alignment.Center) {
                Box(
                    modifier = Modifier
                        .size(44.dp)
                        .background(color.copy(alpha = 0.15f), CircleShape),
                    contentAlignment = Alignment.Center
                ) {
                    Icon(icon, contentDescription = null, tint = color, modifier = Modifier.size(20.dp))
                }
                if (hasBadge) {
                    Box(
                        modifier = Modifier
                            .size(10.dp)
                            .background(AppColors.error, CircleShape)
                            .align(Alignment.TopEnd)
                    )
                }
            }

            Column(modifier = Modifier.weight(1f)) {
                Text(title, style = AppTypography.bodyBold, color = AppColors.primaryText)
                subtitle?.let {
                    Text(it, style = AppTypography.caption, color = AppColors.secondaryText)
                }
            }

            Icon(
                Icons.Default.ChevronRight,
                contentDescription = null,
                tint = AppColors.secondaryText,
                modifier = Modifier.size(20.dp)
            )
        }
    }
}