package com.example.musicapp.Data.Repository

import com.example.musicapp.Data.*
import okhttp3.OkHttpClient
import okhttp3.logging.HttpLoggingInterceptor
import retrofit2.Retrofit
import retrofit2.converter.gson.GsonConverterFactory
import retrofit2.http.GET
import retrofit2.http.Path

interface DeezerApiService {
    @GET("genre?output=json")  // json endpoint instead of “/”
    suspend fun getGenres(): GenreResponse

    @GET("genre/{genre_id}/artists")
    suspend fun getArtists(@Path("genre_id") genreId: Int): ArtistResponse

    @GET("artist/{artist_id}")
    suspend fun getArtistDetail(@Path("artist_id") artistId: Int): ArtistDetailResponse

    @GET("artist/{artist_id}/albums")
    suspend fun getArtistAlbums(@Path("artist_id") artistId: Int): AlbumResponse

    data class AlbumResponse(val data: List<Album>) {

        fun toAlbumList(): List<Album> {
            return data.map { albumData ->
                Album(
                    id = albumData.id,
                    title = albumData.title,
                    link = albumData.link,
                    cover = albumData.cover,
                    cover_small = albumData.cover_small,
                    cover_medium = albumData.cover_medium,
                    cover_big = albumData.cover_big,
                    cover_xl = albumData.cover_xl,
                    release_date = albumData.release_date,
                    tracklist = albumData.tracklist,
                    type = albumData.type
                )
            }
        }
    }

    @GET("album/{album_id}")
    suspend fun getAlbumDetails(@Path("album_id") albumId: Int): AlbumDetailResponse

    data class AlbumDetailResponse(
        val id: Int,
        val title: String,
        val cover_medium: String,
        val tracks: TracksResponse
    )

    data class TracksResponse(
        val data: List<Song>,
        val inherit_album_cover_medium: String
    )

    // Create a new class for storing response fields.
    data class GenreResponse(val data: List<Category>)
    data class ArtistResponse(val data: List<Artist>)
    data class ArtistDetailResponse(val id: Int, val name: String, val picture_big: String, val albums: List<Album>?)

    companion object {
        private const val BASE_URL = "https://api.deezer.com/"

        fun create(): DeezerApiService {
            val client = OkHttpClient.Builder()
                .addInterceptor(HttpLoggingInterceptor().apply {
                    level = HttpLoggingInterceptor.Level.BODY
                })
                .build()

            return Retrofit.Builder()
                .baseUrl(BASE_URL)
                .client(client)
                .addConverterFactory(GsonConverterFactory.create())
                .build()
                .create(DeezerApiService::class.java)
        }
    }
},package com.example.musicapp.Data.Repository

import com.example.musicapp.Data.Album
import com.example.musicapp.Data.Artist
import com.example.musicapp.Data.ArtistDetail
import com.example.musicapp.Data.Category
import com.example.musicapp.Data.AlbumDetails


class DeezerRepository {
    private val deezerApiService = DeezerApiService.create()

    suspend fun getCategories(): List<Category> {
        val response = deezerApiService.getGenres()
        return response.data.map { category ->
            Category(category.id, category.name, category.picture_medium)
        }
    }

    suspend fun getArtists(genreId: Int): List<Artist> {
        val response = deezerApiService.getArtists(genreId)
        return response.data
    }

    suspend fun getArtistDetail(artistId: Int): ArtistDetail {
        val response = deezerApiService.getArtistDetail(artistId)

        return ArtistDetail(
            id = response.id,
            name = response.name,
            pictureBig = response.picture_big,
            albums = response.albums
        )
    }

    suspend fun getArtistAlbums(artistId: Int): List<Album> {
        val response = deezerApiService.getArtistAlbums(artistId)
        return response.toAlbumList()
    }

    suspend fun getAlbumDetails(albumId: Int): AlbumDetails {
        val response = deezerApiService.getAlbumDetails(albumId)
        return AlbumDetails(
            id = response.id,
            title = response.title,
            cover_medium = response.cover_medium,
            songs = response.tracks.data
        )
    }
},package com.example.musicapp.Interface

