Jetpack Compose Pro: Creando una UI "Zen" con Canvas y MVVM (Caso Real)

.
├── MainActivity.kt
├── app
│   └── KairosApp.kt
├── feature
│   ├── community
│   │   ├── CommunityContract.kt
│   │   ├── CommunityRoute.kt
│   │   └── CommunityViewModel.kt
│   ├── home
│   │   ├── HomeContract.kt
│   │   ├── HomeRoute.kt
│   │   └── HomeViewModel.kt
│   ├── library
│   │   ├── LibraryContract.kt
│   │   ├── LibraryRoute.kt
│   │   └── LibraryViewModel.kt
│   └── temple
│       ├── TempleContract.kt
│       ├── TempleRoute.kt
│       └── TempleViewModel.kt
├── navigation
│   ├── KairosNavHost.kt
│   └── KairosRoutes.kt
└── ui
    ├── components
    │   └── KairosComponents.kt
    ├── layout
    │   ├── KairosScaffold.kt
    │   └── PhoneFrame.kt
    ├── modals
    │   └── SeedModal.kt
    ├── screens
    │   ├── CommunityScreen.kt
    │   ├── HomeScreen.kt
    │   ├── LibraryScreen.kt
    │   └── TempleModeScreen.kt
    └── theme
        ├── Color.kt
        ├── Shapes.kt
        ├── Theme.kt
        ├── Tokens.kt
        └── Type.kt

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <application
        android:name=".app.KairosApp"
        android:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.Kairos"
        tools:targetApi="31">

        <activity
            android:name=".MainActivity"
            android:exported="true"
            android:label="@string/app_name"
            android:theme="@style/Theme.Kairos">

            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>

        </activity>
    </application>

</manifest>

package co.holguin.kairos

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.enableEdgeToEdge
import androidx.activity.compose.setContent
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.navigation.NavDestination.Companion.hierarchy
import androidx.navigation.NavGraph.Companion.findStartDestination
import androidx.navigation.compose.currentBackStackEntryAsState
import androidx.navigation.compose.rememberNavController
import co.holguin.kairos.navigation.KairosNavHost
import co.holguin.kairos.navigation.KairosRoutes
import co.holguin.kairos.ui.layout.KairosScaffold
import co.holguin.kairos.ui.layout.KairosTab
import co.holguin.kairos.ui.layout.PhoneFrame
import co.holguin.kairos.ui.theme.KairosTheme

class MainActivity : ComponentActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    enableEdgeToEdge()

    setContent {
      KairosTheme {
        KairosRoot()
      }
    }
  }
}

@Composable
private fun KairosRoot() {
  val navController = rememberNavController()
  val backStackEntry by navController.currentBackStackEntryAsState()
  val destination = backStackEntry?.destination

  val isTemple = destination?.route == KairosRoutes.TEMPLE

  val selectedTab =
    when {
      destination?.hierarchy?.any { it.route == KairosRoutes.MAP } == true -> KairosTab.Map
      destination?.hierarchy?.any { it.route == KairosRoutes.LIBRARY } == true -> KairosTab.Library
      else -> KairosTab.Home
    }

  PhoneFrame {
    KairosScaffold(
      selectedTab = selectedTab,
      showBottomBar = !isTemple,
      onTabSelected = { tab ->
        navController.navigate(tab.route) {
          popUpTo(navController.graph.findStartDestination().id) { saveState = true }
          launchSingleTop = true
          restoreState = true
        }
      }
    ) { padding ->
      KairosNavHost(navController = navController, padding = padding)
    }
  }
}

package co.holguin.kairos.app

import android.app.Application
import co.holguin.kairos.BuildConfig
import timber.log.Timber

class KairosApp : Application() {
    override fun onCreate() {
        super.onCreate()

        if (BuildConfig.DEBUG) {
            Timber.plant(Timber.DebugTree())
        }
    }
}

package co.holguin.kairos.feature.community

data class CommunityUiState(
    val headerTitle: String = "Comunidad",
    val headerSubtitle: String = "Encuentra tu lugar de paz.",
    val mapTopRightLabel: String = "San José",
    val temples: List<TempleItemUi> = listOf(
        TempleItemUi(
            id = "san_jose",
            name = "Parroquia San José",
            statusLabel = "Abierto",
            detail = "• Misa 18:00"
        ),
        TempleItemUi(
            id = "santa_maria",
            name = "Capilla Santa María",
            statusLabel = "Abierto",
            detail = "• Rosario 19:00"
        )
    )
)

