import { browser } from '$app/environment';
import { fetchDensity, type DensityFilters } from '$lib/document/timeline';
import type { PageLoad } from './$types';

export const load: PageLoad = async ({ url, fetch, data }) => {
	const view = url.searchParams.get('view');
	// Tailwind `lg` breakpoint — bars below this width fall under the 44×44 touch
	// target floor (Leonie's tablet finding) and the chart skips the fetch.
	const isDesktop = browser && window.matchMedia('(min-width: 1024px)').matches;

	// Forward active filters (excluding from/to) so the chart matches the list.
	const tagOp = url.searchParams.get('tagOp');
	const filters: DensityFilters = {
		q: url.searchParams.get('q') ?? undefined,
		senderId: url.searchParams.get('senderId') ?? undefined,
		receiverId: url.searchParams.get('receiverId') ?? undefined,
		tags: url.searchParams.getAll('tag'),
		tagQ: url.searchParams.get('tagQ') ?? undefined,
		status: url.searchParams.get('status') ?? undefined,
		tagOp: tagOp === 'OR' ? 'OR' : 'AND'
	};

	const density = await fetchDensity(fetch, view, isDesktop, filters);
	const zoomFrom = url.searchParams.get('zoomFrom');
	const zoomTo = url.searchParams.get('zoomTo');

	return { ...data, ...density, zoomFrom, zoomTo };
};