import TopBar
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
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.size
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.navigation.NavController
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import coil.compose.rememberImagePainter
import coil.transform.CircleCropTransformation
import com.example.musicapp.ViewModel.PlayerViewModel
import com.example.musicapp.R
import androidx.lifecycle.ViewModelStoreOwner
import com.example.musicapp.Data.Repository.DeezerRepository


@Composable
fun AlbumDetailScreen(
    albumId: Int
) {
    val context = LocalContext.current
    val deezerRepository = remember { DeezerRepository() } // memoize to avoid re-initialization
    val albumDetailsViewModel: AlbumDetailsViewModel = viewModel()

    // Replace the previous playerViewModel assignment with this code:
    val playerViewModel = remember { PlayerViewModel(context) }
    albumDetailsViewModel.fetchAlbumDetails(albumId)
    val albumDetails = albumDetailsViewModel.albumDetails.collectAsState().value
    albumDetails?.let { details ->
        Scaffold(
            topBar = {
                TopBar(title = details.title)
            },
            content = { padding ->
                Column(
                    modifier = Modifier.padding(padding)
                ) {
                    LazyColumn {
                        itemsIndexed(details.songs) { _, song -> // Use itemsIndexed instead of items
                            AlbumDetailItem(song, playerViewModel)
                        }
                    }
                }
            }
        )
    }
    DisposableEffect(Unit) {
        onDispose {
            playerViewModel.stopSong() // Add a stopSong function to the PlayerViewModel, when page changes stop the song
        }
    }
}

@Composable
fun AlbumDetailItem(song: Song,  playerViewModel: PlayerViewModel) {
    val context = LocalContext.current
    // Observe the favorite status of the song
    val isFavoriteState = remember { mutableStateOf(playerViewModel.isFavorite(song)) }
    // Watch for changes in the favorites and update the isFavoriteState appropriately
    LaunchedEffect(playerViewModel.favorites) {
        isFavoriteState.value = playerViewModel.isFavorite(song)
    }
    Row(
        modifier = Modifier
            .padding(horizontal = 16.dp, vertical = 8.dp)
            .background(
                color = Color.Black.copy(alpha = 0.5f),
                shape = RoundedCornerShape(8.dp)
            )
            .border(
                width = 1.dp,
                color = Color.LightGray,
                shape = RoundedCornerShape(8.dp)
            )
    ) {
        val painter = rememberImagePainter(
            data = song.album.cover_medium,
            builder = {
                crossfade(true)
                transformations(CircleCropTransformation())
            }
        )

        Image(
            painter = painter,
            contentDescription = song.title,
            contentScale = ContentScale.Crop,
            modifier = Modifier
                .size(100.dp)
                .align(Alignment.CenterVertically)
        )

        Column(
            modifier = Modifier
                .weight(1f)
                .padding(start = 16.dp)
                .align(Alignment.CenterVertically)
        ) {
            Text(
                text = song.title,
                style = MaterialTheme.typography.subtitle1,
                color = Color.White
            )
            Text(
                text = "${song.duration}",
            style = MaterialTheme.typography.caption,
            color = Color.White
            )
        }

        IconButton(
            onClick = {
                if (playerViewModel.currentSong.value?.id == song.id) {
                    if (playerViewModel.isPlaying.value) {
                        playerViewModel.pauseSong()
                    } else {
                        playerViewModel.resumeSong()
                    }
                } else {
                    playerViewModel.playSong(context, song)
                }
            },
            modifier = Modifier
                .align(Alignment.CenterVertically)
                .padding(8.dp)
        ) {
            Icon(
                painter = painterResource(
            id = if (playerViewModel.currentSong.value?.id == song.id && playerViewModel.isPlaying.value) R.drawable.pause
            else R.drawable.play_buttton),
            contentDescription = if (playerViewModel.currentSong.value?.id == song.id && playerViewModel.isPlaying.value) "Pause"
            else "Play",
            modifier = Modifier.size(24.dp)
            )
        }
        IconButton(
            onClick = {
                if (playerViewModel.isFavorite(song)) {
                    playerViewModel.removeFavoriteSong(song)
                } else {
                    playerViewModel.addFavoriteSong(song)
                }
                // Update isFavoriteState when heart icon is clicked
                isFavoriteState.value = !isFavoriteState.value
            },
            modifier = Modifier
                .align(Alignment.CenterVertically)
                .padding(8.dp)
        ) {
            Icon(
                painter = painterResource(id = if (isFavoriteState.value) R.drawable.heart_full else R.drawable.heart_empty),
                contentDescription = if (isFavoriteState.value) "Favorite" else "Not Favorite",
            modifier = Modifier.size(24.dp)
            )
        }
    }
},package com.example.musicapp.Interface

