<script lang="ts">
	import type { ApiStationsBoard } from '@owlboard/owlboard-ts';
    import { formatUkTime, estClass, calculateDelay } from '$lib/utils/time';

	let { services }: { services: ApiStationsBoard.BoardService[] } = $props();

	const getRowKey = (s: ApiStationsBoard.BoardService) =>
		`${s.r}${s.sta ?? ''}${s.std ?? ''}${s.wtp ?? ''}`;
</script>

<div class="table-container">
	<table class="departure-board">
		<thead>
            <tr>
                <th colspan="4" aria-hidden="true"></th>
                <th scope="colgroup" colspan="2" class="upper-head"><abbr title="Arrival">Arr</abbr></th>
                <th scope="colgroup" colspan="2" class="upper-head"><abbr title="Departure">Dep</abbr></th>
                <th aria-hidden="true"></th>
            </tr>
			<tr>
				<th scope="col"><abbr title="Headcode">ID</abbr></th>
				<th scope="col"><abbr title="Origin">Orig</abbr></th>
				<th scope="col"><abbr title="Destination">Dest</abbr></th>
				<th scope="col"><abbr title="Platform">Plt</abbr></th>
				<th scope="col"><abbr title="Scheduled">Sch</abbr></th>
				<th scope="col"><abbr title="Actual/Expected">Act</abbr></th>
                <th scope="col"><abbr title="Scheduled">Sch</abbr></th>
				<th scope="col"><abbr title="Actual/Expected">Act</abbr></th>
                <th scope="col"><abbr title="+/- Time">+/-</abbr></th>
			</tr>
		</thead>

        {#each services as service (getRowKey(service))}
            <tbody>
                <tr class="service-row" class:serviceCancelled={service.c}>
                    <td class="id-cell">{service.h}</td>
                    <td class="orig-cell">{service.og.t}</td>
                    <td class="dest-cell">{service.dt.t}</td>
                    <td class="plt-cell" class:platSup={service.ps} class:platChange={service.pc}>{service.p}</td>

                    <!-- Handle different display for a passing train -->
                    {#if service.wtp}
                      <td colspan="2">Pass</td>
                      <td class="time-cell">{formatUkTime(service.wtp)}</td>
                      <td class="time-cell {estClass(service.atp, service.etp)}">{formatUkTime(service.atp || service.etp)}</td>
                    {:else}
                      <td class="time-cell">{formatUkTime(service.sta)}</td>
                      <td class="time-cell {estClass(service.ata, service.eta)}">{formatUkTime(service.ata || service.eta)}</td>
                      <td class="time-cell">{formatUkTime(service.std)}</td>
                      <td class="time-cell {estClass(service.atd, service.etd)}">{formatUkTime(service.atd || service.etd)}</td>
                    {/if}

                        {#if service}
                            {@const delay = calculateDelay(service)}
							<td class="delay-cell delay-{delay.type}">{delay.val}</td>
                        {/if}
                </tr>

                {#if service.c && service.cr?.r}
                <tr>
                    <td colspan="9">{service.cr.r}</td>
                </tr>
                {/if}
            </tbody>
        {/each}

	</table>
</div>

<style>
    .table-container {
        width: 100%;
    }
    .departure-board {
        width: 100%;
        margin: 0 auto;
        font-family: 'URW Gothic', sans-serif;
        font-variant-numeric: tabular-nums;
    }
    .serviceCancelled {
        text-decoration: line-through;
    }
    .id-cell{
        font-family:'Courier New', Courier, monospace;
        text-align: center;
    }
    .orig-cell, .dest-cell {
        color: var(--location-yellow);
    }
    .orig-cell {
        text-align: left;
    }
    .dest-cell {
        text-align: right;
    }
    .plt-cell {
        text-align: center;
    }
    .platChange {
        animation: 2s fast-pulse ease-in-out infinite;
    }
    .platSup {
        filter: opacity(0.5);
    }
    .time-cell {
        text-align: center;
    }
    .delay-cell {
        text-align: center;
    }
    .delay-late {
        color: var(--delay-orange);
    }
    .delay-early {
        color: var(--early-blue);
    }
</style>