package id.ac.ubharajaya.panicbutton

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.NavController

// --- Constants for better readability ---
val CardElevation = 8.dp
val CornerRadius = 16.dp
val PaddingDefault = 16.dp
val ImageSize = 100.dp

// ====================================================================

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun EvacuationMapsScreen(navController: NavController, onBack: () -> Unit) {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Peta Jalur Evakuasi") },
                navigationIcon = {
                    IconButton(onClick = onBack) {
                        Icon(Icons.AutoMirrored.Filled.ArrowBack, contentDescription = "Kembali")
                    }
                }
            )
        }
    ) { paddingValues ->
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(paddingValues)
                .padding(horizontal = PaddingDefault)
        ) {
            // Deskripsi Singkat
            Text(
                text = "Pilih area peta jalur evakuasi yang ingin Anda lihat.",
                style = MaterialTheme.typography.bodyLarge,
                color = MaterialTheme.colorScheme.onSurfaceVariant,
                modifier = Modifier.padding(bottom = PaddingDefault)
            )

            Spacer(modifier = Modifier.height(8.dp))

            // Card 1 - Selatan
            EvacuationMapCard(
                title = "Jalur Evakuasi Selatan",
                description = "Lihat detail jalur evakuasi lantai selatan.",
                drawableId = R.drawable.lantai_1_selatan,
                onClick = { navController.navigate("evac_map/selatan") }
            )

            // Card 2 - Utara
            EvacuationMapCard(
                title = "Jalur Evakuasi Utara",
                description = "Lihat detail jalur evakuasi lantai utara.",
                drawableId = R.drawable.lantai_1_utara,
                onClick = { navController.navigate("evac_map/utara") }
            )
        }
    }
}

@Composable
fun EvacuationMapCard(
    title: String,
    description: String,
    drawableId: Int,
    onClick: () -> Unit
) {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(bottom = 12.dp)
            .clickable(onClick = onClick),
        shape = RoundedCornerShape(CornerRadius),
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surfaceContainerHigh
        ),
        elevation = CardDefaults.cardElevation(defaultElevation = CardElevation)
    ) {
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier.padding(PaddingDefault)
        ) {
            // Gambar dengan shape dan padding
            Image(
                painter = painterResource(id = drawableId),
                contentDescription = title,
                contentScale = ContentScale.Crop,
                modifier = Modifier
                    .size(ImageSize)
                    .clip(RoundedCornerShape(12.dp))
                    .background(MaterialTheme.colorScheme.primaryContainer)
            )

            Spacer(modifier = Modifier.width(PaddingDefault))

            // Kolom Teks
            Column(modifier = Modifier.weight(1f)) {
                Text(
                    text = title,
                    fontSize = 18.sp,
                    fontWeight = FontWeight.Bold,
                    color = MaterialTheme.colorScheme.onSurface
                )
                Spacer(modifier = Modifier.height(4.dp))
                Text(
                    text = description,
                    style = MaterialTheme.typography.bodyMedium,
                    color = MaterialTheme.colorScheme.onSurfaceVariant
                )
            }
        }
    }
}

// ====================================================================

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun EvacuationMapDetailScreen(drawableResId: Int, onBack: () -> Unit) {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Detail Peta") },
                navigationIcon = {
                    IconButton(onClick = onBack) {
                        Icon(Icons.AutoMirrored.Filled.ArrowBack, contentDescription = "Kembali")
                    }
                }
            )
        }
    ) { paddingValues ->
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(paddingValues)
        ) {
            // Gambar Detail Peta
            Image(
                painter = painterResource(id = drawableResId),
                contentDescription = "Map Detail",
                contentScale = ContentScale.Fit, // Gunakan Fit untuk memastikan peta terlihat keseluruhan
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(PaddingDefault)
                    .clip(RoundedCornerShape(CornerRadius))
                    .background(Color.LightGray) // Warna latar belakang untuk gambar
            )
        }
    }
}