package com.tsmobile.app.ui.components

import androidx.compose.animation.*
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Close
import androidx.compose.material.icons.filled.TouchApp
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontWeight
import com.tsmobile.app.data.PokeEvent
import com.tsmobile.app.ui.theme.UiTokens

/**
 * Poke 气泡通知。
 *
 * 从顶部滑入，显示发送者昵称和消息内容。
 * 点击或 5 秒后自动关闭。
 */
@Composable
fun PokeNotification(
    pokeEvent: PokeEvent?,
    isVisible: Boolean,
    onDismiss: () -> Unit,
) {
    AnimatedVisibility(
        visible = isVisible && pokeEvent != null,
        enter = slideInVertically(initialOffsetY = { -it }) + fadeIn(),
        exit = slideOutVertically(targetOffsetY = { -it }) + fadeOut(),
    ) {
        pokeEvent?.let { event ->
            Card(
                modifier = Modifier
                    .fillMaxWidth()
                    .statusBarsPadding()
                    .padding(
                        horizontal = UiTokens.Spacing.Large,
                        vertical = UiTokens.Spacing.Small,
                    )
                    .clickable { onDismiss() },
                shape = RoundedCornerShape(UiTokens.Spacing.Large),
                colors = CardDefaults.cardColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    contentColor = MaterialTheme.colorScheme.onPrimaryContainer,
                ),
                elevation = CardDefaults.cardElevation(defaultElevation = UiTokens.Elevation.Raised),
            ) {
                Row(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(UiTokens.Spacing.Medium),
                    verticalAlignment = Alignment.CenterVertically,
                ) {
                    Icon(
                        imageVector = Icons.Default.TouchApp,
                        contentDescription = null,
                        tint = MaterialTheme.colorScheme.primary,
                    )
                    Spacer(modifier = Modifier.width(UiTokens.Spacing.Medium))
                    Column(modifier = Modifier.weight(1f)) {
                        Text(
                            text = "${event.invokerName} 戳了你一下",
                            style = MaterialTheme.typography.titleSmall,
                            fontWeight = FontWeight.Bold,
                        )
                        if (event.message.isNotEmpty()) {
                            Text(
                                text = event.message,
                                style = MaterialTheme.typography.bodySmall,
                                color = MaterialTheme.colorScheme.onPrimaryContainer,
                            )
                        }
                    }
                    IconButton(onClick = onDismiss) {
                        Icon(
                            imageVector = Icons.Default.Close,
                            contentDescription = "关闭",
                        )
                    }
                }
            }
        }
    }
}