data class TempleItemUi(
    val id: String,
    val name: String,
    val statusLabel: String,
    val detail: String
)

sealed interface CommunityUiEvent {
    data object OnMarkerClick : CommunityUiEvent
    data class OnTempleClick(val id: String) : CommunityUiEvent
}

sealed interface CommunityUiEffect {
    // Reservado para K6/K9: abrir detalle, check-in, etc.
    data class ShowMessage(val text: String) : CommunityUiEffect
}

package co.holguin.kairos.feature.community

import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.lifecycle.viewmodel.compose.viewModel
import androidx.navigation.NavHostController
import co.holguin.kairos.ui.screens.CommunityScreen
import timber.log.Timber

@Composable
fun CommunityRoute(
    navController: NavHostController,
    vm: CommunityViewModel = viewModel()
) {
    LaunchedEffect(Unit) {
        vm.effects.collect { eff ->
            when (eff) {
                is CommunityUiEffect.ShowMessage -> Timber.d("Community: ${eff.text}")
            }
        }
    }

    CommunityScreen(
        state = vm.state,
        onEvent = vm::onEvent
    )
}

package co.holguin.kairos.feature.community

import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.lifecycle.ViewModel
import androidx.lifecycle.viewModelScope
import kotlinx.coroutines.channels.Channel
import kotlinx.coroutines.flow.receiveAsFlow
import kotlinx.coroutines.launch

class CommunityViewModel : ViewModel() {

    var state by mutableStateOf(CommunityUiState())
        private set

    private val _effects = Channel<CommunityUiEffect>(Channel.BUFFERED)
    val effects = _effects.receiveAsFlow()

    fun onEvent(event: CommunityUiEvent) {
        when (event) {
            CommunityUiEvent.OnMarkerClick -> {
                viewModelScope.launch { _effects.send(CommunityUiEffect.ShowMessage("Marker: templo seleccionado")) }
            }

            is CommunityUiEvent.OnTempleClick -> {
                viewModelScope.launch { _effects.send(CommunityUiEffect.ShowMessage("Templo: ${event.id}")) }
            }
        }
    }
}

package co.holguin.kairos.feature.home

data class HomeUiState(
    val dayLabel: String = "Martes, VI Semana",
    val greeting: String = "Paz y Bien",
    val introCount: Int = 4,
    val obrasCount: Int = 2,
    val showSeedModal: Boolean = false,
    val seedPhrase: String = "ocean • lantern • faith • mountain • whisper • stone • grace",
    val nearTempleTitle: String = "Parroquia San José",
    val nearTempleSubtitle: String = "A solo unos pasos de silencio."
)

sealed interface HomeUiEvent {
    data object OnShieldClick : HomeUiEvent
    data object OnDismissSeed : HomeUiEvent
    data object OnConfirmSeedSaved : HomeUiEvent

    data object OnPrayerClick : HomeUiEvent
    data object OnCharityClick : HomeUiEvent

    data object OnOpenTempleClick : HomeUiEvent
}

sealed interface HomeUiEffect {
    data object NavigateToTemple : HomeUiEffect
}

package co.holguin.kairos.feature.home

import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.lifecycle.viewmodel.compose.viewModel
import androidx.navigation.NavHostController
import co.holguin.kairos.navigation.KairosRoutes
import co.holguin.kairos.ui.screens.HomeScreen

@Composable
fun HomeRoute(
    navController: NavHostController,
    vm: HomeViewModel = viewModel()
) {
    LaunchedEffect(Unit) {
        vm.effects.collect { eff ->
            when (eff) {
                HomeUiEffect.NavigateToTemple -> navController.navigate(KairosRoutes.TEMPLE)
            }
        }
    }

    HomeScreen(
        state = vm.state,
        onEvent = vm::onEvent
    )
}

package co.holguin.kairos.feature.home

import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.lifecycle.ViewModel
import androidx.lifecycle.viewModelScope
import kotlinx.coroutines.channels.Channel
import kotlinx.coroutines.flow.receiveAsFlow
import kotlinx.coroutines.launch

class HomeViewModel : ViewModel() {

