package com.craigvg.lichun_android.ui.screens.events

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.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.hilt.navigation.compose.hiltViewModel
import com.craigvg.lichun_android.domain.models.AnswerOption
import com.craigvg.lichun_android.domain.models.SimplePerson
import com.craigvg.lichun_android.ui.screens.events.components.EventAnswerGrid
import com.craigvg.lichun_android.ui.screens.events.components.EventCharacterRow
import com.craigvg.lichun_android.ui.screens.events.components.EventStatsHeader
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

/**
 * Modal view for displaying game events/questions with answer options
 * Ported from iOS EventModalView.swift
 */
@Composable
fun EventModal(
    questionId: String,
    question: String,
    answers: List<AnswerOption>,
    title: String? = null,
    image: String? = null,
    characters: List<SimplePerson>? = null,
    gameStateViewModel: GameStateViewModel = hiltViewModel(),
    onDismiss: () -> Unit = {}
) {
    val energy by gameStateViewModel.energy.collectAsStateWithLifecycle()
    val diamonds by gameStateViewModel.diamonds.collectAsStateWithLifecycle()
    val money by gameStateViewModel.money.collectAsStateWithLifecycle()

    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(AppColors.modalOverlay)
    ) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(AppSpacing.md)
        ) {
            // Stats header
            EventStatsHeader(energy = energy, diamonds = diamonds, money = money)

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

            // Main content card
            Card(
                modifier = Modifier
                    .fillMaxWidth()
                    .weight(1f),
                shape = RoundedCornerShape(AppSpacing.largeCornerRadius),
                colors = CardDefaults.cardColors(
                    containerColor = AppColors.surfaceElevated
                ),
                elevation = CardDefaults.cardElevation(defaultElevation = 8.dp)
            ) {
                Column(
                    modifier = Modifier
                        .fillMaxSize()
                        .verticalScroll(rememberScrollState())
                        .padding(AppSpacing.lg),
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {
                    // Decorative top border
                    DecorativeTopBorder()

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

                    // Character avatars
                    characters?.takeIf { it.isNotEmpty() }?.let { chars ->
                        EventCharacterRow(characters = chars)
                        Spacer(modifier = Modifier.height(AppSpacing.md))
                    }

                    // Title section
                    title?.let { titleText ->
                        TitleSection(title = titleText)
                        Spacer(modifier = Modifier.height(AppSpacing.md))
                    }

                    // Question section
                    QuestionSection(question = question)

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

                    // Answer options
                    if (answers.isNotEmpty()) {
                        EventAnswerGrid(
                            answers = answers,
                            energy = energy,
                            diamonds = diamonds,
                            money = money,
                            onAnswerClick = { answer ->
                                if (answer.choiceId != null) {
                                    gameStateViewModel.sendAnswer(answer, questionId)
                                    onDismiss()
                                }
                            }
                        )
                    }

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

@Composable
private fun DecorativeTopBorder() {
    Row(
        horizontalArrangement = Arrangement.spacedBy(AppSpacing.xs)
    ) {
        repeat(5) {
            Box(
                modifier = Modifier
                    .size(6.dp)
                    .background(AppColors.primary.copy(alpha = 0.3f), CircleShape)
            )
        }
    }
}

@Composable
private fun TitleSection(title: String) {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Box(
            modifier = Modifier
                .width(100.dp)
                .height(2.dp)
                .background(
                    Brush.horizontalGradient(
                        colors = listOf(Color.Transparent, AppColors.primary, Color.Transparent)
                    )
                )
        )

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

        Text(
            text = title,
            style = AppTypography.title,
            color = AppColors.primaryText,
            textAlign = TextAlign.Center
        )

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

        Box(
            modifier = Modifier
                .width(100.dp)
                .height(2.dp)
                .background(
                    Brush.horizontalGradient(
                        colors = listOf(Color.Transparent, AppColors.primary, Color.Transparent)
                    )
                )
        )
    }
}

@Composable
private fun QuestionSection(question: String) {
    Card(
        shape = RoundedCornerShape(AppSpacing.cornerRadius),
        colors = CardDefaults.cardColors(
            containerColor = AppColors.surfaceSubtle
        ),
        elevation = CardDefaults.cardElevation(defaultElevation = 2.dp)
    ) {
        Text(
            text = question,
            style = AppTypography.headline,
            color = AppColors.primaryText,
            textAlign = TextAlign.Center,
            modifier = Modifier.padding(AppSpacing.md)
        )
    }
}