package com.example.musicapp.Interface

import TopBar
import android.content.Context
import android.support.v4.media.session.PlaybackStateCompat
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.lifecycle.viewmodel.compose.viewModel
import com.example.musicapp.Data.Song
import com.example.musicapp.ViewModel.AlbumDetailsViewModel

import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Scaffold
import androidx.compose.material.Text
import androidx.compose.runtime.DisposableEffect
import androidx.compose.ui.Alignment
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp
import androidx.navigation.NavController
import com.google.android.exoplayer2.MediaItem
import com.google.android.exoplayer2.Player
import com.google.android.exoplayer2.SimpleExoPlayer

@Composable
fun AlbumDetailScreen(albumId: Int, navController: NavController) {
    val albumDetailsViewModel: AlbumDetailsViewModel = viewModel()
    albumDetailsViewModel.fetchAlbumDetails(albumId)
    val albumDetails by albumDetailsViewModel.albumDetails.collectAsState()

    albumDetails?.let { details ->
        Scaffold(
            topBar = {
                TopBar(title = details.title)
            },
            content = { padding ->
                Column(
                    modifier = Modifier.padding(padding)
                ) {
                    LazyColumn {
                        items(details.songs) { song ->
                            AlbumDetailItem(song, navController)
                        }
                    }
                }
            }
        )
    }
}

@Composable
fun AlbumDetailItem(song: Song, navController: NavController) {
    val context = LocalContext.current // Add this line at the beginning of the composable
    val (player, setPlayer) = rememberSaveable { mutableStateOf<SimpleExoPlayer?>(null) }
    DisposableEffect(Unit) {
        onDispose {
            player?.stop()
            player?.release()
        }
    }
    Row(
        modifier = Modifier
            .padding(horizontal = 16.dp, vertical = 8.dp)
            .background(
                color = Color.Black.copy(alpha = 0.5f), // Change the alpha value here
                shape = RoundedCornerShape(8.dp)
            )
            .border( // Add this line to draw an outline around the item
                width = 1.dp,
                color = Color.LightGray,
                shape = RoundedCornerShape(8.dp)
            )
            .clickable(onClick = {
                //navController.navigate("songDetail/${song.id}")
                playPreview(context, song.preview)

            }) // Add this line for navigation
                ) {
                    Column(
                        modifier = Modifier
                            .weight(1f) // 2/3 of the width
                            .padding(start = 16.dp)
                            .align(Alignment.CenterVertically)
                    ) {
                        Text(text = song.title ?: "Unknown title", style = MaterialTheme.typography.subtitle1, color = Color.White)
                        Text(text = "${song.duration}"?:"Unknown duration", style = MaterialTheme.typography.caption, color = Color.White)
                    }
                }
            }

private fun playPreview(context: Context, previewUrl: String, onPlayerCreated: (SimpleExoPlayer) -> Unit) {
    val player = SimpleExoPlayer.Builder(context).build()
    val mediaItem = MediaItem.fromUri(previewUrl)
    player.setMediaItem(mediaItem)
    player.prepare()
    player.playWhenReady = true
        .clickable(onClick = {
            playPreview(context, song.preview, onPlayerCreated = { createdPlayer ->
                setPlayer(createdPlayer)
            })
        })
    onPlayerCreated(player)

    // Stop playing after 30 seconds
    player.seekTo(30000)
    player.addListener(object : Player.Listener {
        override fun onPositionDiscontinuity(
            oldPosition: Player.PositionInfo,
            newPosition: Player.PositionInfo,
            reason: Int
        ) {
            if (newPosition.windowIndex != oldPosition.windowIndex) {
                player.stop()
            }
        }
    })
}
-> errors ->Unresolved reference: rememberSaveable:68,Unresolved reference: mutableStateOf:68,No value passed for parameter 'onPlayerCreated':89,<html>Unresolved reference. None of the following candidates is applicable because of receiver type mismatch:<br/>public fun Modifier.clickable(interactionSource: MutableInteractionSource, indication: Indication?, enabled: Boolean = ..., onClickLabel: String? = ..., role: Role? = ..., onClick: () -&gt; Unit): Modifier defined in androidx.compose.foundation<br/>public fun Modifier.clickable(enabled: Boolean = ..., onClickLabel: String? = ..., role: Role? = ..., onClick: () -&gt; Unit): Modifier defined in androidx.compose.foundation:111,Unresolved reference: song:112,Unresolved reference: setPlayer:113, 'SimpleExoPlayer' is deprecated. Deprecated in Java:37