Avisos con diseño: de pantallas sueltas a un sistema

git clone https://github.com/rpversontec/practica-7-avisos-con-diseno.git
cd practica-7-avisos-con-diseno

package mx.tec.avisos.ui.theme

import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.lightColorScheme
import androidx.compose.ui.graphics.Color

/**
 * Los colores de la app, por ROL y no por nombre.
 *
 * Nadie en la app escribe `Color(0xFF006B55)`: escribe
 * `MaterialTheme.colorScheme.primary`. Así el mismo código pinta el tema claro
 * y el oscuro, y cambiar la marca es cambiar este archivo.
 *
 * Cada rol viene con su pareja para el texto encima (`primary` / `onPrimary`).
 * La pareja es la que garantiza el contraste: si pones texto `onSurface` sobre
 * `primary`, el sistema ya no te protege.
 *
 * Los valores salen de una paleta tonal generada desde el verde del curso
 * (#0E5C4A), la misma técnica que usa Material Theme Builder.
 */
val ColoresClaros = lightColorScheme(
    primary = Color(0xFF006B55),
    onPrimary = Color(0xFFFFFFFF),
    primaryContainer = Color(0xFF9EF2D5),
    onPrimaryContainer = Color(0xFF00513F),
    inversePrimary = Color(0xFF82D5BA),

    secondary = Color(0xFF4B635A),
    onSecondary = Color(0xFFFFFFFF),
    secondaryContainer = Color(0xFFCDE8DC),
    onSecondaryContainer = Color(0xFF344C43),

    tertiary = Color(0xFF7C5800),
    onTertiary = Color(0xFFFFFFFF),
    tertiaryContainer = Color(0xFFFFDEA6),
    onTertiaryContainer = Color(0xFF5E4200),

    error = Color(0xFFBA1A1A),
    onError = Color(0xFFFFFFFF),
    errorContainer = Color(0xFFFFDAD6),
    onErrorContainer = Color(0xFF93000A),

    background = Color(0xFFF5FBF7),
    onBackground = Color(0xFF171D1A),
    surface = Color(0xFFF5FBF7),
    onSurface = Color(0xFF171D1A),
    surfaceVariant = Color(0xFFDBE5DF),
    onSurfaceVariant = Color(0xFF3F4945),
    surfaceTint = Color(0xFF006B55),
    inverseSurface = Color(0xFF2C322F),
    inverseOnSurface = Color(0xFFECF2EE),
    outline = Color(0xFF6F7975),
    outlineVariant = Color(0xFFBFC9C3),
    scrim = Color(0xFF000000),

    surfaceBright = Color(0xFFF5FBF7),
    surfaceDim = Color(0xFFD5DBD7),
    surfaceContainerLowest = Color(0xFFFFFFFF),
    surfaceContainerLow = Color(0xFFEFF5F1),
    surfaceContainer = Color(0xFFE9EFEB),
    surfaceContainerHigh = Color(0xFFE4EAE5),
    surfaceContainerHighest = Color(0xFFDEE4E0)
)

val ColoresOscuros = darkColorScheme(
    primary = Color(0xFF82D5BA),
    onPrimary = Color(0xFF00382B),
    primaryContainer = Color(0xFF005140),
    onPrimaryContainer = Color(0xFF9EF2D5),
    inversePrimary = Color(0xFF006B55),

    secondary = Color(0xFFB2CCC1),
    onSecondary = Color(0xFF1D352D),
    secondaryContainer = Color(0xFF344C43),
    onSecondaryContainer = Color(0xFFCDE8DC),

    tertiary = Color(0xFFF1BD6C),
    onTertiary = Color(0xFF422C00),
    tertiaryContainer = Color(0xFF5E4200),
    onTertiaryContainer = Color(0xFFFFDEA6),

    error = Color(0xFFFFB4AB),
    onError = Color(0xFF690005),
    errorContainer = Color(0xFF93000A),
    onErrorContainer = Color(0xFFFFDAD6),

    background = Color(0xFF0F1512),
    onBackground = Color(0xFFDEE4E0),
    surface = Color(0xFF0F1512),
    onSurface = Color(0xFFDEE4E0),
    surfaceVariant = Color(0xFF3F4945),
    onSurfaceVariant = Color(0xFFBFC9C3),
    surfaceTint = Color(0xFF82D5BA),
    inverseSurface = Color(0xFFDEE4E0),
    inverseOnSurface = Color(0xFF2C322F),
    outline = Color(0xFF89938E),
    outlineVariant = Color(0xFF3F4945),
    scrim = Color(0xFF000000),

    surfaceBright = Color(0xFF353B38),
    surfaceDim = Color(0xFF0F1512),
    surfaceContainerLowest = Color(0xFF0A0F0D),
    surfaceContainerLow = Color(0xFF171D1A),
    surfaceContainer = Color(0xFF1B211E),
    surfaceContainerHigh = Color(0xFF252B28),
    surfaceContainerHighest = Color(0xFF303633)
)

bricolage_semibold.ttf    bricolage_bold.ttf
atkinson_regular.ttf      atkinson_semibold.ttf

package mx.tec.avisos.ui.theme

import androidx.compose.material3.Typography
import androidx.compose.ui.text.font.Font
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.sp
import mx.tec.avisos.R

/**
 * Dos familias, con trabajos distintos:
 *   - Bricolage Grotesque para lo que se lee de un vistazo: títulos.
 *   - Atkinson Hyperlegible Next para lo que se lee con cuidado: todo lo demás.
 *     Está diseñada para que letras parecidas (l, I, 1; O, 0) no se confundan.
 *
 * Los archivos van en `res/font` —no se descargan— para que la app no dependa
 * de Play Services. Las dos son OFL: se pueden empaquetar; la licencia está en
 * `licencias/`.
 */
val Bricolage = FontFamily(
    Font(R.font.bricolage_semibold, FontWeight.SemiBold),
    Font(R.font.bricolage_bold, FontWeight.Bold)
)

val Atkinson = FontFamily(
    Font(R.font.atkinson_regular, FontWeight.Normal),
    Font(R.font.atkinson_semibold, FontWeight.SemiBold)
)

// Se parte de la escala de Material y se cambia lo que el diseño pide. Los
// tamaños que no se tocan conservan los de Material: son una escala probada.
private val base = Typography()

