package com.horrortv.app.presentation.home

import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.focus.focusRequester
import androidx.compose.ui.focus.onFocusChanged
import androidx.compose.ui.graphics.Color
import android.view.KeyEvent
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.input.key.onKeyEvent
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.unit.dp
import com.horrortv.app.domain.model.Movie
import com.horrortv.app.presentation.common.PosterImage
import com.horrortv.app.presentation.theme.HorrorColors

private val CardShape = RoundedCornerShape(8.dp)
private val CardWidth = 180.dp
private val CardHeight = 270.dp

@Composable
fun MoviePosterCard(
    movie: Movie,
    onClick: () -> Unit,
    isFirstCard: Boolean = false,
    firstCardFocusRequester: FocusRequester? = null,
    modifier: Modifier = Modifier
) {
    var isFocused by remember { mutableStateOf(false) }
    val localFocusRequester = remember { FocusRequester() }
    val interactionSource = remember { MutableInteractionSource() }
    
    val activeFocusRequester = if (isFirstCard && firstCardFocusRequester != null) {
        firstCardFocusRequester
    } else {
        localFocusRequester
    }
    
    val scale by animateFloatAsState(
        targetValue = if (isFocused) 1.15f else 1.0f,
        animationSpec = tween(durationMillis = 200),
        label = "poster_scale"
    )
    val borderW = if (isFocused) 6.dp else 2.dp
    val borderC = if (isFocused) Color(0xFFFF1744) else HorrorColors.HorrorLightGray
    
    Box(
        modifier = modifier
            .width(CardWidth)
            .height(CardHeight)
            .graphicsLayer {
                scaleX = scale
                scaleY = scale
                shadowElevation = if (isFocused) 20.dp.toPx() else 0f
                spotShadowColor = Color.Black.copy(alpha = 0.5f)
                ambientShadowColor = Color.Black.copy(alpha = 0.3f)
            }
            .clip(CardShape)
            .background(HorrorColors.HorrorGray)
            .border(borderW, borderC, CardShape)
            .focusRequester(activeFocusRequester)
            .onFocusChanged { isFocused = it.isFocused }
            .clickable(interactionSource = interactionSource, indication = null, onClick = onClick)
            .onKeyEvent { event ->
                val keyCode = event.nativeKeyEvent?.keyCode
                if (keyCode == KeyEvent.KEYCODE_DPAD_CENTER || keyCode == KeyEvent.KEYCODE_ENTER) {
                    onClick()
                    true
                } else {
                    false
                }
            }
    ) {
        PosterImage(
            url = movie.posterUrl,
            contentDescription = movie.title,
            modifier = Modifier.fillMaxSize(),
            contentScale = ContentScale.Crop,
            shape = CardShape
        )
    }
}
