package com.craigvg.lichun_android.ui.screens.monetization

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
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.draw.clip
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.hilt.navigation.compose.hiltViewModel
import com.craigvg.lichun_android.domain.models.TimeSkipTier
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

/**
 * Time skip purchase modal with cozy UI design
 * Ported from iOS TimeSkipModal.swift
 */
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TimeSkipModal(
    gameStateViewModel: GameStateViewModel = hiltViewModel(),
    onDismiss: () -> Unit = {}
) {
    val diamonds by gameStateViewModel.diamonds.collectAsStateWithLifecycle()
    val timeSkipTiers by gameStateViewModel.timeSkipTiers.collectAsStateWithLifecycle()

    var selectedTier by remember { mutableStateOf<TimeSkipTier?>(null) }
    var showingConfirmation by remember { mutableStateOf(false) }

    LaunchedEffect(Unit) {
        gameStateViewModel.fetchTimeSkipTiers()
    }

    Scaffold(
        topBar = {
            TopAppBar(
                title = { },
                navigationIcon = { },
                actions = {
                    IconButton(onClick = onDismiss) {
                        Icon(
                            imageVector = Icons.Default.Close,
                            contentDescription = "Close",
                            tint = AppColors.secondaryText
                        )
                    }
                },
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = AppColors.background
                )
            )
        },
        containerColor = AppColors.background
    ) { paddingValues ->
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(paddingValues)
                .verticalScroll(rememberScrollState())
        ) {
            // Header with icon and title
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(horizontal = AppSpacing.md),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                // Icon
                Box(
                    modifier = Modifier
                        .size(90.dp)
                        .clip(CircleShape)
                        .background(
                            Brush.linearGradient(
                                colors = listOf(
                                    AppColors.timeSkipGradientStart,
                                    AppColors.timeSkipGradientEnd
                                )
                            )
                        )
                        .shadow(12.dp, CircleShape),
                    contentAlignment = Alignment.Center
                ) {
                    Icon(
                        imageVector = Icons.Default.FastForward,
                        contentDescription = null,
                        tint = Color.White,
                        modifier = Modifier.size(45.dp)
                    )
                }

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

                Text(
                    text = "Time Skip",
                    style = AppTypography.title,
                    color = AppColors.primaryText
                )

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

                Text(
                    text = "Fast forward through time",
                    style = AppTypography.body,
                    color = AppColors.secondaryText
                )
            }

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

            // Current Diamond Balance
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(horizontal = AppSpacing.md),
                horizontalArrangement = Arrangement.Center
            ) {
                TimeSkipStatCard(
                    icon = Icons.Default.Diamond,
                    label = "Diamonds",
                    value = "$diamonds",
                    color = AppColors.diamond
                )
            }

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

            // Warning Banner
            WarningBanner(
                modifier = Modifier.padding(horizontal = AppSpacing.md)
            )

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

            // Time Skip Tiers
            Column(
                modifier = Modifier.padding(horizontal = AppSpacing.md),
                verticalArrangement = Arrangement.spacedBy(AppSpacing.md)
            ) {
                timeSkipTiers.forEach { tier ->
                    TimeSkipTierCard(
                        tier = tier,
                        canAfford = diamonds >= tier.diamonds,
                        onPurchase = {
                            selectedTier = tier
                            showingConfirmation = true
                        }
                    )
                }
            }

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

    // Confirmation dialog
    if (showingConfirmation && selectedTier != null) {
        AlertDialog(
            onDismissRequest = {
                showingConfirmation = false
                selectedTier = null
            },
            title = { Text("Confirm Time Skip") },
            text = {
                Text("Skip ${selectedTier?.displayName} for ${selectedTier?.diamonds} diamonds? Events will be simulated.")
            },
            confirmButton = {
                TextButton(
                    onClick = {
                        selectedTier?.let { tier ->
                            gameStateViewModel.purchaseTimeSkip(tier.type)
                        }
                        showingConfirmation = false
                        selectedTier = null
                        onDismiss()
                    }
                ) {
                    Text("Skip Time")
                }
            },
            dismissButton = {
                TextButton(
                    onClick = {
                        showingConfirmation = false
                        selectedTier = null
                    }
                ) {
                    Text("Cancel")
                }
            }
        )
    }
}

