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

	import { browser } from '$app/environment';
	import { onMount } from 'svelte';

	let feed: { items: { title: string; link: string; content: string }[] } | null | undefined =
		undefined;
	let novelFeed:
		| {
				data: {
					items: { srcurl: string; postfix?: string; chapter: number; series: { name: string } }[];
				};
		  }
		| undefined = undefined;
	let startTime: number;
	let mangaEndTime: number;
	let novelEndTime: number;
	let directLink = browser ? new URLSearchParams(window.location.search).has('d') : false;

	onMount(async () => {
		startTime = performance.now();
		novelFeed = await (await fetch('/api/updates/all-novels')).json();
		novelEndTime = performance.now() - startTime;
		startTime = performance.now();
		feed = await (await fetch('/api/updates/manga')).json();
		mangaEndTime = performance.now() - startTime;
	});

	const reformatChapter = (title: string) =>
		title
			.replace(/\[.*?\]\s/, '')
			.replace(/c\.Oneshot/, 'Oneshot')
			.replace(/c\.(\d+-\d+)/, 'Ch. $1')
			.replace(/v\.(\d+)\s/, 'Vol. $1 ')
			.replace(/c\.(\d+)/, 'Ch. $1');

	const clipTitle = (title: string) =>
		title
			.replace(/(Vol\. \d+ )?Ch\. \d+(-\d+(\.\d+)?)?$/, '')
			.replace(/\? ~.*$/, '')
			.trim();

	// const italicTitle = (title: string) =>
	// 	title.replace(/^(.*?) (Vol\.|Ch\.|\bOneshot\b)/, '<i>$1</i> $2');

	const chapterTitle = (title: string) => title.replace(/^(.*?) (Vol\.|Ch\.|\bOneshot\b)/, '$2');
</script>

<div id="list-container">
	<div>
		<details open>
			<summary>
				Manga
				<small style="opacity: 50%">{mangaEndTime ? mangaEndTime / 1000 : '...'}s</small>
			</summary>

			<ul>
				{#if feed === null}
					<li>Failed to load feed</li>
				{:else if feed !== undefined}
					{#each feed.items as item}
						<li>
							{#if directLink}
								<i>{reformatChapter(item.title)}</i>

								{@html item.content}
							{:else}
								<a
									href={`https://anilist.co/search/manga?search=${clipTitle(
										reformatChapter(item.title)
									)}&sort=SEARCH_MATCH`}
								>
									<i>{@html clipTitle(reformatChapter(item.title))}</i>
								</a>
								{@html chapterTitle(reformatChapter(item.title))}
							{/if}
						</li>
					{/each}
				{:else}
					<li>Loading ...</li>
				{/if}
			</ul>
		</details>
	</div>

	<div>
		<details open>
			<summary>
				Novels
				<small style="opacity: 50%">{novelEndTime ? novelEndTime / 1000 : '...'}s</small>
			</summary>

			<ul>
				{#if novelFeed === null}
					<li>Failed to load feed</li>
				{:else if novelFeed !== undefined}
					{#each novelFeed.data.items as item}
						<li>
							{#if directLink}
								<a href={item.srcurl}>
									<i>{@html item.series.name}</i>
									{@html item.postfix || `Ch. ${item.chapter}`}
								</a>
							{:else}
								<a
									href={`https://anilist.co/search/manga?search=${item.series.name}&sort=SEARCH_MATCH`}
								>
									<i>{@html item.series.name}</i>
								</a>
								{@html item.postfix || `Ch. ${item.chapter}`}
							{/if}
						</li>
					{/each}
				{:else}
					<li>Loading ...</li>
				{/if}
			</ul>
		</details>
	</div>
</div>

<style>
	#list-container {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
	}
</style>
