<script lang="ts">
	import {
		darkModeStore,
		interfaceAdvancedThemingStore,
		interfaceAmoledTheme,
		interfaceBorderRadiusStore,
		invidiousAuthStore,
		isAndroidTvStore,
		rawMasterKeyStore,
		themeColorStore
	} from '$lib/store';
	import ui from 'beercss';
	import { App } from '@capacitor/app';
	import { goto } from '$app/navigation';
	import { resolve } from '$app/paths';
	import '$lib/css/global.css';
	import 'beercss';
	import 'material-dynamic-colors';

	import { setAmoledTheme, setStatusBarColor, setTheme, setThemeColors } from '$lib/theme';

	import { pwaInfo } from 'virtual:pwa-info';
	import { onMount } from 'svelte';
	import { Capacitor } from '@capacitor/core';
	import colorTheme, { convertToHexColorCode } from '$lib/android/plugins/colorTheme';
	import { Browser } from '@capacitor/browser';
	import {
		bookmarkletLoadFromUrl,
		loadSettingsFromEnv,
		syncSettingsToBackend
	} from '$lib/externalSettings';

	let { children } = $props();

	themeColorStore.subscribe(async (hex) => {
		if (!hex || Object.keys($interfaceAdvancedThemingStore).length > 0) return;
		await ui('theme', hex);
	});

	interfaceAdvancedThemingStore.subscribe(async (colors) => {
		setThemeColors(colors);
		await setStatusBarColor();
	});

	interfaceBorderRadiusStore.subscribe((radius) => {
		document.documentElement.style.setProperty('--border-radius', `${radius}rem`);
	});

	interfaceAmoledTheme.subscribe(async () => {
		if (Object.keys($interfaceAdvancedThemingStore).length > 0) return;

		setAmoledTheme();
		await setStatusBarColor();
	});

	darkModeStore.subscribe(async () => {
		if (Object.keys($interfaceAdvancedThemingStore).length > 0) return;

		setTheme();
		setAmoledTheme();

		await setStatusBarColor();
	});

	App.addListener('backButton', async (data) => {
		if (data.canGoBack) {
			window.history.back();
		} else {
			await App.exitApp();
		}
	});

	App.addListener('appUrlOpen', (data) => {
		const url = new URL(data.url);

		// Handle youtube deeplinks
		if (url.protocol !== 'materialious-auth:') {
			let videoId = url.searchParams.get('v');
			if (!videoId) {
				videoId = url.pathname.split('/')[1];
			}

			if (videoId === 'shorts') {
				videoId = url.pathname.split('/')[2];
			}

			if (!videoId) {
				return;
			}

			goto(resolve(`/watch/[videoId]`, { videoId: videoId }));
		} else {
			// Auth response handling for Mobile
			const username = url.searchParams.get('username');
			const token = url.searchParams.get('token');

			if (username && token) {
				invidiousAuthStore.set({
					username: username,
					token: token
				});
			}
		}
	});

	onMount(async () => {
		await ui();

		if (Capacitor.getPlatform() === 'android') {
			if (!$themeColorStore) {
				try {
					const colorPalette = await colorTheme.getColorPalette();
					const colorAsHex = convertToHexColorCode(colorPalette.primary);
					themeColorStore.set(colorAsHex);
					await ui('theme', colorAsHex);
				} catch {
					// Continue regardless of error
				}
			}

			document.addEventListener('click', async (event: MouseEvent) => {
				// Handles opening links in browser for android.
				const link = (event.target as HTMLElement).closest('a');

				if (link && link.href && link.href.startsWith('http') && link.target === '_blank') {
					event.preventDefault();
					await Browser.open({ url: link.href });
				}
			});
		}

		loadSettingsFromEnv();
		// Should always be loaded after env settings
		// So user preferences overwrite instance preferences.
		bookmarkletLoadFromUrl();

		setThemeColors($interfaceAdvancedThemingStore);
	});

	let syncToSettingsInitialized = false;
	rawMasterKeyStore.subscribe((value) => {
		if (value === undefined || syncToSettingsInitialized) return;
		syncToSettingsInitialized = true;
		syncSettingsToBackend();
	});

	let webManifestLink = $derived(pwaInfo ? pwaInfo.webManifest.linkTag : '');
</script>

<svelte:head>
	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
	{@html webManifestLink}

	{#if $isAndroidTvStore}
		<style>
			not(.item-select):focus {
				outline: 2px solid var(--primary);
				box-shadow: none !important;
			}

			.item-select:focus {
				outline: none !important;
				box-shadow: none !important;
			}
		</style>
	{:else}
		<style>
			:focus {
				outline: none !important;
				box-shadow: none !important;
			}
		</style>
	{/if}
</svelte:head>

{@render children?.()}
