package com.radiola.ui.favorites

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.Crossfade
import androidx.compose.animation.fadeIn
import androidx.compose.animation.slideInVertically
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.lazy.grid.items
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.text.withStyle
import androidx.compose.ui.unit.dp
import androidx.hilt.navigation.compose.hiltViewModel
import com.composables.icons.lucide.Heart
import com.composables.icons.lucide.Lucide
import com.radiola.domain.model.Station
import com.radiola.ui.components.EmptyState
import com.radiola.ui.components.StationCard
import com.radiola.ui.theme.RadiolaTheme
import androidx.compose.foundation.layout.Arrangement

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun FavoritesScreen(
    onStationClick: (Station) -> Unit,
    modifier: Modifier = Modifier,
    viewModel: FavoritesViewModel = hiltViewModel()
) {
    val favorites by viewModel.favorites.collectAsState()
    val favoriteIds by viewModel.favoriteIds.collectAsState()
    val nowPlaying by viewModel.nowPlaying.collectAsState()
    val playingStationId by viewModel.playingStationId.collectAsState()
    val isPlaying by viewModel.isPlaying.collectAsState()
    val colors = RadiolaTheme.colors

    Column(
        modifier = modifier
            .fillMaxSize()
            .padding(horizontal = 20.dp)
    ) {
        // Заголовок с двухцветным текстом и счётчиком
        Row(
            modifier = Modifier.padding(top = 20.dp, bottom = 20.dp),
            verticalAlignment = androidx.compose.ui.Alignment.Bottom,
            horizontalArrangement = Arrangement.spacedBy(10.dp)
        ) {
            Text(
                text = buildAnnotatedString {
                    withStyle(SpanStyle(color = colors.textPrimary)) { append("Из") }
                    withStyle(SpanStyle(color = colors.accent)) { append("бранное") }
                },
                style = MaterialTheme.typography.headlineLarge
            )
            if (favorites.isNotEmpty()) {
                Text(
                    text = "${favorites.size}",
                    style = MaterialTheme.typography.titleMedium,
                    color = colors.textSecondary,
                    modifier = Modifier.padding(bottom = 4.dp)
                )
            }
        }

        Crossfade(
            targetState = favorites.isEmpty(),
            label = "favoritesState"
        ) { isEmpty ->
            if (isEmpty) {
                AnimatedVisibility(
                    visible = true,
                    enter = fadeIn() + slideInVertically()
                ) {
                    EmptyState(
                        message = "Нет избранных станций",
                        icon = Lucide.Heart,
                        modifier = Modifier.fillMaxSize()
                    )
                }
            } else {
                LazyVerticalGrid(
                    columns = GridCells.Fixed(if (com.radiola.ui.util.isLandscape()) 4 else 2),
                    modifier = Modifier.fillMaxSize(),
                    contentPadding = PaddingValues(bottom = 16.dp),
                    horizontalArrangement = Arrangement.spacedBy(14.dp),
                    verticalArrangement = Arrangement.spacedBy(14.dp)
                ) {
                    items(favorites, key = { it.id }) { station ->
                        StationCard(
                            station = station,
                            isFavorite = favoriteIds.contains(station.id),
                            onClick = { onStationClick(station) },
                            onFavoriteClick = { viewModel.toggleFavorite(station) },
                            nowTrack = nowPlaying[station.id],
                            isCurrent = station.id == playingStationId,
                            isPlaying = isPlaying,
                            modifier = Modifier.animateItemPlacement()
                        )
                    }
                }
            }
        }
    }
}
