<script lang="ts">
	import { API_URL, ENABLE_TURNSTILE } from '$lib/constants/config';
	import { captcha } from '$lib/stores/global';
	import { t } from '$lib/i18n';
	import Turnstile from './Turnstile.svelte';
	import Logo from '../layout/Logo.svelte';

	export let redirect: string | undefined = undefined;

	function getOAuthUrl(provider: 'google' | 'twitch'): string {
		let url = `${API_URL}/auth/${provider}`;

		// Add turnstile token if enabled and available
		if (ENABLE_TURNSTILE) {
			if (!$captcha) return '#';
			url += `?token=${$captcha}`;
		}

		// Add redirect parameter
		if (redirect) {
			url += ENABLE_TURNSTILE ? `&r=${encodeURIComponent(redirect)}` : `?r=${encodeURIComponent(redirect)}`;
		}

		return url;
	}

	$: googleUrl = getOAuthUrl('google');
	$: twitchUrl = getOAuthUrl('twitch');
	$: isDisabled = ENABLE_TURNSTILE && !$captcha;
</script>

<div class="flex flex-col items-center max-w-md mx-auto p-6">
	<div class="flex justify-center mb-6">
		<Logo size="lg" hasText={true} />
	</div>

	<form class="w-full">
		{#if ENABLE_TURNSTILE}
			<div class="mt-6 flex flex-col items-center gap-2">
				<Turnstile />
			</div>
		{/if}
	</form>

	<div class="mt-6 flex flex-col items-center gap-2 w-full">
		<a
			href={googleUrl}
			class="btn btn-lg bg-base-100 w-full text-base"
			class:opacity-50={isDisabled}
			class:pointer-events-none={isDisabled}
		>
			<svg class="mr-1 size-5" viewBox="0 0 256 262" xmlns="http://www.w3.org/2000/svg">
				<path
					d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027"
					fill="#4285F4"
				/>
				<path
					d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1"
					fill="#34A853"
				/>
				<path
					d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782"
					fill="#FBBC05"
				/>
				<path
					d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251"
					fill="#EB4335"
				/>
			</svg>
			{$t('loginWith', { provider: 'Google' })}
		</a>

		<a
			href={twitchUrl}
			class="btn btn-lg bg-base-100 w-full text-base"
			class:opacity-50={isDisabled}
			class:pointer-events-none={isDisabled}
		>
			<svg class="mr-1 size-5" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 2400 2800">
				<path fill="#fff" d="m2200 1300-400 400h-400l-350 350v-350H600V200h1600z" />
				<g fill="#9146ff">
					<path d="M500 0 0 500v1800h600v500l500-500h400l900-900V0H500zm1700 1300-400 400h-400l-350 350v-350H600V200h1600v1100z" />
					<path d="M1700 550h200v600h-200zm-550 0h200v600h-200z" />
				</g>
			</svg>
			{$t('loginWith', { provider: 'Twitch' })}
		</a>
	</div>

	{#if ENABLE_TURNSTILE}
		<p class="text-base-content/60 mt-2 text-center text-xs">
			Protected by Cloudflare Turnstile
		</p>
	{/if}

	<p class="text-base-content/60 mt-6 text-center text-sm">
		{$t('termsAgreement')}
		<a class="font-medium" href="/terms/terms-of-service" target="_blank">
			{$t('termsOfService')}
		</a>
		{$t('and')}
		<a class="font-medium" href="/terms/privacy" target="_blank">
			{$t('privacyPolicy')}
		</a>
	</p>
</div>