import TopBar
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
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.size
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.navigation.NavController
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import coil.compose.rememberImagePainter
import coil.transform.CircleCropTransformation
import com.example.musicapp.ViewModel.PlayerViewModel
import com.example.musicapp.R
import androidx.lifecycle.ViewModelStoreOwner
import com.example.musicapp.Data.Repository.DeezerRepository


@Composable
fun AlbumDetailScreen(
    albumId: Int
) {
    val context = LocalContext.current
    val albumDetailsViewModel: AlbumDetailsViewModel = viewModel()

    val playerViewModel = remember { PlayerViewModel(context) }
    albumDetailsViewModel.fetchAlbumDetails(albumId)
    val albumDetails = albumDetailsViewModel.albumDetails.collectAsState().value
    albumDetails?.let { details ->
        Scaffold(
            topBar = {
                TopBar(title = details.title)
            },
            content = { padding ->
                Column(
                    modifier = Modifier.padding(padding)
                ) {
                    LazyColumn {
                        itemsIndexed(details.songs) { _, song -> // Use itemsIndexed instead of items
                            AlbumDetailItem(song, playerViewModel)
                        }
                    }
                }
            }
        )
    }
    DisposableEffect(Unit) {
        onDispose {
            playerViewModel.stopSong() // Add a stopSong function to the PlayerViewModel, when page changes stop the song
        }
    }
}

@Composable
fun AlbumDetailItem(song: Song,  playerViewModel: PlayerViewModel) {
    val context = LocalContext.current
    // Observe the favorite status of the song
    val isFavoriteState = remember { mutableStateOf(playerViewModel.isFavorite(song)) }
    // Watch for changes in the favorites and update the isFavoriteState appropriately
    LaunchedEffect(playerViewModel.favorites) {
        isFavoriteState.value = playerViewModel.isFavorite(song)
    }
    Row(
        modifier = Modifier
            .padding(horizontal = 16.dp, vertical = 8.dp)
            .background(
                color = Color.Black.copy(alpha = 0.5f),
                shape = RoundedCornerShape(8.dp)
            )
            .border(
                width = 1.dp,
                color = Color.LightGray,
                shape = RoundedCornerShape(8.dp)
            )
    ) {
        val painter = rememberImagePainter(
            data = song.album.cover_medium,
            builder = {
                crossfade(true)
                transformations(CircleCropTransformation())
            }
        )

        Image(
            painter = painter,
            contentDescription = song.title,
            contentScale = ContentScale.Crop,
            modifier = Modifier
                .size(100.dp)
                .align(Alignment.CenterVertically)
        )

        Column(
            modifier = Modifier
                .weight(1f)
                .padding(start = 16.dp)
                .align(Alignment.CenterVertically)
        ) {
            Text(
                text = song.title,
                style = MaterialTheme.typography.subtitle1,
                color = Color.White
            )
            Text(
                text = "${song.duration}",
            style = MaterialTheme.typography.caption,
            color = Color.White
            )
        }

        IconButton(
            onClick = {
                if (playerViewModel.currentSong.value?.id == song.id) {
                    if (playerViewModel.isPlaying.value) {
                        playerViewModel.pauseSong()
                    } else {
                        playerViewModel.resumeSong()
                    }
                } else {
                    playerViewModel.playSong(context, song)
                }
            },
            modifier = Modifier
                .align(Alignment.CenterVertically)
                .padding(8.dp)
        ) {
            Icon(
                painter = painterResource(
            id = if (playerViewModel.currentSong.value?.id == song.id && playerViewModel.isPlaying.value) R.drawable.pause
            else R.drawable.play_buttton),
            contentDescription = if (playerViewModel.currentSong.value?.id == song.id && playerViewModel.isPlaying.value) "Pause"
            else "Play",
            modifier = Modifier.size(24.dp)
            )
        }
        IconButton(
            onClick = {
                if (playerViewModel.isFavorite(song)) {
                    playerViewModel.removeFavoriteSong(song)
                } else {
                    playerViewModel.addFavoriteSong(song)
                }
                // Update isFavoriteState when heart icon is clicked
                isFavoriteState.value = !isFavoriteState.value
            },
            modifier = Modifier
                .align(Alignment.CenterVertically)
                .padding(8.dp)
        ) {
            Icon(
                painter = painterResource(id = if (isFavoriteState.value) R.drawable.heart_full else R.drawable.heart_empty),
                contentDescription = if (isFavoriteState.value) "Favorite" else "Not Favorite",
            modifier = Modifier.size(24.dp)
            )
        }
    }
},package com.example.musicapp.Interface