val TipografiaAvisos = Typography(
    displayLarge = base.displayLarge.copy(fontFamily = Bricolage, fontWeight = FontWeight.Bold),
    displayMedium = base.displayMedium.copy(fontFamily = Bricolage, fontWeight = FontWeight.Bold),
    displaySmall = base.displaySmall.copy(
        fontFamily = Bricolage, fontWeight = FontWeight.Bold, letterSpacing = (-0.5).sp
    ),
    headlineLarge = base.headlineLarge.copy(fontFamily = Bricolage, fontWeight = FontWeight.Bold),
    headlineMedium = base.headlineMedium.copy(fontFamily = Bricolage, fontWeight = FontWeight.SemiBold),
    headlineSmall = base.headlineSmall.copy(fontFamily = Bricolage, fontWeight = FontWeight.SemiBold),
    titleLarge = base.titleLarge.copy(fontFamily = Bricolage, fontWeight = FontWeight.SemiBold),
    titleMedium = base.titleMedium.copy(fontFamily = Atkinson, fontWeight = FontWeight.SemiBold),
    titleSmall = base.titleSmall.copy(fontFamily = Atkinson, fontWeight = FontWeight.SemiBold),
    bodyLarge = base.bodyLarge.copy(fontFamily = Atkinson),
    // 15/22 en vez de 14/20: el cuerpo de un aviso es lo que más se lee en la app.
    bodyMedium = base.bodyMedium.copy(fontFamily = Atkinson, fontSize = 15.sp, lineHeight = 22.sp),
    bodySmall = base.bodySmall.copy(fontFamily = Atkinson),
    labelLarge = base.labelLarge.copy(fontFamily = Atkinson, fontWeight = FontWeight.SemiBold),
    labelMedium = base.labelMedium.copy(fontFamily = Atkinson, fontWeight = FontWeight.SemiBold),
    labelSmall = base.labelSmall.copy(fontFamily = Atkinson, fontWeight = FontWeight.SemiBold)
)

package mx.tec.avisos.ui.theme

import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Shapes
import androidx.compose.ui.unit.dp

/**
 * Cinco radios, y cada componente usa uno por su TAMAÑO, no por gusto:
 *
 *   extraSmall  6  ·  small  8   chips, etiquetas
 *   medium     12              campos de texto
 *   large      16              banner, botón flotante, marca
 *   extraLarge 24              tarjetas
 *
 * Lo que va redondo del todo —botones principales, avatares— usa
 * `CircleShape`, que no es un token: es "tan redondo como alcance".
 */
val FormasAvisos = Shapes(
    extraSmall = RoundedCornerShape(6.dp),
    small = RoundedCornerShape(8.dp),
    medium = RoundedCornerShape(12.dp),
    large = RoundedCornerShape(16.dp),
    extraLarge = RoundedCornerShape(24.dp)
)

package mx.tec.avisos.ui.theme

import androidx.compose.runtime.Immutable
import androidx.compose.runtime.staticCompositionLocalOf
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp

/**
 * El único token que Material NO trae: el espaciado.
 *
 * Seis pasos y nada en medio. Un `13.dp` suelto en una pantalla es una
 * decisión que nadie más va a respetar; `espaciado.md` es una que ya tomó el
 * sistema.
 */
@Immutable
data class Espaciado(
    val xs: Dp = 4.dp,
    val sm: Dp = 8.dp,
    val md: Dp = 12.dp,
    val lg: Dp = 16.dp,
    val xl: Dp = 24.dp,
    val xxl: Dp = 32.dp
)

/**
 * Un CompositionLocal es un valor que baja solo por el árbol de Compose, sin
 * pasarlo de parámetro en parámetro. Es el mismo mecanismo con el que
 * `MaterialTheme.colorScheme` llega a cualquier composable.
 */
val LocalEspaciado = staticCompositionLocalOf { Espaciado() }

package mx.tec.avisos.ui.theme

import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.ReadOnlyComposable

/**
 * El sistema de diseño entero, en un composable. Todo lo que esté dentro
 * hereda los colores, la tipografía, las formas y el espaciado.
 *
 * `oscuro` sigue al sistema por omisión, pero es un parámetro: las previews
 * lo fijan para ver los dos temas lado a lado.
 *
 * No se usa color dinámico (Material You) a propósito: toma los colores del
 * fondo de pantalla del usuario y la app deja de verse como la app. Para una
 * marca, eso es perder la marca.
 */
@Composable
fun AvisosTheme(
    oscuro: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    CompositionLocalProvider(LocalEspaciado provides Espaciado()) {
        MaterialTheme(
            colorScheme = if (oscuro) ColoresOscuros else ColoresClaros,
            typography = TipografiaAvisos,
            shapes = FormasAvisos,
            content = content
        )
    }
}

/**
 * El atajo para leer los tokens propios igual que los de Material:
 * `AvisosTema.espaciado.lg`, como `MaterialTheme.colorScheme.primary`.
 */
object AvisosTema {
    val espaciado: Espaciado
        @Composable
        @ReadOnlyComposable
        get() = LocalEspaciado.current
}

package mx.tec.avisos

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.enableEdgeToEdge
import androidx.activity.compose.setContent
import mx.tec.avisos.ui.navigation.AvisosApp
import mx.tec.avisos.ui.theme.AvisosTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // La app dibuja detrás de las barras del sistema, y los íconos de la
        // barra de estado cambian de color con el tema claro u oscuro.
        enableEdgeToEdge()
        setContent { AvisosTheme { AvisosApp() } }
    }
}

<?xml version="1.0" encoding="utf-8"?>
<!-- Lo que se ve antes de que Compose dibuje: sin esto, en tema oscuro la app parpadea en blanco al abrir. -->
<resources>
    <style name="Theme.Avisos" parent="android:Theme.Material.NoActionBar" />
</resources>

package mx.tec.avisos.ui.components

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.Button
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.LocalContentColor
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.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import mx.tec.avisos.ui.theme.AvisosTema
import mx.tec.avisos.ui.theme.AvisosTheme

/**
 * LA acción de cada pantalla: Entrar, Publicar. Una por pantalla, nunca dos.
 *
 * Envuelve al `Button` de Material y le fija tres decisiones del sistema:
 *   - 56 dp de alto, en vez de los 40 de Material: es la acción que más se
 *     toca, y va abajo, al alcance del pulgar.
 *   - redondo del todo.
 *   - un estado `cargando` con indicador. Antes cada pantalla lo resolvía
 *     cambiando el texto a "Un momento…"; ahora se resuelve aquí, una vez.
 *
 * Mientras carga, el botón queda deshabilitado: tocarlo otra vez no vuelve a
 * mandar la petición.
 */
@Composable
fun BotonPrincipal(
    texto: String,
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    habilitado: Boolean = true,
    cargando: Boolean = false
) {
    Button(
        onClick = onClick,
        enabled = habilitado && !cargando,
        shape = CircleShape,
        modifier = modifier.fillMaxWidth().heightIn(min = 56.dp)
    ) {
        Row(
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.spacedBy(AvisosTema.espaciado.md)
        ) {
            if (cargando) {
                CircularProgressIndicator(
                    modifier = Modifier.size(20.dp),
                    strokeWidth = 2.5.dp,
                    color = LocalContentColor.current
                )
            }
            Text(texto, style = MaterialTheme.typography.titleMedium)
        }
    }
}

@Preview(showBackground = true)
@Composable
private fun BotonPrincipalPreview() {
    AvisosTheme {
        Column(Modifier.padding(16.dp), verticalArrangement = Arrangement.spacedBy(8.dp)) {
            BotonPrincipal("Publicar", onClick = {})
            BotonPrincipal("Publicando…", onClick = {}, cargando = true)
            BotonPrincipal("Publicar", onClick = {}, habilitado = false)
        }
    }
}

