Jetpack Compose desde cero

// Imperativo: TÚ gestionas cada cambio
fun mostrarBienvenida(usuario: String) {
    titulo.text = "Hola, $usuario"
    titulo.visibility = View.VISIBLE
    boton.isEnabled = usuario.isNotEmpty()
}

// Declarativo: la interfaz es una FUNCIÓN del estado
@Composable
fun Bienvenida(usuario: String) {
    Text("Hola, $usuario")
    Button(
        onClick = { /* ... */ },
        enabled = usuario.isNotEmpty()
    ) { Text("Continuar") }
}

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {                 // aquí empieza TODO tu mundo Compose
            NotasTheme {             // tema Material 3 del proyecto
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    Saludo("Percy")
                }
            }
        }
    }
}

@Composable
fun Saludo(nombre: String) {
    Text(text = "¡Hola, $nombre!")
}

android {
    buildFeatures { compose = true }          // activa el compilador Compose
}
dependencies {
    // El BOM fija versiones compatibles entre bibliotecas Compose
    implementation(platform("androidx.compose:compose-bom:2024.12.01"))
    implementation("androidx.compose.ui:ui")
    implementation("androidx.compose.material3:material3")
    implementation("androidx.activity:activity-compose:1.9.3")
}

@Composable
fun TarjetaNota(nota: Nota, alAbrir: () -> Unit) {
    Card(onClick = alAbrir) {
        Column(Modifier.padding(16.dp)) {
            Text(nota.titulo, style = MaterialTheme.typography.titleMedium)
            Text(nota.contenido,
                 maxLines = 2,
                 overflow = TextOverflow.Ellipsis,
                 style = MaterialTheme.typography.bodySmall)
        }
    }
}

@Immutable
data class Nota(
    val id: Long,
    val titulo: String,
    val contenido: String
)

@Composable
fun EditorNota() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        verticalArrangement = Arrangement.spacedBy(12.dp)
    ) {
        // Cabecera: título a la izquierda, acción a la derecha
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceBetween,
            verticalAlignment = Alignment.CenterVertically
        ) {
            Text("Nueva nota", style = MaterialTheme.typography.headlineSmall)
            IconButton(onClick = { /* guardar */ }) {
                Icon(Icons.Default.Check, contentDescription = "Guardar")
            }
        }

        OutlinedTextField(
            value = "", onValueChange = {},
            label = { Text("Título") },
            modifier = Modifier.fillMaxWidth()
        )

        OutlinedTextField(
            value = "", onValueChange = {},
            label = { Text("Contenido") },
            modifier = Modifier
                .fillMaxWidth()
                .weight(1f)     // ocupa TODO el espacio restante
        )
    }
}

Box {
    Image(foto, null, Modifier.fillMaxSize())
    Text(
        nota.titulo,
        Modifier
            .align(Alignment.BottomStart)   // anclado abajo-izquierda
            .padding(12.dp),
        color = Color.White
    )
}

// Fondo GRANDE y contenido con margen interior:
Text("Notas",
     Modifier
         .background(Color(0xFFEDE7F6))
         .padding(16.dp))

// Margen exterior GRANDE y fondo pequeño (¡diferente!):
Text("Notas",
     Modifier
         .padding(16.dp)
         .background(Color(0xFFEDE7F6)))

@Composable
fun ChipNota(texto: String, alTocar: () -> Unit) {
    Text(
        text = texto,
        modifier = Modifier
            .clip(RoundedCornerShape(50))       // 1. recorta a píldora
            .background(MaterialTheme.colorScheme.secondaryContainer) // 2. fondo dentro del recorte
            .clickable(onClick = alTocar)       // 3. zona táctil = área visible
            .padding(horizontal = 12.dp, vertical = 6.dp)
    )
}

