// TourScreen.kt
package com.placeholder.sherpai2.ui.tour

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.hilt.navigation.compose.hiltViewModel
import com.placeholder.sherpai2.data.local.model.ImageWithEverything

@Composable
fun TourScreen(tourViewModel: TourViewModel = hiltViewModel(), onImageClick: (String) -> Unit) {
    val images by tourViewModel.recentImages.collectAsState()

    Column(modifier = Modifier.fillMaxSize()) {
        // Header with image count
        Text(
            text = "Gallery (${images.size} images)",
            style = MaterialTheme.typography.titleLarge,
            modifier = Modifier.padding(16.dp)
        )

        LazyColumn(
            modifier = Modifier.fillMaxSize(),
            contentPadding = PaddingValues(16.dp)
        ) {
            items(images) { image ->
                ImageCard(image)
                Spacer(modifier = Modifier.height(12.dp))
            }
        }
    }
}

@Composable
fun ImageCard(image: ImageWithEverything) {
    Card(modifier = Modifier.fillMaxWidth(), elevation = CardDefaults.cardElevation(4.dp)) {
        Column(modifier = Modifier.padding(12.dp)) {
            Text(text = image.tags.toString(), style = MaterialTheme.typography.bodyMedium)

            // Tags row with placeholders if fewer than 3
            Row(modifier = Modifier.padding(top = 8.dp)) {
                val tags = image.tags.map { it.tagId } // adjust depending on your entity
                tags.forEach { tag ->
                    TagComposable(tag)
                }
                repeat(3 - tags.size.coerceAtMost(3)) {
                    TagComposable("") // empty placeholder
                }
            }
        }
    }
}

@Composable
fun TagComposable(tag: String) {
    Box(
        modifier = Modifier
            .padding(end = 4.dp)
            .height(24.dp)
            .widthIn(min = 40.dp)
            .background(MaterialTheme.colorScheme.primaryContainer, MaterialTheme.shapes.small),
        contentAlignment = androidx.compose.ui.Alignment.Center
    ) {
        Text(
            text = if (tag.isNotBlank()) tag else " ",
            style = MaterialTheme.typography.labelSmall,
            modifier = Modifier.padding(horizontal = 6.dp)
        )
    }
}
