package com.placeholder.sherpai2.ui.trainingprep
import android.graphics.Rect
import android.net.Uri
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.Image
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.Card
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
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.rememberAsyncImagePainter

@Composable
fun FacePickerScreen(
    uri: Uri,
    faceBoxes: List<Rect>,
    onFaceSelected: (Rect) -> Unit
) {
    Column(modifier = Modifier.fillMaxSize().padding(16.dp)) {
        Text("Multiple faces detected!", style = MaterialTheme.typography.headlineSmall)
        Text("Tap the person you want to train on.")

        Box(modifier = Modifier.weight(1f).fillMaxWidth().padding(vertical = 16.dp)) {
            // Main Image
            Image(
                painter = rememberAsyncImagePainter(uri),
                contentDescription = null,
                modifier = Modifier.fillMaxSize(),
                contentScale = ContentScale.Fit
            )

            // Overlay Clickable Boxes
            // Note: In a production app, you'd need to map Rect coordinates
            // from the Bitmap scale to the UI View scale.
            Canvas(modifier = Modifier.fillMaxSize().clickable { /* Handle general tap */ }) {
                // Implementation of coordinate mapping goes here
                // TODO implement coordinate mapping
            }

            // Simplified: Just show the options as a list of crops if Canvas mapping is too complex for now
            LazyRow {
                items(faceBoxes) { box ->
                    Card(modifier = Modifier.padding(8.dp).size(100.dp).clickable { onFaceSelected(box) }) {
                        Text("Face ${faceBoxes.indexOf(box) + 1}", Modifier.align(Alignment.CenterHorizontally))
                    }
                }
            }
        }
    }
}