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

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

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

<table class="departure-board">
	<colgroup>
		<col style="width:10%;" />
		<!-- ID (Headcode) -->
		<col style="width:17%;" />
		<!-- ORIG (Origin) -->
		<col style="width:17%;" />
		<!-- DEST (Destination) -->
		<col style="width:9%;" />
		<!-- PLT (Platform) -->
		<col style="width: 12%;" />
		<!-- STA -->
		<col style="width: 12%;" />
		<!-- ETA/ATA -->
		<col style="width: 12%;" />
		<!-- STD -->
		<col style="width: 11%;" />
		<!-- ETD/ATD -->
	</colgroup>
	<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>
		</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>
		</tr>
	</thead>

	{#each services as service (getRowKey(service))}
		<tbody>
			<tr
				in:fade={{duration: 150, delay:150}}
				out:fade={{duration:150}}
				class="service-row"
				class:serviceCancelled={service.c}
				class:servicePass={service.wtp}
				class:serviceNonPassenger={!service.ip}
			>
				<td class="id-cell">{service.h}</td>
				<td class="orig-cell"
					><abbr title={service.og.n.toLocaleUpperCase()}>{service.og.t}</abbr></td
				>
				<td class="dest-cell"
					><abbr title={service.dt.n.toLocaleUpperCase()}>{service.dt.t}</abbr></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 class="pass-cell" colspan="2">Pass</td>
					<td class="time-cell">{formatUkTime(service.wtp)}</td>
					<!-- If cancelled, show '-', otherwise check for RT or show time -->
					<td
						class="time-cell {estClass(service.atp, service.etp)} {delayClassFromTimePair(
							service.wtp,
							service.atp || service.etp
						)}"
					>
						<span>
							{service.c
								? '-'
								: delayClassFromTimePair(service.wtp, service.atp || service.etp) === 'delay-rt'
									? 'RT'
									: formatUkTime(service.atp || service.etp)}
						</span>
					</td>
				{:else}
					<td class="time-cell">{formatUkTime(service.sta)}</td>

					<!-- Arrival Actual/Expected -->
					<td
						class="time-cell {estClass(service.ata, service.eta)} {delayClassFromTimePair(
							service.sta,
							service.ata || service.eta
						)}"
					>
						<span>
							{service.c
								? '-'
								: delayClassFromTimePair(service.sta, service.ata || service.eta) === 'delay-rt'
									? 'RT'
									: formatUkTime(service.ata || service.eta)}
						</span>
					</td>

					<td class="time-cell">{formatUkTime(service.std)}</td>

					<!-- Departure Actual/Expected -->
					<td
						class="time-cell {estClass(service.atd, service.etd)} {delayClassFromTimePair(
							service.std,
							service.atd || service.etd
						)}"
					>
						<span>
							{service.c
								? '-'
								: delayClassFromTimePair(service.std, service.atd || service.etd) === 'delay-rt'
									? 'RT'
									: formatUkTime(service.atd || service.etd)}
						</span>
					</td>
				{/if}
			</tr>

			{#if service.o}
				<tr class="toc-coach-row" in:fade={{ duration: 150, delay: 150 }} out:fade={{ duration: 150 }}>
					<td colspan="8">
						{service.o}
					</td>
				</tr>
			{/if}
			{#if service.c && service.cr?.r}
				<tr class="cancel-row" in:fade={{ duration: 150, delay: 150 }} out:fade={{ duration: 150 }}>
					<td colspan="8">
						{service.cr.r}
						{#if service.cr.l}
							{service.cr.n ? 'near' : 'at'}
							{service.cr.l}
						{/if}
					</td>
				</tr>
			{/if}
			{#if service.dr?.r}
				<tr class="delay-row" in:fade={{ duration: 150, delay: 150 }} out:fade={{ duration: 150 }}>
					<td colspan="9">
						{service.dr.r}
						{#if service.dr.l}
							{service.dr.n ? 'near' : 'at'}
							{service.dr.l}
						{/if}
					</td>
				</tr>
			{/if}
		</tbody>
	{/each}
</table>

<style>
	.departure-board {
		width: 100%;
		margin: 5px auto;
		border-collapse: collapse;
		table-layout: fixed;
	}

	.departure-board td {
		font-family: 'Inconsolata Variable', monospace;
		font-size: clamp(1rem, 0.475rem + 2.8vw, 1.35rem);
		font-variant-ligatures: additional-ligatures;
		overflow: hidden;
	}

	thead,
	.cancel-row td,
	.delay-row td {
		letter-spacing: -0.15ch;
	}

	thead {
		position: sticky;
		top: 0;
		z-index: 2;
		background: var(--color-bg-dark);
	}

	abbr {
		text-decoration: none;
		border-bottom: none;
		cursor: help;
	}

	tbody tr:first-child td {
		border-top: 5px solid transparent;
	}

	/* Row Logic */
	.serviceCancelled {
		color: rgb(255, 131, 131);
	}

	.servicePass td {
		opacity: 0.75;
		font-weight: 200;
	}

	.serviceNonPassenger td {
		opacity: 0.5;
		font-weight: 290;
		font-style: italic;
	}

	/* Special Row Styles */
	.cancel-row td,
	.delay-row td {
		font-size: 0.88rem;
		text-align: left;
	}

	.cancel-row td[colspan],
	.delay-row td[colspan] {
		padding-left: 0ch;
	}

	.cancel-row td {
		color: rgb(255, 131, 131);
		font-weight: 400;
	}

	.delay-row td {
		color: var(--delay-orange);
		font-style: italic;
	}
	@media (min-width: 375px) {
		.cancel-row td,
		.delay-row td {
			font-size: 1.08rem;
		}
	}
	@media (min-width: 420px) {
		.cancel-row td,
		.delay-row td {
			font-size: 1.12rem;
		}
	}
	@media (min-width: 550px) {
		.cancel-row td,
		.delay-row td {
			font-size: 1.18rem;
		}
	}
	@media (min-width: 620px) {
		.cancel-row td,
		.delay-row td {
			font-size: 1.2rem;
		}
	}

	.toc-coach-row td {
		font-family: 'URW Gothic', sans-serif;
		font-size: 0.7rem;
		padding: 0;
		color: rgb(187, 187, 255);
	}
	@media (min-width: 400px) {
		.toc-coach-row td {
			font-size: 0.8rem;
		}
	}
	@media (min-width: 550px) {
		.toc-coach-row td {
			font-size: 0.85rem;
		}
	}

	/* Column Specifics */
	.id-cell {
		text-align: left;
		font-weight: 400;
		font-stretch: 85%;
		filter: brightness(0.75);
	}
	@media (min-width: 400px) {
		.id-cell {
			font-stretch: 90%;
		}
	}
	.orig-cell,
	.dest-cell {
		font-stretch: 80%;
		font-weight: 400;
	}
	.orig-cell {
		text-align: left;
		color: var(--location-yellow);
	}
	.dest-cell {
		text-align: right;
		color: var(--location-yellow);
	}
	@media (min-width: 350px) {
		.orig-cell,
		.dest-cell {
			font-stretch: 85%;
		}
		@media (min-width: 400px) {
			.orig-cell,
			.dest-cell {
				font-stretch: 90%;
			}
		}
		@media (min-width: 490px) {
			.orig-cell,
			.dest-cell {
				font-stretch: 95%;
			}
		}
		@media (min-width: 520px) {
			.orig-cell,
			.dest-cell {
				font-stretch: 100%;
			}
			.orig-cell {
				text-align: right;
				padding-right: 7px;
			}
			.dest-cell {
				text-align: left;
				padding-left: 7px;
			}
		}
		@media (min-width: 600px) {
			.orig-cell,
			.dest-cell {
				letter-spacing: 0.05ch;
			}
		}
	}
	.plt-cell {
		text-align: center;
		font-weight: 410;
		font-stretch: 100%;
	}
	@media (min-width: 525px) {
		.plt-cell {
			font-stretch: 110%;
		}
	}
	.plt-cell.platSup {
		font-weight: 200;
		opacity: 0.3;
	}
	.plt-cell.platChange {
		animation: fast-pulse 2s ease-out infinite;
	}
	.service-row.serviceCancelled .plt-cell {
		text-decoration: line-through;
	}
	.pass-cell {
		text-align: center;
		font-stretch: 100%;
	}
	/* Colour orig and dest values when cancelled */
	.service-row.serviceCancelled .orig-cell,
	.service-row.serviceCancelled .dest-cell {
		color: rgb(255, 131, 131);
	}

	.time-cell {
		text-align: center;
		font-stretch: 72%;
	}
	@media (min-width: 350px) {
		.time-cell {
			font-stretch: 77%;
		}
	}
	@media (min-width: 400px) {
		.time-cell {
			font-stretch: 82%;
		}
	}
	@media (min-width: 525px) {
		.time-cell {
			font-stretch: 90%;
		}
	}
	@media (min-width: 600px) {
		.time-cell {
			font-stretch: 100%;
		}
	}

	/* RT Logic */
	.time-cell.delay-rt span {
		display: none;
	}
	.time-cell.delay-rt::after {
		content: 'RT';
	}

	.time-cell.delay-early {
		color: var(--early-blue);
	}

	.time-cell.delay-late {
		color: var(--delay-orange);
	}

	/* Time Types */
	.est {
		font-style: italic;
		opacity: 0.75;
		font-weight: 350;
	}
	.act {
		font-weight: 600;
	}
</style>
