Components #

<script lang="ts">
	import WeatherForecast from './WeatherForecast.svelte';
	import TideForecast from './TideForecast.svelte';
	import MoonForecast from './MoonForecast.svelte';
	import type {
		ForecastType,
		IconSet,
		LocationInput,
		TideUnit,
		WeatherUnit,
		WeatherBackground
	} from '$lib/data/types.js';

	let {
		interactive = false,
		timeZone,
		type = 'summary',
		size = 'default',
		density = 'comfortable',
		weatherUnit = 'fahrenheit',
		windUnit = 'mph',
		tideUnit = 'ft',
		iconType,
		background = 'none',
		showTemperatureTrend = false,
		showHighLow = false,
		currentWeather,
		hourlyForecast,
		tideLocation,
		location = {
			label: 'Austin, TX',
			latitude: 30.2672,
			longitude: -97.7431,
			timeZone: 'America/Chicago'
		}
	}: {
		interactive?: boolean;
		timeZone?: string;
		type?: ForecastType;
		size?: 'sm' | 'default' | 'lg';
		density?: 'compact' | 'comfortable';
		weatherUnit?: WeatherUnit;
		windUnit?: 'mph' | 'km/h' | 'm/s' | 'knots';
		tideUnit?: TideUnit;
		iconType?: IconSet;
		background?: WeatherBackground;
		showTemperatureTrend?: boolean;
		showHighLow?: boolean;
		hourlyForecast?: import('$lib/data/types.js').WeatherPeriod[];
		currentWeather?: import('$lib/data/types.js').CurrentWeather | null;
		location?: LocationInput;
		tideLocation?: LocationInput;
	} = $props();
</script>

<div class="@container/dashboard w-full">
	<div
		class="grid items-start gap-4 @min-[38rem]/dashboard:grid-cols-2 @min-[52rem]/dashboard:grid-cols-3"
	>
		<div class="min-w-0 @min-[38rem]/dashboard:col-span-2 @min-[52rem]/dashboard:col-span-1">
			<WeatherForecast
				{interactive}
				{timeZone}
				{type}
				{size}
				{density}
				unit={weatherUnit}
				{windUnit}
				{iconType}
				{location}
				{background}
				{showTemperatureTrend}
				{showHighLow}
				{currentWeather}
				{hourlyForecast}
			/>
		</div>
		<TideForecast
			{interactive}
			{timeZone}
			{type}
			{size}
			{density}
			unit={tideUnit}
			{iconType}
			location={tideLocation}
		/>
		<MoonForecast {interactive} {timeZone} {type} {size} {density} {iconType} {location} />
	</div>
</div>

