<script setup>
import VueHCaptcha from '@hcaptcha/vue3-hcaptcha';
import { inject, onMounted, ref } from 'vue';

import Password from '#/components/form/password.vue';
import Ellipsis from '#/components/loading/ellipsis.vue';

import { post } from '#/src/api.js';
import navigate from '#/src/navigate.js';

const pageContext = inject('pageContext');
const { user, env } = pageContext;
const { token } = pageContext.urlParsed.search;

const username = ref('');
const email = ref('');
const password = ref('');

const errorMsg = ref(null);
const submitted = ref(false);
const success = ref(false);
const mainInput = ref(null);
const captcha = ref(null);

async function signup() {
	errorMsg.value = null;
	submitted.value = true;

	if (env.captcha.enabled && !captcha.value) {
		errorMsg.value = 'Please complete the CAPTCHA';
		return;
	}

	try {
		const newUser = await post('/users', {
			token,
			username: username.value,
			password: password.value,
			redirect: pageContext.urlParsed.search.r,
			captcha: captcha.value,
		}, {
			successFeedback: 'Sign-up successful!',
			appendErrorMessage: true,
		});

		navigate(`/user/${newUser.username}`, null, { redirect: true });
	}
	catch (error) {
		errorMsg.value = error.message;
	}
	finally {
		submitted.value = false;
	}
}

async function request() {
	errorMsg.value = null;
	submitted.value = true;

	try {
		await post('/signups', {
			email: email.value,
		}, {
			successFeedback: 'Sign-up requested, please check your inbox',
			appendErrorMessage: true,
		});

		success.value = true;
	}
	catch (error) {
		errorMsg.value = error.message;
	}
	finally {
		submitted.value = false;
	}
}

onMounted(() => {
	mainInput.value.focus();
});
</script>

<template>
	<div class="login-container">
		<div v-if="user">
			You are already logged in as {{ user.username }}.

			<ul>
				<li>
					<a
						:href="`/user/${user.username}`"
						class="link"
					>View my profile</a>
				</li>

				<li>
					<a
						href="/updates"
						class="link"
					>Check out latest porn updates</a>
				</li>

				<li>
					<a
						href="/actors"
						class="link"
					>Browse the hottest porn stars</a>
				</li>
			</ul>
		</div>

		<form
			v-else-if="token"
			autocomplete="off"
			class="login-panel"
			@submit.prevent="signup"
		>
			<div
				v-if="errorMsg"
				class="error"
			>{{ errorMsg }}</div>

			<input
				ref="mainInput"
				v-model="username"
				placeholder="Username"
				class="input"
				required
			>

			<Password
				:password="password"
				autocomplete="new-password"
				@input="(newPassword) => password = newPassword"
			/>

			<VueHCaptcha
				v-if="env.captcha.enabled"
				:sitekey="env.captcha.siteKey"
				class="captcha"
				@verify="(verification) => captcha = verification"
				@expired="captcha = null"
			/>

			<Ellipsis v-if="submitted" />

			<button
				v-else
				class="button button-submit"
				:disabled="submitted"
			>Sign up</button>
		</form>

		<form
			v-else
			autocomplete="off"
			class="login-panel"
			@submit.prevent="request"
		>
			<span
				v-if="success"
				class="success"
			>
				<strong class="success-heading">Thank you for signing up!</strong>
				Please check your e-mail inbox to continue.
			</span>

			<template v-else>
				<input
					ref="mainInput"
					v-model="email"
					type="email"
					placeholder="E-mail"
					class="input"
					required
				>

				<Ellipsis v-if="submitted" />

				<template v-else>
					<button
						class="button button-submit"
						:disabled="submitted"
					>Send signup e-mail</button>

					<a
						href="/login"
						class="link login"
					>I already have an account</a>
				</template>
			</template>
		</form>
	</div>
</template>

<style scoped>
.input {
	width: 100%;
}

.login-container {
	display: flex;
	flex-grow: 1;
	justify-content: center;
	align-items: center;
	background: var(--background-base-10);
}

.login-panel {
	width: 20rem;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: 1rem;
	margin: 1rem;
	border-radius: .5rem;
	box-shadow: 0 0 3px var(--shadow-weak-30);
	background: var(--background-base);
	font-size: 1rem;

	.button {
		justify-content: center;
	}

	.link {
		margin-top: 1rem;
		text-align: center;
	}
}

.password-container {
	display: flex;
	position: relative;
}

.password {
	flex-grow: 1;
}

.password-show {
	height: 100%;
	display: flex;
	align-items: center;
	position: absolute;
	right: 0;
	padding: 0 1rem 0 .5rem;

	.icon {
		fill: var(--glass);
	}

	&:hover {
		cursor: pointer;

		.icon {
			fill: var(--primary);
		}
	}
}

.captcha {
	display: flex;
	justify-content: center;
	margin-top: .5rem;
}

.button-submit {
	padding: .75rem 1rem;
	margin-top: .5rem;
}

.error {
	background: var(--error);
	color: var(--text-light);
	padding: .75rem 1rem;
	border-radius: .25rem;
	margin-bottom: .5rem;
	font-size: .9rem;
	font-weight: bold;
	text-align: center;
}

.success {
	line-height: 1.25;
}

.success-heading {
	display: block;
	color: var(--primary);
	margin-bottom: .5rem;
}

.load-container {
	justify-content: center;
}
</style>