    var state by mutableStateOf(HomeUiState())
        private set

    private val _effects = Channel<HomeUiEffect>(Channel.BUFFERED)
    val effects = _effects.receiveAsFlow()

    fun onEvent(event: HomeUiEvent) {
        when (event) {
            HomeUiEvent.OnShieldClick -> {
                state = state.copy(showSeedModal = true)
            }

            HomeUiEvent.OnDismissSeed -> {
                state = state.copy(showSeedModal = false)
            }

            HomeUiEvent.OnConfirmSeedSaved -> {
                state = state.copy(showSeedModal = false)
            }

            HomeUiEvent.OnPrayerClick -> {
                state = state.copy(introCount = state.introCount + 1)
            }

            HomeUiEvent.OnCharityClick -> {
                state = state.copy(obrasCount = state.obrasCount + 1)
            }

            HomeUiEvent.OnOpenTempleClick -> {
                viewModelScope.launch { _effects.send(HomeUiEffect.NavigateToTemple) }
            }
        }
    }
}

package co.holguin.kairos.feature.library

data class LibraryUiState(
    val sourceTitle: String = "Evangelio según San Mateo",
    val sourceDomain: String = "vatican.va",
    val body: String =
        "En aquel tiempo, al ver Jesús el gentío, subió al monte, se sentó y se acercaron sus discípulos; " +
                "y, abriendo su boca, les enseñaba diciendo:\n\n" +
                "«Bienaventurados los pobres en el espíritu, porque de ellos es el reino de los cielos...»",
    val isFavorite: Boolean = false,
    val isSaved: Boolean = false
)

sealed interface LibraryUiEvent {
    data object ToggleFavorite : LibraryUiEvent
    data object ToggleSaved : LibraryUiEvent
    data object OpenSource : LibraryUiEvent
}

sealed interface LibraryUiEffect {
    data class OpenUrl(val url: String) : LibraryUiEffect
}

package co.holguin.kairos.feature.library

import android.content.Intent
import android.net.Uri
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.ui.platform.LocalContext
import androidx.lifecycle.viewmodel.compose.viewModel
import androidx.navigation.NavHostController
import co.holguin.kairos.ui.screens.LibraryScreen
import timber.log.Timber

@Composable
fun LibraryRoute(
    navController: NavHostController,
    vm: LibraryViewModel = viewModel()
) {
    val ctx = LocalContext.current

    LaunchedEffect(Unit) {
        vm.effects.collect { eff ->
            when (eff) {
                is LibraryUiEffect.OpenUrl -> {
                    runCatching {
                        val intent = Intent(Intent.ACTION_VIEW, Uri.parse(eff.url))
                        ctx.startActivity(intent)
                    }.onFailure {
                        Timber.e(it, "No se pudo abrir URL: ${eff.url}")
                    }
                }
            }
        }
    }

    LibraryScreen(
        state = vm.state,
        onEvent = vm::onEvent
    )
}

package co.holguin.kairos.feature.library

import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.lifecycle.ViewModel
import androidx.lifecycle.viewModelScope
import kotlinx.coroutines.channels.Channel
import kotlinx.coroutines.flow.receiveAsFlow
import kotlinx.coroutines.launch

class LibraryViewModel : ViewModel() {

    var state by mutableStateOf(LibraryUiState())
        private set

    private val _effects = Channel<LibraryUiEffect>(Channel.BUFFERED)
    val effects = _effects.receiveAsFlow()

    fun onEvent(event: LibraryUiEvent) {
        when (event) {
            LibraryUiEvent.ToggleFavorite -> {
                state = state.copy(isFavorite = !state.isFavorite)
            }

            LibraryUiEvent.ToggleSaved -> {
                state = state.copy(isSaved = !state.isSaved)
            }

            LibraryUiEvent.OpenSource -> {
                val url = "https://${state.sourceDomain}"
                viewModelScope.launch { _effects.send(LibraryUiEffect.OpenUrl(url)) }
            }
        }
    }
}

package co.holguin.kairos.feature.temple

data class TempleUiState(
    val title: String = "Silentium",
    val quote: String = "“En el silencio es donde mejor se escucha la voz que importa.”",
    val zoneActiveLabel: String = "ZONA SAGRADA ACTIVA"
)

