MovieListScreen.kt

/*
 * Copyright 2025 Kyriakos Georgiopoulos
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import android.annotation.SuppressLint
import android.graphics.Shader
import android.os.Build
import androidx.activity.compose.BackHandler
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.core.Animatable
import androidx.compose.animation.core.FastOutSlowInEasing
import androidx.compose.animation.core.LinearEasing
import androidx.compose.animation.core.LinearOutSlowInEasing
import androidx.compose.animation.core.animateDpAsState
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.tween
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.slideInVertically
import androidx.compose.animation.slideOutVertically
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.combinedClickable
import androidx.compose.foundation.gestures.detectTapGestures
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.navigationBarsPadding
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.statusBarsPadding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.MoreVert
import androidx.compose.material3.Divider
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.material3.darkColorScheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.draw.clip
import androidx.compose.ui.geometry.Rect
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.CompositingStrategy
import androidx.compose.ui.graphics.asComposeRenderEffect
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.layout.boundsInWindow
import androidx.compose.ui.layout.onGloballyPositioned
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.IntOffset
import androidx.compose.ui.unit.coerceAtLeast
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.ui.zIndex
import kotlin.math.roundToInt

private object Dimens {
    val screenPadding = 12.dp
    val listVSpacing = 6.dp
    val rowCorner = 16.dp
    val rowPaddingH = 16.dp
    val rowPaddingV = 12.dp
    val thumbSize = 42.dp
    val thumbCorner = 12.dp
    val trailingIcon = 22.dp
    val liftedPaddingH = 12.dp
    val liftedElevation = 14.dp
    val sheetCorner = 22.dp
    val sheetHPadding = 18.dp
    val sheetVPadding = 14.dp
    val sheetSpacing = 12.dp
    val actionRowCorner = 14.dp
    val actionRowHPadding = 8.dp
    val actionRowVPadding = 8.dp
    val titleSize = 18.sp
    val subtitleSize = 13.sp
    val emojiSize = 20.sp
    val scrimAlpha = 0.52f
    val surfaceAlpha = 0.98f
}

@Composable
fun MovieListScreen() {
    MaterialTheme(colorScheme = darkColorScheme()) {
        Surface(Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
            MovieListWithSelectionEffect()
        }
    }
}

private data class Movie(
    val id: Int,
    val title: String,
    val year: Int,
    val emoji: String
)

private fun sampleMovies() = listOf(
    Movie(1, "Inception", 2010, "🌀"),
    Movie(2, "Interstellar", 2014, "🌌"),
    Movie(3, "The Dark Knight", 2008, "🦇"),
    Movie(4, "Arrival", 2016, "🛸"),
    Movie(5, "Blade Runner 2049", 2017, "🤖"),
    Movie(6, "Mad Max: Fury Road", 2015, "🏜️"),
    Movie(7, "Whiplash", 2014, "🥁"),
    Movie(8, "Dune", 2021, "🏜"),
    Movie(9, "Parasite", 2019, "🏠"),
    Movie(10, "Oppenheimer", 2023, "⚛️"),
    Movie(11, "The Social Network", 2010, "💬"),
    Movie(12, "La La Land", 2016, "🎺"),
    Movie(13, "The Matrix", 1999, "🟩"),
    Movie(14, "Gladiator", 2000, "🗡️"),
    Movie(15, "Spider-Verse", 2018, "🕷️")
)

@SuppressLint("RestrictedApi")
@Composable
private fun MovieListWithSelectionEffect() {
    val movies = remember { sampleMovies() }
    val density = LocalDensity.current
    val configuration = LocalConfiguration.current
    val screenHeightDp = configuration.screenHeightDp.dp

    var sheetHeight by remember { mutableStateOf(0.dp) }
    var selectedRowHeight by remember { mutableStateOf(0.dp) }
    var selected by remember { mutableStateOf<Movie?>(null) }
    var selectedBounds by remember { mutableStateOf<Rect?>(null) }

    val menuVisible = selected != null
    val blur by animateFloatAsState(
        targetValue = if (menuVisible) 22f else 0f,
        animationSpec = tween(220, easing = FastOutSlowInEasing), label = "blur"
    )
    val scale by animateFloatAsState(
        targetValue = if (menuVisible) 0.985f else 1f,
        animationSpec = tween(220, easing = FastOutSlowInEasing), label = "scale"
    )
    val scrimAlpha by animateFloatAsState(
        targetValue = if (menuVisible) Dimens.scrimAlpha else 0f,
        animationSpec = tween(220, easing = LinearEasing), label = "scrim"
    )

    BackHandler(enabled = menuVisible) { selected = null }

    Box(Modifier.fillMaxSize()) {
        Box(
            Modifier
                .fillMaxSize()
                .graphicsLayer {
                    scaleX = scale
                    scaleY = scale
                    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
                        renderEffect = if (blur > 0f) {
                            android.graphics.RenderEffect
                                .createBlurEffect(blur, blur, Shader.TileMode.CLAMP)
                                .asComposeRenderEffect()
                        } else null
                        compositingStrategy = CompositingStrategy.Offscreen
                    }
                }
        ) {
            LazyColumn(
                contentPadding = PaddingValues(
                    vertical = Dimens.screenPadding,
                ),
                verticalArrangement = Arrangement.spacedBy(Dimens.listVSpacing),
                modifier = Modifier
                    .fillMaxSize()
                    .statusBarsPadding()
                    .navigationBarsPadding()
            ) {
                items(movies.size, key = { movies[it].id }) { idx ->
                    val movie = movies[idx]
                    var rowBounds by remember { mutableStateOf<Rect?>(null) }
                    var rowHeight by remember { mutableStateOf(0.dp) }
                    MovieRow(
                        movie = movie,
                        modifier = Modifier
                            .padding(horizontal = Dimens.screenPadding)
                            .onGloballyPositioned { c ->
                                val r = c.boundsInWindow()
                                rowBounds = Rect(r.left, r.top, r.right, r.bottom)
                                rowHeight = with(density) { c.size.height.toDp() }
                            }
                            .combinedClickable(
                                onClick = {
                                    selected = movie
                                    selectedBounds = rowBounds
                                    selectedRowHeight = rowHeight
                                },
                                onLongClick = {
                                    selected = movie
                                    selectedBounds = rowBounds
                                    selectedRowHeight = rowHeight
                                }
                            )
                    )
                }
            }
        }

        if (menuVisible) {
            Box(
                Modifier
                    .fillMaxSize()
                    .background(Color.Black.copy(alpha = scrimAlpha))
                    .pointerInput(Unit) { detectTapGestures { selected = null } }
            )
        }

        val bounds = selectedBounds
        if (menuVisible && selected != null && bounds != null) {
            val sheetTop = (screenHeightDp - sheetHeight).coerceAtLeast(0.dp)
            val margin = 12.dp
            val maxY = (sheetTop - selectedRowHeight - margin).coerceAtLeast(margin)
            val startYPx = with(density) { bounds.top.toDp().toPx() }
            val targetYPx = with(density) { minOf(bounds.top.toDp(), maxY).toPx() }
            val yAnim = remember { Animatable(startYPx) }

            LaunchedEffect(menuVisible, startYPx, targetYPx) {
                if (menuVisible) {
                    yAnim.snapTo(startYPx)
                    yAnim.animateTo(
                        targetValue = targetYPx,
                        animationSpec = tween(durationMillis = 240, easing = FastOutSlowInEasing)
                    )
                } else yAnim.snapTo(startYPx)
            }

            val liftedAlpha by animateFloatAsState(
                targetValue = if (menuVisible) 1f else 0f,
                animationSpec = tween(200, easing = LinearOutSlowInEasing),
                label = "liftedAlpha"
            )
            val elevation by animateDpAsState(
                targetValue = if (menuVisible) Dimens.liftedElevation else 0.dp,
                animationSpec = tween(180, easing = FastOutSlowInEasing),
                label = "liftedElevation"
            )

            Box(
                Modifier
                    .zIndex(3f)
                    .fillMaxWidth()
                    .padding(horizontal = Dimens.liftedPaddingH)
                    .graphicsLayer {
                        scaleX = 1f
                        scaleY = 1f
                        alpha = liftedAlpha
                    }
                    .offset { IntOffset(0, yAnim.value.roundToInt()) }
            ) {
                MovieRow(
                    movie = selected!!,
                    elevated = true,
                    elevation = elevation,
                    modifier = Modifier.fillMaxWidth()
                )
            }
        }

        AnimatedVisibility(
            visible = menuVisible,
            enter = fadeIn(tween(140)) + slideInVertically(
                tween(
                    230,
                    easing = FastOutSlowInEasing
                )
            ) { it / 2 },
            exit = fadeOut(tween(110)) + slideOutVertically(tween(150)) { it / 2 },
            modifier = Modifier
                .align(Alignment.BottomCenter)
                .zIndex(2f)
        ) {
            ActionSheet(
                onAddToList = { selected = null },
                onPlayTrailer = { selected = null },
                onDelete = { selected = null },
                onDismiss = { selected = null },
                onMeasured = { sheetHeight = it }
            )
        }
    }
}

@Composable
private fun MovieRow(
    movie: Movie,
    modifier: Modifier = Modifier,
    elevated: Boolean = false,
    elevation: Dp = 0.dp
) {
    val shape = RoundedCornerShape(Dimens.rowCorner)
    val container = if (elevated) MaterialTheme.colorScheme.surface
    else MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.45f)

    Surface(
        tonalElevation = if (elevated) 6.dp else 0.dp,
        shadowElevation = elevation,
        shape = shape,
        color = container,
        modifier = modifier
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = Dimens.rowPaddingH, vertical = Dimens.rowPaddingV),
            horizontalArrangement = Arrangement.spacedBy(12.dp)
        ) {
            Box(
                Modifier
                    .size(Dimens.thumbSize)
                    .clip(RoundedCornerShape(Dimens.thumbCorner))
                    .background(MaterialTheme.colorScheme.onSurface.copy(alpha = 0.08f)),
                contentAlignment = Alignment.Center
            ) { Text(movie.emoji, fontSize = Dimens.emojiSize) }

            Column(Modifier.weight(1f)) {
                Text(
                    movie.title,
                    fontSize = Dimens.titleSize,
                    fontWeight = FontWeight.SemiBold,
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis
                )
                Spacer(Modifier.height(4.dp))
                Text(
                    "Year ${movie.year}",
                    fontSize = Dimens.subtitleSize,
                    color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.72f)
                )
            }

            Icon(
                imageVector = Icons.Default.MoreVert,
                contentDescription = null,
                tint = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.65f),
                modifier = Modifier.size(Dimens.trailingIcon)
            )
        }
    }
}

@Composable
private fun ActionSheet(
    onAddToList: () -> Unit,
    onPlayTrailer: () -> Unit,
    onDelete: () -> Unit,
    onDismiss: () -> Unit,
    onMeasured: (Dp) -> Unit
) {
    val density = LocalDensity.current
    val sheetShape = RoundedCornerShape(topStart = Dimens.sheetCorner, topEnd = Dimens.sheetCorner)

    Surface(
        shape = sheetShape,
        tonalElevation = 8.dp,
        color = MaterialTheme.colorScheme.surface.copy(alpha = Dimens.surfaceAlpha),
        modifier = Modifier
            .fillMaxWidth()
            .navigationBarsPadding()
            .onGloballyPositioned { onMeasured(with(density) { it.size.height.toDp() }) }
    ) {
        Column(
            Modifier
                .fillMaxWidth()
                .padding(horizontal = Dimens.sheetHPadding, vertical = Dimens.sheetVPadding),
            verticalArrangement = Arrangement.spacedBy(Dimens.sheetSpacing)
        ) {
            SheetActionRow(icon = "➕", title = "Add to watchlist", onClick = onAddToList)
            SheetActionRow(icon = "🎬", title = "Play trailer", onClick = onPlayTrailer)
            Divider(Modifier.alpha(0.5f))
            SheetActionRow(
                icon = "🗑️",
                title = "Delete",
                tint = MaterialTheme.colorScheme.error,
                onClick = onDelete
            )
            Spacer(Modifier.height(2.dp))
            TextButton(onClick = onDismiss, modifier = Modifier.fillMaxWidth()) {
                Text("Close")
            }
        }
    }
}

@Composable
private fun SheetActionRow(
    icon: String,
    title: String,
    tint: Color = MaterialTheme.colorScheme.onSurface,
    onClick: () -> Unit
) {
    Row(
        Modifier
            .fillMaxWidth()
            .clip(RoundedCornerShape(Dimens.actionRowCorner))
            .clickable(onClick = onClick)
            .padding(horizontal = Dimens.actionRowHPadding, vertical = Dimens.actionRowVPadding),
        horizontalArrangement = Arrangement.spacedBy(10.dp)
    ) {
        Text(icon)
        Text(title, color = tint)
    }
}