<script lang="ts">
	import type { Adventure, Collection } from '$lib/types';
	import { onMount } from 'svelte';
	import type { PageData } from './$types';
	import { goto } from '$app/navigation';
	import Lost from '$lib/assets/undraw_lost.svg';

	import Plus from '~icons/mdi/plus';
	import AdventureCard from '$lib/components/AdventureCard.svelte';
	import AdventureLink from '$lib/components/AdventureLink.svelte';
	import EditAdventure from '$lib/components/EditAdventure.svelte';
	import NotFound from '$lib/components/NotFound.svelte';
	import NewAdventure from '$lib/components/NewAdventure.svelte';
	import { DefaultMarker, MapEvents, MapLibre, Popup } from 'svelte-maplibre';

	export let data: PageData;

	let collection: Collection;

	let adventures: Adventure[] = [];
	let numVisited: number = 0;

	let numberOfDays: number = NaN;

	$: {
		numVisited = adventures.filter((a) => a.type === 'visited').length;
	}

	let notFound: boolean = false;
	let isShowingLinkModal: boolean = false;
	let isShowingCreateModal: boolean = false;

	onMount(() => {
		if (data.props.adventure) {
			collection = data.props.adventure;
			adventures = collection.adventures as Adventure[];
		} else {
			notFound = true;
		}
		if (collection.start_date && collection.end_date) {
			numberOfDays =
				Math.floor(
					(new Date(collection.end_date).getTime() - new Date(collection.start_date).getTime()) /
						(1000 * 60 * 60 * 24)
				) + 1;
		}
	});

	function deleteAdventure(event: CustomEvent<number>) {
		adventures = adventures.filter((a) => a.id !== event.detail);
	}

	function groupAdventuresByDate(
		adventures: Adventure[],
		startDate: Date
	): Record<string, Adventure[]> {
		const groupedAdventures: Record<string, Adventure[]> = {};

		for (let i = 0; i < numberOfDays; i++) {
			const currentDate = new Date(startDate);
			currentDate.setDate(startDate.getDate() + i);
			const dateString = currentDate.toISOString().split('T')[0];
			groupedAdventures[dateString] = [];
		}

		adventures.forEach((adventure) => {
			if (adventure.date) {
				const adventureDate = new Date(adventure.date).toISOString().split('T')[0];
				if (groupedAdventures[adventureDate]) {
					groupedAdventures[adventureDate].push(adventure);
				}
			}
		});

		return groupedAdventures;
	}

	function createAdventure(event: CustomEvent<Adventure>) {
		adventures = [event.detail, ...adventures];
		isShowingCreateModal = false;
	}

	async function addAdventure(event: CustomEvent<Adventure>) {
		console.log(event.detail);
		if (adventures.find((a) => a.id === event.detail.id)) {
			return;
		} else {
			let adventure = event.detail;
			let formData = new FormData();
			formData.append('collection_id', collection.id.toString());

			let res = await fetch(`/adventures/${adventure.id}?/addToCollection`, {
				method: 'POST',
				body: formData // Remove the Content-Type header
			});

			if (res.ok) {
				console.log('Adventure added to collection');
				adventures = [...adventures, adventure];
			} else {
				console.log('Error adding adventure to collection');
			}
		}
	}

	function changeType(event: CustomEvent<number>) {
		adventures = adventures.map((adventure) => {
			if (adventure.id == event.detail) {
				if (adventure.type == 'visited') {
					adventure.type = 'planned';
				} else {
					adventure.type = 'visited';
				}
			}
			return adventure;
		});
	}

	let adventureToEdit: Adventure;
	let isEditModalOpen: boolean = false;

	let newType: string;

	function editAdventure(event: CustomEvent<Adventure>) {
		adventureToEdit = event.detail;
		isEditModalOpen = true;
	}

	function saveEdit(event: CustomEvent<Adventure>) {
		adventures = adventures.map((adventure) => {
			if (adventure.id === event.detail.id) {
				return event.detail;
			}
			return adventure;
		});
		isEditModalOpen = false;
	}
</script>

