package club.clubk.ktag.apps.koth.ui

import androidx.compose.animation.Crossfade
import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.core.tween
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import club.clubk.ktag.apps.koth.EndGameResult
import club.clubk.ktag.apps.koth.KothEvent
import club.clubk.ktag.apps.koth.KothState
import club.clubk.ktag.apps.koth.KothViewModel
import club.clubk.ktag.apps.koth.Possession
import club.clubk.ktag.apps.koth.R
import club.clubk.ktag.apps.koth.ui.theme.KothBlue
import club.clubk.ktag.apps.koth.ui.theme.KothRed
import club.clubk.ktag.apps.koth.ui.theme.KothWhite

@Composable
fun KothScreen(
    viewModel: KothViewModel,
    modifier: Modifier = Modifier
) {
    val gameState = viewModel.gameState
    val possession = viewModel.possession
    val timeRemainingMs = viewModel.timeRemainingMs
    val statusText = viewModel.statusText
    val showTimer = viewModel.showTimer
    val showKingOfTheHillImage = viewModel.showKingOfTheHillImage
    val endGameResult = viewModel.endGameResult

    // Animate background color based on possession
    val backgroundColor by animateColorAsState(
        targetValue = when {
            gameState is KothState.Finished -> {
                when (endGameResult) {
                    is EndGameResult.RedWins -> KothRed
                    is EndGameResult.BlueWins -> KothBlue
                    else -> KothWhite
                }
            }
            gameState is KothState.Playing -> {
                when (possession) {
                    is Possession.Red -> KothRed
                    is Possession.Blue -> KothBlue
                    else -> KothWhite
                }
            }
            else -> KothWhite
        },
        animationSpec = tween(durationMillis = 300),
        label = "backgroundColor"
    )

    Box(
        modifier = modifier
            .fillMaxSize()
            .background(backgroundColor)
    ) {
        // End game tower image with crossfade
        if (gameState is KothState.Finished && endGameResult != null) {
            Crossfade(
                targetState = endGameResult,
                animationSpec = tween(durationMillis = 500),
                label = "towerImage"
            ) { result ->
                val towerResId = when (result) {
                    is EndGameResult.RedWins -> R.drawable.red_tower
                    is EndGameResult.BlueWins -> R.drawable.blue_tower
                    is EndGameResult.Tie -> R.drawable.white_tower
                }
                Image(
                    painter = painterResource(id = towerResId),
                    contentDescription = "Tower",
                    modifier = Modifier.fillMaxSize(),
                    contentScale = ContentScale.Crop
                )
            }
        }

        // King of the Hill image (visible when not finished)
        if (showKingOfTheHillImage) {
            Image(
                painter = painterResource(id = R.drawable.king_of_the_hill),
                contentDescription = "King of the Hill",
                modifier = Modifier
                    .align(Alignment.BottomStart)
                    .padding(16.dp)
            )
        }

        // Main content
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = if (gameState is KothState.Finished) Arrangement.Center else Arrangement.Top
        ) {
            // Timer display
            if (showTimer) {
                GameTimer(
                    timeDisplay = viewModel.formatTimeDisplay(timeRemainingMs),
                    modifier = Modifier.padding(top = 48.dp)
                )
            }

            // Status display
            if (gameState is KothState.Finished && endGameResult != null) {
                EndGameStatusDisplay(
                    resultText = when (endGameResult) {
                        is EndGameResult.RedWins -> stringResource(R.string.red_wins)
                        is EndGameResult.BlueWins -> stringResource(R.string.blue_wins)
                        is EndGameResult.Tie -> stringResource(R.string.its_a_tie)
                    },
                    redTimeText = viewModel.formatTimeDisplay(endGameResult.redTime),
                    blueTimeText = viewModel.formatTimeDisplay(endGameResult.blueTime)
                )
            } else {
                StatusDisplay(
                    statusText = statusText,
                    gameState = gameState,
                    modifier = Modifier.padding(top = 48.dp)
                )
            }
        }

        // FAB controls
        GameControlFabs(
            gameState = gameState,
            onEvent = { viewModel.processEvent(it) },
            modifier = Modifier.align(Alignment.BottomEnd)
        )
    }
}