package mx.tec.avisos.ui.components

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Lock
import androidx.compose.material.icons.filled.Person
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import mx.tec.avisos.R
import mx.tec.avisos.ui.theme.AvisosTheme

/**
 * El campo de texto de la app. Envuelve a `OutlinedTextField` y decide, una
 * vez, lo que antes cada pantalla decidía a su manera:
 *
 *   - la forma (`shapes.medium`, 12 dp, en vez de los 4 de Material);
 *   - el ícono al inicio, si lo hay;
 *   - la línea de abajo: la ayuda a la izquierda, el contador a la derecha, y
 *     si hay error, el error en lugar de la ayuda;
 *   - el ojo para mostrar la contraseña, si el campo es de contraseña.
 *
 * El estado de "¿se ve la contraseña?" vive AQUÍ, no en el ViewModel: es un
 * detalle de cómo se dibuja, no un dato de la app.
 */
@Composable
fun CampoTexto(
    valor: String,
    onValorChange: (String) -> Unit,
    etiqueta: String,
    modifier: Modifier = Modifier,
    icono: ImageVector? = null,
    ayuda: String? = null,
    error: String? = null,
    contador: String? = null,
    esContrasena: Boolean = false,
    lineasMinimas: Int = 1
) {
    var visible by rememberSaveable { mutableStateOf(false) }
    val ocultar = esContrasena && !visible

    OutlinedTextField(
        value = valor,
        onValueChange = onValorChange,
        label = { Text(etiqueta) },
        modifier = modifier.fillMaxWidth(),
        shape = MaterialTheme.shapes.medium,
        singleLine = lineasMinimas == 1,
        minLines = lineasMinimas,
        isError = error != null,
        leadingIcon = icono?.let { { Icon(it, contentDescription = null) } },
        trailingIcon = if (esContrasena) {
            {
                IconButton(onClick = { visible = !visible }) {
                    Icon(
                        painter = painterResource(if (visible) R.drawable.ic_ojo_tachado else R.drawable.ic_ojo),
                        contentDescription = if (visible) "Ocultar contraseña" else "Mostrar contraseña"
                    )
                }
            }
        } else null,
        visualTransformation = if (ocultar) PasswordVisualTransformation() else VisualTransformation.None,
        keyboardOptions = if (esContrasena) KeyboardOptions(keyboardType = KeyboardType.Password) else KeyboardOptions.Default,
        supportingText = if (ayuda != null || error != null || contador != null) {
            {
                Row(Modifier.fillMaxWidth()) {
                    Text(error ?: ayuda ?: "", modifier = Modifier.weight(1f))
                    if (contador != null) Text(contador)
                }
            }
        } else null
    )
}

@Preview(showBackground = true)
@Composable
private fun CampoTextoPreview() {
    AvisosTheme {
        Column(Modifier.padding(16.dp), verticalArrangement = Arrangement.spacedBy(8.dp)) {
            CampoTexto("a01234567", {}, "Usuario", icono = Icons.Default.Person, ayuda = "Tu matrícula, en minúsculas")
            CampoTexto("corta", {}, "Contraseña", icono = Icons.Default.Lock, error = "Al menos 8 caracteres", esContrasena = true)
            CampoTexto("Examen parcial", {}, "Título", ayuda = "De 3 a 60 caracteres", contador = "14/60")
        }
    }
}

package mx.tec.avisos.ui.components

import java.text.ParseException
import java.text.SimpleDateFormat
import java.util.Calendar
import java.util.Locale
import java.util.TimeZone

/**
 * Traducir una fecha del servidor a algo que una persona lee es trabajo de la
 * UI, no del dominio: el dominio guarda "2026-09-23 09:48:12", y cómo se dice
 * depende de cuándo y dónde lo lea el usuario.
 *
 * El servidor manda la hora en UTC y sin zona (así la escribe SQLite). Se usa
 * SimpleDateFormat y no java.time porque la app corre desde API 24, y java.time
 * llegó en la 26.
 */
private fun formatoServidor() = SimpleDateFormat("yyyy-MM-dd HH:mm:ss", Locale.US).apply {
    timeZone = TimeZone.getTimeZone("UTC")
}

/** El instante en milisegundos, o null si el texto no es una fecha del servidor. */
fun instanteDe(creadoEn: String): Long? = try {
    formatoServidor().parse(creadoEn)?.time
} catch (e: ParseException) {
    null
}

/** "ahora", "hace 12 min", "hace 3 h", "ayer", "21 sep". */
fun tiempoRelativo(creadoEn: String, ahora: Long = System.currentTimeMillis()): String {
    val instante = instanteDe(creadoEn) ?: return "ahora"
    val minutos = (ahora - instante) / 60_000
    return when {
        minutos < 1 -> "ahora"
        minutos < 60 -> "hace $minutos min"
        minutos < 24 * 60 -> "hace ${minutos / 60} h"
        esAyer(instante, ahora) -> "ayer"
        else -> SimpleDateFormat("d MMM", Locale.forLanguageTag("es-MX")).format(instante).trimEnd('.')
    }
}

/** Menos de 24 horas: merece la etiqueta "Nuevo". */
fun esReciente(creadoEn: String, ahora: Long = System.currentTimeMillis()): Boolean {
    val instante = instanteDe(creadoEn) ?: return true
    return ahora - instante < 24 * 60 * 60 * 1000L
}

/** El mismo día del calendario del usuario, no "hace menos de 24 horas". */
fun esHoy(creadoEn: String, ahora: Long = System.currentTimeMillis()): Boolean {
    val instante = instanteDe(creadoEn) ?: return true
    return mismoDia(instante, ahora)
}

private fun esAyer(instante: Long, ahora: Long): Boolean =
    mismoDia(instante, ahora - 24 * 60 * 60 * 1000L)

private fun mismoDia(a: Long, b: Long): Boolean {
    val ca = Calendar.getInstance().apply { timeInMillis = a }
    val cb = Calendar.getInstance().apply { timeInMillis = b }
    return ca.get(Calendar.YEAR) == cb.get(Calendar.YEAR) &&
        ca.get(Calendar.DAY_OF_YEAR) == cb.get(Calendar.DAY_OF_YEAR)
}

package mx.tec.avisos.ui.components

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
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.graphics.Color
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp

/**
 * La inicial de un usuario en un círculo. Pequeño, pero lo usan la tarjeta y
 * el encabezado: por eso es componente y no dos `Box` parecidos.
 *
 * Los colores llegan como parámetros con valor por omisión DEL TEMA: quien lo
 * usa puede cambiarlos, pero si no dice nada, el sistema decide.
 */
