<template>
	<section class="simplestats-auth-card">
		<header class="simplestats-auth-card__brand">
			<div class="simplestats-auth-card__logo">
				<img
					class="simplestats-auth-card__logo-image"
					:src="getImageUrl('logo.svg')"
					alt="SimpleStats"
				/>
			</div>
			<p class="simplestats-auth-card__tagline">{{ text_tagline }}</p>
		</header>

		<div
			v-if="isConfirmed"
			class="simplestats-auth-card__confirmation"
			role="status"
		>{{ text_confirmation }}</div>

		<form
			v-else
			class="simplestats-auth-card__form"
			@submit.prevent="onSubmit"
			novalidate
		>
			<div
				v-if="globalMessage"
				class="simplestats-auth-card__notice"
				role="alert"
			>{{ globalMessage }}</div>

			<div class="simplestats-auth-card__field" :class="{ 'has-error': store.fieldErrors.email }">
				<input
					type="email"
					class="simplestats-auth-card__input"
					:placeholder="text_email_placeholder"
					:value="store.draft.email"
					autocomplete="email"
					required
					@input="onEmailInput"
				/>
				<p v-if="emailErrorMessage" class="simplestats-auth-card__error">{{ emailErrorMessage }}</p>
			</div>

			<button
				type="submit"
				class="simplestats-auth-card__submit"
				:class="{ 'is-loading': isSubmitting }"
				:disabled="!canSubmit"
			>
				<span v-if="isSubmitting" class="simplestats-auth-card__submit-spinner" aria-hidden="true" />
				<span>{{ isSubmitting ? text_cta_loading : text_cta }}</span>
				<svg
					v-if="!isSubmitting"
					class="simplestats-auth-card__submit-arrow"
					width="16"
					height="16"
					viewBox="0 0 16 16"
					fill="none"
					xmlns="http://www.w3.org/2000/svg"
					aria-hidden="true"
				>
					<path d="M3 8H13M13 8L8 3M13 8L8 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
				</svg>
			</button>
		</form>

		<p class="simplestats-auth-card__alt">
			<router-link class="simplestats-auth-card__alt-link" to="/sign-in">{{ text_back_to_sign_in }}</router-link>
		</p>
	</section>
</template>

<script setup>
	import { computed } from 'vue';
	import { useAuthStore } from '@/authentication/store.js';

	const store = useAuthStore();

	const text_tagline           = wp.i18n.__( 'Reset your password — we’ll email you a link.', 'simplestats-friendly-website-analytics' );
	const text_email_placeholder = wp.i18n.__( 'Email address', 'simplestats-friendly-website-analytics' );
	const text_cta               = wp.i18n.__( 'Send reset link', 'simplestats-friendly-website-analytics' );
	const text_cta_loading       = wp.i18n.__( 'Sending…', 'simplestats-friendly-website-analytics' );
	const text_confirmation      = wp.i18n.__( 'If an account exists for that email, we’ve sent a reset link.', 'simplestats-friendly-website-analytics' );
	const text_back_to_sign_in   = wp.i18n.__( 'Back to sign in', 'simplestats-friendly-website-analytics' );

	const isSubmitting = computed( () => store.status === 'submitting' );
	const canSubmit    = computed( () => store.draft.email.length > 0 && ! isSubmitting.value );

	// Forgot uses store.flow=null (set by submitForgot). Success state with null flow = forgot confirmation.
	const isConfirmed = computed( () => store.status === 'success' && store.flow === null );

	const emailErrorMessage = computed( () => {
		const code = store.fieldErrors.email;
		if ( 'email_invalid' === code )  return wp.i18n.__( 'Please enter a valid email address.', 'simplestats-friendly-website-analytics' );
		if ( 'email_required' === code ) return wp.i18n.__( 'Email is required.', 'simplestats-friendly-website-analytics' );
		return '';
	} );

	const globalMessage = computed( () => {
		const code = store.fieldErrors._global;
		if ( 'rate_limited' === code ) return wp.i18n.__( 'Too many reset requests. Try again later.', 'simplestats-friendly-website-analytics' );
		if ( 'network' === code )      return wp.i18n.__( 'Couldn’t reach SimpleStats. Check your connection and try again.', 'simplestats-friendly-website-analytics' );
		if ( code )                    return ( store.error && store.error.message ) || '';
		return '';
	} );

	function onEmailInput( event ) {
		store.setDraft( { email: event.target.value } );
		store.clearFieldError( 'email' );
		store.clearFieldError( '_global' );
	}

	function onSubmit() {
		store.submitForgot();
	}
</script>