import TopBar
import android.util.Log
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Scaffold
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.unit.dp
import androidx.lifecycle.viewmodel.compose.viewModel
import androidx.navigation.NavController
import coil.compose.rememberAsyncImagePainter
import com.example.musicapp.Data.Album
import com.example.musicapp.ViewModel.ArtistsViewModel

@Composable
fun ArtistDetailScreen(artistId: Int,navController: NavController) {
    val artistsViewModel: ArtistsViewModel = viewModel()
    artistsViewModel.fetchArtistDetails(artistId)
    val artistDetails by artistsViewModel.artistDetails.collectAsState()

    artistDetails.let { details ->
        val artistDetail = details.firstOrNull()
        artistDetail?.let {
            Scaffold(
                topBar = {
                    TopBar(title = it.name)
                },
                content = { padding ->
                    Column(modifier = Modifier.padding(padding)) {
                        val painter = rememberAsyncImagePainter(model = it.pictureBig)
                        Image(
                            painter = painter,
                            contentDescription = it.name,
                            contentScale = ContentScale.FillWidth,
                            modifier = Modifier
                                .fillMaxWidth(0.5f) // Change this line to set the image width to half
                                .padding(horizontal = 16.dp)
                                .align(Alignment.CenterHorizontally) // Center the image horizontally
                        )


                        if (it.albums.isNullOrEmpty()) {
                            Log.d("ArtistDetailScreen", "No albums found for artist ${it.name}")
                        }

                        LazyColumn {
                            items(it.albums ?: emptyList()) { album ->
                                ArtistDetailItem(album, navController) // Pass the navController to ArtistDetailItem
                            }
                        }
                    }
                }
            )
        }
    }
}

@Composable
fun ArtistDetailItem(album: Album, navController: NavController, // Add the navController parameter
) {
    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("albumDetail/${album.id}") }) // Add this line for navigation

    ) {
        val painter = rememberAsyncImagePainter(model = album.cover_medium)
        Image(
            painter = painter,
            contentDescription = album.title,
            contentScale = ContentScale.Crop,
            modifier = Modifier
                .size(100.dp)
                .align(Alignment.CenterVertically)
        )

        Column(
            modifier = Modifier
                .weight(1f) // 2/3 of the width
                .padding(start = 16.dp)
                .align(Alignment.CenterVertically)
        ) {
            Text(text = album.title ?: "Unknown title", style = MaterialTheme.typography.subtitle1, color = Color.White)
            Text(text = album.release_date ?: "Unknown release date", style = MaterialTheme.typography.caption, color = Color.White)

        }
    }
},package com.example.musicapp.Interface

