<script lang="ts">
	/* eslint svelte/no-at-html-tags: "off" */

	import settings from '../../stores/settings';
	import SettingCheckboxToggle from '$lib/Settings/SettingCheckboxToggle.svelte';
	import SettingHint from '$lib/Settings/SettingHint.svelte';
	import { pruneAllManga } from '$lib/Media/Manga/cache';
	import Attributions from '$lib/Settings/Attributions.svelte';
	import { env } from '$env/dynamic/public';

	export let data;

	// const pruneUnresolved = async () => {
	// 	const unresolved = await chapterDatabase.chapters.where('chapters').equals(-1).toArray();
	// 	const ids = unresolved.map((m) => m.id);

	// 	manga.set('');
	// 	anime.set('');
	// 	await chapterDatabase.chapters.bulkDelete(ids);
	// };

	const onHelperChange = () => {
		const mai = document.getElementById('mai') as HTMLImageElement;

		if (!mai) return;

		mai.style.display = 'block';

		switch ($settings.displayAoButa) {
			case 'mai':
				{
					mai.src = '/aobuta/mai.png';
				}
				break;
			case 'nodoka':
				{
					mai.src = '/aobuta/nodoka.webp';
				}
				break;
			case 'kaede':
				{
					mai.src = '/aobuta/kaede.png';
				}
				break;
			case 'none': {
				{
					mai.style.display = 'none';
				}
				break;
			}
		}
	};
</script>

<p>
	Have feedback or suggestions? Send a private message to
	<a href="https://anilist.co/user/fuwn" target="_blank">@fuwn</a> on AniList!
</p>

