<script lang="ts">
	import RouteRow from '$lib/components/RouteRow.svelte';
	import RouteEndLink from '$lib/components/mapIcons/RouteEndLink.svelte';
	import { slide } from 'svelte/transition';

	// data.route contains: routeStart, routeEnd, routeId, elecStart, elecEnd, routeDetail[]
	export let data;

	let reversed = false; // Reverses Array, and passes value down to children

	let visibleTypes = {
		station: true,
		bridge: true,
		crossovers: true,
		loop: true,
		signallerChange: true,
		electrificationChange: true,
		siteof: true,
		junction: true,
		tunnel: true
	};

	let showFilters = false;

	// Toggle feature types
	const toggleFilter = (type: string) => {
		visibleTypes[type] = !visibleTypes[type];
		visibleTypes = visibleTypes;
	};

	// Helper to prettify 'types'
	const formatLabel = (str: string) =>
		str.replace(/([A-Z])/g, ' $1').replace(/^./, (s) => s.toUpperCase());

	$: processedFeatures = (() => {
		const list = reversed ? [...data.route.routeDetail].reverse() : [...data.route.routeDetail];

		// Seed currentElec from the YAML header boundary
		let currentElec = reversed ? data.route.elecEnd.elec : data.route.elecStart.elec;

		return list.map((f) => {
			if (f.type === 'electrificationChange') {
				// Transition state: this tile and everything after it
				// adopts the new electrification.
				currentElec = reversed ? f.from.elec : f.to.elec;
			}

			return {
				...f,
				activeElec: currentElec
			};
		});
	})();

	$: filteredFeatures = processedFeatures.filter((f) => {
		return visibleTypes[f.type] ?? true;
	});
</script>