{#if isShowingLinkModal}
	<AdventureLink
		user={data?.user ?? null}
		on:close={() => {
			isShowingLinkModal = false;
		}}
		on:add={addAdventure}
	/>
{/if}

{#if isEditModalOpen}
	<EditAdventure
		{adventureToEdit}
		on:close={() => (isEditModalOpen = false)}
		on:saveEdit={saveEdit}
	/>
{/if}

{#if isShowingCreateModal}
	<NewAdventure
		type={newType}
		collection_id={collection.id}
		on:create={createAdventure}
		on:close={() => (isShowingCreateModal = false)}
	/>
{/if}

{#if notFound}
	<div
		class="flex min-h-[100dvh] flex-col items-center justify-center bg-background px-4 py-12 sm:px-6 lg:px-8 -mt-20"
	>
		<div class="mx-auto max-w-md text-center">
			<div class="flex items-center justify-center">
				<img src={Lost} alt="Lost" class="w-1/2" />
			</div>
			<h1 class="mt-4 text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
				Adventure not Found
			</h1>
			<p class="mt-4 text-muted-foreground">
				The adventure you were looking for could not be found. Please try a different adventure or
				check back later.
			</p>
			<div class="mt-6">
				<button class="btn btn-primary" on:click={() => goto('/')}>Homepage</button>
			</div>
		</div>
	</div>
{/if}

{#if !collection && !notFound}
	<div class="flex justify-center items-center w-full mt-16">
		<span class="loading loading-spinner w-24 h-24"></span>
	</div>
{/if}
{#if collection}
	<div class="fixed bottom-4 right-4 z-[999]">
		<div class="flex flex-row items-center justify-center gap-4">
			<div class="dropdown dropdown-top dropdown-end">
				<div tabindex="0" role="button" class="btn m-1 size-16 btn-primary">
					<Plus class="w-8 h-8" />
				</div>
				<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
				<ul
					tabindex="0"
					class="dropdown-content z-[1] menu p-4 shadow bg-base-300 text-base-content rounded-box w-52 gap-4"
				>
					<p class="text-center font-bold text-lg">Link new...</p>
					<button
						class="btn btn-primary"
						on:click={() => {
							isShowingLinkModal = true;
						}}
					>
						Adventure</button
					>
					<p class="text-center font-bold text-lg">Add new...</p>
					<button
						class="btn btn-primary"
						on:click={() => {
							isShowingCreateModal = true;
							newType = 'visited';
						}}
					>
						Visited Adventure</button
					>
					<button
						class="btn btn-primary"
						on:click={() => {
							isShowingCreateModal = true;
							newType = 'planned';
						}}
					>
						Planned Adventure</button
					>
					<button
						class="btn btn-primary"
						on:click={() => {
							isShowingCreateModal = true;
							newType = 'lodging';
						}}
					>
						Lodging</button
					>
					<button
						class="btn btn-primary"
						on:click={() => {
							isShowingCreateModal = true;
							newType = 'dining';
						}}
					>
						Dining</button
					>

					<!-- <button
			class="btn btn-primary"
			on:click={() => (isShowingNewTrip = true)}>Trip Planner</button
		  > -->
				</ul>
			</div>
		</div>
	</div>
	{#if collection.name}
		<h1 class="text-center font-extrabold text-4xl mb-2">{collection.name}</h1>
	{/if}
	{#if adventures.length > 0}
		<div class="flex items-center justify-center mb-4">
			<div class="stats shadow bg-base-300">
				<div class="stat">
					<div class="stat-title">Collection Stats</div>
					<div class="stat-value">{numVisited}/{adventures.length} Visited</div>
					{#if numVisited === adventures.length}
						<div class="stat-desc">You've completed this collection! 🎉!</div>
					{:else}
						<div class="stat-desc">Keep exploring!</div>
					{/if}
				</div>
			</div>
		</div>
	{/if}
	<h1 class="text-center font-bold text-4xl mt-4 mb-2">Linked Adventures</h1>
	{#if adventures.length == 0}
		<NotFound error={undefined} />
	{/if}
	<div class="flex flex-wrap gap-4 mr-4 justify-center content-center">
		{#each adventures as adventure}
			<AdventureCard
				user={data.user}
				on:edit={editAdventure}
				on:delete={deleteAdventure}
				type={adventure.type}
				{adventure}
				on:typeChange={changeType}
			/>
		{/each}
	</div>

	{#if collection.start_date && collection.end_date}
		<h1 class="text-center font-bold text-4xl mt-4">Itinerary by Date</h1>
		{#if numberOfDays}
			<p class="text-center text-lg pl-16 pr-16">Duration: {numberOfDays} days</p>
		{/if}
		<p class="text-center text-lg pl-16 pr-16">
			Dates: {new Date(collection.start_date).toLocaleDateString('en-US', { timeZone: 'UTC' })} - {new Date(
				collection.end_date
			).toLocaleDateString('en-US', { timeZone: 'UTC' })}
		</p>
		<div class="divider"></div>

		{#each Array(numberOfDays) as _, i}
			{@const currentDate = new Date(collection.start_date)}
			{@const temp = currentDate.setDate(currentDate.getDate() + i)}
			{@const dateString = currentDate.toISOString().split('T')[0]}
			{@const dayAdventures = groupAdventuresByDate(adventures, new Date(collection.start_date))[
				dateString
			]}

			<h2 class="text-center font-semibold text-2xl mb-2 mt-4">
				Day {i + 1} - {currentDate.toLocaleDateString('en-US', { timeZone: 'UTC' })}
			</h2>

			{#if dayAdventures.length > 0}
				<div class="flex flex-wrap gap-4 mr-4 justify-center content-center">
					{#each dayAdventures as adventure}
						<AdventureCard
							user={data.user}
							on:edit={editAdventure}
							on:delete={deleteAdventure}
							type={adventure.type}
							{adventure}
							on:typeChange={changeType}
						/>
					{/each}
				</div>
			{:else}
				<p class="text-center text-lg mt-2">No adventures planned for this day.</p>
			{/if}
		{/each}
		<div class="flex items-center justify-center w-10/12">
			<MapLibre
				style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
				class="relative aspect-[9/16] max-h-[70vh] w-full sm:aspect-video sm:max-h-full"
				standardControls
			>
				<!-- MapEvents gives you access to map events even from other components inside the map,
  where you might not have access to the top-level `MapLibre` component. In this case
  it would also work to just use on:click on the MapLibre component itself. -->
				<!-- <MapEvents on:click={addMarker} /> -->

				{#each adventures as adventure}
					{#if adventure.longitude && adventure.latitude}
						<DefaultMarker lngLat={{ lng: adventure.longitude, lat: adventure.latitude }}>
							<Popup openOn="click" offset={[0, -10]}>
								<div class="text-lg text-black font-bold">{adventure.name}</div>
								<p class="font-semibold text-black text-md">
									{adventure.type.charAt(0).toUpperCase() + adventure.type.slice(1)}
								</p>
								<p>
									{adventure.date
										? new Date(adventure.date).toLocaleDateString('en-US', { timeZone: 'UTC' })
										: ''}
								</p>
							</Popup>
						</DefaultMarker>
					{/if}
				{/each}
			</MapLibre>
		</div>
	{/if}
{/if}