@Composable
fun PantallaNotas(alNuevaNota: () -> Unit) {
    val snackbar = remember { SnackbarHostState() }
    val alcance = rememberCoroutineScope()

    Scaffold(
        topBar = {
            TopAppBar(title = { Text("Mis notas") })
        },
        floatingActionButton = {
            FloatingActionButton(onClick = alNuevaNota) {
                Icon(Icons.Default.Add, contentDescription = "Nueva nota")
            }
        },
        snackbarHost = { SnackbarHost(snackbar) }
    ) { relleno ->   // insets: respeta barras del sistema
        Column(Modifier.padding(relleno)) {
            Text("Aquí va tu listado")
        }
    }
}

// Botones por jerarquía visual
Button(onClick = { }) { Text("Guardar") }              // acción principal
OutlinedButton(onClick = { }) { Text("Cancelar") }     // secundaria
TextButton(onClick = { }) { Text("Más tarde") }        // terciaria

// Campo con etiqueta y error
OutlinedTextField(
    value = titulo,
    onValueChange = { titulo = it },
    label = { Text("Título de la nota") },
    isError = titulo.isBlank(),
    supportingText = { if (titulo.isBlank()) Text("Requerido") },
    singleLine = true
)

// Selección
Checkbox(checked = archivada, onCheckedChange = { archivada = it })
Switch(checked = fijada, onCheckedChange = { fijada = it })

// Diálogo de confirmación
if (mostrarBorrar) {
    AlertDialog(
        onDismissRequest = { mostrarBorrar = false },
        title = { Text("¿Borrar nota?") },
        confirmButton = {
            TextButton(onClick = { borrar(); mostrarBorrar = false }) {
                Text("Borrar", color = MaterialTheme.colorScheme.error)
            }
        },
        dismissButton = {
            TextButton(onClick = { mostrarBorrar = false }) { Text("Cancelar") }
        }
    )
}

// ui/theme/Theme.kt
private val Claro = lightColorScheme(
    primary = Color(0xFF6D28D9),
    onPrimary = Color.White,
    secondary = Color(0xFF4F46E5),
    background = Color(0xFFFDF7FF)
)

private val Oscuro = darkColorScheme(
    primary = Color(0xFFCFBCFF),
    onPrimary = Color(0xFF381E72),
    secondary = Color(0xFFC5CAFF),
    background = Color(0xFF1C1B1F)
)

@Composable
fun NotasTheme(
    oscuro: Boolean = isSystemInDarkTheme(),
    // Color dinámico: paleta generada desde el fondo de pantalla (Android 12+)
    dinamico: Boolean = Build.VERSION.SDK_INT >= 31,
    contenido: @Composable () -> Unit
) {
    val esquema = when {
        dinamico -> if (oscuro) dynamicDarkColorScheme(LocalContext.current)
                    else       dynamicLightColorScheme(LocalContext.current)
        oscuro -> Oscuro
        else   -> Claro
    }
    MaterialTheme(
        colorScheme = esquema,
        typography = Tipografia,
        shapes = Formas,
        content = contenido
    )
}

@Composable
fun EtiquetaPrioridad() {
    Text(
        "Urgente",
        // Nunca colores fijos: siempre tokens del tema
        color = MaterialTheme.colorScheme.error,
        style = MaterialTheme.typography.labelMedium,
        modifier = Modifier
            .clip(MaterialTheme.shapes.small)      // forma del tema
            .background(MaterialTheme.colorScheme.errorContainer)
            .padding(horizontal = 8.dp, vertical = 4.dp)
    )
}

@Composable
fun Contador() {
    var toques by remember { mutableIntStateOf(0) }   // estado local

    Button(onClick = { toques++ }) {
        Text("Toques: $toques")   // se redibuja solo al cambiar
    }
}

// Componente SIN estado: valor + función para cambiarlo
@Composable
fun CampoTitulo(
    titulo: String,
    alCambiar: (String) -> Unit,
    modifier: Modifier = Modifier
) {
    OutlinedTextField(
        value = titulo,
        onValueChange = alCambiar,
        label = { Text("Título") },
        modifier = modifier.fillMaxWidth()
    )
}