sealed interface TempleUiEvent {
    data object OnExit : TempleUiEvent
}

sealed interface TempleUiEffect {
    data object PopBack : TempleUiEffect
}

package co.holguin.kairos.feature.temple

import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.lifecycle.viewmodel.compose.viewModel
import androidx.navigation.NavHostController
import co.holguin.kairos.ui.screens.TempleModeScreen

@Composable
fun TempleRoute(
    navController: NavHostController,
    vm: TempleViewModel = viewModel()
) {
    LaunchedEffect(Unit) {
        vm.effects.collect { eff ->
            when (eff) {
                TempleUiEffect.PopBack -> navController.popBackStack()
            }
        }
    }

    TempleModeScreen(
        state = vm.state,
        onEvent = vm::onEvent
    )
}

package co.holguin.kairos.feature.temple

import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.lifecycle.ViewModel
import androidx.lifecycle.viewModelScope
import kotlinx.coroutines.channels.Channel
import kotlinx.coroutines.flow.receiveAsFlow
import kotlinx.coroutines.launch

class TempleViewModel : ViewModel() {

    var state by mutableStateOf(TempleUiState())
        private set

    private val _effects = Channel<TempleUiEffect>(Channel.BUFFERED)
    val effects = _effects.receiveAsFlow()

    fun onEvent(event: TempleUiEvent) {
        when (event) {
            TempleUiEvent.OnExit -> {
                viewModelScope.launch { _effects.send(TempleUiEffect.PopBack) }
            }
        }
    }
}

package co.holguin.kairos.navigation

import androidx.compose.animation.core.tween
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.navigation.NavHostController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import co.holguin.kairos.feature.community.CommunityRoute
import co.holguin.kairos.feature.home.HomeRoute
import co.holguin.kairos.feature.library.LibraryRoute
import co.holguin.kairos.feature.temple.TempleRoute

@Composable
fun KairosNavHost(
    navController: NavHostController,
    padding: PaddingValues,
    modifier: Modifier = Modifier
) {
    NavHost(
        navController = navController,
        startDestination = KairosRoutes.HOME,
        modifier = modifier.padding(padding),
        enterTransition = { fadeIn(tween(160)) },
        exitTransition = { fadeOut(tween(160)) },
        popEnterTransition = { fadeIn(tween(160)) },
        popExitTransition = { fadeOut(tween(160)) }
    ) {
        composable(KairosRoutes.HOME) { HomeRoute(navController = navController) }
        composable(KairosRoutes.MAP) { CommunityRoute(navController = navController) }
        composable(KairosRoutes.LIBRARY) { LibraryRoute(navController = navController) }

        composable(KairosRoutes.TEMPLE) { TempleRoute(navController = navController) }
    }
}

package co.holguin.kairos.navigation

object KairosRoutes {
    const val HOME = "home"
    const val MAP = "map"
    const val LIBRARY = "library"
    const val TEMPLE = "temple"
}

package co.holguin.kairos.ui.components

import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.RowScope
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.Close
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Divider
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.Dialog
import co.holguin.kairos.ui.theme.KairosDimens
import co.holguin.kairos.ui.theme.KairosElevation
import co.holguin.kairos.ui.theme.KairosStroke

@Composable
fun KairosCard(
    modifier: Modifier = Modifier,
    contentPadding: androidx.compose.ui.unit.Dp = KairosDimens.lg,
    header: (@Composable RowScope.() -> Unit)? = null,
    content: @Composable ColumnScope.() -> Unit
) {
    Card(
        modifier = modifier,
        colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surfaceVariant),
        elevation = CardDefaults.cardElevation(defaultElevation = KairosElevation.card),
        border = BorderStroke(KairosStroke.hairline, MaterialTheme.colorScheme.outlineVariant),
        shape = MaterialTheme.shapes.large
    ) {
        Column(modifier = Modifier.padding(contentPadding)) {
            if (header != null) {
                Row(
                    modifier = Modifier.fillMaxWidth(),
                    verticalAlignment = Alignment.CenterVertically,
                    content = header
                )
                Spacer(modifier = Modifier.size(KairosDimens.md))
            }
            content()
        }
    }
}