@Composable
fun Avatar(
    nombre: String,
    modifier: Modifier = Modifier,
    tamano: Dp = 32.dp,
    fondo: Color = MaterialTheme.colorScheme.primaryContainer,
    texto: Color = MaterialTheme.colorScheme.onPrimaryContainer
) {
    Box(
        modifier = modifier.size(tamano).background(fondo, CircleShape),
        contentAlignment = Alignment.Center
    ) {
        Text(
            text = nombre.take(1).uppercase(),
            style = MaterialTheme.typography.labelLarge,
            color = texto
        )
    }
}

package mx.tec.avisos.ui.components

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import mx.tec.avisos.domain.Aviso
import mx.tec.avisos.ui.theme.AvisosTema
import mx.tec.avisos.ui.theme.AvisosTheme

/**
 * Un aviso del tablón. Dos versiones del mismo componente:
 *
 *   - La de abajo recibe los datos YA listos para mostrar (textos y un
 *     booleano). No sabe qué es un `Aviso` ni qué hora es: por eso sirve igual
 *     para la lista que para la vista previa de un aviso que todavía no existe.
 *   - La de arriba recibe un `Aviso` y hace la traducción. Es la cómoda.
 *
 * En la tarjeta no hay un solo color, tamaño ni radio escrito a mano: todo
 * sale del tema. Por eso cambia sola con el modo oscuro.
 */
@Composable
fun TarjetaAviso(
    aviso: Aviso,
    modifier: Modifier = Modifier,
    ahora: Long = System.currentTimeMillis()
) {
    TarjetaAviso(
        titulo = aviso.titulo,
        cuerpo = aviso.cuerpo,
        autor = aviso.autor,
        cuando = tiempoRelativo(aviso.creadoEn, ahora),
        nuevo = esReciente(aviso.creadoEn, ahora),
        modifier = modifier
    )
}

@Composable
fun TarjetaAviso(
    titulo: String,
    cuerpo: String,
    autor: String,
    cuando: String,
    nuevo: Boolean,
    modifier: Modifier = Modifier
) {
    val espaciado = AvisosTema.espaciado

    Card(
        modifier = modifier.fillMaxWidth(),
        shape = MaterialTheme.shapes.extraLarge,
        colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surfaceContainerLow)
    ) {
        Column(
            modifier = Modifier.padding(espaciado.xl),
            verticalArrangement = Arrangement.spacedBy(espaciado.sm)
        ) {
            Row(
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.spacedBy(espaciado.sm)
            ) {
                Avatar(autor)
                Text(autor, style = MaterialTheme.typography.labelLarge)
                Text(
                    text = "· $cuando",
                    style = MaterialTheme.typography.bodySmall,
                    color = MaterialTheme.colorScheme.onSurfaceVariant
                )
                Spacer(Modifier.weight(1f))
                if (nuevo) {
                    Surface(
                        color = MaterialTheme.colorScheme.tertiaryContainer,
                        contentColor = MaterialTheme.colorScheme.onTertiaryContainer,
                        shape = MaterialTheme.shapes.small
                    ) {
                        Text(
                            text = "Nuevo",
                            style = MaterialTheme.typography.labelMedium,
                            modifier = Modifier.padding(horizontal = espaciado.sm, vertical = 2.dp)
                        )
                    }
                }
            }
            Text(
                text = titulo,
                style = MaterialTheme.typography.titleLarge,
                maxLines = 1,
                overflow = TextOverflow.Ellipsis
            )
            Text(
                text = cuerpo,
                style = MaterialTheme.typography.bodyMedium,
                color = MaterialTheme.colorScheme.onSurfaceVariant,
                maxLines = 3,
                overflow = TextOverflow.Ellipsis
            )
        }
    }
}

@Preview(showBackground = true, name = "Nuevo · claro")
@Composable
private fun TarjetaNuevaPreview() {
    AvisosTheme(oscuro = false) {
        TarjetaAviso(
            titulo = "Examen parcial",
            cuerpo = "El parcial es el jueves a las 10:00 en el salón de siempre. Traigan lápiz.",
            autor = "profe.prueba",
            cuando = "hace 12 min",
            nuevo = true,
            modifier = Modifier.padding(16.dp)
        )
    }
}

@Preview(showBackground = true, backgroundColor = 0xFF0F1512, name = "Anterior · oscuro")
@Composable
private fun TarjetaAnteriorPreview() {
    AvisosTheme(oscuro = true) {
        TarjetaAviso(
            titulo = "Bienvenidos al tablón",
            cuerpo = "Este aviso lo publicó el servidor al crear la tabla. Los siguientes los publica un profesor desde la app.",
            autor = "profesor",
            cuando = "21 sep",
            nuevo = false,
            modifier = Modifier.padding(16.dp)
        )
    }
}

package mx.tec.avisos.ui.components

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
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.material3.Icon
import androidx.compose.material3.LinearProgressIndicator
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableLongStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.StrokeCap
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.delay
import mx.tec.avisos.R
import mx.tec.avisos.domain.Rol
import mx.tec.avisos.domain.Sesion
import mx.tec.avisos.ui.theme.AvisosTema
import mx.tec.avisos.ui.theme.AvisosTheme

/**
 * Los tres estados en que puede estar el acceso, y cómo se ve cada uno.
 * Son un tipo aparte de la pantalla: los decide el tiempo, no el usuario.
 */
enum class EstadoAcceso { ACTIVO, POR_RENOVARSE, VENCIDO }

fun estadoAcceso(segundosRestantes: Long): EstadoAcceso = when {
    segundosRestantes <= 0 -> EstadoAcceso.VENCIDO
    segundosRestantes <= 60 -> EstadoAcceso.POR_RENOVARSE
    else -> EstadoAcceso.ACTIVO
}

/**
 * Cuánto le queda al token de acceso, a la vista. En la Práctica 6 era una
 * franja que competía con la lista; aquí es una tarjeta chica con una barra,
 * y su color cambia con el estado —contenedor neutro, terciario, de error—
 * para que el cambio se note sin leer.
 */
@Composable
fun BannerSesion(sesion: Sesion, modifier: Modifier = Modifier) {
    var restantes by remember(sesion.expiraEn) { mutableLongStateOf(sesion.segundosRestantes()) }

    // Un tic por segundo mientras el banner esté en pantalla. Se reinicia solo
    // cuando llega un token nuevo, porque `expiraEn` cambia.
    LaunchedEffect(sesion.expiraEn) {
        while (true) {
            restantes = sesion.segundosRestantes()
            delay(1_000)
        }
    }

    BannerSesion(restantes = restantes, modifier = modifier)
}

