package com.rosetta.messenger.ui.splash

import androidx.compose.animation.core.*
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
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.scale
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import com.rosetta.messenger.R
import kotlinx.coroutines.delay

@Composable
fun SplashScreen(
    isDarkTheme: Boolean,
    onSplashComplete: () -> Unit
) {
    val backgroundColor = if (isDarkTheme) Color(0xFF1B1B1B) else Color.White
    
    // Animation states
    var startAnimation by remember { mutableStateOf(false) }
    var alphaValue by remember { mutableStateOf(0f) }
    
    val scale by animateFloatAsState(
        targetValue = if (startAnimation) 1f else 0.3f,
        animationSpec = spring(
            dampingRatio = 0.6f,
            stiffness = Spring.StiffnessLow
        ),
        label = "scale"
    )
    
    val alpha by animateFloatAsState(
        targetValue = alphaValue,
        animationSpec = tween(600, easing = FastOutSlowInEasing),
        label = "alpha"
    )
    
    val pulseScale by animateFloatAsState(
        targetValue = if (startAnimation) 1.08f else 1f,
        animationSpec = tween(900, easing = FastOutSlowInEasing),
        label = "pulseScale"
    )
    
    LaunchedEffect(Unit) {
        delay(100)
        alphaValue = 1f
        startAnimation = true
        delay(2000) // Show splash for 2 seconds
        onSplashComplete()
    }
    
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(backgroundColor)
            .clickable(
                interactionSource = remember { MutableInteractionSource() },
                indication = null
            ) { },
        contentAlignment = Alignment.Center
    ) {
        // Glow effect behind logo
        Box(
            modifier = Modifier
                .size(180.dp)
                .scale(scale * pulseScale)
                .graphicsLayer { this.alpha = alpha }
                .background(
                    color = Color(0xFF54A9EB).copy(alpha = 0.2f),
                    shape = CircleShape
                )
        )
        
        // Main logo
        Image(
            painter = painterResource(id = R.drawable.rosetta_icon),
            contentDescription = "Rosetta Logo",
            modifier = Modifier
                .size(150.dp)
                .scale(scale)
                .graphicsLayer { this.alpha = alpha }
                .clip(CircleShape)
        )
    }
}