@Composable
fun KairosPill(
    text: String,
    modifier: Modifier = Modifier
) {
    Surface(
        modifier = modifier,
        shape = CircleShape,
        color = MaterialTheme.colorScheme.surface,
        tonalElevation = 0.dp,
        border = BorderStroke(KairosStroke.hairline, MaterialTheme.colorScheme.outlineVariant)
    ) {
        Text(
            text = text.uppercase(),
            modifier = Modifier.padding(horizontal = 10.dp, vertical = 6.dp),
            style = MaterialTheme.typography.labelSmall,
            color = MaterialTheme.colorScheme.onSurfaceVariant,
            maxLines = 1,
            overflow = TextOverflow.Ellipsis
        )
    }
}

@Composable
fun KairosIconCircleButton(
    icon: ImageVector,
    contentDescription: String?,
    onClick: () -> Unit,
    modifier: Modifier = Modifier
) {
    val interaction = remember { MutableInteractionSource() }
    Surface(
        modifier =
        modifier
            .size(40.dp)
            .clip(CircleShape)
            .clickable(
                interactionSource = interaction,
                indication = null,
                onClick = onClick
            ),
        color = MaterialTheme.colorScheme.surface,
        border = BorderStroke(KairosStroke.hairline, MaterialTheme.colorScheme.outlineVariant),
        tonalElevation = 0.dp
    ) {
        Box(contentAlignment = Alignment.Center) {
            Icon(
                imageVector = icon,
                contentDescription = contentDescription,
                tint = MaterialTheme.colorScheme.onSurfaceVariant
            )
        }
    }
}

@Composable
fun KairosModal(
    title: String,
    icon: ImageVector,
    onDismiss: () -> Unit,
    primaryCtaText: String,
    onPrimaryCta: () -> Unit,
    body: @Composable ColumnScope.() -> Unit
) {
    Dialog(onDismissRequest = onDismiss) {
        Card(
            shape = MaterialTheme.shapes.large,
            colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.background),
            elevation = CardDefaults.cardElevation(defaultElevation = 14.dp),
            border = BorderStroke(KairosStroke.hairline, MaterialTheme.colorScheme.outlineVariant)
        ) {
            Column(modifier = Modifier.padding(KairosDimens.xl)) {

                // Header
                Row(verticalAlignment = Alignment.CenterVertically) {
                    Icon(
                        imageVector = icon,
                        contentDescription = null,
                        tint = MaterialTheme.colorScheme.primary
                    )
                    Spacer(modifier = Modifier.size(KairosDimens.sm))
                    Text(
                        text = title,
                        style = MaterialTheme.typography.titleLarge.copy(fontWeight = FontWeight.SemiBold),
                        color = MaterialTheme.colorScheme.onBackground
                    )

                    Spacer(modifier = Modifier.weight(1f))

                    KairosIconCircleButton(
                        icon = Icons.Outlined.Close,
                        contentDescription = "Cerrar",
                        onClick = onDismiss
                    )
                }

                Spacer(modifier = Modifier.size(KairosDimens.lg))

                // Body
                body()

                Spacer(modifier = Modifier.size(KairosDimens.lg))
                Divider(color = MaterialTheme.colorScheme.outlineVariant)
                Spacer(modifier = Modifier.size(KairosDimens.lg))

                // CTA
                Surface(
                    modifier =
                    Modifier
                        .fillMaxWidth()
                        .clip(MaterialTheme.shapes.medium)
                        .clickable { onPrimaryCta() },
                    color = MaterialTheme.colorScheme.onBackground
                ) {
                    Text(
                        text = primaryCtaText,
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(vertical = 14.dp),
                        style = MaterialTheme.typography.bodyMedium.copy(fontWeight = FontWeight.Medium),
                        color = MaterialTheme.colorScheme.background,
                        maxLines = 1,
                        textAlign = TextAlign.Center
                    )
                }
            }
        }
    }
}

package co.holguin.kairos.ui.layout

import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.asPaddingValues
import androidx.compose.foundation.layout.calculateEndPadding
import androidx.compose.foundation.layout.calculateStartPadding
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.navigationBars
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.systemBars
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.Book
import androidx.compose.material.icons.outlined.Place
import androidx.compose.material.icons.outlined.Spa
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.platform.LocalLayoutDirection
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import co.holguin.kairos.navigation.KairosRoutes
import co.holguin.kairos.ui.theme.KairosDimens
import co.holguin.kairos.ui.theme.KairosElevation
import co.holguin.kairos.ui.theme.KairosStroke