/** La versión sin reloj: recibe los segundos. Es la que usan las previews. */
@Composable
fun BannerSesion(restantes: Long, modifier: Modifier = Modifier) {
    val colores = MaterialTheme.colorScheme
    val estado = estadoAcceso(restantes)

    val (fondo, texto, acento) = when (estado) {
        EstadoAcceso.ACTIVO -> Triple(colores.surfaceContainer, colores.onSurface, colores.primary)
        EstadoAcceso.POR_RENOVARSE -> Triple(colores.tertiaryContainer, colores.onTertiaryContainer, colores.onTertiaryContainer)
        EstadoAcceso.VENCIDO -> Triple(colores.errorContainer, colores.onErrorContainer, colores.onErrorContainer)
    }
    val titulo = when (estado) {
        EstadoAcceso.ACTIVO -> "Sesión activa"
        EstadoAcceso.POR_RENOVARSE -> "Sesión por renovarse"
        EstadoAcceso.VENCIDO -> "Acceso vencido"
    }
    val detalle = when (estado) {
        EstadoAcceso.ACTIVO -> "se renueva sola en ${restantes.comoMinutos()}"
        EstadoAcceso.POR_RENOVARSE -> "en ${restantes.comoMinutos()}"
        EstadoAcceso.VENCIDO -> "se renueva al recargar"
    }
    val espaciado = AvisosTema.espaciado

    Surface(
        modifier = modifier.fillMaxWidth(),
        color = fondo,
        contentColor = texto,
        shape = MaterialTheme.shapes.large
    ) {
        Column(
            modifier = Modifier.padding(horizontal = espaciado.lg, vertical = espaciado.md),
            verticalArrangement = Arrangement.spacedBy(espaciado.sm)
        ) {
            Row(verticalAlignment = Alignment.CenterVertically) {
                Icon(
                    painter = painterResource(R.drawable.ic_reloj),
                    contentDescription = null,
                    tint = acento,
                    modifier = Modifier.size(20.dp)
                )
                Spacer(Modifier.size(espaciado.md))
                Text(titulo, style = MaterialTheme.typography.titleSmall, modifier = Modifier.weight(1f))
                Text(detalle, style = MaterialTheme.typography.bodySmall)
            }
            if (estado != EstadoAcceso.VENCIDO) {
                LinearProgressIndicator(
                    progress = { (restantes / DURACION_ACCESO_S.toFloat()).coerceIn(0f, 1f) },
                    modifier = Modifier.fillMaxWidth(),
                    color = acento,
                    trackColor = acento.copy(alpha = 0.24f),
                    strokeCap = StrokeCap.Round,
                    gapSize = 0.dp,
                    drawStopIndicator = {}
                )
            }
        }
    }
}

/** Lo que dura un token de acceso en la API del curso. */
private const val DURACION_ACCESO_S = 300

private fun Long.comoMinutos(): String = "%d:%02d".format(this / 60, this % 60)

@Preview(showBackground = true)
@Composable
private fun BannerSesionPreview() {
    AvisosTheme {
        Column(Modifier.padding(16.dp), verticalArrangement = Arrangement.spacedBy(8.dp)) {
            BannerSesion(restantes = 252)
            BannerSesion(restantes = 42)
            BannerSesion(restantes = 0)
        }
    }
}

@Preview(showBackground = true, name = "Con sesión")
@Composable
private fun BannerConSesionPreview() {
    AvisosTheme {
        BannerSesion(
            Sesion("a01234567", Rol.ALUMNO, "x", "y", System.currentTimeMillis() / 1000 + 200),
            Modifier.padding(16.dp)
        )
    }
}

package mx.tec.avisos.ui.components

import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import mx.tec.avisos.domain.Rol
import mx.tec.avisos.ui.theme.AvisosTheme

/**
 * El rol, a la vista. Cada rol tiene su contenedor: alumno el secundario,
 * profesor el terciario —el mismo acento que marca lo "Nuevo"—, para que el
 * rol con más permisos se distinga sin leer.
 *
 * Es una etiqueta, no un botón: por eso es un Surface y no un AssistChip,
 * que en Material es algo que se toca.
 */
@Composable
fun ChipRol(rol: Rol, modifier: Modifier = Modifier) {
    val (fondo, texto) = when (rol) {
        Rol.ALUMNO -> MaterialTheme.colorScheme.secondaryContainer to MaterialTheme.colorScheme.onSecondaryContainer
        Rol.PROFESOR -> MaterialTheme.colorScheme.tertiaryContainer to MaterialTheme.colorScheme.onTertiaryContainer
    }
    Surface(modifier = modifier, color = fondo, contentColor = texto, shape = MaterialTheme.shapes.small) {
        Text(
            text = if (rol == Rol.PROFESOR) "Profesor" else "Alumno",
            style = MaterialTheme.typography.labelMedium,
            modifier = Modifier.padding(horizontal = 8.dp, vertical = 2.dp)
        )
    }
}

@Preview(showBackground = true)
@Composable
private fun ChipRolPreview() {
    AvisosTheme {
        Row { ChipRol(Rol.ALUMNO); ChipRol(Rol.PROFESOR, Modifier.padding(start = 8.dp)) }
    }
}

package mx.tec.avisos.ui.components

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.FilledTonalButton
import androidx.compose.material3.Icon
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.res.painterResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import mx.tec.avisos.R
import mx.tec.avisos.ui.theme.AvisosTema
import mx.tec.avisos.ui.theme.AvisosTheme

/**
 * Lo que se ve cuando no hay datos que mostrar: cargando, vacío o error.
 *
 * Un `object` con tres composables en vez de tres funciones sueltas: al
 * escribir `EstadoVista.` el IDE te enseña las tres, y se lee como lo que es,
 * una familia. Reemplaza a `CargandoView`, `VacioView` y `ErrorView` de la
 * Práctica 6.
 */
object EstadoVista {

    @Composable
    fun Cargando(modifier: Modifier = Modifier) {
        Column(
            modifier = modifier.fillMaxSize(),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            CircularProgressIndicator()
        }
    }

    @Composable
    fun Vacio(titulo: String, mensaje: String, modifier: Modifier = Modifier) {
        Contenedor(modifier) {
            Icon(
                painter = painterResource(R.drawable.ic_bandeja),
                contentDescription = null,
                tint = MaterialTheme.colorScheme.onSurfaceVariant,
                modifier = Modifier.size(40.dp)
            )
            Text(titulo, style = MaterialTheme.typography.titleMedium, textAlign = TextAlign.Center)
            Text(
                text = mensaje,
                style = MaterialTheme.typography.bodyMedium,
                color = MaterialTheme.colorScheme.onSurfaceVariant,
                textAlign = TextAlign.Center
            )
        }
    }

    @Composable
    fun Error(mensaje: String, onReintentar: () -> Unit, modifier: Modifier = Modifier) {
        Contenedor(modifier) {
            Icon(
                painter = painterResource(R.drawable.ic_sin_conexion),
                contentDescription = null,
                tint = MaterialTheme.colorScheme.error,
                modifier = Modifier.size(40.dp)
            )
            Text(mensaje, style = MaterialTheme.typography.titleMedium, textAlign = TextAlign.Center)
            FilledTonalButton(onClick = onReintentar) { Text("Reintentar") }
        }
    }

    @Composable
    private fun Contenedor(modifier: Modifier, contenido: @Composable () -> Unit) {
        Column(
            modifier = modifier.fillMaxSize().padding(AvisosTema.espaciado.xxl),
            verticalArrangement = Arrangement.spacedBy(AvisosTema.espaciado.sm, Alignment.CenterVertically),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            contenido()
        }
    }
}