<script lang="ts">
	import { onMount, type Snippet } from 'svelte';
	import * as Card from '$lib/components/ui/card/index.js';
	import { getSkyState } from '$lib/data/sky.js';
	import ForecastScreens from './ForecastScreens.svelte';
	import { forecastDays, forecastDayNoon, type ForecastDay } from '$lib/data/forecast-days.js';
	import ForecastIcon from '$lib/components/icons/forecast-icons.svelte';
	import WeatherShaderBackground, {
		type WeatherShaderMode
	} from './WeatherShaderBackground.svelte';
	import type {
		ForecastType,
		IconSet,
		LocationInput,
		WeatherPeriod,
		CurrentWeather,
		WeatherUnit,
		WeatherBackground
	} from '$lib/data/types.js';
	import { sampleWeather, sampleCurrentWeather, convertWindSpeed } from '$lib/data/weather.js';
	import { weatherOutlook, weatherDayHigh } from '$lib/data/weather-outlook.js';
	let {
		interactive = false,
		timeZone,
		type = 'summary',
		size = 'default',
		density = 'comfortable',
		class: className = '',
		unit = 'fahrenheit',
		iconType,
		location = {
			label: 'Austin, TX',
			latitude: 30.2672,
			longitude: -97.7431,
			timeZone: 'America/Chicago'
		},
		forecast = sampleWeather,
		hourlyForecast = [],
		currentWeather = forecast === sampleWeather ? sampleCurrentWeather : null,
		showTemperatureTrend = false,
		showHighLow = false,
		at,
		sourceLabel = forecast === sampleWeather ? 'Sample forecast' : '',
		windUnit = 'mph',
		background = 'none'
	}: {
		interactive?: boolean;
		timeZone?: string;
		type?: ForecastType;
		size?: 'sm' | 'default' | 'lg';
		density?: 'compact' | 'comfortable';
		class?: string;
		unit?: WeatherUnit;
		iconType?: IconSet;
		location?: LocationInput;
		forecast?: WeatherPeriod[];
		hourlyForecast?: WeatherPeriod[];
		currentWeather?: CurrentWeather | null;
		showTemperatureTrend?: boolean;
		showHighLow?: boolean;
		at?: number;
		sourceLabel?: string;
		windUnit?: 'mph' | 'km/h' | 'm/s' | 'knots';
		background?: WeatherBackground;
	} = $props();
	let visitorTimeZone = $state('UTC');
	onMount(() => {
		visitorTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
	});
	const displayTimeZone = $derived(timeZone ?? location.timeZone ?? visitorTimeZone);
	let clock = $state(Date.now());
	onMount(() => {
		const timer = setInterval(() => {
			clock = Date.now();
		}, 60000);
		return () => clearInterval(timer);
	});
	const effectiveTime = $derived(
		at ?? (forecast === sampleWeather ? Date.parse(sampleCurrentWeather.observedAt) : clock)
	);
	const currentSky = $derived(getSkyState(location.latitude, location.longitude, effectiveTime));
	const current = $derived(
		currentWeather && currentSky
			? { ...currentWeather, isDaytime: currentSky.isDaytime }
			: currentWeather
	);
	const outlook = $derived(weatherOutlook(current, forecast, unit, displayTimeZone, effectiveTime));
	const periods = $derived(
		forecast.slice(0, type === 'detailed' ? 8 : density === 'compact' ? 3 : 5)
	);
	function temperature(p: WeatherPeriod) {
		return Math.round(
			unit === 'celsius' && p.temperatureUnit === 'F'
				? ((p.temperature - 32) * 5) / 9
				: unit === 'fahrenheit' && p.temperatureUnit === 'C'
					? (p.temperature * 9) / 5 + 32
					: p.temperature
		);
	}
	function condition(p: WeatherPeriod): WeatherShaderMode {
		const s = p.shortForecast.toLowerCase();
		if (/thunder|storm/.test(s)) return 'thunderstorm';
		if (/sleet|freezing|wintry/.test(s)) return 'wintry-mix';
		if (/snow/.test(s)) return s.includes('heavy') ? 'heavy-snow' : 'snow';
		if (/drizzle/.test(s)) return p.isDaytime ? 'drizzle' : 'drizzle-night';
		if (/rain|shower/.test(s)) return s.includes('heavy') ? 'heavy-rain' : 'rain';
		if (/fog/.test(s)) return 'fog';
		if (/haze|smoke/.test(s)) return 'haze';
		if (/partly|mostly sunny/.test(s)) return p.isDaytime ? 'partly-cloudy' : 'partly-cloudy-night';
		if (/cloud|overcast/.test(s)) return 'cloudy';
		if (/wind|breezy/.test(s)) return 'wind';
		return p.isDaytime ? 'clear' : 'clear-night';
	}
	function icon(p: WeatherPeriod) {
		const c = condition(p);
		return c.includes('rain') || c.includes('drizzle') || c === 'thunderstorm'
			? 'rain'
			: c.includes('snow') || c === 'wintry-mix'
				? 'snow'
				: c.includes('night')
					? 'moon'
					: c === 'clear'
						? 'sun'
						: 'weather';
	}
	const days = $derived(
		forecastDays(
			forecast.map((p) => ({
				time: Date.parse(p.startTime),
				label: p.name,
				summary: `${temperature(p)}° · ${p.shortForecast}`,
				details: `${p.detailedForecast || p.shortForecast} Wind: ${p.windDirection} ${convertWindSpeed(p.windSpeed, windUnit)}.`
			})),
			displayTimeZone
		)
	);

	function dayPeriods(day: ForecastDay) {
		return forecast
			.filter((period) => day.entries.some((entry) => entry.time === Date.parse(period.startTime)))
			.toSorted((a, b) => Date.parse(a.startTime) - Date.parse(b.startTime));
	}
	function dayHours(day: ForecastDay) {
		const date = new Intl.DateTimeFormat('en-CA', {
			timeZone: displayTimeZone,
			year: 'numeric',
			month: '2-digit',
			day: '2-digit'
		});
		return hourlyForecast
			.filter(
				(p) =>
					Number.isFinite(Date.parse(p.startTime)) && date.format(new Date(p.startTime)) === day.key
			)
			.toSorted((a, b) => Date.parse(a.startTime) - Date.parse(b.startTime));
	}
	function heroPeriod(day: ForecastDay) {
		const values = dayPeriods(day);
		return values.find((period) => period.isDaytime) ?? values[0];
	}
</script>

