<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>
			<div class="simplestats-auth-card__heading-group">
				<h1 class="simplestats-auth-card__tagline">{{ text_heading }}</h1>
				<p class="simplestats-auth-card__subhead">{{ text_subheading }}</p>
			</div>
		</header>

		<ol class="simplestats-auth-steps">
			<li
				v-for="( label, index ) in steps"
				:key="index"
				class="simplestats-auth-steps__item"
				:class="stateClass( index )"
			>
				<span class="simplestats-auth-steps__icon" aria-hidden="true">
					<svg
						v-if="stateClass( index ) === 'is-done'"
						class="simplestats-auth-steps__icon-check"
						width="12"
						height="12"
						viewBox="0 0 12 12"
						fill="none"
						xmlns="http://www.w3.org/2000/svg"
					>
						<path d="M10 3L4.5 8.5L2 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
					</svg>
					<img
						v-else-if="stateClass( index ) === 'is-running'"
						class="simplestats-auth-steps__icon-loader"
						:src="getImageUrl('auth-step-loader.svg')"
						alt=""
					/>
				</span>
				<span class="simplestats-auth-steps__label">{{ label }}</span>
			</li>
		</ol>
	</section>
</template>

<script setup>
	import { onBeforeUnmount, onMounted, ref } from 'vue';
	import { useRouter } from 'vue-router';
	import { useAuthStore } from '@/authentication/store.js';

	const router = useRouter();
	const store = useAuthStore();

	const text_heading    = wp.i18n.__( 'Connecting your site…', 'simplestats-friendly-website-analytics' );
	const text_subheading = wp.i18n.__( 'This will only take a moment. Hang tight!', 'simplestats-friendly-website-analytics' );

	const steps = [
		wp.i18n.__( 'Registering Your Website',  'simplestats-friendly-website-analytics' ),
		wp.i18n.__( 'Creating Website Snippet',  'simplestats-friendly-website-analytics' ),
		wp.i18n.__( 'Setting up the Dashboard',  'simplestats-friendly-website-analytics' ),
		wp.i18n.__( 'Checking for Issues',       'simplestats-friendly-website-analytics' ),
	];

	// Each step has a target time (ms since mount) when it should flip to 'done'.
	const TARGETS = [ 800, 1600, 2800, 3600 ];
	const elapsed = ref( 0 );
	let rafHandle = null;
	let forwardTimer = null;

	function stateClass( index ) {
		const target = TARGETS[ index ];
		if ( elapsed.value >= target ) return 'is-done';
		if ( index > 0 && elapsed.value < TARGETS[ index - 1 ] ) return 'is-pending';
		return 'is-running';
	}

	onMounted( () => {
		// Defensive: if the user lands here without a flow (deep link / refresh), send them home.
		if ( store.flow !== 'sign-up' && store.flow !== 'sign-in' ) {
			router.replace( { name: 'sign-up' } );
			return;
		}

		const start = performance.now();
		const tick = () => {
			elapsed.value = performance.now() - start;
			if ( elapsed.value < TARGETS[ TARGETS.length - 1 ] ) {
				rafHandle = requestAnimationFrame( tick );
			}
		};
		rafHandle = requestAnimationFrame( tick );

		// After the last step lands on 'done', advance to the success page.
		const successRoute = store.flow === 'sign-in' ? 'sign-in-success' : 'sign-up-success';
		forwardTimer = setTimeout( () => {
			router.replace( { name: successRoute } );
		}, TARGETS[ TARGETS.length - 1 ] + 200 );
	} );

	onBeforeUnmount( () => {
		if ( rafHandle ) {
			cancelAnimationFrame( rafHandle );
		}
		if ( forwardTimer ) {
			clearTimeout( forwardTimer );
		}
	} );
</script>
