package com.craigvg.lichun_android.ui.screens.dating.components

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.*
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.craigvg.lichun_android.domain.models.DateMiniGameState
import com.craigvg.lichun_android.domain.models.DateResponse
import com.craigvg.lichun_android.domain.models.Person
import com.craigvg.lichun_android.ui.theme.AppColors
import com.craigvg.lichun_android.ui.theme.AppSpacing
import com.craigvg.lichun_android.ui.theme.AppTypography

/**
 * Game interaction area - header, partner dialogue, and response options
 */
@Composable
fun MiniGameContent(
    gameState: DateMiniGameState,
    partner: Person,
    showFeedback: Boolean,
    lastResponseCorrect: Boolean,
    onResponseSelected: (DateResponse) -> Unit
) {
    Column(modifier = Modifier.fillMaxSize()) {
        // Header with progress
        MiniGameHeader(
            currentRound = gameState.currentRound,
            totalRounds = gameState.totalRounds,
            correctAnswers = gameState.correctAnswers
        )

        HorizontalDivider(color = AppColors.secondaryText.copy(alpha = 0.3f))

        // Partner dialogue
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .padding(AppSpacing.md),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Box(
                modifier = Modifier
                    .size(80.dp)
                    .clip(CircleShape)
                    .background(
                        Brush.radialGradient(
                            colors = listOf(
                                AppColors.primary.copy(alpha = 0.3f),
                                AppColors.primary.copy(alpha = 0.1f)
                            )
                        )
                    ),
                contentAlignment = Alignment.Center
            ) {
                Text(
                    text = partner.firstname.take(1).uppercase(),
                    fontSize = 32.sp,
                    fontWeight = FontWeight.Bold,
                    color = AppColors.primary
                )
            }

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

            Text(
                text = partner.firstname,
                style = AppTypography.headline,
                color = AppColors.primaryText
            )

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

            gameState.currentQuestion?.let { question ->
                Card(
                    modifier = Modifier.fillMaxWidth(),
                    shape = RoundedCornerShape(AppSpacing.cornerRadius),
                    colors = CardDefaults.cardColors(containerColor = AppColors.surfaceElevated),
                    elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
                ) {
                    Text(
                        text = question.text,
                        style = AppTypography.body,
                        color = AppColors.primaryText,
                        textAlign = TextAlign.Center,
                        modifier = Modifier.padding(AppSpacing.lg)
                    )
                }
            }
        }

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

        // Response options
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = AppSpacing.md),
            verticalArrangement = Arrangement.spacedBy(AppSpacing.sm)
        ) {
            gameState.currentQuestion?.responses?.forEach { response ->
                ResponseOptionCard(
                    response = response,
                    showFeedback = showFeedback,
                    onClick = { onResponseSelected(response) }
                )
            }
        }

        if (showFeedback) {
            Spacer(modifier = Modifier.weight(1f))
            FeedbackBanner(isCorrect = lastResponseCorrect)
        }
    }
}

@Composable
private fun MiniGameHeader(
    currentRound: Int,
    totalRounds: Int,
    correctAnswers: Int
) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .background(AppColors.surfaceElevated.copy(alpha = 0.7f))
            .padding(AppSpacing.md)
    ) {
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceBetween,
            verticalAlignment = Alignment.CenterVertically
        ) {
            Row(
                horizontalArrangement = Arrangement.spacedBy(AppSpacing.xs),
                verticalAlignment = Alignment.CenterVertically
            ) {
                Icon(
                    imageVector = Icons.Default.Favorite,
                    contentDescription = null,
                    tint = AppColors.primary,
                    modifier = Modifier.size(16.dp)
                )
                Text(
                    text = "Round ${currentRound + 1}/$totalRounds",
                    style = AppTypography.headline,
                    color = AppColors.primaryText
                )
            }

            Row(
                horizontalArrangement = Arrangement.spacedBy(AppSpacing.xs),
                verticalAlignment = Alignment.CenterVertically
            ) {
                Text(
                    text = "Score:",
                    style = AppTypography.body,
                    color = AppColors.secondaryText
                )
                Text(
                    text = "$correctAnswers/$currentRound",
                    style = AppTypography.bodyBold,
                    color = AppColors.primary
                )
                repeat(minOf(3, correctAnswers)) {
                    Icon(
                        imageVector = Icons.Default.Favorite,
                        contentDescription = null,
                        tint = AppColors.primary,
                        modifier = Modifier.size(14.dp)
                    )
                }
            }
        }

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

        LinearProgressIndicator(
            progress = { (currentRound.toFloat() / totalRounds) },
            modifier = Modifier
                .fillMaxWidth()
                .height(6.dp)
                .clip(RoundedCornerShape(3.dp)),
            color = AppColors.primary,
            trackColor = AppColors.primary.copy(alpha = 0.2f)
        )
    }
}

@Composable
private fun ResponseOptionCard(
    response: DateResponse,
    showFeedback: Boolean,
    onClick: () -> Unit
) {
    val backgroundColor = when {
        showFeedback && response.isCorrect -> AppColors.success.copy(alpha = 0.2f)
        showFeedback && !response.isCorrect -> AppColors.error.copy(alpha = 0.1f)
        else -> AppColors.surfaceElevated
    }

    val borderColor = when {
        showFeedback && response.isCorrect -> AppColors.success
        else -> AppColors.secondaryText.copy(alpha = 0.2f)
    }

    Card(
        modifier = Modifier
            .fillMaxWidth()
            .clickable(enabled = !showFeedback, onClick = onClick),
        shape = RoundedCornerShape(AppSpacing.cornerRadius),
        colors = CardDefaults.cardColors(containerColor = backgroundColor),
        border = androidx.compose.foundation.BorderStroke(1.dp, borderColor)
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(AppSpacing.md),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Text(
                text = response.text,
                style = AppTypography.body,
                color = AppColors.primaryText,
                modifier = Modifier.weight(1f)
            )
            if (showFeedback && response.isCorrect) {
                Icon(
                    imageVector = Icons.Default.CheckCircle,
                    contentDescription = null,
                    tint = AppColors.success,
                    modifier = Modifier.size(24.dp)
                )
            }
        }
    }
}

@Composable
private fun FeedbackBanner(isCorrect: Boolean) {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .padding(AppSpacing.xl),
        contentAlignment = Alignment.Center
    ) {
        Card(
            shape = RoundedCornerShape(AppSpacing.cornerRadius),
            colors = CardDefaults.cardColors(
                containerColor = if (isCorrect) AppColors.success else AppColors.error
            )
        ) {
            Row(
                modifier = Modifier.padding(horizontal = AppSpacing.lg, vertical = AppSpacing.md),
                horizontalArrangement = Arrangement.spacedBy(AppSpacing.sm),
                verticalAlignment = Alignment.CenterVertically
            ) {
                Icon(
                    imageVector = if (isCorrect) Icons.Default.Favorite else Icons.Default.HeartBroken,
                    contentDescription = null,
                    tint = androidx.compose.ui.graphics.Color.White,
                    modifier = Modifier.size(24.dp)
                )
                Text(
                    text = if (isCorrect) "Great answer!" else "Not quite...",
                    style = AppTypography.headline,
                    color = androidx.compose.ui.graphics.Color.White
                )
            }
        }
    }
}