package com.rosetta.messenger.ui.components

import android.content.Context
import androidx.compose.animation.*
import androidx.compose.animation.core.*
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.lazy.LazyRow
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.lazy.grid.LazyGridState
import androidx.compose.foundation.lazy.grid.items
import androidx.compose.foundation.lazy.grid.rememberLazyGridState
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.PagerState
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.*
import compose.icons.TablerIcons
import compose.icons.tablericons.*
import androidx.compose.runtime.*
import androidx.compose.runtime.Stable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import coil.compose.AsyncImage
import coil.request.CachePolicy
import coil.request.ImageRequest
import com.rosetta.messenger.ui.onboarding.PrimaryBlue
import kotlinx.coroutines.launch

/**
 * 🚀 ULTRA-ОПТИМИЗИРОВАННЫЙ EMOJI PICKER
 *
 * Ключевые оптимизации v2:
 * 1. ZERO LaunchedEffect в EmojiButton - никаких корутин на каждый эмодзи
 * 2. Нет анимаций scale - убрали spring animations для каждой кнопки
 * 3. Нет interactionSource tracking - убрали collect для каждой кнопки
 * 4. Stable composables - используем @Stable для избежания recomposition
 * 5. Оптимизированный LazyGrid с prefetch
 * 6. Minimal modifier chain - меньше лямбд, меньше allocations
 */
@Composable
fun OptimizedEmojiPicker(
    isVisible: Boolean,
    isDarkTheme: Boolean,
    onEmojiSelected: (String) -> Unit,
    onClose: () -> Unit = {},
    modifier: Modifier = Modifier
) {
    // 🔥 Рендерим напрямую без лишних обёрток
    EmojiPickerContent(
        isDarkTheme = isDarkTheme,
        onEmojiSelected = onEmojiSelected,
        modifier = modifier
    )
}

/**
 * 🔥 Stable wrapper для callback чтобы избежать recomposition
 */
@Stable
private class StableCallback(val onClick: (String) -> Unit)

/**
 * Контент emoji picker'а - ОПТИМИЗИРОВАННЫЙ + СВАЙПЫ
 */
@OptIn(androidx.compose.foundation.ExperimentalFoundationApi::class)
@Composable
private fun EmojiPickerContent(
    isDarkTheme: Boolean,
    onEmojiSelected: (String) -> Unit,
    modifier: Modifier = Modifier
) {
    val context = LocalContext.current
    val scope = rememberCoroutineScope()

    // 🔥 PagerState для свайпов между категориями
    val pagerState = rememberPagerState(
        initialPage = 0,
        pageCount = { EMOJI_CATEGORIES.size }
    )

    // 🔥 Wrap callback в stable class для избежания recomposition
    val stableCallback = remember(onEmojiSelected) { StableCallback(onEmojiSelected) }

    // 🚀 Загружаем эмодзи ОДИН раз при первом рендере
    LaunchedEffect(Unit) {
        if (!OptimizedEmojiCache.isLoaded) {
            OptimizedEmojiCache.preload(context)
        }
    }

    // 🔥 Callback для клика на категорию - плавная анимация к нужной странице
    val onCategoryClicked: (Int) -> Unit = remember(scope) {
        { index ->
            scope.launch {
                pagerState.animateScrollToPage(index)
            }
        }
    }

    // 🎨 Цвета темы - computed один раз
    val panelBackground = remember(isDarkTheme) {
        if (isDarkTheme) Color(0xFF1C1C1E) else Color(0xFFF2F2F7)
    }
    val categoryBarBackground = remember(isDarkTheme) {
        if (isDarkTheme) Color(0xFF2C2C2E) else Color.White
    }
    val dividerColor = remember(isDarkTheme) {
        if (isDarkTheme) Color.White.copy(alpha = 0.1f) else Color.Black.copy(alpha = 0.08f)
    }

    Column(
        modifier = modifier
            .fillMaxWidth()
            .fillMaxHeight()
            .background(panelBackground)
    ) {
        // ============ КАТЕГОРИИ (синхронизированы с pager) ============
        CategoryBar(
            categories = EMOJI_CATEGORIES,
            pagerState = pagerState,
            onCategorySelected = onCategoryClicked,
            isDarkTheme = isDarkTheme,
            backgroundColor = categoryBarBackground
        )

        // ============ РАЗДЕЛИТЕЛЬ ============
        Divider(
            modifier = Modifier
                .fillMaxWidth()
                .height(0.5.dp),
            color = dividerColor
        )

        // ============ СВАЙПАБЕЛЬНЫЕ СТРАНИЦЫ ЭМОДЗИ ============
        HorizontalPager(
            state = pagerState,
            modifier = Modifier.fillMaxSize(),
            beyondBoundsPageCount = 1, // Предзагрузка соседних страниц для плавности
            key = { EMOJI_CATEGORIES[it].key }
        ) { pageIndex ->
            val category = EMOJI_CATEGORIES[pageIndex]

            // 🔥 Эмодзи для текущей страницы
            val emojis = remember(category.key, OptimizedEmojiCache.isLoaded) {
                if (OptimizedEmojiCache.isLoaded) {
                    OptimizedEmojiCache.getEmojisForCategory(category.key)
                } else {
                    emptyList()
                }
            }

            // 🔥 Каждая страница имеет свой gridState для сохранения позиции скролла
            val pageGridState = rememberLazyGridState()

            UltraOptimizedEmojiGrid(
                isLoaded = OptimizedEmojiCache.isLoaded,
                emojis = emojis,
                gridState = pageGridState,
                onEmojiSelected = stableCallback,
                isDarkTheme = isDarkTheme
            )
        }
    }
}

/**
 * Горизонтальная полоса категорий - синхронизирована с PagerState
 */