// El dueño del estado conecta todo
@Composable
fun EditorNotaViewModel() {
    val vm: NotasViewModel = viewModel()
    val borrador by vm.borrador.collectAsStateWithLifecycle()

    Column {
        CampoTitulo(
            titulo = borrador.titulo,
            alCambiar = vm::cambiarTitulo
        )
        // ... más campos con el mismo patrón
    }
}

@Composable
fun BuscadorNotas(vm: NotasViewModel) {
    // Texto mientras se teclea: si muere, nadie sufre
    var texto by remember { mutableStateOf("") }

    // Filtro aplicado que el usuario esperaría conservar al rotar:
    var filtroGuardado by rememberSaveable { mutableStateOf("") }

    // Resultados (lista completa desde la base): ViewModel
    val resultados by vm.buscar(filtroGuardado)
        .collectAsStateWithLifecycle(initialValue = emptyList())
}

data class Filtro(val categoria: String, val soloPendientes: Boolean)

val filtroSaver = listSaver<Filtro, Any>(
    save = { listOf(it.categoria, it.soloPendientes) },
    restore = { Filtro(it[0] as String, it[1] as Boolean) }
)

var filtro by rememberSaveable(stateSaver = filtroSaver) {
    mutableStateOf(Filtro("todas", false))
}

// 1. Estado de pantalla inmutable: una foto de la realidad
data class NotasUiState(
    val notas: List<Nota> = emptyList(),
    val cargando: Boolean = true,
    val mensaje: String? = null
)

class NotasViewModel(private val repo: NotasRepositorio) : ViewModel() {

    private val _estado = MutableStateFlow(NotasUiState())
    val estado: StateFlow<NotasUiState> = _estado.asStateFlow()

    init { observarNotas() }

    private fun observarNotas() = viewModelScope.launch {
        repo.observar().collect { notas ->
            _estado.update { it.copy(notas = notas, cargando = false) }
        }
    }

    // 2. Eventos que suben: funciones públicas y explícitas
    fun borrar(nota: Nota)      = viewModelScope.launch { repo.borrar(nota) }
    fun deshacerBorrado(id: Long) = viewModelScope.launch { repo.restaurar(id) }
}

@Composable
fun NotasScreen(vm: NotasViewModel = viewModel()) {
    val estado by vm.estado.collectAsStateWithLifecycle()
    val snackbar = remember { SnackbarHostState() }

    // Reacción a eventos de una sola vez (mensaje efímero)
    LaunchedEffect(estado.mensaje) {
        estado.mensaje?.let {
            val resultado = snackbar.showSnackbar(it, actionLabel = "Deshacer")
            if (resultado == SnackbarResult.ActionPerformed) vm.deshacerUltimo()
        }
    }

    Scaffold(snackbarHost = { SnackbarHost(snackbar) }) { relleno ->
        when {
            estado.cargando -> Indicador(Modifier.padding(relleno))
            else -> ListaNotas(
                notas = estado.notas,
                alBorrar = vm::borrar,          // evento ↑
                modifier = Modifier.padding(relleno)
            )
        }
    }
}

@Composable
private fun ListaNotas(
    notas: List<Nota>,
    alBorrar: (Nota) -> Unit,
    modifier: Modifier = Modifier
) {
    LazyColumn(modifier) {
        items(notas, key = { it.id }) { nota ->
            TarjetaNota(nota, alBorrar = { alBorrar(nota) })
        }
    }
}

@Composable
fun DetalleNota(notaId: Long, vm: NotasViewModel = viewModel()) {
    LaunchedEffect(notaId) {
        // Corre UNA VEZ por cada valor distinto de notaId.
        // Si la nota cambia o la pantalla muere, se cancela sola.
        vm.cargar(notaId)
    }
}

