<script lang="ts">
	import DataChart from '$lib/components/data/DataChart.svelte';
	import DataMap from '$lib/components/data/DataMap.svelte';
	import DataTable from '$lib/components/data/DataTable.svelte';
	import type {
		ChartDocument,
		ChartSpec,
		MapDocument,
		MapSpec,
		TableData,
		TableDocument,
		TableSpec
	} from '$lib/components/data/types';

	type LightningDataset = {
		chartSpec: ChartSpec;
		intervalCounts: TableData;
		mapSpec: MapSpec;
		observations: TableData;
		source: {
			query: { radiusMeters: number };
			url: string;
			warning: string;
		};
		tableSpec: TableSpec;
	};

	interface Props {
		data?: { lightningData?: unknown };
		input?: TypeToolInput;
		preview?: boolean;
		swapState?: TypeToolSwap | boolean;
		tool: TypeTool;
		value?: TypeToolInput['value'];
	}

	let { data = {} }: Props = $props();
	const initialData = (() => data)();
	const dataset = initialData.lightningData as LightningDataset;
	const mapDocument: MapDocument = {
		data: dataset.observations,
		spec: dataset.mapSpec
	};
	const chartDocument: ChartDocument = {
		data: dataset.intervalCounts,
		spec: dataset.chartSpec
	};
	const tableDocument: TableDocument = {
		data: dataset.observations,
		spec: dataset.tableSpec
	};
</script>

<div class="w-full min-w-0 space-y-8">
	<div>
		<dl class="grid flex-1 gap-3 sm:grid-cols-3">
			<div class="rounded-xl bg-white p-4 dark:bg-steel-800">
				<dt class="text-sm text-steel-500 dark:text-steel-400">
					Observations
				</dt>
				<dd class="mt-1 text-2xl font-bold">
					{dataset.observations.rows.length}
				</dd>
			</div>
			<div class="rounded-xl bg-white p-4 dark:bg-steel-800">
				<dt class="text-sm text-steel-500 dark:text-steel-400">
					Date
				</dt>
				<dd class="mt-1 text-lg font-semibold">
					August 27, 2026
				</dd>
			</div>
			<div class="rounded-xl bg-white p-4 dark:bg-steel-800">
				<dt class="text-sm text-steel-500 dark:text-steel-400">
					Query radius
				</dt>
				<dd class="mt-1 text-lg font-semibold">
					{new Intl.NumberFormat('en').format(
						dataset.source.query.radiusMeters
					)} m
				</dd>
			</div>
		</dl>
	</div>

	<section
		class="rounded-2xl border border-steel-200 bg-white p-5 shadow-sm sm:p-7 dark:border-steel-700 dark:bg-steel-850"
		aria-labelledby="map-title"
	>
		<h3 id="map-title" class="text-2xl font-bold">
			{dataset.mapSpec.title}
		</h3>
		<p class="mt-1 text-sm text-steel-500 dark:text-steel-400">
			{dataset.mapSpec.summary}
		</p>
		<div class="mt-4"><DataMap document={mapDocument} /></div>
	</section>

	<section
		class="rounded-2xl border border-steel-200 bg-white p-5 shadow-sm sm:p-7 dark:border-steel-700 dark:bg-steel-850"
		aria-labelledby="chart-title"
	>
		<h3 id="chart-title" class="text-2xl font-bold">
			{dataset.chartSpec.title}
		</h3>
		<p class="mt-1 text-sm text-steel-500 dark:text-steel-400">
			{dataset.chartSpec.summary}
		</p>
		<div class="mt-4">
			<DataChart document={chartDocument} />
		</div>
	</section>

	<section
		class="rounded-2xl border border-steel-200 bg-white p-5 shadow-sm sm:p-7 dark:border-steel-700 dark:bg-steel-850"
		aria-labelledby="table-title"
	>
		<h3 id="table-title" class="text-2xl font-bold">
			{dataset.tableSpec.title}
		</h3>
		<p class="mt-1 text-sm text-steel-500 dark:text-steel-400">
			{dataset.tableSpec.caption}
		</p>
		<div class="mt-4">
			<DataTable document={tableDocument} />
		</div>
	</section>

	<div
		class="rounded-xl bg-amber-50 p-4 text-sm text-amber-950 dark:bg-amber-950 dark:text-amber-100"
	>
		<p>
			<strong>Source note:</strong>
			{dataset.source.warning}
		</p>
		<a
			class="mt-3 inline-flex font-semibold text-blue-700 hover:underline dark:text-blue-300"
			href={dataset.source.url}
			target="_blank"
			rel="noreferrer">View NASA source ↗</a
		>
	</div>
</div>