package com.craigvg.lichun_android.ui.components

import androidx.compose.animation.*
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
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

@Composable
fun TooltipHost(
    gameStateViewModel: GameStateViewModel,
    modifier: Modifier = Modifier
) {
    val tooltip by gameStateViewModel.currentTooltip.collectAsStateWithLifecycle()
    val visible by gameStateViewModel.tooltipVisible.collectAsStateWithLifecycle()

    AnimatedVisibility(
        visible = visible && tooltip != null,
        enter = fadeIn() + slideInVertically(initialOffsetY = { it }),
        exit = fadeOut() + slideOutVertically(targetOffsetY = { it }),
        modifier = modifier.fillMaxWidth()
    ) {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = AppSpacing.md, vertical = AppSpacing.sm)
                .clip(RoundedCornerShape(AppSpacing.cornerRadius))
                .background(AppColors.primaryText.copy(alpha = 0.9f))
                .clickable { gameStateViewModel.dismissTooltip() }
                .padding(AppSpacing.md),
            contentAlignment = Alignment.Center
        ) {
            Text(
                text = tooltip?.message ?: "",
                style = AppTypography.body,
                color = Color.White
            )
        }
    }
}