import TopBar
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
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.foundation.shape.RoundedCornerShape
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Scaffold
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.lifecycle.viewmodel.compose.viewModel
import androidx.navigation.NavController
import coil.compose.rememberAsyncImagePainter
import com.example.musicapp.Data.Artist
import com.example.musicapp.ViewModel.ArtistsViewModel
import com.example.musicapp.ViewModel.CategoriesViewModel
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue


@Composable
fun ArtistsScreen(navController: NavController, categoryId: Int) {
    val categoriesViewModel: CategoriesViewModel = viewModel()
    val allCategories by categoriesViewModel.categories.collectAsState()
    val category = allCategories.firstOrNull { it.id == categoryId }

    val artistsViewModel: ArtistsViewModel = viewModel()
    val artists by artistsViewModel.artists.collectAsState()
    artistsViewModel.fetchArtists(categoryId)

    if (category != null) {
        Scaffold(
            topBar = { TopBar(title = category.name) },
            content = { padding ->
                Column(modifier = Modifier.padding(padding)) {
                    ArtistsScreenContent(
                        artists = artists,
                        onArtistSelected = { artist -> // FIX HERE
                            navController.navigate("artistDetail/${artist.id}")
                        }
                    )
                }
            }
        )
    } else {
        Text("Category not found")
    }
}

@Composable
fun ArtistsScreenContent(
    artists: List<Artist>,
    onArtistSelected: (Artist) -> Unit = {},
) {
    Column {

        LazyVerticalGrid(
            columns = GridCells.Fixed(2),
            contentPadding = PaddingValues(16.dp)
        ) {
            items(artists) { artist ->
                ArtistItem(artist) { onArtistSelected(artist) } // FIX HERE
            }
        }
    }
}

@Composable
private fun ArtistItem(artist: Artist, onClick: () -> Unit) {
    Surface(
        modifier = Modifier
            .padding(8.dp)
            .clickable(onClick = onClick)
            .aspectRatio(1f),
        shape = RoundedCornerShape(8.dp),
        elevation = 4.dp,
        border = BorderStroke(width = 1.dp, color = Color.LightGray)
    ) {
        Box(
            modifier = Modifier.fillMaxSize()
        ) {
            val painter = rememberAsyncImagePainter(model = artist.picture_medium)

            Image(
                painter = painter,
                contentDescription = artist.name,
                contentScale = ContentScale.Crop,
                modifier = Modifier.fillMaxSize()
            )

            Text(
                text = artist.name,
                modifier = Modifier
                    .align(Alignment.BottomCenter)
                    .background(color = Color.Black.copy(alpha = 0.7f))
                    .fillMaxWidth()
                    .padding(4.dp),
                style = MaterialTheme.typography.body2,
                color = Color.White,
                textAlign = TextAlign.Center
            )
        }
    }
},package com.example.musicapp.Interface

import TopBar
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import com.example.musicapp.ViewModel.PlayerViewModel
import com.example.musicapp.Data.Song
import androidx.compose.runtime.*


@Composable
fun FavoritesScreen() {
    val context = LocalContext.current
    val playerViewModel = remember { PlayerViewModel(context) }
    val favorites by playerViewModel.favorites.collectAsState(emptyList<Song>())

    Scaffold(
        topBar = { TopBar(title = "Favorites") },
        content = { padding ->
            Column(modifier = Modifier.padding(padding)) {
                FavoritesList(favorites, playerViewModel)
            }
        }
    )
}

@Composable
fun FavoritesList(
    favorites: List<Song>,
    playerViewModel: PlayerViewModel
) {
    LazyColumn {
        items(favorites.size) { index ->
            val song = favorites[index]
            AlbumDetailItem(song, playerViewModel)
        }
    }
},package com.example.musicapp.Interface

