package calls.presentation

import androidx.compose.animation.*
import androidx.compose.foundation.background
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.*
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.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import coil.compose.AsyncImage
import core.presentation.components.AppAvatar
import ru.knot.messager.R

@Composable
fun CallScreen(
    viewModel: CallViewModel,
    onBack: () -> Unit
) {
    val state by viewModel.state.collectAsState()

    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(
                Brush.verticalGradient(
                    colors = listOf(
                        Color(0xFF0F0F10),
                        Color(0xFF161618),
                        Color(0xFF6366F1).copy(alpha = 0.2f)
                    )
                )
            )
    ) {
        // Контент звонка (Аватар или Видео)
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(top = 100.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            AppAvatar(
                url = state.callerAvatar,
                name = state.callerName,
                size = 140.dp
            )
            
            Spacer(modifier = Modifier.height(24.dp))
            
            Text(
                text = state.callerName,
                style = MaterialTheme.typography.headlineMedium,
                color = Color.White,
                fontWeight = FontWeight.Bold
            )
            
            Text(
                text = when (state.status) {
                    CallStatus.INCOMING -> "Входящий звонок..."
                    CallStatus.OUTGOING -> "Вызов..."
                    CallStatus.CONNECTED -> "00:00" // TODO: Timer
                    CallStatus.ENDED -> "Звонок завершен"
                    else -> ""
                },
                style = MaterialTheme.typography.bodyLarge,
                color = Color.White.copy(alpha = 0.7f)
            )
        }

        // Кнопки управления (Внизу)
        Box(
            modifier = Modifier
                .align(Alignment.BottomCenter)
                .padding(bottom = 60.dp)
                .fillMaxWidth(),
            contentAlignment = Alignment.Center
        ) {
            Row(
                horizontalArrangement = Arrangement.spacedBy(32.dp),
                verticalAlignment = Alignment.CenterVertically
            ) {
                if (state.status == CallStatus.INCOMING) {
                    // Кнопка отклонить
                    CallActionButton(
                        icon = Icons.Default.CallEnd,
                        backgroundColor = Color.Red,
                        onClick = { viewModel.endCall(); onBack() }
                    )
                    // Кнопка принять
                    CallActionButton(
                        icon = Icons.Default.Call,
                        backgroundColor = Color(0xFF10B981), // Green
                        onClick = { viewModel.acceptCall() }
                    )
                } else {
                    // Стандартные кнопки во время разговора
                    IconButton(
                        onClick = { /* viewModel.toggleMic() */ },
                        modifier = Modifier.size(56.dp).clip(CircleShape).background(Color.White.copy(alpha = 0.1f))
                    ) {
                        Icon(Icons.Default.Mic, contentDescription = null, tint = Color.White)
                    }

                    CallActionButton(
                        icon = Icons.Default.CallEnd,
                        backgroundColor = Color.Red,
                        onClick = { viewModel.endCall(); onBack() }
                    )

                    IconButton(
                        onClick = { /* viewModel.toggleSpeaker() */ },
                        modifier = Modifier.size(56.dp).clip(CircleShape).background(Color.White.copy(alpha = 0.1f))
                    ) {
                        Icon(Icons.Default.VolumeUp, contentDescription = null, tint = Color.White)
                    }
                }
            }
        }
    }
}

@Composable
fun CallActionButton(
    icon: androidx.compose.ui.graphics.vector.ImageVector,
    backgroundColor: Color,
    onClick: () -> Unit
) {
    FloatingActionButton(
        onClick = onClick,
        containerColor = backgroundColor,
        contentColor = Color.White,
        shape = CircleShape,
        modifier = Modifier.size(64.dp)
    ) {
        Icon(icon, contentDescription = null, modifier = Modifier.size(32.dp))
    }
}