<script lang="ts">
	import locale from '$stores/locale';
	import ListTitle from './List/ListTitle.svelte';
	import sampleManga from '$lib/Data/SampleMedia/manga.json';
	import sampleAnime from '$lib/Data/SampleMedia/anime.json';
	import MediaTitleDisplay from './List/MediaTitleDisplay.svelte';
	import { outboundLink } from './Media/links';
	import settings from '$stores/settings';
	import {
		onMouseEnter,
		onMouseLeave,
		onMouseMove,
		type HoverCoverResponse
	} from './Media/Cover/hoverCover';
	import HoverCover from './Media/Cover/HoverCover.svelte';
	import root from './Utility/root';
	import type { Media } from './AniList/media';
	import { env } from '$env/dynamic/public';

	const randomManga = sampleManga
		.filter(
			(manga) =>
				manga.chapters &&
				!manga.tags.some((tag) => tag.name === 'Nudity') &&
				!manga.tags.some((tag) => tag.name === 'Rape') &&
				!manga.tags.some((tag) => tag.name === 'Tragedy') &&
				!manga.tags.some((tag) => tag.name === 'Bondage') &&
				manga.genres.some((genre) => genre === 'Comedy') &&
				!manga.genres.some((genre) => genre === 'Hentai')
		)
		.sort(() => 0.5 - Math.random())
		.slice(0, 8) as unknown as Media[];
	const randomAnime = sampleAnime
		.filter(
			(anime) =>
				anime.episodes &&
				!anime.tags.some((tag) => tag.name === 'Nudity') &&
				!anime.tags.some((tag) => tag.name === 'Rape') &&
				!anime.tags.some((tag) => tag.name === 'Tragedy') &&
				!anime.tags.some((tag) => tag.name === 'Bondage') &&
				!anime.genres.some((genre) => genre === 'Hentai') &&
				anime.genres.some((genre) => genre === 'Comedy') &&
				anime.status !== 'NOT_YET_RELEASED'
		)
		.sort(() => 0.5 - Math.random())
		.slice(0, 6) as unknown as Media[];
	let hoverCoverState: HoverCoverResponse = {};
</script>

