<script>
    import ImagenBus from "$lib/images/logo-autobus.png";
    import { onMount } from "svelte";
    const { VITE_REFRESH_DATA: segundosRefresca } = import.meta.env || {};

    // export let data;
    let nombreParadero = null;
    let paraderoData = null;
    let timeRefresh = null

    onMount(() => {
        const url = new URL(document.location.href)
        const id = url.searchParams.get('id');
        init({ id, origin: url.origin })
        
        return () => {
            console.log('unmount')
            timeRefresh && clearTimeout(timeRefresh)
        }
    })


    async function init({ id, origin }) {
        const result = await fetchData(`${origin}/api/paradero?id=${id}`);
        nombreParadero = result.GetInfoDeviceResponse.NombreParadero;
        paraderoData = result.GetInfoDeviceResponse;

        timeRefresh = setTimeout(() => init({ id, origin }), +segundosRefresca * 1000);
    }


    async function fetchData(url) {
        try {
            const res = await fetch(url);
            if (!res.ok) throw await res.text()
            return await res.json()
        } catch (error) {
            console.log({ error })
            return null;
        }
    }

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

    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" style="max-width: 200px; width: 30%;" />
        <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" style="background-color: #{linea.colorFondo || '#5fbabe'}">
                    <div style="position: relative; background-color: #fff;">
                        <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">
                        <div>{linea.Linea}</div>
                        {#if linea.Llegadas[0]?.EstimadaGPS}
                         <!--   {formatTimeMinutes(linea.Llegadas[0])} -->
                            {linea.Llegadas[0].textoLlegada}
                            ({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;
        max-width: 90%;
        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;
        text-align: center;
    }

    .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;
        padding-left: 10px;
    }

    .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: 20px;
    }

    .hora {
        margin-top: 5px;
        color: #fff;
        width: 100%;
    }

    @media (max-width: 600px) {
        .nombre-paradero { font-size: 20px; }
        .numero-micro { font-size: 35px }
        .circulo-letra { width: 35px; height: 35px; top: 10px; right: 10px; }
        .hora { font-size: 12px; }
    }
</style>