@Composable
private fun TimeSkipStatCard(
    icon: androidx.compose.ui.graphics.vector.ImageVector,
    label: String,
    value: String,
    color: Color
) {
    Card(
        shape = RoundedCornerShape(AppSpacing.cornerRadius),
        colors = CardDefaults.cardColors(
            containerColor = color.copy(alpha = 0.1f)
        )
    ) {
        Column(
            modifier = Modifier.padding(AppSpacing.md),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Icon(
                imageVector = icon,
                contentDescription = null,
                tint = color,
                modifier = Modifier.size(24.dp)
            )
            Spacer(modifier = Modifier.height(AppSpacing.xs))
            Text(
                text = value,
                fontSize = 22.sp,
                fontWeight = FontWeight.Bold,
                color = AppColors.primaryText
            )
            Text(
                text = label,
                style = AppTypography.caption,
                color = AppColors.secondaryText
            )
        }
    }
}

@Composable
private fun WarningBanner(
    modifier: Modifier = Modifier
) {
    Card(
        modifier = modifier.fillMaxWidth(),
        shape = RoundedCornerShape(AppSpacing.cornerRadius),
        colors = CardDefaults.cardColors(
            containerColor = AppColors.warning.copy(alpha = 0.15f)
        )
    ) {
        Row(
            modifier = Modifier.padding(AppSpacing.md),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Icon(
                imageVector = Icons.Default.Warning,
                contentDescription = null,
                tint = AppColors.warning,
                modifier = Modifier.size(20.dp)
            )
            Spacer(modifier = Modifier.width(AppSpacing.sm))
            Column {
                Text(
                    text = "Events Will Be Simulated",
                    style = AppTypography.captionBold,
                    color = AppColors.primaryText
                )
                Text(
                    text = "Work, school, and activities continue automatically",
                    style = AppTypography.caption,
                    color = AppColors.secondaryText
                )
            }
        }
    }
}

@Composable
private fun TimeSkipTierCard(
    tier: TimeSkipTier,
    canAfford: Boolean,
    onPurchase: () -> Unit
) {
    Card(
        modifier = Modifier.fillMaxWidth(),
        shape = RoundedCornerShape(20.dp),
        colors = CardDefaults.cardColors(
            containerColor = AppColors.surfaceElevated
        ),
        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(AppSpacing.md),
            verticalAlignment = Alignment.CenterVertically
        ) {
            // Icon
            Box(
                modifier = Modifier
                    .size(60.dp)
                    .clip(CircleShape)
                    .background(
                        AppColors.timeSkipIconBg.copy(alpha = 0.3f)
                    ),
                contentAlignment = Alignment.Center
            ) {
                Icon(
                    imageVector = when (tier.type) {
                        "hour" -> Icons.Default.Timer
                        "day" -> Icons.Default.Today
                        "week" -> Icons.Default.DateRange
                        else -> Icons.Default.SkipNext
                    },
                    contentDescription = null,
                    tint = AppColors.timeSkipIconTint,
                    modifier = Modifier.size(28.dp)
                )
            }

            Spacer(modifier = Modifier.width(AppSpacing.md))

            // Details
            Column(modifier = Modifier.weight(1f)) {
                Text(
                    text = tier.displayName,
                    style = AppTypography.headline,
                    color = AppColors.primaryText
                )
                Text(
                    text = tier.description,
                    style = AppTypography.body,
                    color = AppColors.secondaryText
                )
            }

            // Price button
            Button(
                onClick = onPurchase,
                enabled = canAfford,
                colors = ButtonDefaults.buttonColors(
                    containerColor = AppColors.timeSkipButton,
                    disabledContainerColor = AppColors.disabledText
                ),
                shape = RoundedCornerShape(AppSpacing.pillCornerRadius),
                contentPadding = PaddingValues(horizontal = AppSpacing.md, vertical = AppSpacing.sm)
            ) {
                Text(
                    text = "${tier.diamonds}",
                    fontSize = 18.sp,
                    fontWeight = FontWeight.Bold,
                    color = Color.White
                )
                Spacer(modifier = Modifier.width(4.dp))
                Icon(
                    imageVector = Icons.Default.Diamond,
                    contentDescription = null,
                    tint = Color.White,
                    modifier = Modifier.size(14.dp)
                )
            }
        }
    }
}