<div class="example-item card">
	<div class="item-content">
		<details open={true} class="list">
			<ListTitle title={$locale().lists.due.mangaAndLightNovels} count={5} hideTime />

			<ul>
				{#each randomManga as manga}
					{@const readChapters = Math.floor(Math.random() * (manga.chapters || 0))}

					<li>
						<a
							href={outboundLink(manga, 'manga', $settings.displayOutboundLinksTo)}
							target="_blank"
							on:mouseenter={() => {
								const response = onMouseEnter(manga);

								hoverCoverState.hovering = response.hovering;
								hoverCoverState.item = response.item;
								hoverCoverState.media = response.media;
							}}
							on:mouseleave={() => {
								const response = onMouseLeave();

								hoverCoverState.hovering = response.hovering;
								hoverCoverState.item = response.item;
								hoverCoverState.media = response.media;
							}}
							on:mousemove={(e) => {
								const response = onMouseMove(e, 300);

								hoverCoverState.style = response.style;
							}}
						>
							<MediaTitleDisplay title={manga.title} />
						</a>
						<span style="opacity: 50%;">|</span>
						{readChapters}<span style="opacity: 50%;">/{manga.chapters || '?'}</span>
						<button class="button-square button-action">+</button>
						[{Math.floor(Math.random() * ((manga.chapters ?? 0) - readChapters)) +
							readChapters +
							1}]
					</li>
				{/each}
			</ul>
		</details>
	</div>

	<div class="card item-description">
		<span class="big-text">
			Instantly view which manga on your lists have newly released chapters
		</span>

		<p>
			<a href={root('/')}>due.moe</a> will automatically check which manga on your lists have new
			chapters available. <a href={root('/')}>due.moe</a> will even alert you when you need to update
			your logged volume count if you are trailing behind.
		</p>

		<p>
			Separating concluded and publishing manga, <a href={root('/')}>due.moe</a> truly gives a one-of-a-kind
			experience when it comes to staying on top of your favourite titles.
		</p>

		<p class="medium-text">
			<a href={root('/')}>due.moe</a> even supports checking for new light novels chapters!
		</p>

		<small>This is simulated data from concluded manga.</small>
	</div>
</div>

<p />

<div class="example-item card">
	<div class="card item-description">
		<span class="big-text">Let's not forget anime!</span>

		<p>
			<a href={root('/')}>due.moe</a> will let you know which episodes you still need to watch, which
			anime you are caught up on, and planned anime which will begin to air soon.
		</p>

		<p>
			We'll always let you know when the next episodes is coming out, and did we mention that all
			displayed countdowns are for subtitled release times by default? Cool, right?
		</p>

		<small>This is simulated data from concluded anime. Cover grid view is also supported.</small>
	</div>
	<div class="item-content">
		<details open={true} class="list">
			<ListTitle title={$locale().lists.due.episodes} count={5} hideTime />

			<ul>
				{#each randomAnime as anime}
					{@const watchedEpisodes = Math.floor(Math.random() * (anime.episodes || 0))}

					<li>
						<a
							href={outboundLink(anime, 'anime', $settings.displayOutboundLinksTo)}
							target="_blank"
							on:mouseenter={() => {
								const response = onMouseEnter(anime);

								hoverCoverState.hovering = response.hovering;
								hoverCoverState.item = response.item;
								hoverCoverState.media = response.media;
							}}
							on:mouseleave={() => {
								const response = onMouseLeave();

								hoverCoverState.hovering = response.hovering;
								hoverCoverState.item = response.item;
								hoverCoverState.media = response.media;
							}}
							on:mousemove={(e) => {
								const response = onMouseMove(e, 300);

								hoverCoverState.style = response.style;
							}}
						>
							<MediaTitleDisplay title={anime.title} />
						</a>
						<span style="opacity: 50%;">|</span>
						{watchedEpisodes}<span style="opacity: 50%;">/{anime.episodes || '?'}</span>
						<button class="button-square button-action">+</button>
						[{Math.floor(Math.random() * ((anime.episodes ?? 0) - watchedEpisodes)) +
							watchedEpisodes +
							1}]
					</li>
				{/each}
			</ul>
		</details>
	</div>
</div>

<p />

<div class="example-item card">
	<div>
		<span class="big-text">Tools & More!</span>

		<p>
			<a href={root('/')}>due.moe</a> also offers a suite of helpful tools to make your life on AniList
			that much easier.
		</p>

		<ul>
			<li>
				<a href={root('/wrapped')}>AniList Wrapped — Your Year on AniList</a>
			</li>
			<li>
				Badge Wall — A unified badge collection experience for AniList
				<blockquote style="margin: 0 0 0 1.5rem;">
					Easily display all of your earned badges in a single place, with your Anime Watching Club
					(AWC) badges automatically included!
				</blockquote>
			</li>
			<li>
				<a href={root('/schedule')}
					>Schedule — An Simulcast Release Calendar, displaying anime release times for <b
						>subtitled releases</b
					>!</a
				>
			</li>
			<li>
				<a href={root('/birthdays')}>Today's Character Birthdays</a>
			</li>
			<li>
				<a href={root('/tools/sequel_spy')}>Sequel Spy</a>
				<blockquote style="margin: 0 0 0 1.5rem;">
					Find media with prequels you haven't seen for any simulcast season
				</blockquote>
			</li>
		</ul>

		<p />

		<span class="big-text">
			<a
				href={`https://anilist.co/api/v2/oauth/authorize?client_id=${env.PUBLIC_ANILIST_CLIENT_ID}&redirect_uri=${env.PUBLIC_ANILIST_REDIRECT_URI}&response_type=code`}
				on:click={() => {
					localStorage.setItem(
						'redirect',
						window.location.origin + window.location.pathname + window.location.search
					);
				}}>Log in</a
			> with AniList to get started!
		</span>
	</div>
</div>

<HoverCover options={hoverCoverState} width={300} />

<style>
	.example-item {
		display: flex;
		flex-wrap: wrap;
	}

	.item-content {
		flex: 1 1 50%;
	}

	.item-description {
		flex: 1 1 50%;
	}

	.medium-text {
		font-size: 1.125rem;
	}

	.big-text {
		font-size: 1.25rem;
	}
</style>
