import android.util.Log
import androidx.lifecycle.ViewModel
import androidx.lifecycle.viewModelScope
import com.example.deezermusicplayer.Category
import com.example.deezermusicplayer.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}")
            }
        }
    }

    // public function to fetch categories
    fun refreshCategories() {
        fetchCategories()
    }
}

,package com.example.deezermusicplayer

data class Category(
    val id: Int,
    val name: String,
    val picture_medium: String
)
,package com.example.deezermusicplayer

import okhttp3.OkHttpClient
import okhttp3.logging.HttpLoggingInterceptor
import retrofit2.Retrofit
import retrofit2.converter.gson.GsonConverterFactory
import retrofit2.http.GET

interface DeezerApiService {
    @GET("genre")
    suspend fun getGenres(): DeezerResponse<Category>

    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.deezermusicplayer

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)
        }
    }
}
,package com.example.deezermusicplayer

data class DeezerResponse<T>(
    val data: List<T>
),package com.example.deezermusicplayer

import CategoriesViewModel
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.padding
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.navigation.NavController
import androidx.navigation.NavHostController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.currentBackStackEntryAsState
import androidx.navigation.compose.rememberNavController
import com.example.deezermusicplayer.ui.theme.DeezerMusicPlayerTheme

class MainActivity : ComponentActivity() {
    private val bottomNavigationItems = listOf(
        Screen.Home,
        Screen.Favorites
    )
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            DeezerMusicPlayerTheme {
                // Set up navigation
                val navController = rememberNavController()
                val bottomNavigationItems = listOf(
                    Screen.Home,
                    Screen.Favorites
                )
                Scaffold(
                    bottomBar = {
                        BottomNavigation {
                            val navBackStackEntry by navController.currentBackStackEntryAsState()
                            val currentRoute = navBackStackEntry?.destination?.route
                            bottomNavigationItems.forEach { screen ->
                                BottomNavigationItem(
                                    icon = {
                                        Icon(
                                            imageVector = screen.icon,
                                            contentDescription = null
                                        )
                                    },
                                    selected = currentRoute == screen.route,
                                    onClick = {
                                        navController.navigate(screen.route) {
                                            // Pop up to the start destination of the current graph to
                                            // avoid building up a large stack of destinations
                                            // on the back stack as users select items
                                            popUpTo(navController.graph.startDestinationId) {
                                                saveState = true
                                            }
                                            // Avoid multiple copies of the same destination when
                                            // reselecting the same item
                                            launchSingleTop = true
                                            restoreState = true
                                        }
                                    },
                                    label = {
                                        Text(text = screen.title)
                                    }
                                )
                            }
                        }
                    },
                    content = { paddingValues ->
                        NavigationHost(
                            navController = navController,
                            modifier = Modifier.padding(paddingValues)
                        )
                    }
                )
            }
        }
    }

    @Composable
    fun NavigationHost(
        navController: NavController,
        modifier: Modifier = Modifier,
    ) {
        val categoriesViewModel = remember { CategoriesViewModel() }
        val categories by categoriesViewModel.categories.collectAsState() // use collectAsState here to collect the latest state
        NavHost(navController = navController as NavHostController, startDestination = Screen.Home.route) {
            composable(Screen.Home.route) {
                HomeScreen(categories = categories, navController = navController, modifier = modifier)
            }
            composable(Screen.Favorites.route) {
                FavoritesScreen(categories = categories, navController = navController, modifier = modifier)
            }
        }
    }


    @Composable
    fun HomeScreen(
        categories: List<Category>,
        navController: NavController,
        modifier: Modifier = Modifier
    ) {
        Scaffold(bottomBar = {
            BottomNavigation {
                val navBackStackEntry by navController.currentBackStackEntryAsState()
                val currentRoute = navBackStackEntry?.destination?.route
                bottomNavigationItems.forEach { screen ->
                    BottomNavigationItem(
                        icon = {
                            Icon(
                                imageVector = screen.icon,
                                contentDescription = null
                            )
                        },
                        selected = currentRoute == screen.route,
                        onClick = {
                            navController.navigate(screen.route) {
                                // Pop up to the start destination of the current graph to
                                // avoid building up a large stack of destinations
                                // on the back stack as users select items
                                popUpTo(navController.graph.startDestinationId) {
                                    saveState = true
                                }
                                // Avoid multiple copies of the same destination when
                                // reselecting the same item
                                launchSingleTop = true
                                restoreState = true
                            }
                        },
                        label = {
                            Text(text = screen.title)
                        }
                    )
                }
            }
        },    content = { paddingValues ->
            NavigationHost(
                navController = navController,
                modifier = Modifier.padding(paddingValues)
            )
          }
        )
    }
        @Composable
    fun FavoritesScreen(categories: List<Category>, navController: NavController, modifier: Modifier = Modifier) {

    }
}
,import androidx.compose.foundation.Image
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.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.unit.dp
import coil.compose.rememberImagePainter
import com.example.deezermusicplayer.Category