enum class KairosTab(val route: String) {
    Home(KairosRoutes.HOME),
    Map(KairosRoutes.MAP),
    Library(KairosRoutes.LIBRARY)
}

@Composable
fun KairosScaffold(
    selectedTab: KairosTab,
    onTabSelected: (KairosTab) -> Unit,
    modifier: Modifier = Modifier,
    floatingBarBottomMargin: Dp = 24.dp,
    showBottomBar: Boolean = true,
    content: @Composable (PaddingValues) -> Unit
) {
    val layoutDirection = LocalLayoutDirection.current
    val navBottom = WindowInsets.navigationBars.asPaddingValues().calculateBottomPadding()

    val barHeight = 64.dp
    val contentBottomPadding =
        if (showBottomBar) barHeight + floatingBarBottomMargin + navBottom
        else navBottom

    Scaffold(
        modifier = modifier.fillMaxSize(),
        containerColor = MaterialTheme.colorScheme.background,
        contentWindowInsets = WindowInsets.systemBars
    ) { inner ->
        val contentPadding =
            PaddingValues(
                start = inner.calculateStartPadding(layoutDirection),
                top = inner.calculateTopPadding(),
                end = inner.calculateEndPadding(layoutDirection),
                bottom = maxOf(inner.calculateBottomPadding(), contentBottomPadding)
            )

        Box(Modifier.fillMaxSize()) {
            content(contentPadding)

            if (showBottomBar) {
                KairosFloatingBottomBar(
                    selected = selectedTab,
                    onSelected = onTabSelected,
                    modifier =
                    Modifier
                        .align(Alignment.BottomCenter)
                        .padding(bottom = floatingBarBottomMargin + navBottom)
                        .padding(horizontal = KairosDimens.lg)
                )
            }
        }
    }
}

@Composable
private fun KairosFloatingBottomBar(
    selected: KairosTab,
    onSelected: (KairosTab) -> Unit,
    modifier: Modifier = Modifier
) {
    Surface(
        modifier = modifier
            .height(64.dp)
            .fillMaxWidth(),
        shape = CircleShape,
        color = MaterialTheme.colorScheme.surface.copy(alpha = 0.92f),
        shadowElevation = KairosElevation.floatingBar,
        border = BorderStroke(KairosStroke.hairline, MaterialTheme.colorScheme.outlineVariant)
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 18.dp, vertical = 10.dp),
            horizontalArrangement = Arrangement.SpaceBetween,
            verticalAlignment = Alignment.CenterVertically
        ) {
            BarItem(
                icon = Icons.Outlined.Spa,
                contentDescription = "Home",
                selected = selected == KairosTab.Home,
                onClick = { onSelected(KairosTab.Home) }
            )

            BarSeparator()

            BarItem(
                icon = Icons.Outlined.Place,
                contentDescription = "Comunidad",
                selected = selected == KairosTab.Map,
                onClick = { onSelected(KairosTab.Map) }
            )

            BarSeparator()

            BarItem(
                icon = Icons.Outlined.Book,
                contentDescription = "Biblioteca",
                selected = selected == KairosTab.Library,
                onClick = { onSelected(KairosTab.Library) }
            )
        }
    }
}

@Composable
private fun BarSeparator() {
    Box(
        modifier = Modifier
            .height(22.dp)
            .width(1.dp)
            .background(MaterialTheme.colorScheme.outlineVariant)
    )
}

@Composable
private fun BarItem(
    icon: ImageVector,
    contentDescription: String?,
    selected: Boolean,
    onClick: () -> Unit
) {
    val scale by animateFloatAsState(
        targetValue = if (selected) 1.12f else 1.0f,
        label = "scale"
    )

    val tint =
        if (selected) MaterialTheme.colorScheme.primary
        else MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.70f)

    val interaction = remember { MutableInteractionSource() }

    Box(
        modifier = Modifier
            .size(44.dp)
            .clip(CircleShape)
            .clickable(
                interactionSource = interaction,
                indication = null,
                onClick = onClick
            ),
        contentAlignment = Alignment.Center
    ) {
        Icon(
            imageVector = icon,
            contentDescription = contentDescription,
            tint = tint,
            modifier = Modifier.size(22.dp * scale)
        )
    }
}