@Preview(showBackground = true, heightDp = 240)
@Composable
private fun VacioPreview() {
    AvisosTheme { EstadoVista.Vacio("Todavía no hay avisos", "Cuando un profesor publique, aparece aquí.") }
}

@Preview(showBackground = true, heightDp = 240)
@Composable
private fun ErrorPreview() {
    AvisosTheme { EstadoVista.Error("No hay conexión. Revisa tu internet.", onReintentar = {}) }
}

package mx.tec.avisos.ui.screens

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Lock
import androidx.compose.material.icons.filled.Person
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.SegmentedButton
import androidx.compose.material3.SegmentedButtonDefaults
import androidx.compose.material3.SingleChoiceSegmentedButtonRow
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import mx.tec.avisos.R
import mx.tec.avisos.domain.CredencialesValidator
import mx.tec.avisos.ui.components.BotonPrincipal
import mx.tec.avisos.ui.components.CampoTexto
import mx.tec.avisos.ui.state.LoginUiState
import mx.tec.avisos.ui.theme.AvisosTema
import mx.tec.avisos.ui.theme.AvisosTheme

/**
 * La pantalla es tonta: recibe el estado y avisa qué tecleó el usuario. No
 * sabe de tokens, ni de red, ni de dónde se guarda nada.
 *
 * Tampoco sabe de colores ni de tamaños: cada pieza sale del sistema. Lo que
 * decide esta pantalla es el ORDEN y la JERARQUÍA — la marca, luego la
 * elección de modo, luego los campos, y la acción principal abajo.
 */
@Composable
fun LoginScreen(
    uiState: LoginUiState,
    onUsuarioChange: (String) -> Unit,
    onPasswordChange: (String) -> Unit,
    onCodigoProfesorChange: (String) -> Unit,
    onAlternarModo: () -> Unit,
    onEnviar: () -> Unit,
    modifier: Modifier = Modifier
) {
    val espaciado = AvisosTema.espaciado

    Scaffold(modifier = modifier) { padding ->
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(padding)
                // Con la letra al 200 % la pantalla no cabe: se desplaza en vez de cortarse.
                .verticalScroll(rememberScrollState())
                .padding(horizontal = espaciado.xl, vertical = espaciado.xxl)
        ) {
            Surface(
                color = MaterialTheme.colorScheme.primaryContainer,
                contentColor = MaterialTheme.colorScheme.onPrimaryContainer,
                shape = MaterialTheme.shapes.large,
                modifier = Modifier.size(64.dp)
            ) {
                Box(contentAlignment = Alignment.Center) {
                    Icon(painterResource(R.drawable.ic_megafono), contentDescription = null, modifier = Modifier.size(32.dp))
                }
            }
            Spacer(Modifier.height(espaciado.lg))
            Text("Avisos", style = MaterialTheme.typography.displaySmall)
            Text(
                text = "Entra con tu cuenta del curso",
                style = MaterialTheme.typography.bodyLarge,
                color = MaterialTheme.colorScheme.onSurfaceVariant
            )
            Spacer(Modifier.height(espaciado.xxl))

            // Entrar o crear cuenta son dos opciones del mismo nivel: eso es un
            // botón segmentado, no un enlace escondido debajo del botón principal.
            SingleChoiceSegmentedButtonRow(Modifier.fillMaxWidth()) {
                SegmentedButton(
                    selected = !uiState.modoRegistro,
                    onClick = { if (uiState.modoRegistro) onAlternarModo() },
                    shape = SegmentedButtonDefaults.itemShape(index = 0, count = 2)
                ) { Text("Entrar") }
                SegmentedButton(
                    selected = uiState.modoRegistro,
                    onClick = { if (!uiState.modoRegistro) onAlternarModo() },
                    shape = SegmentedButtonDefaults.itemShape(index = 1, count = 2)
                ) { Text("Crear cuenta") }
            }
            Spacer(Modifier.height(espaciado.xl))

            Column(verticalArrangement = Arrangement.spacedBy(espaciado.sm)) {
                CampoTexto(
                    valor = uiState.usuario,
                    onValorChange = onUsuarioChange,
                    etiqueta = "Usuario",
                    icono = Icons.Default.Person,
                    ayuda = "Tu matrícula, en minúsculas"
                )
                CampoTexto(
                    valor = uiState.password,
                    onValorChange = onPasswordChange,
                    etiqueta = "Contraseña",
                    icono = Icons.Default.Lock,
                    ayuda = "Al menos ${CredencialesValidator.PASSWORD_MIN} caracteres",
                    esContrasena = true
                )
                if (uiState.modoRegistro) {
                    CampoTexto(
                        valor = uiState.codigoProfesor,
                        onValorChange = onCodigoProfesorChange,
                        etiqueta = "Código de profesor (opcional)",
                        ayuda = "Sin código, la cuenta es de alumno"
                    )
                }
            }

            val error = uiState.error
            if (error != null) {
                Spacer(Modifier.height(espaciado.sm))
                Text(error, color = MaterialTheme.colorScheme.error, style = MaterialTheme.typography.bodyMedium)
            }

            Spacer(Modifier.height(espaciado.xl))
            BotonPrincipal(
                texto = if (uiState.modoRegistro) "Crear cuenta" else "Entrar",
                onClick = onEnviar,
                habilitado = uiState.puedeEnviar,
                cargando = uiState.enviando
            )
            Spacer(Modifier.height(espaciado.xl))
            Text(
                text = "Tu contraseña se usa una vez y no se guarda en el teléfono.",
                style = MaterialTheme.typography.bodySmall,
                color = MaterialTheme.colorScheme.onSurfaceVariant,
                textAlign = TextAlign.Center,
                modifier = Modifier.fillMaxWidth()
            )
        }
    }
}

@Preview(showBackground = true, heightDp = 844)
@Composable
private fun LoginPreview() {
    AvisosTheme {
        LoginScreen(
            uiState = LoginUiState(usuario = "a01234567", password = "secreta123"),
            onUsuarioChange = {}, onPasswordChange = {}, onCodigoProfesorChange = {},
            onAlternarModo = {}, onEnviar = {}
        )
    }
}

@Preview(showBackground = true, heightDp = 844, name = "Registro con error · oscuro")
@Composable
private fun RegistroPreview() {
    AvisosTheme(oscuro = true) {
        LoginScreen(
            uiState = LoginUiState(usuario = "a01234567", modoRegistro = true, error = "El usuario \"a01234567\" ya existe"),
            onUsuarioChange = {}, onPasswordChange = {}, onCodigoProfesorChange = {},
            onAlternarModo = {}, onEnviar = {}
        )
    }
}