@Composable
fun MusicCategoriesScreen(
    categories: List<Category>,
    onCategorySelected: (Category) -> Unit,
    modifier: Modifier = Modifier
) {
    LazyColumn(
        modifier = modifier,
        contentPadding = PaddingValues(16.dp)
    ) {
        items(categories) { category ->
            CategoryItem(category) {
                onCategorySelected(category)
            }
        }
    }
}

@Composable
private fun CategoryItem(category: Category, onClick: () -> Unit) {
    Column(
        modifier = Modifier
            .clickable(onClick = onClick)
            .fillMaxWidth(),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        val painter = rememberImagePainter(
            data = category.picture_medium
        )

        Image(
            painter = painter,
            contentDescription = category.name,
            contentScale = ContentScale.Crop,
            modifier = Modifier
                .fillMaxWidth()
                .height(120.dp)
        )

        Text(
            text = category.name,
            modifier = Modifier
                .padding(top = 8.dp)
                .align(Alignment.CenterHorizontally),
            style = MaterialTheme.typography.body2,
            color = MaterialTheme.colors.onSurface
        )
    }
}
,package com.example.deezermusicplayer

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Home
import androidx.compose.ui.graphics.vector.ImageVector

sealed class Screen(val route: String, val title: String, val icon: ImageVector) {
    object Home : Screen("home", "Home", Icons.Filled.Home)
    object Favorites : Screen("favorites", "Favorites", Icons.Filled.Favorite)
}-> these are my classes separated with "," . Why i had this error -> I/okhttp.OkHttpClient: --> GET https://api.deezer.com/genre
I/okhttp.OkHttpClient: --> END GET
D/HostConnection: HostComposition ext ANDROID_EMU_CHECKSUM_HELPER_v1 ANDROID_EMU_native_sync_v2 ANDROID_EMU_native_sync_v3 ANDROID_EMU_native_sync_v4 ANDROID_EMU_dma_v1 ANDROID_EMU_direct_mem ANDROID_EMU_host_composition_v1 ANDROID_EMU_host_composition_v2 ANDROID_EMU_vulkan ANDROID_EMU_deferred_vulkan_commands ANDROID_EMU_vulkan_null_optional_strings ANDROID_EMU_vulkan_create_resources_with_requirements ANDROID_EMU_YUV_Cache ANDROID_EMU_vulkan_ignored_handles ANDROID_EMU_has_shared_slots_host_memory_allocator ANDROID_EMU_vulkan_free_memory_sync ANDROID_EMU_vulkan_shader_float16_int8 ANDROID_EMU_vulkan_async_queue_submit ANDROID_EMU_vulkan_queue_submit_with_commands ANDROID_EMU_sync_buffer_data ANDROID_EMU_vulkan_async_qsri ANDROID_EMU_read_color_buffer_dma GL_OES_vertex_array_object GL_KHR_texture_compression_astc_ldr ANDROID_EMU_host_side_tracing ANDROID_EMU_gles_max_version_2 
I/okhttp.OkHttpClient: <-- HTTP FAILED: java.lang.SecurityException: Permission denied (missing INTERNET permission?)
I/OpenGLRenderer: Davey! duration=2865ms; Flags=1, FrameTimelineVsyncId=76940, IntendedVsync=65228263633580, Vsync=65228630300232, InputEventId=0, HandleInputStart=65228645576900, AnimationStart=65228645595700, PerformTraversalsStart=65228647080200, DrawStart=65230813344400, FrameDeadline=65228280300246, FrameInterval=65228645539500, FrameStartTime=16666666, SyncQueued=65230892813500, SyncStart=65230893376400, IssueDrawCommandsStart=65230905528500, SwapBuffers=65231121506700, FrameCompleted=65231130012400, DequeueBufferDuration=37600, QueueBufferDuration=6521900, GpuCompleted=65231129891800, SwapBuffersCompleted=65231130012400, DisplayPresentTime=0, 
E/AndroidRuntime: FATAL EXCEPTION: OkHttp Dispatcher
    Process: com.example.deezermusicplayer, PID: 16017
    java.lang.SecurityException: Permission denied (missing INTERNET permission?)
        at java.net.Inet6AddressImpl.lookupHostByName(Inet6AddressImpl.java:150)
        at java.net.Inet6AddressImpl.lookupAllHostAddr(Inet6AddressImpl.java:103)
        at java.net.InetAddress.getAllByName(InetAddress.java:1152) . Can you fix it ? and explain