{#if data.user === undefined}
	Please log in to modify settings.
{:else}
	<details open id="feeds">
		<summary>RSS Feeds</summary>

		<a
			href={'#'}
			on:click={() =>
				navigator.clipboard.writeText(
					`https://${
						env.PUBLIC_ANILIST_REDIRECT_URI?.includes('192.168') ? '192.168.1.60:5173' : 'due.moe'
					}/feeds/activity-notifications?token=${data.user.accessToken}&refresh=${
						data.user.refreshToken
					}`
				)}
		>
			Click to copy AniList notifications RSS feed URL and token
		</a>
		<SettingHint lineBreak>Do not share this link with <b>anyone</b>!</SettingHint>
	</details>

	<p />

	<details open id="display">
		<summary>Display</summary>

		<SettingCheckboxToggle
			setting="displayPausedMedia"
			text="Display paused media"
			lineBreak={false}
		/>
		<SettingCheckboxToggle
			setting="displayUnresolved"
			text="Display unresolved media"
			lineBreak={false}
		/>
		<SettingCheckboxToggle setting="displayPlannedAnime" text="Display planned anime" />
		<SettingCheckboxToggle
			setting="disableUpcomingAnime"
			text="Disable upcoming anime"
			lineBreak={false}
		/>
		<SettingCheckboxToggle setting="disableAnime" text="Disable anime" lineBreak={false} />
		<SettingCheckboxToggle setting="disableManga" text="Disable manga" />
		<SettingCheckboxToggle
			setting="closeUpcomingAnimeByDefault"
			text="Collapse upcoming anime panels by default"
			lineBreak={false}
		/>
		<SettingCheckboxToggle
			setting="closeAnimeByDefault"
			text="Collapse anime panels by default"
			lineBreak={false}
		/>
		<SettingCheckboxToggle setting="closeMangaByDefault" text="Collapse manga panel by default" />
		<SettingCheckboxToggle setting="limitListHeight" text="Limit list area to screen" />
		<SettingCheckboxToggle setting="displaySocialButton" text="Display social button for anime" />
		<SettingCheckboxToggle
			setting="displayCountdownRightAligned"
			text="Display countdown right aligned"
		/>
		<SettingCheckboxToggle setting="display24HourTime" text="Display countdown in 24-hour format" />
		<SettingCheckboxToggle
			setting="displayNativeCountdown"
			text="Display countdown as native release"
		/>
		<SettingCheckboxToggle
			setting="displayNativeTitles"
			text="Display titles in native language"
			lineBreak={!$settings.displayNativeTitles}
		/>
		{#if $settings.displayNativeTitles}
			<SettingCheckboxToggle setting="displayFurigana" text="Display furigana for titles" />
		{/if}

		<SettingCheckboxToggle setting="hoverNavigation" text="Display navigation as hover bar">
			<SettingHint lineBreak>
				Minimises and moves navigation to the top-left corner of the screen, visible only on hover.
				Intended for use on desktop devices.
			</SettingHint>
		</SettingCheckboxToggle>

		<br />

		<SettingCheckboxToggle setting="displayNotStarted" text="Display media with zero progress">
			<SettingHint lineBreak>
				May cause <a href="https://en.wikipedia.org/wiki/Rate_limiting" target="_blank">
					rate-limiting
				</a> depending on how much releasing manga are on your lists
			</SettingHint>
		</SettingCheckboxToggle>

		<br />

		<SettingCheckboxToggle
			setting="sortByDifference"
			text="Sort anime by difference between last watched and next episode"
		>
			<SettingHint lineBreak>
				By default, anime will be sorted by the number of days left until the next episode airs.
			</SettingHint>
		</SettingCheckboxToggle>

		<br />

		<select bind:value={$settings.displayAoButa} on:change={onHelperChange}>
			<option value="mai">Mai</option>
			<option value="nodoka">Nodoka</option>
			<option value="kaede">Kaede</option>
			<option value="none">None</option>
		</select>
		Display Helper
		<SettingHint lineBreak>Let them remind you. It's for your own benefit.</SettingHint>

		<p />

		<select bind:value={$settings.outboundLinksTo}>
			<option value="anilist">AniList</option>
			<option value="livechartme">LiveChart.me</option>
			<option value="animeschedule">AnimeSchedule</option>
			<option value="myanimelist">MyAnimeList</option>
		</select>
		Outbound Links
		<SettingHint lineBreak>
			This option is in full respect to anime outbound links. If LiveChart.me or AnimeSchedule is
			chosen, manga links will default to AniList.
		</SettingHint>
	</details>

	<p />

	<details open id="calculation">
		<summary>Calculation</summary>

		<SettingCheckboxToggle setting="roundDownChapters" text="Round down chapters (recommended)">
			<SettingHint lineBreak>
				Round down to the nearest whole number. (e.g., 50/50.6 would <b>not</b> be due)
			</SettingHint>
		</SettingCheckboxToggle>

		<br />

		<SettingCheckboxToggle
			setting="disableOutOfDateVolumeWarning"
			text="Disable out-of-date volume warning"
		>
			<SettingHint lineBreak>
				Keeping this enabled displays a warning message when there is a mismatch between chapter
				progress and the number of volumes you have completed for a given title. (e.g. you are on
				Vol. 5 Ch. 50, but only have 3 volumes tracked when you should have 4)

				<br />

				Disabling this option speeds up refresh times for manga lists.
			</SettingHint>
		</SettingCheckboxToggle>

		<br />

		<SettingCheckboxToggle setting="disableGuessing" text="Disable informed chapter estimation">
			<SettingHint lineBreak>
				Enabling this setting will disable light novel chapter counts and may cause inaccuracy in
				unresolved manga and light novel chapter counts
			</SettingHint>
		</SettingCheckboxToggle>

		{#if !$settings.disableGuessing}
			<br />

			<select bind:value={$settings.guessMethod} on:change={pruneAllManga}>
				<option value="mode">Mode (fast, moderate to low accuracy)</option>
				<option value="median">Median (moderate speed, high accuracy, recommended)</option>
				<option value="iqr_median">Interquartile Range with Median (slower, high accuracy)</option>
				<option value="iqr_mode">Interquartile Range with Mode (slower, high accuracy)</option>
			</select>
			Informed chapter estimation method

			<SettingHint lineBreak>
				No chapter count estimation method will be 100% accurate. Since estimated media requires
				scores derived from user submitted progress, high (or low) false-reports skew the data.
			</SettingHint>
		{/if}
	</details>

	<p />

	<details open id="cache">
		<summary>Cache</summary>

		<!-- <a href={'#'} on:click={pruneUnresolved}>Re-cache <b>ALL</b> unresolved manga</a>

		<br />

		<a href={'#'} on:click={pruneAllManga}>Re-cache <b>ALL</b> manga</a>
		<SettingHint lineBreak>Force a re-cache of all cached manga chapter counts</SettingHint>

		<p /> -->

		<span>Re-cache <b>ALL</b> media lists every</span>
		<input type="number" bind:value={$settings.cacheMinutes} min="1" max="60" placeholder="30" />
		minutes

		<br />

		<span>Re-cache <b>ALL</b> manga chapter counts every</span>
		<input
			type="number"
			bind:value={$settings.cacheMangaMinutes}
			min="5"
			max="1440"
			placeholder="120"
		/>
		minutes
		<SettingHint lineBreak>
			Low values may cause <a href="https://en.wikipedia.org/wiki/Rate_limiting" target="_blank">
				rate-limiting
			</a> depending on the amount of releasing manga are on your lists
		</SettingHint>
	</details>

	<p />

	<details open id="debug">
		<summary>Debug <small style="opacity: 50%;">{env.PUBLIC_GIT_SHORT_SHA}</small></summary>

		<a href={'#'} on:click={settings.reset}>Reset <b>ALL</b> settings</a>
		<SettingHint lineBreak>
			Resets all settings present on this page to their default values
		</SettingHint>

		<p />

		<a href={'#'} on:click={() => localStorage.clear()}>Clear <code>localStorage</code> </a>
		<SettingHint lineBreak>
			Doesn't break anything, but resets all settings and clears all cached media lists. Recommended
			after updates
		</SettingHint>
	</details>

	<p />

	<div id="attributions">
		<Attributions />
	</div>
{/if}
