package chats.presentation.components

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@Composable
fun ReactionPicker(
    onReactionSelected: (String) -> Unit
) {
    val reactions = listOf("❤️", "👍", "👎", "🔥", "😂", "😢", "😮")

    Row(
        modifier = Modifier
            .background(MaterialTheme.colorScheme.surface, CircleShape)
            .padding(8.dp),
        horizontalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        reactions.forEach { reaction ->
            Text(
                text = reaction,
                modifier = Modifier
                    .size(32.dp)
                    .clickable { onReactionSelected(reaction) },
                fontSize = 20.sp
            )
        }
    }
}

@Composable
fun MessageReactions(
    reactions: Map<String, Int>, // Эмодзи -> Количество
    onReactionClick: (String) -> Unit
) {
    Row(
        modifier = Modifier.padding(top = 4.dp),
        horizontalArrangement = Arrangement.spacedBy(4.dp)
    ) {
        reactions.forEach { (emoji, count) ->
            Box(
                modifier = Modifier
                    .clip(CircleShape)
                    .background(MaterialTheme.colorScheme.primary.copy(alpha = 0.1f))
                    .clickable { onReactionClick(emoji) }
                    .padding(horizontal = 6.dp, vertical = 2.dp)
            ) {
                Text(text = "$emoji $count", fontSize = 12.sp)
            }
        }
    }
}