package de.krisenvorrat.app.ui.messaging

import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.Person
import androidx.compose.material3.Button
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Icon
import androidx.compose.material3.ListItem
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.hilt.navigation.compose.hiltViewModel
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import de.krisenvorrat.shared.model.UserListItemDto

@OptIn(ExperimentalMaterial3Api::class)
@Composable
internal fun UserListScreen(
    onUserClick: (id: String, username: String) -> Unit,
    viewModel: UserListViewModel = hiltViewModel()
) {
    val uiState by viewModel.uiState.collectAsStateWithLifecycle()

    Scaffold(
        topBar = {
            TopAppBar(title = { Text("Nachrichten") })
        }
    ) { padding ->
        Box(
            modifier = Modifier
                .fillMaxSize()
                .padding(padding)
        ) {
            when {
                uiState.isLoading -> CircularProgressIndicator(modifier = Modifier.align(Alignment.Center))
                uiState.errorMessage != null -> Column(
                    modifier = Modifier.align(Alignment.Center),
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.spacedBy(8.dp)
                ) {
                    Text(
                        text = uiState.errorMessage ?: "Fehler",
                        style = MaterialTheme.typography.bodyMedium
                    )
                    Button(onClick = { viewModel.retry() }) { Text("Erneut versuchen") }
                }
                uiState.users.isEmpty() -> Text(
                    text = "Keine Benutzer gefunden",
                    modifier = Modifier.align(Alignment.Center)
                )
                else -> LazyColumn {
                    items(uiState.users) { user ->
                        UserListItem(user = user, onClick = { onUserClick(user.id, user.username) })
                    }
                }
            }
        }
    }
}

@Composable
private fun UserListItem(user: UserListItemDto, onClick: () -> Unit) {
    ListItem(
        headlineContent = { Text(user.username) },
        leadingContent = {
            Icon(imageVector = Icons.Outlined.Person, contentDescription = null)
        },
        modifier = Modifier.clickable(onClick = onClick)
    )
    HorizontalDivider()
}