import MusicCategoriesScreen
import TopBar
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Home
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.lifecycle.viewmodel.compose.LocalViewModelStoreOwner
import com.example.musicapp.ui.theme.MusicAppTheme
import com.example.musicapp.ViewModel.CategoriesViewModel
import androidx.lifecycle.viewmodel.compose.viewModel
import androidx.navigation.NavController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.currentBackStackEntryAsState
import androidx.navigation.compose.rememberNavController

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MusicAppTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    MainScreen()
                }
            }
        }
    }
}

@Composable
fun MainScreen() {
    val navController = rememberNavController()
    val localViewModelStoreOwner = LocalViewModelStoreOwner.current

    Scaffold(
        bottomBar = {
            BottomNavigationBar(navController)
        },
        content = { padding ->
            NavHost(navController, startDestination = "musicCategories") {
            composable("musicCategories") {
            val categoriesViewModel: CategoriesViewModel = viewModel()
            val categories by categoriesViewModel.categories.collectAsState()

                MusicCategoriesScreen(
                    categories = categories,
                    onCategorySelected = { category ->
                        navController.navigate("artistsDetail/${category.id}")
                    },
                    topBar = { TopBar(title = "Music Categories") },
                    modifier = Modifier.padding(padding)
                )

            }
            composable("artistsDetail/{categoryId}") { backStackEntry ->
            val categoryId = backStackEntry.arguments?.getString("categoryId")?.toIntOrNull()
            if (categoryId != null) {
                ArtistsScreen(navController, categoryId)
            }
        }
            composable("artistDetail/{artistId}") { backStackEntry ->
            val artistId = backStackEntry.arguments?.getString("artistId")?.toIntOrNull()
            if (artistId != null) {
                ArtistDetailScreen(artistId, navController)
            }
        }
            composable("albumDetail/{albumId}") { backStackEntry ->
            val albumId = backStackEntry.arguments?.getString("albumId")?.toIntOrNull()
            if (albumId != null) {
                if (localViewModelStoreOwner != null) {
                    AlbumDetailScreen(albumId )
                }
            }
        }
            composable("favorites") {
            FavoritesScreen()
        }
        }
        }
    )
}

@Composable
fun BottomNavigationBar(navController: NavController) {
    val navBackStackEntry = navController.currentBackStackEntryAsState()
    val currentRoute = navBackStackEntry.value?.destination?.route

    BottomNavigation  {
        BottomNavigationItem(
            icon = { Icon(Icons.Filled.Home, contentDescription = null) },
            selected = currentRoute == "musicCategories",
            onClick = {
                navController.navigate("musicCategories") {
                // Corrected line:
                popUpTo("musicCategories") {
                inclusive = true
            }
                launchSingleTop = true
            }
            }
        )
        BottomNavigationItem(
            icon = { Icon(Icons.Filled.Favorite, contentDescription = null) },
            selected = currentRoute == "favorites",
            onClick = {
                navController.navigate("favorites") {
                // Corrected line:
                popUpTo("musicCategories") {
                inclusive = true
            }
                launchSingleTop = true
            }
            }
        )
    }
},import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
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.foundation.shape.RoundedCornerShape
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import coil.compose.rememberAsyncImagePainter
import com.example.musicapp.Data.Category

@Composable
fun MusicCategoriesScreen(
    categories: List<Category>,
    onCategorySelected: (Category) -> Unit = {},
    topBar: @Composable () -> Unit,
    modifier: Modifier = Modifier
) {
    Column(
        modifier = modifier
    ) {
        topBar()

        LazyVerticalGrid(
            columns = GridCells.Fixed(2),
            contentPadding = PaddingValues(16.dp)
        ) {
            items(categories) { category ->
                CategoryItem(category) {
                    onCategorySelected(category)
                }
            }
        }
    }
}

@Composable
fun TopBar(title: String) {
    TopAppBar(
        title = {
            Text(
                title,
                textAlign = TextAlign.Center,
                modifier = Modifier.fillMaxWidth()
            )
        }
    )
}

