package com.example.godeye.ui.components

import androidx.compose.animation.core.*
import androidx.compose.foundation.layout.*
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.rotate
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import com.example.godeye.R
import com.example.godeye.models.ConnectionState

/**
 * Компонент для отображения статуса подключения к серверу
 */
@Composable
fun ConnectionStatusCard(
    connectionState: ConnectionState,
    modifier: Modifier = Modifier
) {
    val (icon, color, statusText) = getConnectionStateInfo(connectionState)

    Card(
        modifier = modifier.fillMaxWidth(),
        shape = RoundedCornerShape(12.dp),
        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp),
        colors = CardDefaults.cardColors(
            containerColor = color.copy(alpha = 0.1f)
        )
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            // Иконка с анимацией для состояний загрузки
            ConnectionIcon(
                icon = icon,
                color = color,
                isAnimated = connectionState == ConnectionState.CONNECTING ||
                            connectionState == ConnectionState.RECONNECTING
            )

            Spacer(modifier = Modifier.width(12.dp))

            // Текст статуса
            Column {
                Text(
                    text = stringResource(R.string.connection_status_label),
                    style = MaterialTheme.typography.labelMedium,
                    color = MaterialTheme.colorScheme.onSurfaceVariant
                )
                Text(
                    text = statusText,
                    style = MaterialTheme.typography.titleMedium,
                    fontWeight = FontWeight.Bold,
                    color = color
                )
            }
        }
    }
}

/**
 * Анимированная иконка подключения
 */
@Composable
private fun ConnectionIcon(
    icon: ImageVector,
    color: androidx.compose.ui.graphics.Color,
    isAnimated: Boolean,
    modifier: Modifier = Modifier
) {
    if (isAnimated) {
        val infiniteTransition = rememberInfiniteTransition(label = "connection_animation")
        val rotation by infiniteTransition.animateFloat(
            initialValue = 0f,
            targetValue = 360f,
            animationSpec = infiniteRepeatable(
                animation = tween(1000, easing = LinearEasing),
                repeatMode = RepeatMode.Restart
            ),
            label = "rotation"
        )

        Icon(
            imageVector = icon,
            contentDescription = null,
            modifier = modifier
                .size(24.dp)
                .rotate(rotation),
            tint = color
        )
    } else {
        Icon(
            imageVector = icon,
            contentDescription = null,
            modifier = modifier.size(24.dp),
            tint = color
        )
    }
}

/**
 * Получить информацию о состоянии подключения
 */
@Composable
private fun getConnectionStateInfo(
    connectionState: ConnectionState
): Triple<ImageVector, androidx.compose.ui.graphics.Color, String> {
    return when (connectionState) {
        ConnectionState.DISCONNECTED -> Triple(
            Icons.Default.Close,
            MaterialTheme.colorScheme.onSurfaceVariant,
            stringResource(R.string.status_disconnected)
        )
        ConnectionState.CONNECTING -> Triple(
            Icons.Default.Refresh,
            MaterialTheme.colorScheme.primary,
            stringResource(R.string.status_connecting)
        )
        ConnectionState.CONNECTED -> Triple(
            Icons.Default.CheckCircle,
            MaterialTheme.colorScheme.primary,
            stringResource(R.string.status_connected)
        )
        ConnectionState.ERROR -> Triple(
            Icons.Default.Warning,
            MaterialTheme.colorScheme.error,
            stringResource(R.string.status_error)
        )
        ConnectionState.RECONNECTING -> Triple(
            Icons.Default.Refresh,
            MaterialTheme.colorScheme.secondary,
            stringResource(R.string.status_reconnecting)
        )
    }
}
