<script>
    import ImagenBus from "$lib/images/logo-autobus.png";

    export let data;

    const { NombreParadero: nombreParadero = null, ...paraderoData } = data?.GetInfoDeviceResponse || {};

    const colores = [
        "#5fbabe",
        "#f05eb1",
        "#5fab88",
        "#f7646c",
        "#5e66b5",
        "#73776e",
    ];

    function getColorAleatorio(index) {
        return colores[index % 6];
    }

    function formatTimeMinutes({ EstimadaGPS: horaPlanificada, patente }) {
        // const diferenciaMinutos = calcularDiferenciaMinutos(horaPlanificada);
        const horaActual = new Date();
        const horaUtc = horaActual.toISOString().substring(0, 10) + "T" + horaPlanificada + "Z";
        const horaTrayecto = new Date(horaUtc);
        const diferenciaMinutos = (horaTrayecto.getTime() - horaActual.getTime()) / (1000 * 60);

        if (diferenciaMinutos <= 3) {
            return "< a 3 Minutos";
        } else if (diferenciaMinutos <= 5) {
            return "3-5 Minutos";
        } else if (diferenciaMinutos <= 10) {
            return "Menos de 10 minutos";
        } else {
            return "Más de 10 minutos";
        }
    }

    function LetraoNumeroMicro(cadena, flag) {
        if (!cadena || (flag !== 0 && flag !== 1)) {
            return "Error: Entrada no válida";
        }

        // Extraer el número y la letra
        let numero = "";
        let letra = "";
        let i = 0;
        // Caso en el que la cadena tenga un numero primero
        if (!isNaN(parseInt(cadena[i]))) {
            // Obtener el número
            while (i < cadena.length && !isNaN(parseInt(cadena[i]))) {
                numero += cadena[i];
                i++;
            }

            // Obtener la letra (si hay)
            while (i < cadena.length) {
                letra += cadena[i];
                i++;
            }

            if (flag === 0) {
                return numero ? numero : "Error: No se encontró un número";
            } else if (flag === 1) {
                return letra ? letra : "Error: No se encontró una letra";
            }
        } else {
            // Obtener la letra (si hay)
            while (i < cadena.length && isNaN(parseInt(cadena[i]))) {
                letra += cadena[i];
                i++;
            }

            // Obtener el número
            while (i < cadena.length) {
                numero += cadena[i];
                i++;
            }

            if (flag === 1) {
                return numero ? numero : "Error: No se encontró un número";
            } else if (flag === 0) {
                return letra ? letra : "Error: No se encontró una letra";
            }
        }
    }
</script>

<svelte:head>
    <title>Transformación digital: Paradero</title>
    <meta
        name="description"
        content="TRANSFORMACIÓN DIGITAL DEL TRANSPORTE EN GRAN CONCEPCIÓN"
    />
</svelte:head>

<div class="contenedor">
    <div class="rectangulo-naranja">
        <img src={ImagenBus} alt="Bus" width="200" />
        <div class="nombre-paradero">{nombreParadero}</div>
    </div>

    <div class="rectangulo-gris">Buses que se detienen en esta parada</div>

    <div class="cuadricula">
        {#if paraderoData?.DetalleLineas}
            {#each paraderoData.DetalleLineas as linea}
                <div class="rectangulo-pequeno">
                    <div style="position: relative;">
                        <div class="numero-micro">
                            {LetraoNumeroMicro(linea.Descripcion, 0)}
                        </div>
                        <div
                            class="circulo-letra"
                            style="background-color: #{linea.colorFondo ||
                                '#5fbabe'}"
                        >
                            {LetraoNumeroMicro(linea.Descripcion, 1)}
                        </div>
                    </div>
                    <div
                        class="hora"
                        style="background-color: #{linea.colorFondo ||
                            '#5fbabe'}"
                    >
                        <div>{linea.Linea}</div>
                        {#if linea.Llegadas[0]?.EstimadaGPS}
                            {formatTimeMinutes(linea.Llegadas[0])}
                            ({linea.Llegadas[0].patente})
                        {:else}
                            Sin información
                        {/if}
                    </div>
                </div>
            {/each}
        {:else}
            <p>Cargando datos...</p>
        {/if}
    </div>
</div>

<style>
    /* Estilos generales */
    .contenedor {
        width: 800px;
        margin: 5rem auto; /* Centra el contenedor en la pantalla */
    }

    .rectangulo-naranja {
        background-color: #ffa976;
        border-radius: 20px 20px 0 0;
        padding: 20px;
        display: flex;
        align-items: center;
    }

    .nombre-paradero {
        font-size: 28px;
        font-weight: bold;
        color: #fff;
        margin-right: 10px;
        margin-left: 120px;
    }

    .rectangulo-gris {
        background-color: #8c8b8d;
        padding-left: 20px;
        color: #fff;
    }

    .cuadricula {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);
        gap: 5px;
        margin-top: 10px;
    }

    .rectangulo-pequeno {
        position: relative;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        min-height: 120px;
        border: 1px solid #000000;
        overflow: hidden;
    }

    .numero-micro {
        font-size: 60px;
        font-weight: bold;
        margin-right: 100px;
        color: #8c8b8d;
    }

    .circulo-letra {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        font-weight: bold;
        color: #fff;
        position: absolute;
        top: 25px;
        right: 10px;
    }

    .hora {
        margin-top: 5px;
        background-color: #2196f3;
        color: #fff;
        width: 266px;
    }
</style>