{#snippet cardView(
	day: ForecastDay | undefined,
	action: Snippet<[boolean]>,
	overviewVisible: boolean,
	openDay: (time: string, trigger: HTMLElement) => void
)}
	{@const view = day ? heroPeriod(day) : current}
	{@const displayedPeriods = day ? dayPeriods(day) : periods}
	{@const sky =
		day && view
			? getSkyState(
					location.latitude,
					location.longitude,
					forecastDayNoon(day.key, displayTimeZone)
				)
			: currentSky}
	{@const skyMode = view
		? condition(day && sky ? { ...view, isDaytime: sky.isDaytime } : view)
		: 'clear'}
	<div
		class={`${day ? 'contents' : 'relative isolate overflow-hidden'} ${background === 'realistic' && view ? 'text-white' : 'text-card-foreground'}`}
	>
		{#if background === 'realistic' && view}
			<div class="pointer-events-none absolute inset-0 -z-10" aria-hidden="true">
				<WeatherShaderBackground mode={skyMode} {sky} paused={!overviewVisible} />
			</div>
			<div
				class="pointer-events-none absolute inset-0 -z-10 bg-linear-to-b from-black/35 via-black/15 to-black/55"
				aria-hidden="true"
			></div>
		{/if}
		<Card.Header class="relative pt-(--card-spacing)">
			<Card.Title class="min-w-0 truncate">{day?.label ?? 'Weather'}</Card.Title>
			<Card.Description
				class={`truncate ${background === 'realistic' && view ? 'text-white/80' : ''}`}
				>{location.label ?? 'Local forecast'}</Card.Description
			>
			{@render action(background === 'realistic' && !!view)}
		</Card.Header>
		<Card.Content class="relative grid min-w-0 shrink-0 grid-cols-1 gap-5 py-(--card-spacing)">
			{#if view}
				<div class="min-w-0">
					<p
						class={`mb-2 text-xs ${background === 'realistic' ? 'text-white/75' : 'text-muted-foreground'}`}
					>
						{day ? (view.isDaytime ? 'Daytime' : 'Overnight') : 'Now'}
					</p>
					<p
						style="font-size:clamp(2.5rem,18cqw,5rem)"
						class="leading-none font-medium tracking-tighter tabular-nums"
					>
						{temperature(view)}<span class="align-top text-2xl">°</span>
					</p>
					<p
						class="mt-3 line-clamp-2 min-h-10 text-sm wrap-break-word"
						title={day ? view.shortForecast : undefined}
					>
						{view.shortForecast}
					</p>
					{#if !day && showTemperatureTrend && outlook.trend}<p
							class="mt-2 text-sm"
							data-slot="temperature-trend"
						>
							{outlook.trend}
						</p>{/if}
					{#if !day && showHighLow}<div
							class="mt-3 flex gap-4 text-sm tabular-nums"
							data-slot="temperature-range"
						>
							{#if outlook.high !== null}<span aria-label={`High ${outlook.high} degrees`}
									><ForecastIcon name="arrowUp" iconSet={iconType} class="inline size-3.5" />
									{outlook.high}°</span
								>{/if}
							{#if outlook.low !== null}<span aria-label={`Low ${outlook.low} degrees`}
									><ForecastIcon name="arrowDown" iconSet={iconType} class="inline size-3.5" />
									{outlook.low}°</span
								>{/if}
						</div>{/if}
				</div>
				<div class="flex flex-wrap items-center justify-between gap-3 text-xs">
					<span class="flex items-center gap-2 opacity-80"
						><ForecastIcon name="wind" iconSet={iconType} class="size-4" />Wind</span
					>
					<span class="tabular-nums"
						>{view.windDirection} {convertWindSpeed(view.windSpeed, windUnit)}</span
					>
				</div>
			{:else}<p role="status" class="py-8 text-center text-sm text-muted-foreground">
					Current conditions unavailable.
				</p>{/if}
			{#if !day && type === 'simple' && sourceLabel}<p
					class={`text-[10px] ${background === 'realistic' && view ? 'text-white/70' : 'text-muted-foreground'}`}
				>
					{sourceLabel}
				</p>{/if}
		</Card.Content>
	</div>
	{#if day && size === 'lg' && type !== 'simple' && dayHours(day).length}
		<Card.Content class="relative flex min-h-0 flex-1 flex-col pb-(--card-spacing)">
			<p class="mb-3 shrink-0 text-base font-medium">Hourly forecast</p>
			<!-- Keyboard focus lets users scroll the hourly list independently of the card. -->
			<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
			<div
				class="min-h-0 flex-1 overflow-y-auto overscroll-contain"
				tabindex="0"
				role="region"
				aria-label="Hourly forecast"
				data-slot="hourly-forecast"
			>
				<div class="grid min-h-full auto-rows-[minmax(3.5rem,1fr)] grid-cols-1">
					{#each dayHours(day) as hour}
						<div
							class="grid min-w-0 grid-cols-[1fr_auto_1fr] items-center gap-4 border-b border-current/15 text-lg last:border-0"
							title={hour.shortForecast}
						>
							<span class="opacity-75"
								>{new Intl.DateTimeFormat('en-US', {
									timeZone: displayTimeZone,
									hour: 'numeric'
								}).format(new Date(hour.startTime))}</span
							>
							<ForecastIcon name={icon(hour)} iconSet={iconType} class="size-6 shrink-0" />
							<span class="text-right font-medium tabular-nums">{temperature(hour)}°</span>
						</div>
					{/each}
				</div>
			</div>
		</Card.Content>
	{:else if type !== 'simple'}
		<Card.Content class="relative min-h-0 min-w-0 pb-(--card-spacing)">
			{#if displayedPeriods.length}
				<div class="divide-y">
					{#each displayedPeriods as period, index (`${period.startTime}-${index}`)}
						<div
							class={`grid grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-3 text-sm ${density === 'compact' ? 'py-2' : 'py-3'}`}
						>
							<div>
								{#if interactive && !day}<button
										type="button"
										class="min-h-8 text-left underline-offset-4 hover:underline focus-visible:rounded-sm focus-visible:outline-2 focus-visible:outline-ring"
										aria-label={`View details for ${period.name}`}
										onclick={(event) => openDay(period.startTime, event.currentTarget)}
										>{period.name}</button
									>{:else}<p>{period.name}</p>{/if}
								{#if type === 'detailed' || (day && size !== 'sm')}<p
										class={`mt-1 text-xs leading-5 ${day ? 'line-clamp-2' : ''} ${day && background === 'realistic' ? 'text-white/75' : 'text-muted-foreground'}`}
									>
										{type === 'detailed' ? period.detailedForecast : period.shortForecast}
									</p>{/if}
							</div>
							<ForecastIcon
								name={icon(period)}
								iconSet={iconType}
								class={`size-4 ${day && background === 'realistic' ? 'text-white/75' : 'text-muted-foreground'}`}
							/>
							<span class="min-w-9 text-right tabular-nums">{temperature(period)}°</span>
						</div>
					{/each}
				</div>
			{/if}
			{#if !day && sourceLabel}<p class="mt-2 text-[10px] text-muted-foreground">
					{sourceLabel}
				</p>{/if}
		</Card.Content>
	{/if}
{/snippet}

<Card.Root
	style="container-type: inline-size"
	size={size === 'sm' ? 'sm' : 'default'}
	data-density={density}
	data-card-size={size}
	class={`relative isolate min-w-0 gap-0 overflow-hidden py-0 ${className}`}
>
	<ForecastScreens
		{interactive}
		{days}
		title="Weather"
		{density}
		{sourceLabel}
		{iconType}
		showWeek={size === 'sm' || type === 'simple'}
		flush
	>
		{#snippet daySummary(day)}
			{@const values = dayPeriods(day)}
			{@const daytime = values.find((period) => period.isDaytime)}
			{@const overnight = values.find((period) => !period.isDaytime)}
			{@const representative = daytime ?? overnight}
			{@const high = weatherDayHigh(day.key, values, current, unit, displayTimeZone)}
			<span
				class="grid w-full min-w-0 grid-cols-[minmax(0,1fr)_1.5em_3.75em_3.75em] items-center gap-2"
			>
				<span class="truncate font-medium">{day.label}</span>
				{#if representative}<span
						class="flex justify-center"
						title={representative.shortForecast}
						aria-label={representative.shortForecast}
						><ForecastIcon
							name={icon(representative)}
							iconSet={iconType}
							class="size-[1.4em] text-muted-foreground"
						/></span
					>{:else}<span></span>{/if}
				<span
					class="grid grid-cols-[0.85em_minmax(0,1fr)] items-center gap-1 text-right tabular-nums"
					aria-label={high !== null ? `High ${high} degrees` : 'High unavailable'}
					><ForecastIcon
						name="arrowUp"
						iconSet={iconType}
						class="size-[1em] text-muted-foreground"
					/><span>{high !== null ? `${high}°` : '—'}</span></span
				>
				<span
					class="grid grid-cols-[0.85em_minmax(0,1fr)] items-center gap-1 text-right text-muted-foreground tabular-nums"
					aria-label={overnight ? `Low ${temperature(overnight)} degrees` : 'Low unavailable'}
					><ForecastIcon name="arrowDown" iconSet={iconType} class="size-[1em]" /><span
						>{overnight ? `${temperature(overnight)}°` : '—'}</span
					></span
				>
			</span>
		{/snippet}
		{#snippet children(openDay, action, visible)}
			{@render cardView(undefined, action, visible, openDay)}
		{/snippet}
		{#snippet detail(day, action)}
			<div
				class={`relative isolate flex h-full min-h-0 w-full min-w-0 flex-col ${background === 'realistic' ? 'text-white' : ''}`}
			>
				{@render cardView(day, action, true, () => {})}
			</div>
		{/snippet}
	</ForecastScreens>
</Card.Root>

<script lang="ts">
	import { onMount, type ComponentProps, type Snippet } from 'svelte';
	import NumberFlow from '@number-flow/svelte';
	import * as ChartUI from '$lib/components/ui/chart/index.js';
	import { Chart, Svg, Area } from 'layerchart';
	import { curveMonotoneX } from 'd3-shape';
	import * as Card from '$lib/components/ui/card/index.js';
	import ForecastScreens from './ForecastScreens.svelte';
	import { forecastDays, type ForecastDay } from '$lib/data/forecast-days.js';
	import type {
		ForecastType,
		IconSet,
		LocationInput,
		TidePrediction,
		TideUnit,
		TidePoint,
		TideReading
	} from '$lib/data/types.js';
	import { sampleTides, sampleTideSeries, sampleTideTime } from '$lib/data/tides.js';
	import { tideState, tideTimestamp } from '$lib/data/tide-state.js';
	let {
		interactive = false,
		timeZone,
		type = 'summary',
		size = 'default',
		density = 'comfortable',
		class: className = '',
		unit = 'ft',
		iconType,
		location = {
			label: 'Galveston Pier 21, TX',
			latitude: 29.31,
			longitude: -94.7933,
			station: '8771450',
			timeZone: 'America/Chicago'
		},
		predictions = sampleTides,
		example = predictions === sampleTides,
		series,
		reading = null,
		at,
		sourceLabel = 'Sample tides'
	}: {
		interactive?: boolean;
		timeZone?: string;
		type?: ForecastType;
		size?: 'sm' | 'default' | 'lg';
		density?: 'compact' | 'comfortable';
		class?: string;
		unit?: TideUnit;
		iconType?: IconSet;
		location?: LocationInput;
		predictions?: TidePrediction[];
		example?: boolean;
		series?: TidePoint[];
		reading?: TideReading | null;
		at?: number;
		sourceLabel?: string;
	} = $props();
	let visitorTimeZone = $state('UTC');
	onMount(() => {
		visitorTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
	});
	const displayTimeZone = $derived(timeZone ?? location.timeZone ?? visitorTimeZone);
	let clock = $state(Date.now());
	onMount(() => {
		clock = Date.now();
		const timer = setInterval(() => (clock = Date.now()), 60000);
		return () => clearInterval(timer);
	});
	const isSample = $derived(example);
	const now = $derived(at ?? (isSample ? sampleTideTime : clock));
	const tide = $derived(
		tideState(predictions, series ?? (isSample ? sampleTideSeries : []), reading, now)
	);
	const curveData = $derived(
		tide.points.filter((p) => p.time >= now - 12 * 3600000 && p.time <= now + 18 * 3600000)
	);
	// The curve is predicted; observations remain in the headline only.
	const markerTime = $derived(now);
	const chartData = $derived(
		tide.predicted !== null && !curveData.some((p) => p.time === now)
			? [...curveData, { time: now, height: tide.predicted }].toSorted((a, b) => a.time - b.time)
			: curveData
	);
	let chartContext = $state<ComponentProps<typeof Chart>['context']>();
	const hovered = $derived(
		chartContext?.tooltip.data as { time: number; height: number } | null | undefined
	);
	const displayedLevel = $derived(hovered?.height ?? tide.level);
	const displayedTime = $derived(
		hovered?.time ?? (tide.observed ? tideTimestamp(tide.observed.time) : now)
	);
	const indicatorTime = $derived(hovered?.time ?? markerTime);
	const indicatorLevel = $derived(hovered?.height ?? tide.predicted);
	const timeParts = $derived(
		new Intl.DateTimeFormat('en-US', {
			hour: 'numeric',
			minute: '2-digit',
			timeZone: displayTimeZone
		}).formatToParts(displayedTime)
	);
	const domain = $derived.by(() => {
		const v = chartData.map((p) => p.height);
		if (tide.level !== null) v.push(tide.level);
		const lo = Math.min(...v),
			hi = Math.max(...v);
		return [lo - Math.max(0.15, (hi - lo) * 0.2), hi + Math.max(0.15, (hi - lo) * 0.2)];
	});
	const height = (value: number) => (value * (unit === 'meter' ? 0.3048 : 1)).toFixed(1);
	const symbol = $derived(unit === 'meter' ? 'm' : 'ft');
	const time = (value: string | number) =>
		new Intl.DateTimeFormat('en-US', {
			hour: 'numeric',
			minute: '2-digit',
			timeZone: displayTimeZone
		}).format(typeof value === 'string' ? tideTimestamp(value) : value);
	const dateTime = (p: TidePrediction) =>
		new Intl.DateTimeFormat('en-US', {
			month: 'short',
			day: 'numeric',
			hour: 'numeric',
			minute: '2-digit',
			timeZone: displayTimeZone
		}).format(tideTimestamp(p.time));
	const days = $derived(
		forecastDays(
			tide.events
				.filter((p) => tideTimestamp(p.time) >= now && tideTimestamp(p.time) < now + 7 * 86400000)
				.map((p) => ({
					time: tideTimestamp(p.time),
					label: time(p.time),
					summary: `${p.type === 'H' ? 'High' : 'Low'} tide · ${height(Number(p.height))} ${symbol}`,
					details: `Predicted ${p.type === 'H' ? 'high' : 'low'} tide, ${height(Number(p.height))} ${symbol} above MLLW.`
				})),
			displayTimeZone
		)
	);

	let dayChartContext = $state<ComponentProps<typeof Chart>['context']>();
	function pointsForDay(day: ForecastDay) {
		const key = new Intl.DateTimeFormat('en-CA', {
			timeZone: displayTimeZone,
			year: 'numeric',
			month: '2-digit',
			day: '2-digit'
		});
		return tide.points.filter((point) => key.format(point.time) === day.key);
	}
	function dailyDomain(points: { time: number; height: number }[]) {
		const values = points.map((point) => point.height);
		if (!values.length) return [0, 1];
		const lo = Math.min(...values),
			hi = Math.max(...values),
			padding = Math.max(0.15, (hi - lo) * 0.2);
		return [lo - padding, hi + padding];
	}
</script>

{#snippet cardView(
	day: ForecastDay | undefined,
	action: Snippet<[boolean]>,
	openDay: (time: string, trigger: HTMLElement) => void
)}
	{@const events = day
		? tide.events.filter((event) =>
				day.entries.some((entry) => entry.time === tideTimestamp(event.time))
			)
		: predictions}
	{@const viewNow = day ? day.entries[0].time : now}
	{@const viewTide = day
		? tideState(events, series ?? (isSample ? sampleTideSeries : []), null, viewNow)
		: tide}
	{@const viewChartData = day ? pointsForDay(day) : chartData}
	{@const viewDomain = day ? dailyDomain(viewChartData) : domain}
	{@const viewHovered = day
		? (dayChartContext?.tooltip.data as { time: number; height: number } | undefined)
		: hovered}
	{@const viewDisplayedLevel = day ? (viewHovered?.height ?? viewTide.level) : displayedLevel}
	{@const viewDisplayedTime = day ? (viewHovered?.time ?? viewNow) : displayedTime}
	{@const viewTimeParts = day
		? new Intl.DateTimeFormat('en-US', {
				hour: 'numeric',
				minute: '2-digit',
				timeZone: displayTimeZone
			}).formatToParts(viewDisplayedTime)
		: timeParts}
	{@const viewIndicatorTime = day ? viewDisplayedTime : indicatorTime}
	{@const viewIndicatorLevel = day ? (viewHovered?.height ?? viewTide.predicted) : indicatorLevel}
	{#snippet neighbors()}
		<div
			data-slot="tide-neighbors"
			class={size === 'sm' ? 'grid content-center gap-3' : 'grid grid-cols-2 gap-3 border-t pt-3'}
		>
			{#each [{ label: 'Previous', event: viewTide.previous }, { label: 'Next', event: viewTide.next }] as entry}
				<div>
					<p
						class={size === 'sm'
							? 'text-[10px] text-muted-foreground'
							: 'text-xs text-muted-foreground'}
					>
						{entry.label}
						{entry.event ? (entry.event.type === 'H' ? 'high tide' : 'low tide') : 'tide'}
					</p>
					<div class={size === 'sm' ? 'mt-0.5 flex flex-wrap items-baseline gap-x-2' : 'contents'}>
						<p
							class={size === 'sm'
								? 'text-xs font-medium tabular-nums'
								: 'mt-1 text-sm font-medium tabular-nums'}
						>
							{entry.event ? time(entry.event.time) : 'Unavailable'}
						</p>
						{#if entry.event}<p
								class={size === 'sm'
									? 'text-[10px] text-muted-foreground'
									: 'mt-1 text-xs text-muted-foreground'}
							>
								{height(Number(entry.event.height))}
								{symbol}
							</p>{/if}
					</div>
				</div>
			{/each}
		</div>
	{/snippet}

	<Card.Header class={size === 'sm' ? 'flex items-baseline justify-between gap-2' : undefined}
		><Card.Title>{day?.label ?? 'Tides'}</Card.Title><Card.Description
			>{location.label}</Card.Description
		>{@render action(false)}</Card.Header
	>
	<Card.Content class={size === 'sm' || density === 'compact' ? 'grid gap-3' : 'grid gap-5'}>
		{#if viewTide.events.length || viewTide.points.length}
			<div class={`flex items-end justify-between gap-3 ${day ? '' : 'flex-wrap'}`}>
				<div class="min-w-0">
					<p class={`mb-1 text-xs text-muted-foreground ${day ? 'truncate' : ''}`}>
						{viewHovered
							? 'Predicted water level'
							: !day && isSample
								? 'Example water level'
								: viewTide.observed
									? 'Current water level'
									: viewTide.predicted !== null
										? 'Predicted water level'
										: 'High/low predictions only'}
					</p>
					<p
						style={size === 'sm'
							? 'font-size:clamp(1.25rem,8cqw,1.875rem);line-height:1.1'
							: 'font-size:clamp(1.5rem,12cqw,2.5rem)'}
						class={`${size === 'sm' ? 'text-3xl' : 'text-4xl'} font-medium tracking-tight tabular-nums`}
					>
						{#if viewDisplayedLevel === null}—{:else}<NumberFlow
								value={Number(height(viewDisplayedLevel))}
								format={{ minimumFractionDigits: 1, maximumFractionDigits: 1 }}
							/>{/if}<span class="ml-1 text-sm text-muted-foreground">{symbol}</span>
					</p>
				</div>
				<div class="text-right text-xs text-muted-foreground">
					<p>
						{viewHovered
							? 'Selected time'
							: viewTide.next
								? viewTide.next.type === 'H'
									? 'Rising toward high tide'
									: 'Falling toward low tide'
								: 'Tide outlook'}
					</p>
					<p class="mt-1 tabular-nums" data-slot="tide-time">
						<span class="sr-only">{time(viewDisplayedTime)}</span><span aria-hidden="true"
							>{#each viewTimeParts as part}{#if part.type === 'hour' || part.type === 'minute'}<NumberFlow
										value={Number(part.value)}
										format={{
											minimumIntegerDigits: part.type === 'minute' ? 2 : 1,
											useGrouping: false
										}}
									/>{:else}{part.value}{/if}{/each}</span
						>
					</p>
				</div>
			</div>
			<div
				data-slot="tide-chart-layout"
				class={size === 'sm'
					? 'grid grid-cols-[auto_minmax(0,1fr)] items-center gap-3'
					: 'contents'}
			>
				{#if size === 'sm'}{@render neighbors()}{/if}
				<div class={size === 'sm' ? 'grid min-w-0 gap-1' : 'contents'}>
					{#if viewChartData.length > 1}
						<ChartUI.Container
							config={{ height: { label: 'Tide level', color: 'var(--chart-1)' } }}
							class={`aspect-auto w-full ${size === 'sm' ? 'h-16' : size === 'lg' ? 'h-36' : 'h-28'}`}
							role="img"
							aria-label="Tide prediction curve with predicted water level marker"
						>
							<Chart
								bind:context={
									() => (day ? dayChartContext : chartContext),
									(value) => {
										if (day) dayChartContext = value;
										else chartContext = value;
									}
								}
								data={viewChartData}
								x="time"
								y="height"
								yDomain={viewDomain}
								series={[{ key: 'height', label: 'Tide level', color: 'var(--chart-1)' }]}
								tooltipContext={{ mode: 'bisect-x' }}
								padding={{ top: 8, right: 8, bottom: 4, left: 8 }}
							>
								{#snippet children({ context })}
									<Svg>
										<Area
											curve={curveMonotoneX}
											fill="color-mix(in oklab, var(--chart-1) 12%, transparent)"
											line={{
												stroke: 'var(--chart-1, var(--primary))',
												strokeWidth: 2,
												fill: 'none',
												opacity: 1
											}}
											motion={{ type: 'tween', duration: 0 }}
										/>
										{#if viewIndicatorLevel !== null && viewIndicatorTime >= viewChartData[0].time && viewIndicatorTime <= viewChartData[viewChartData.length - 1].time}
											<line
												x1={context.xScale(viewIndicatorTime)}
												x2={context.xScale(viewIndicatorTime)}
												y1={0}
												y2={context.height}
												stroke="var(--muted-foreground)"
												stroke-dasharray="3 4"
											/>
											<circle
												data-slot="current-tide-marker"
												cx={context.xScale(viewIndicatorTime)}
												cy={context.yScale(viewIndicatorLevel)}
												r={4.5}
												fill="var(--chart-1, var(--primary))"
												stroke="var(--card)"
												stroke-width="2"
											/>
										{/if}
									</Svg>
								{/snippet}
							</Chart>
						</ChartUI.Container>
						<div
							class={`flex justify-between gap-1 text-[10px] text-muted-foreground ${size === 'sm' ? '' : '-mt-2'}`}
						>
							<span>{time(viewChartData[0].time)}</span>{#if size !== 'sm'}<span
									>MLLW · {viewTide.points.length ? 'predicted curve' : 'extrema only'}</span
								>{/if}<span>{time(viewChartData.at(-1)!.time)}</span>
						</div>
					{/if}
				</div>
			</div>
			{#if size !== 'sm'}{@render neighbors()}{/if}
			{#if type !== 'simple'}
				<div class="divide-y border-t">
					{#each viewTide.events
						.filter((p) => tideTimestamp(p.time) > viewNow)
						.slice(0, type === 'detailed' ? 6 : density === 'compact' ? 2 : 4) as event}<div
							class={`grid grid-cols-[auto_1fr_auto] items-center gap-3 text-xs ${density === 'compact' ? 'py-2' : 'py-3'}`}
						>
							<span>{event.type === 'H' ? 'High tide' : 'Low tide'}</span><span
								class="ml-auto text-muted-foreground">{dateTime(event)}</span
							><span class="tabular-nums">{height(Number(event.height))} {symbol}</span>
						</div>{/each}
				</div>
			{/if}
		{:else}<p role="status" class="py-8 text-center text-sm text-muted-foreground">
				No tide predictions available.
			</p>{/if}
		{#if !day && sourceLabel}<p class="text-[10px] text-muted-foreground">{sourceLabel}</p>{/if}
	</Card.Content>
{/snippet}

<Card.Root
	style="container-type: inline-size"
	size={size === 'sm' ? 'sm' : 'default'}
	data-density={density}
	data-card-size={size}
	class={`relative isolate min-w-0 overflow-hidden ${className}`}
>
	<ForecastScreens
		{interactive}
		{days}
		title="Tide"
		{density}
		{sourceLabel}
		{iconType}
		showWeek
		actionLabel="Upcoming tides"
	>
		{#snippet summary(availableHeight)}
			{@const events = tide.events
				.filter((event) => tideTimestamp(event.time) >= now)
				.slice(0, size === 'lg' ? 12 : Math.max(1, Math.floor(availableHeight / 36)))}
			<div
				class="grid h-full w-full overflow-y-auto"
				style={`grid-auto-rows: minmax(${size === 'lg' ? 40 : 36}px, 1fr)`}
				data-slot="upcoming-tides"
			>
				{#each events as event}
					<div
						class={`grid min-w-0 grid-cols-[auto_1fr_auto] items-center gap-3 border-b last:border-0 ${size === 'lg' ? 'text-sm' : 'text-xs'}`}
					>
						<span class="font-medium">{event.type === 'H' ? 'High tide' : 'Low tide'}</span>
						<time
							datetime={new Date(tideTimestamp(event.time)).toISOString()}
							class="text-right text-muted-foreground">{dateTime(event)}</time
						>
						<span class="text-right tabular-nums">{height(Number(event.height))} {symbol}</span>
					</div>
				{:else}
					<p class="py-4 text-sm text-muted-foreground">No upcoming tide predictions available.</p>
				{/each}
			</div>
		{/snippet}
		{#snippet children(openDay, action, visible)}
			{@render cardView(undefined, action, openDay)}
		{/snippet}
		{#snippet detail(day, action)}
			{@render cardView(day, action, () => {})}
		{/snippet}
	</ForecastScreens>
</Card.Root>

<script lang="ts">
	import { onMount, type Snippet } from 'svelte';
	import MoonDisc from './MoonDisc.svelte';
	import * as Card from '$lib/components/ui/card/index.js';
	import ForecastScreens from './ForecastScreens.svelte';
	import { forecastDays, type ForecastDay } from '$lib/data/forecast-days.js';
	import type {
		ForecastType,
		IconSet,
		LocationInput,
		MoonForecast as MoonData
	} from '$lib/data/types.js';
	import { sampleMoon, getMoonForecast, getUpcomingMoonPhases } from '$lib/data/moon.js';
	let {
		interactive = false,
		timeZone,
		type = 'summary',
		size = 'default',
		density = 'comfortable',
		class: className = '',
		iconType,
		location = { label: 'Austin, TX', latitude: 30.2672, longitude: -97.7431 },
		forecast = sampleMoon,
		sourceLabel = ''
	}: {
		interactive?: boolean;
		timeZone?: string;
		type?: ForecastType;
		size?: 'sm' | 'default' | 'lg';
		density?: 'compact' | 'comfortable';
		class?: string;
		iconType?: IconSet;
		location?: LocationInput;
		forecast?: MoonData;
		sourceLabel?: string;
	} = $props();
	let visitorTimeZone = $state('UTC');
	onMount(() => {
		visitorTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
	});
	const displayTimeZone = $derived(timeZone ?? location.timeZone ?? visitorTimeZone);
	const date = (v: string) =>
		new Intl.DateTimeFormat('en-US', {
			month: 'short',
			day: 'numeric',
			timeZone: displayTimeZone
		}).format(new Date(v));
	const phases = $derived(getUpcomingMoonPhases(new Date(forecast.date)));
	const days = $derived(
		forecastDays(
			phases.map((value) => ({
				time: Date.parse(value.date),
				label: value.phaseName,
				summary: `${value.illumination}% illuminated`,
				details: ''
			})),
			displayTimeZone
		)
	);
</script>

{#snippet cardView(day: ForecastDay | undefined, action: Snippet<[boolean]>)}
	{@const view = day
		? day.entries[0].time === Date.parse(forecast.date)
			? forecast
			: getMoonForecast(new Date(day.entries[0].time))
		: forecast}
	<Card.Header
		><Card.Title>{day?.label ?? 'Moon phase'}</Card.Title><Card.Description
			>{location.label}</Card.Description
		>{@render action(false)}</Card.Header
	>
	<Card.Content class={density === 'compact' ? 'grid gap-3' : 'grid gap-5'}>
		<div
			class={`flex items-center gap-4 ${size === 'lg' ? 'flex-col rounded-lg bg-muted/20 p-5 text-center' : ''}`}
		>
			<MoonDisc
				phase={view.phase ?? view.age / 29.530588853}
				label={`${view.phaseName}, ${view.illumination}% illuminated`}
				class={size === 'sm'
					? 'size-16 shrink-0'
					: size === 'lg'
						? 'size-36 shrink-0'
						: 'size-24 max-w-[28cqw] shrink-0'}
			/>
			<div>
				<p
					style="font-size:clamp(1rem,6cqw,1.5rem)"
					class={`font-medium tracking-tight ${size === 'sm' ? 'text-lg' : 'text-2xl'}`}
				>
					{view.phaseName}
				</p>
				<p class="mt-2 text-sm text-muted-foreground">{view.illumination}% illuminated</p>
			</div>
		</div>
		{#if type !== 'simple'}<dl class="moon-data divide-y text-sm">
				<div class="flex justify-between gap-4 pb-3">
					<dt class="text-muted-foreground">Moon age</dt>
					<dd>{view.age} days</dd>
				</div>
				<div class="flex justify-between gap-4 py-3">
					<dt class="text-muted-foreground">Next full moon</dt>
					<dd>{date(view.nextFullMoon)}</dd>
				</div>
				<div class="flex justify-between gap-4 pt-3">
					<dt class="text-muted-foreground">Next new moon</dt>
					<dd>{date(view.nextNewMoon)}</dd>
				</div>
			</dl>{/if}

		{#if !day && sourceLabel}<p class="text-[10px] text-muted-foreground">
				{sourceLabel} · {date(view.date)}
			</p>{/if}
	</Card.Content>
{/snippet}

<Card.Root
	style="container-type: inline-size"
	size={size === 'sm' ? 'sm' : 'default'}
	data-density={density}
	data-card-size={size}
	class={`relative isolate min-w-0 overflow-hidden ${className}`}
>
	<ForecastScreens
		{interactive}
		{days}
		title="Moon"
		{density}
		{sourceLabel}
		{iconType}
		actionLabel="Next phases"
		summaryTitle="Next phases"
	>
		{#snippet summary(availableHeight)}
			<div
				class="grid h-full auto-rows-[minmax(32px,1fr)] overflow-y-auto"
				data-slot="upcoming-moon-phases"
			>
				{#each phases as phase}
					<div class="flex min-h-0 items-center gap-3 border-b text-xs last:border-0">
						<div
							class="shrink-0"
							style={`width: ${Math.max(16, Math.min(32, availableHeight / 7 - 4))}px`}
						>
							<MoonDisc phase={phase.phase} label={phase.phaseName} class="size-full" />
						</div>
						<span class="min-w-0 flex-1 font-medium">{phase.phaseName}</span>
						<time datetime={phase.date} class="shrink-0 text-muted-foreground"
							>{date(phase.date)}</time
						>
					</div>
				{/each}
			</div>
		{/snippet}
		{#snippet children(openDay, action, visible)}
			{@render cardView(undefined, action)}
		{/snippet}
		{#snippet detail(day, action)}
			{@render cardView(day, action)}
		{/snippet}
	</ForecastScreens>
</Card.Root>

<style>
	:global([data-density='compact']) .moon-data > div {
		padding-block: 0.4rem;
	}
</style>