<div class="map-layout">
<header class="top-nav">
    <div class="nav-cluster">
        <a href="/" class="home-link" title="Back to Index">
            <span class="home-icon">⌂</span>
        </a>
        
        <div class="route-stack">
            {#if data?.route}
                <h1 class="primary-station">
                    {reversed ? data.route.routeEnd : data.route.routeStart}
                </h1>
                <span class="secondary-station">
                    to {reversed ? data.route.routeStart : data.route.routeEnd}
                </span>
            {/if}
        </div>
    </div>

    <div class="quick-actions">
        <button class="icon-btn" on:click={() => (reversed = !reversed)}>
            ⇄ {reversed ? 'UP' : 'DN'}
        </button>
        <button class="icon-btn" on:click={() => (showFilters = !showFilters)}> Settings </button>
    </div>
</header>

	{#if showFilters}
		<div class="backdrop" on:click={() => (showFilters = false)}></div>

		<div class="filter-drawer" transition:slide>
			<div class="drawer-header">
				<h3>Visibility Filters</h3>
				<button class="close-icon" on:click={() => (showFilters = false)} aria-label="Close">
					<svg
						viewBox="0 0 24 24"
						width="20"
						height="20"
						fill="none"
						stroke="currentColor"
						stroke-width="2.5"
					>
						<path d="M18 6L6 18M6 6l12 12" stroke-linecap="round" stroke-linejoin="round" />
					</svg>
				</button>
			</div>

			<div class="drawer-content">
				<div class="filter-flex">
					{#each Object.keys(visibleTypes) as type}
						<button
							class="filter-chip"
							class:active={visibleTypes[type]}
							on:click={() => toggleFilter(type)}
						>
							{formatLabel(type)}
						</button>
					{/each}
				</div>
			</div>
		</div>
	{/if}

	<main class="map-spine">
		<div class="container">
			{#each filteredFeatures as f, i (`${f.type}-${f.miles}-${f.chains}-${i}`)}
				{#if f.type === 'continues'}
					<RouteEndLink feature={f} />
				{:else}
					<RouteRow feature={f} activeElec={f.activeElec} {reversed} />
				{/if}
			{/each}
		</div>
	</main>
</div>

<style>
	.map-layout {
		display: flex;
		flex-direction: column;
		background: #ffffff;
		min-height: 100vh;
		margin-top: 0;
		padding-top: 0;
	}

.top-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.5rem 1rem;
        background: #0f172a;
        color: white;
        gap: 1rem;
    }

    .nav-cluster {
        display: flex;
        align-items: center;
        gap: 1rem;
        min-width: 0; /* Prevents flex children from overflowing */
    }

    .home-link {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        background: #1e293b;
        border: 1px solid #334155;
        border-radius: 8px;
        color: #94a3b8;
        text-decoration: none;
        font-size: 1.2rem;
        flex-shrink: 0; /* Keeps button from squishing on mobile */
    }

    .home-link:hover {
        background: #334155;
        color: white;
        border-color: #475569;
    }

    .route-stack {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .primary-station {
        font-size: 1rem;
        font-weight: 800;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .secondary-station {
        font-size: 0.7rem;
        color: #94a3b8;
        text-transform: uppercase;
        font-weight: 600;
    }

    .quick-actions {
        display: flex;
        gap: 0.5rem;
    }

    .icon-btn {
        background: #1e293b;
        border: 1px solid #334155;
        color: white;
        padding: 0.4rem 0.6rem;
        border-radius: 6px;
        font-size: 0.75rem;
        font-weight: bold;
        cursor: pointer;
        white-space: nowrap;
    }

	.map-spine {
		padding-top: 72px;
	}

	.secondary-station {
		font-size: 0.85rem;
		font-weight: 500;
		color: #64748b;
		letter-spacing: 0.025em;
		margin-top: 2px;
	}

	@media (min-width: 768px) {
		.primary-station {
			font-size: 1.5rem;
		}
		.secondary-station {
			font-size: 1rem;
		}

		.top-nav {
			padding: 0 2rem;
			height: 90px;
		}

		.map-spine {
			padding-top: 90px;
		}

		h1 {
			font-size: 1.5rem;
			letter-spacing: -0.03em;
		}
	}

	.container {
		width: 100%;
		max-width: 500px;
		margin: 0 auto;
		padding-top: 1rem;
	}

	.backdrop {
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.4);
		z-index: 150;
	}

	.filter-drawer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: white;
		z-index: 200;
		border-radius: 20px 20px 0 0;
		box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.15);
		/* Ensure it handles iOS home bar spacing */
		padding-bottom: env(safe-area-inset-bottom, 1rem);
	}

	.drawer-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 1.25rem 1.5rem 0.75rem;
		border-bottom: 1px solid #f1f5f9;
	}

	.drawer-header h3 {
		margin: 0;
		font-size: 1rem;
		color: #1e293b;
	}

	.close-icon {
		background: #f1f5f9;
		border: none;
		border-radius: 50%;
		width: 32px;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		color: #64748b;
	}

	.drawer-content {
		padding: 1.25rem 1.5rem;
	}

	.filter-flex {
		display: flex;
		flex-wrap: wrap;
		gap: 0.75rem;
	}

	.filter-chip {
		padding: 0.5rem 1rem;
		border-radius: 999px;
		border: 1px solid #e2e8f0;
		background: #f8fafc;
		font-size: 0.875rem;
		cursor: pointer;
		transition: all 0.2s;
	}

	.filter-chip.active {
		background: #1e293b;
		color: white;
		border-color: #1e293b;
	}

	.quick-actions {
		display: flex;
		gap: 0.5rem;
		flex-shrink: 0;
	}

	.icon-btn {
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
		padding: 0.5rem 0.8rem;
		border-radius: 12px;
		border: 1px solid #e2e8f0;
		background: #f8fafc;
		color: #475569;
		font-size: 0.75rem;
		font-weight: 700;
		cursor: pointer;
		transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
		text-transform: uppercase;
		letter-spacing: 0.02em;
	}

	.icon-btn:hover {
		background: #f1f5f9;
		border-color: #cbd5e1;
		color: #1e293b;
	}

	.icon-btn:active {
		transform: scale(0.96);
	}
</style>