@Composable
fun ConectividadActiva(alCambiar: (Boolean) -> Unit): Boolean {
    val contexto = LocalContext.current
    var enLinea by remember { mutableStateOf(true) }

    DisposableEffect(contexto) {
        val gestor = contexto.getSystemService(ConnectivityManager::class.java)
        val peticion = NetworkRequest.Builder().build()
        val red = object : ConnectivityManager.NetworkCallback() {
            override fun onAvailable(red: Network) { enLinea = true;  alCambiar(true)  }
            override fun onLost(red: Network)      { enLinea = false; alCambiar(false) }
        }
        gestor.registerNetworkCallback(peticion, red)

        onDispose { gestor.unregisterNetworkCallback(red) }   // limpieza garantizada
    }
    return enLinea
}

val alcance = rememberCoroutineScope()

Button(onClick = {
    // Dentro de un callback NO puedes usar LaunchedEffect:
    // aquí es donde corresponde lanzar manualmente.
    alcance.launch { snackbar.showSnackbar("Nota guardada") }
}) { Text("Guardar") }

// derivedStateOf: calcula SOLO cuando el resultado real cambia
val primeraVisible by estadoLista.derivedStateOf {
    lista.firstVisibleItemIndex > 0
}
BackHandler(enabled = primeraVisible) { desplazarArriba() }

// snapshotFlow: convierte valores leídos en composición en un Flow
LaunchedEffect(cajaTexto) {
    snapshotFlow { cajaTexto.text.isNotEmpty() }
        .distinctUntilChanged()
        .collect { hayTexto -> vm.habilitarGuardado(hayTexto) }
}