@OptIn(androidx.compose.foundation.ExperimentalFoundationApi::class)
@Composable
private fun CategoryBar(
    categories: List<EmojiCategory>,
    pagerState: PagerState,
    onCategorySelected: (Int) -> Unit,
    isDarkTheme: Boolean,
    backgroundColor: Color
) {
    // 🔥 derivedStateOf для минимизации recomposition при свайпе
    val currentPage by remember { derivedStateOf { pagerState.currentPage } }

    LazyRow(
        modifier = Modifier
            .fillMaxWidth()
            .background(backgroundColor)
            .padding(vertical = 8.dp),
        horizontalArrangement = Arrangement.spacedBy(4.dp),
        verticalAlignment = Alignment.CenterVertically,
        contentPadding = PaddingValues(horizontal = 12.dp)
    ) {
        items(
            items = categories,
            key = { it.key }
        ) { category ->
            val index = categories.indexOf(category)
            // 🔥 Минимальная CategoryButton без анимаций
            SimpleCategoryButton(
                category = category,
                isSelected = currentPage == index,
                onClick = { onCategorySelected(index) },
                isDarkTheme = isDarkTheme
            )
        }
    }
}

/**
 * 🔥 УПРОЩЁННАЯ кнопка категории - без анимаций
 */
@Composable
private fun SimpleCategoryButton(
    category: EmojiCategory,
    isSelected: Boolean,
    onClick: () -> Unit,
    isDarkTheme: Boolean
) {
    // 🔥 Статичные цвета - нет анимации!
    val backgroundColor = if (isSelected) PrimaryBlue.copy(alpha = 0.2f) else Color.Transparent
    val iconTint = if (isSelected) PrimaryBlue
        else if (isDarkTheme) Color.White.copy(alpha = 0.6f)
        else Color.Black.copy(alpha = 0.5f)

    Box(
        modifier = Modifier
            .size(44.dp)
            .clip(CircleShape)
            .background(backgroundColor)
            .clickable(
                onClick = onClick,
                indication = null,
                interactionSource = remember { MutableInteractionSource() }
            ),
        contentAlignment = Alignment.Center
    ) {
        Icon(
            imageVector = category.icon,
            contentDescription = category.label,
            tint = iconTint,
            modifier = Modifier.size(22.dp)
        )
    }
}

/**
 * 🔥 ULTRA-оптимизированная сетка эмодзи
 */
@Composable
private fun UltraOptimizedEmojiGrid(
    isLoaded: Boolean,
    emojis: List<String>,
    gridState: androidx.compose.foundation.lazy.grid.LazyGridState,
    onEmojiSelected: StableCallback,
    isDarkTheme: Boolean
) {
    when {
        !isLoaded -> {
            Box(
                modifier = Modifier.fillMaxSize(),
                contentAlignment = Alignment.Center
            ) {
                CircularProgressIndicator(
                    modifier = Modifier.size(32.dp),
                    color = PrimaryBlue,
                    strokeWidth = 2.dp
                )
            }
        }
        emojis.isEmpty() -> {
            Box(
                modifier = Modifier.fillMaxSize(),
                contentAlignment = Alignment.Center
            ) {
                Text(
                    text = "Нет эмодзи",
                    color = if (isDarkTheme) Color.White.copy(alpha = 0.5f) else Color.Black.copy(alpha = 0.4f),
                    fontSize = 14.sp
                )
            }
        }
        else -> {
            // 🔥 ОПТИМИЗИРОВАННАЯ LazyVerticalGrid
            LazyVerticalGrid(
                state = gridState,
                columns = GridCells.Fixed(8),
                modifier = Modifier.fillMaxSize(),
                contentPadding = PaddingValues(horizontal = 8.dp, vertical = 8.dp),
                horizontalArrangement = Arrangement.spacedBy(2.dp),
                verticalArrangement = Arrangement.spacedBy(2.dp)
            ) {
                items(
                    items = emojis,
                    key = { emoji -> emoji },
                    contentType = { "emoji" }
                ) { unified ->
                    // 🔥 ULTRA-лёгкая кнопка эмодзи
                    UltraLightEmojiButton(
                        unified = unified,
                        onClick = onEmojiSelected.onClick
                    )
                }
            }
        }
    }
}

/**
 * 🔥 ULTRA-ЛЁГКАЯ кнопка эмодзи
 *
 * Оптимизации:
 * - Нет LaunchedEffect
 * - Нет анимаций
 * - Нет interactionSource tracking
 * - Минимальный modifier chain
 * - Предзакэшированный ImageRequest
 */
@Composable
private fun UltraLightEmojiButton(
    unified: String,
    onClick: (String) -> Unit
) {
    val context = LocalContext.current

    // 🔥 Один remember для ImageRequest - это единственный "тяжёлый" объект
    val imageRequest = remember(unified) {
        ImageRequest.Builder(context)
            .data("file:///android_asset/emoji/${unified.lowercase()}.png")
            .crossfade(false) // Нет анимации
            .size(48) // Меньше размер = быстрее
            .memoryCachePolicy(CachePolicy.ENABLED)
            .diskCachePolicy(CachePolicy.ENABLED)
            .allowHardware(true)
            .memoryCacheKey("emoji_$unified")
            .build()
    }

    // 🔥 Минимальный Box без лишних модификаторов
    Box(
        modifier = Modifier
            .aspectRatio(1f)
            .clip(RoundedCornerShape(6.dp))
            .clickable { onClick(":emoji_$unified:") },
        contentAlignment = Alignment.Center
    ) {
        AsyncImage(
            model = imageRequest,
            contentDescription = null,
            modifier = Modifier.size(28.dp),
            contentScale = ContentScale.Fit
        )
    }
}