package mx.tec.avisos.ui.screens

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.statusBarsPadding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.LazyListScope
import androidx.compose.foundation.lazy.items
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ExitToApp
import androidx.compose.material.icons.filled.Edit
import androidx.compose.material.icons.filled.Refresh
import androidx.compose.material3.DropdownMenu
import androidx.compose.material3.DropdownMenuItem
import androidx.compose.material3.ExtendedFloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import mx.tec.avisos.domain.Aviso
import mx.tec.avisos.domain.Rol
import mx.tec.avisos.domain.Sesion
import mx.tec.avisos.ui.components.Avatar
import mx.tec.avisos.ui.components.BannerSesion
import mx.tec.avisos.ui.components.ChipRol
import mx.tec.avisos.ui.components.EstadoVista
import mx.tec.avisos.ui.components.TarjetaAviso
import mx.tec.avisos.ui.components.esHoy
import mx.tec.avisos.ui.state.UiState
import mx.tec.avisos.ui.theme.AvisosTema
import mx.tec.avisos.ui.theme.AvisosTheme

/**
 * El tablón. Recibe la sesión para el encabezado, el banner y la decisión de
 * mostrar el botón de publicar —que sigue siendo cortesía: el servidor decide.
 *
 * Tres decisiones de diseño que no son de ningún componente, sino de esta
 * pantalla:
 *   - los avisos se agrupan en "Hoy" y "Anteriores";
 *   - el banner entra a la lista y se va con el scroll, en vez de quedarse fijo;
 *   - "Salir" se muda al menú de la cuenta: es una acción rara y destructiva,
 *     no merece un ícono junto a "Recargar".
 */
@Composable
fun AvisosScreen(
    sesion: Sesion,
    avisos: UiState<List<Aviso>>,
    onRecargar: () -> Unit,
    onPublicar: () -> Unit,
    onSalir: () -> Unit,
    modifier: Modifier = Modifier
) {
    val espaciado = AvisosTema.espaciado

    Scaffold(
        modifier = modifier,
        topBar = { EncabezadoTablon(sesion = sesion, onRecargar = onRecargar, onSalir = onSalir) },
        floatingActionButton = {
            if (sesion.puedePublicar) {
                ExtendedFloatingActionButton(
                    onClick = onPublicar,
                    icon = { Icon(Icons.Default.Edit, contentDescription = null) },
                    text = { Text("Publicar") }
                )
            }
        }
    ) { padding ->
        LazyColumn(
            modifier = Modifier.padding(padding),
            // Abajo, espacio para que el botón flotante no tape el último aviso.
            contentPadding = PaddingValues(start = espaciado.lg, end = espaciado.lg, top = espaciado.sm, bottom = 96.dp),
            verticalArrangement = Arrangement.spacedBy(espaciado.md)
        ) {
            item { BannerSesion(sesion) }

            when (avisos) {
                is UiState.Cargando -> item { EstadoVista.Cargando(Modifier.fillParentMaxHeight(0.6f)) }

                is UiState.Error -> item {
                    EstadoVista.Error(avisos.mensaje, onReintentar = onRecargar, modifier = Modifier.fillParentMaxHeight(0.6f))
                }

                is UiState.Exito -> if (avisos.datos.isEmpty()) {
                    item {
                        EstadoVista.Vacio(
                            titulo = "Todavía no hay avisos",
                            mensaje = "Cuando un profesor publique, aparece aquí.",
                            modifier = Modifier.fillParentMaxHeight(0.6f)
                        )
                    }
                } else {
                    val (hoy, anteriores) = avisos.datos.partition { esHoy(it.creadoEn) }
                    seccion("Hoy", hoy)
                    seccion("Anteriores", anteriores)
                }
            }
        }
    }
}

/** Un encabezado de sección y sus tarjetas. Si no hay avisos, no hay encabezado. */
private fun LazyListScope.seccion(titulo: String, avisos: List<Aviso>) {
    if (avisos.isEmpty()) return
    item(key = "seccion-$titulo") {
        Text(
            text = titulo,
            style = MaterialTheme.typography.labelLarge,
            color = MaterialTheme.colorScheme.primary,
            modifier = Modifier.padding(top = AvisosTema.espaciado.sm)
        )
    }
    items(avisos, key = { it.id }) { aviso -> TarjetaAviso(aviso) }
}

@Composable
private fun EncabezadoTablon(sesion: Sesion, onRecargar: () -> Unit, onSalir: () -> Unit) {
    val espaciado = AvisosTema.espaciado
    var menuAbierto by remember { mutableStateOf(false) }

    Column(
        modifier = Modifier
            .fillMaxWidth()
            .statusBarsPadding()
            .padding(start = espaciado.lg, end = espaciado.xs, bottom = espaciado.sm)
    ) {
        Row(modifier = Modifier.align(Alignment.End), verticalAlignment = Alignment.CenterVertically) {
            IconButton(onClick = onRecargar) {
                Icon(Icons.Default.Refresh, contentDescription = "Recargar")
            }
            Box {
                IconButton(onClick = { menuAbierto = true }) {
                    Avatar(
                        nombre = sesion.usuario,
                        tamano = 36.dp,
                        fondo = MaterialTheme.colorScheme.secondaryContainer,
                        texto = MaterialTheme.colorScheme.onSecondaryContainer
                    )
                }
                DropdownMenu(expanded = menuAbierto, onDismissRequest = { menuAbierto = false }) {
                    DropdownMenuItem(
                        text = { Text("Salir") },
                        leadingIcon = { Icon(Icons.AutoMirrored.Filled.ExitToApp, contentDescription = null) },
                        onClick = {
                            menuAbierto = false
                            onSalir()
                        }
                    )
                }
            }
        }
        Text("Tablón", style = MaterialTheme.typography.displaySmall)
        Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(espaciado.sm)) {
            Text(
                text = sesion.usuario,
                style = MaterialTheme.typography.bodyMedium,
                color = MaterialTheme.colorScheme.onSurfaceVariant
            )
            ChipRol(sesion.rol)
        }
    }
}

private val demoAvisos = listOf(
    Aviso(3, "Examen parcial", "El parcial es el jueves a las 10:00 en el salón de siempre. Traigan lápiz.", "profe.prueba", "2099-01-01 00:00:00"),
    Aviso(1, "Bienvenidos al tablón", "Este aviso lo publicó el servidor al crear la tabla. Los siguientes los publica un profesor desde la app.", "profesor", "2026-09-21 16:51:55")
)

@Preview(showBackground = true, heightDp = 844)
@Composable
private fun TablonPreview() {
    AvisosTheme {
        AvisosScreen(
            sesion = Sesion("profe.prueba", Rol.PROFESOR, "x", "y", System.currentTimeMillis() / 1000 + 252),
            avisos = UiState.Exito(demoAvisos),
            onRecargar = {}, onPublicar = {}, onSalir = {}
        )
    }
}