@Composable
fun ListaNotas(
    notas: List<Nota>,
    alAbrir: (Long) -> Unit,
    modifier: Modifier = Modifier
) {
    LazyColumn(
        modifier = modifier.fillMaxSize(),
        contentPadding = PaddingValues(16.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        // Cabecera fija dentro del scroll
        item(key = "cabecera") {
            Text("Tienes ${notas.size} notas",
                 style = MaterialTheme.typography.titleMedium)
        }

        items(
            items = notas,
            key = { it.id },            // identidad estable
            contentType = { "nota" }    // mismo tipo → reciclaje efectivo
        ) { nota ->
            TarjetaNota(nota, alAbrir = { alAbrir(nota.id) })
        }
    }
}

@Composable
fun ConBotonFlotanteInteligente(estadoLista: LazyListState) {
    // Aparece solo cuando bajaste
    val mostrar by remember {
        derivedStateOf { estadoLista.firstVisibleItemIndex > 2 }
    }
    AnimatedVisibility(mostrar) {
        ExtendedFloatingActionButton(onClick = {
            alcance.launch { estadoLista.animateScrollToItem(0) }
        }) { Text("Arriba") }
    }
}

// Las rutas son objetos serializables: cero strings mágicos
@Serializable data object Listado
@Serializable data class Editor(val notaId: Long = -1L)   // -1 = nueva

@Composable
fun AppNotas() {
    val controlador = rememberNavController()

    NavHost(controlador, startDestination = Listado) {
        composable<Listado> {
            PantallaNotas(
                alAbrir = { id -> controlador.navigate(Editor(id)) },
                alNueva = { controlador.navigate(Editor()) }
            )
        }
        composable<Editor> { entrada ->
            val destino = entrada.toRoute<Editor>()
            PantallaEditor(
                notaId = destino.notaId,
                alGuardar = { controlador.popBackStack() }   // vuelve y limpia
            )
        }
    }
}

// El editor guarda y devuelve el resultado por la pila anterior:
controlador.previousBackStackEntry
    ?.savedStateHandle?.set("notaGuardada", true)
controlador.popBackStack()

// El listado lo observa al volver:
controlador.currentBackStackEntry
    ?.savedStateHandle?.getStateFlow("notaGuardada", false)
    ?.collectAsState()

@Composable
fun TarjetaNota(nota: Nota, archivada: Boolean) {
    val colorFondo by animateColorAsState(
        targetValue = if (archivada)
            MaterialTheme.colorScheme.surfaceVariant
        else
            MaterialTheme.colorScheme.surface,
        animationSpec = tween(300),
        label = "fondoNota"
    )
    Card(colors = CardDefaults.cardColors(containerColor = colorFondo)) { }
}

// Entrada/salida con tamaño, fundido y deslizamiento
AnimatedVisibility(
    visible = mostrarFormulario,
    enter = fadeIn(tween(200)) + slideInVertically { it / 2 },
    exit  = fadeOut(tween(150)) + slideOutVertically { it / 2 }
) {
    FormularioNuevaNota()
}

// Cambiar contenido con fundido (pestañas, estados de carga)
Crossfade(estadoActual, label = "pantalla") { estado ->
    when (estado) {
        Cargando -> Indicador()
        Listo    -> ListaNotas()
    }
}

// El contenedor crece/decrece suave cuando cambia el contenido
Column(Modifier.animateContentSize()) { /* ... */ }

@Composable
fun AnilloProgreso(progreso: Float, modifier: Modifier = Modifier) {
    val trazoAnimado by animateFloatAsState(progreso, label = "anillo")

    Canvas(modifier.size(120.dp)) {
        val borde = 14.dp.toPx()
        val diametro = size.minDimension - borde
        val topLeft = Offset((size.width - diametro) / 2,
                             (size.height - diametro) / 2)

        // Pista completa
        drawArc(
            color = Color.LightGray.copy(alpha = 0.3f),
            startAngle = -90f, sweepAngle = 360f, useCenter = false,
            topLeft = topLeft, size = Size(diametro, diametro),
            style = Stroke(borde, cap = StrokeCap.Round)
        )
        // Progreso animado
        drawArc(
            color = Color(0xFF6D28D9),
            startAngle = -90f, sweepAngle = 360f * trazoAnimado,
            useCenter = false,
            topLeft = topLeft, size = Size(diametro, diametro),
            style = Stroke(borde, cap = StrokeCap.Round)
        )
    }
}

Modifier.pointerInput(Unit) {          // Unit: se crea una vez
    detectDragGestures(
        onDragStart = { inicio = it },
        onDragEnd    = { confirmarDeslizamiento() }
    ) { cambio, _ ->
        desplazamiento += cambio       // mueve tu tarjeta con el dedo
    }
}

// Toques simples y dobles:
Modifier.pointerInput(Unit) {
    detectTapGestures(
        onTap      = { abrir() },
        onLongPress = { mostrarMenu() }
    )
}

SwipeToDismissBox(
    state = estadoDeslizamiento,
    backgroundContent = { IconoArchivoFondo(estadoDeslizamiento) },
    content = { TarjetaNota(nota) },
    onDismiss = { vm.archivar(nota) }
)

class TarjetaNotaTest {

    @get:Rule
    val regla = createComposeRule()

    @Test
    fun muestraTituloYContenido() {
        regla.setContent {
            NotasTheme {
                TarjetaNota(Nota(1, "Compras", "Leche, pan"), alAbrir = {})
            }
        }
        regla.onNodeWithText("Compras").assertIsDisplayed()
        regla.onNodeWithText("Leche, pan").assertExists()
    }

    @Test
    fun notificaAlAbrir() {
        var abierta = false
        regla.setContent {
            TarjetaNota(Nota(1, "Compras", "…"), alAbrir = { abierta = true })
        }
        regla.onNodeWithText("Compras").performClick()
        assertTrue(abierta)
    }
}

app/src/main/java/pe/tuempresa/notas/
├── MainActivity.kt            // setContent + AppNotas()
├── AppNotas.kt                // grafo de navegación
├── datos/
│   ├── NotaEntidad.kt         // @Entity Room
│   ├── NotaDao.kt             // consultas con Flow
│   └── NotasRepositorio.kt    // única fuente de verdad
├── logica/
│   ├── NotasViewModel.kt      // UiState + intenciones (UDF)
│   └── UiState.kt
└── ui/
    ├── theme/                 // Color.kt, Type.kt, Theme.kt
    ├── listado/               // PantallaNotas, TarjetaNota, ListaNotas
    ├── editor/                // PantallaEditor, campos sin estado
    └── componentes/           // AnilloProgreso, ChipNota… reutilizables