@Composable
private fun CategoryItem(category: Category, onClick: () -> Unit) {
    Surface(
        modifier = Modifier
            .padding(8.dp)
            .clickable(onClick = onClick)
            .aspectRatio(1f),
        shape = RoundedCornerShape(8.dp),
        elevation = 4.dp,
        border = BorderStroke(width = 1.dp, color = Color.LightGray)
    ) {
        Box(
            modifier = Modifier.fillMaxSize()
        ) {
            val painter = rememberAsyncImagePainter(model = category.picture_medium)

            Image(
                painter = painter,
                contentDescription = category.name,
                contentScale = ContentScale.Crop,
                modifier = Modifier.fillMaxSize()
            )

            Text(
                text = category.name,
                modifier = Modifier
                    .align(Alignment.BottomCenter)
                    .background(color = Color.Black.copy(alpha = 0.7f))
                    .fillMaxWidth()
                    .padding(4.dp),
                style = MaterialTheme.typography.body2,
                color = Color.White, // Change the text color to white
                textAlign = TextAlign.Center
            )
        }
    }
},package com.example.musicapp.ViewModel

import android.util.Log
import androidx.lifecycle.ViewModel
import androidx.lifecycle.viewModelScope
import com.example.musicapp.Data.AlbumDetails
import com.example.musicapp.Data.Repository.DeezerRepository
import kotlinx.coroutines.flow.MutableStateFlow
import kotlinx.coroutines.flow.StateFlow
import kotlinx.coroutines.launch

class AlbumDetailsViewModel : ViewModel() {
    private val deezerRepository = DeezerRepository()

    private val _albumDetails = MutableStateFlow<AlbumDetails?>(null)
    val albumDetails: StateFlow<AlbumDetails?>
        get() = _albumDetails

    fun fetchAlbumDetails(albumId: Int) {
        viewModelScope.launch {
            try {
                val albumDetails = deezerRepository.getAlbumDetails(albumId)
                _albumDetails.value = albumDetails
            } catch (e: Exception) {
                Log.e("AlbumDetailsViewModel", "Failed to fetch album details: " + e.message)
            }
        }
    }
},package com.example.musicapp.ViewModel

import android.util.Log
import androidx.lifecycle.ViewModel
import androidx.lifecycle.viewModelScope
import com.example.musicapp.Data.Artist
import com.example.musicapp.Data.ArtistDetail
import com.example.musicapp.Data.Repository.DeezerRepository
import kotlinx.coroutines.flow.MutableStateFlow
import kotlinx.coroutines.flow.StateFlow
import kotlinx.coroutines.launch

class ArtistsViewModel : ViewModel() {
    private val deezerRepository = DeezerRepository()

    private val _artists = MutableStateFlow<List<Artist>>(emptyList())
    val artists: StateFlow<List<Artist>>
        get() = _artists

    private val _artistDetails = MutableStateFlow<List<ArtistDetail>>(emptyList())
    val artistDetails: StateFlow<List<ArtistDetail>>
        get() = _artistDetails

    fun fetchArtists(genreId: Int) {
        viewModelScope.launch {
            try {
                val artists = deezerRepository.getArtists(genreId)
                _artists.value = artists
            } catch (e: Exception) {
                Log.e("MusicViewModel", "Failed to fetch artists: " + e.message)
            }
        }
    }

    fun fetchArtistDetails(artistId: Int) {
        viewModelScope.launch {
            val artistDetailsData = deezerRepository.getArtistDetail(artistId)

            // Fetch artist’s albums
            val artistAlbums = deezerRepository.getArtistAlbums(artistId)

            // Combine artist details and albums
            val artistWithAlbums = artistDetailsData.copy(albums = artistAlbums)

            _artistDetails.value = listOf(artistWithAlbums)
        }
    }
},package com.example.musicapp.ViewModel

import android.util.Log
import androidx.lifecycle.ViewModel
import androidx.lifecycle.viewModelScope
import com.example.musicapp.Data.Category
import com.example.musicapp.Data.Repository.DeezerRepository
import kotlinx.coroutines.flow.MutableStateFlow
import kotlinx.coroutines.flow.StateFlow
import kotlinx.coroutines.launch