@Preview(showBackground = true, heightDp = 844, name = "Alumno · oscuro · sin conexión")
@Composable
private fun TablonErrorPreview() {
    AvisosTheme(oscuro = true) {
        AvisosScreen(
            sesion = Sesion("a01234567", Rol.ALUMNO, "x", "y", System.currentTimeMillis() / 1000 + 42),
            avisos = UiState.Error("No hay conexión. Revisa tu internet."),
            onRecargar = {}, onPublicar = {}, onSalir = {}
        )
    }
}

package mx.tec.avisos.ui.screens

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.imePadding
import androidx.compose.foundation.layout.navigationBarsPadding
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Close
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import mx.tec.avisos.domain.AvisoValidator
import mx.tec.avisos.ui.components.BotonPrincipal
import mx.tec.avisos.ui.components.CampoTexto
import mx.tec.avisos.ui.components.TarjetaAviso
import mx.tec.avisos.ui.state.PublicarUiState
import mx.tec.avisos.ui.theme.AvisosTema
import mx.tec.avisos.ui.theme.AvisosTheme

/**
 * Escribir un aviso. La pieza nueva es la vista previa: es la MISMA
 * `TarjetaAviso` del tablón, alimentada con lo que el profesor lleva tecleado.
 * Si mañana cambia la tarjeta, la vista previa cambia con ella — no hay una
 * copia que mantener al día.
 */
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun PublicarScreen(
    uiState: PublicarUiState,
    autor: String,
    onTituloChange: (String) -> Unit,
    onCuerpoChange: (String) -> Unit,
    onPublicar: () -> Unit,
    onCancelar: () -> Unit,
    modifier: Modifier = Modifier
) {
    val espaciado = AvisosTema.espaciado

    Scaffold(
        modifier = modifier,
        topBar = {
            TopAppBar(
                title = { Text("Nuevo aviso", style = MaterialTheme.typography.headlineSmall) },
                navigationIcon = {
                    IconButton(onClick = onCancelar) {
                        Icon(Icons.Default.Close, contentDescription = "Cancelar")
                    }
                }
            )
        },
        // La acción principal abajo, y sube con el teclado: nunca queda tapada.
        bottomBar = {
            BotonPrincipal(
                texto = if (uiState.enviando) "Publicando…" else "Publicar",
                onClick = onPublicar,
                habilitado = uiState.puedePublicar,
                cargando = uiState.enviando,
                modifier = Modifier
                    .navigationBarsPadding()
                    .imePadding()
                    .padding(espaciado.lg)
            )
        }
    ) { padding ->
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(padding)
                .verticalScroll(rememberScrollState())
                .padding(horizontal = espaciado.lg, vertical = espaciado.sm),
            verticalArrangement = Arrangement.spacedBy(espaciado.lg)
        ) {
            CampoTexto(
                valor = uiState.titulo,
                onValorChange = onTituloChange,
                etiqueta = "Título",
                ayuda = "De ${AvisoValidator.TITULO_MIN} a ${AvisoValidator.TITULO_MAX} caracteres",
                contador = "${uiState.titulo.length}/${AvisoValidator.TITULO_MAX}"
            )
            CampoTexto(
                valor = uiState.cuerpo,
                onValorChange = onCuerpoChange,
                etiqueta = "Aviso",
                contador = "${uiState.cuerpo.length}/${AvisoValidator.CUERPO_MAX}",
                lineasMinimas = 4
            )

            // El error del servidor: un 403, un 422 que la validación no atrapó,
            // o una caída de red. La pantalla NO se cierra.
            val error = uiState.error
            if (error != null) {
                Text(error, color = MaterialTheme.colorScheme.error, style = MaterialTheme.typography.bodyMedium)
            }

            Text(
                text = "Vista previa",
                style = MaterialTheme.typography.labelLarge,
                color = MaterialTheme.colorScheme.onSurfaceVariant
            )
            TarjetaAviso(
                titulo = uiState.titulo.ifBlank { "Título del aviso" },
                cuerpo = uiState.cuerpo.ifBlank { "Así se va a ver tu aviso en el tablón." },
                autor = autor,
                cuando = "ahora",
                nuevo = true
            )
        }
    }
}

@Preview(showBackground = true, heightDp = 844)
@Composable
private fun PublicarPreview() {
    AvisosTheme {
        PublicarScreen(
            uiState = PublicarUiState(
                titulo = "Examen parcial",
                cuerpo = "El parcial es el jueves a las 10:00 en el salón de siempre. Traigan lápiz."
            ),
            autor = "profe.prueba",
            onTituloChange = {}, onCuerpoChange = {}, onPublicar = {}, onCancelar = {}
        )
    }
}

            PublicarScreen(
                uiState = viewModel.uiState,
                // Para la vista previa: el aviso sale firmado por quien tiene la sesión.
                autor = sesion.usuario,
                onTituloChange = viewModel::onTituloChange,
                onCuerpoChange = viewModel::onCuerpoChange,

import mx.tec.avisos.ui.components.EstadoVista

        SesionEstado.Cargando -> EstadoVista.Cargando()

adb shell settings put system font_scale 2.0

            // Título y detalle apilados, no lado a lado: con la letra al 200 % en
            // una fila no caben los dos, y el que tiene `weight` se parte en sílabas.
            Row(verticalAlignment = Alignment.CenterVertically) {
                Icon(
                    painter = painterResource(R.drawable.ic_reloj),
                    contentDescription = null,
                    tint = acento,
                    modifier = Modifier.size(20.dp)
                )
                Spacer(Modifier.size(espaciado.md))
                Column(Modifier.weight(1f)) {
                    Text(titulo, style = MaterialTheme.typography.titleSmall)
                    Text(detalle, style = MaterialTheme.typography.bodySmall)
                }
            }

                Avatar(autor)
                // Autor y hora en su propia fila, que se queda con todo el espacio
                // que sobra. Si no cabe, cede el autor —con "…"—, nunca la etiqueta.
                Row(
                    modifier = Modifier.weight(1f),
                    verticalAlignment = Alignment.CenterVertically,
                    horizontalArrangement = Arrangement.spacedBy(espaciado.xs)
                ) {
                    Text(
                        text = autor,
                        style = MaterialTheme.typography.labelLarge,
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis,
                        modifier = Modifier.weight(1f, fill = false)
                    )
                    Text(
                        text = "· $cuando",
                        style = MaterialTheme.typography.bodySmall,
                        color = MaterialTheme.colorScheme.onSurfaceVariant,
                        maxLines = 1
                    )
                }
                if (nuevo) {

                        Text(
                            text = "Nuevo",
                            style = MaterialTheme.typography.labelMedium,
                            maxLines = 1,
                            softWrap = false,
                            modifier = Modifier.padding(horizontal = espaciado.sm, vertical = 2.dp)
                        )

adb shell settings put system font_scale 1.0

adb shell cmd uimode night yes

git commit -m "checkpoint b4: los componentes del sistema" -m "Co-Authored-By: Claude <noreply@anthropic.com>"

val LocalEspaciado = staticCompositionLocalOf { Espaciado() }

CompositionLocalProvider(LocalEspaciado provides Espaciado()) { … }

val margen = LocalEspaciado.current.lg