class CategoriesViewModel : ViewModel() {
    private val deezerRepository = DeezerRepository()
    private val _categories = MutableStateFlow<List<Category>>(emptyList())
    val categories: StateFlow<List<Category>>
        get() = _categories

    init {
        fetchCategories()
    }

    private fun fetchCategories() {
        viewModelScope.launch {
            try {
                val categories = deezerRepository.getCategories()
                _categories.value = categories
            } catch (e: Exception) {
                Log.e("CategoriesViewModel", "Failed to fetch categories: ${e.message}")
            }
        }
    }
},package com.example.musicapp.ViewModel

import android.content.Context
import androidx.compose.runtime.mutableStateOf
import androidx.lifecycle.ViewModel
import com.example.musicapp.Data.Song
import com.google.android.exoplayer2.SimpleExoPlayer
import com.google.gson.Gson
import com.google.android.exoplayer2.MediaItem
import com.google.gson.reflect.TypeToken
import kotlinx.coroutines.flow.MutableStateFlow
import kotlinx.coroutines.flow.StateFlow
import kotlinx.coroutines.flow.asStateFlow


class PlayerViewModel(private val context: Context) : ViewModel() {
    var currentPlayer = mutableStateOf<SimpleExoPlayer?>(null)
    var currentSong = mutableStateOf<Song?>(null)
    var isPlaying = mutableStateOf(false)

    private val sharedPreferences = context.getSharedPreferences("music_app", Context.MODE_PRIVATE)
    private val gson = Gson()
    private val _favorites = MutableStateFlow<List<Song>>(emptyList())
    val favorites: StateFlow<List<Song>> = _favorites.asStateFlow()

    init {
        // Load favorites during ViewModel initialization
        _favorites.value = loadFavorites()
    }

    fun createExoPlayer(context: Context): SimpleExoPlayer {
        return SimpleExoPlayer.Builder(context).build()
    }

    fun playSong(context: Context, song: Song) {
        currentPlayer.value?.let {
            if (currentSong.value?.id == song.id) {
                if (isPlaying.value) {
                    pauseSong()
                } else {
                    resumeSong()
                }
                return
            } else {
                it.pause()
                it.release()
            }
        }

        currentSong.value = song
        val player = createExoPlayer(context)
        player.setMediaItem(MediaItem.fromUri(song.preview))
        player.prepare()
        player.play()
        isPlaying.value = true
        currentPlayer.value = player
    }

    fun pauseSong() {
        currentPlayer.value?.pause()
        isPlaying.value = false
    }

    fun resumeSong() {
        currentPlayer.value?.play()
        isPlaying.value = true
    }
    fun stopSong() {
        currentPlayer.value?.stop()
        isPlaying.value =false
    }

    override fun onCleared() {
        super.onCleared()
        currentPlayer.value?.release()
    }

    // Add a private function to load favorites from SharedPreferences
    private fun loadFavorites(): List<Song> {
        val json = sharedPreferences.getString("favorites", "[]") ?: "[]"
        val type = object : TypeToken<List<Song>>() {}.type
        return gson.fromJson(json, type)
    }

    // Save favorites to SharedPreferences
    private fun saveFavorites() {
        sharedPreferences.edit().putString("favorites", gson.toJson(_favorites.value)).apply()
    }
    // Update addFavoriteSong and removeFavoriteSong functions to save favorites after making changes
    fun addFavoriteSong(song: Song) {
        _favorites.value = _favorites.value.toMutableList().apply { add(song) }
        saveFavorites()
    }

    fun removeFavoriteSong(song: Song) {
        _favorites.value = _favorites.value.toMutableList().apply { remove(song) }
        saveFavorites()
    }

    fun isFavorite(song: Song): Boolean {
        return _favorites.value.contains(song)
    }

}-> these are some of my classes separated with",". I was at album detail item composable and then i opened favorites screen page. then i wanted to use back button of android . App closed , why ? I want to be able to use default back feature of android without having crashes in the app