<template>
	<section class="simplestats-auth-card simplestats-auth-card--success">
		<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>

			<img
				class="simplestats-auth-card__badge"
				:src="getImageUrl('auth-success-badge.svg')"
				alt=""
				aria-hidden="true"
				width="96"
				height="96"
			/>

			<div class="simplestats-auth-card__heading-group">
				<h1 class="simplestats-auth-card__tagline">{{ heading }}</h1>
				<p
					v-if="props.flow === 'sign-up'"
					class="simplestats-auth-card__success-meta"
				>
					<span class="simplestats-auth-card__success-meta-line">{{ text_password_emailed }}</span>
					<span class="simplestats-auth-card__success-meta-email">{{ connectedEmail }}</span>
				</p>
				<p
					v-else
					class="simplestats-auth-card__success-meta simplestats-auth-card__success-meta--block"
				>{{ text_success_signin }}</p>
			</div>
		</header>

		<hr class="simplestats-auth-card__divider" />

		<div class="simplestats-auth-card__cta-section">
			<p class="simplestats-auth-card__cta-hint">{{ ctaHint }}</p>
			<a class="simplestats-auth-card__dashboard-btn" :href="dashboardUrl">
				<span class="simplestats-auth-card__dashboard-btn-label">{{ ctaLabel }}</span>
				<svg
					v-if="props.flow === 'sign-up'"
					class="simplestats-auth-card__dashboard-btn-icon"
					width="16"
					height="16"
					viewBox="0 0 16 16"
					fill="none"
					xmlns="http://www.w3.org/2000/svg"
					aria-hidden="true"
				>
					<path d="M9.13333 4L8.46667 4.66667L10.9333 7.13333H2.13333V8.2H10.9333L8.46667 10.6667L9.13333 11.3333L12.8667 7.66667L9.13333 4Z" fill="currentColor"/>
				</svg>
				<svg
					v-else
					class="simplestats-auth-card__dashboard-btn-icon"
					width="16"
					height="16"
					viewBox="0 0 16 16"
					fill="none"
					xmlns="http://www.w3.org/2000/svg"
					aria-hidden="true"
				>
					<path d="M11.3333 6.66667H10.5333V4.66667C10.5333 3.26667 9.4 2.13333 8 2.13333C6.6 2.13333 5.46667 3.26667 5.46667 4.66667V6.66667H4.66667C4.26667 6.66667 4 6.93333 4 7.33333V12.6667C4 13.0667 4.26667 13.3333 4.66667 13.3333H11.3333C11.7333 13.3333 12 13.0667 12 12.6667V7.33333C12 6.93333 11.7333 6.66667 11.3333 6.66667ZM9.46667 6.66667H6.53333V4.66667C6.53333 3.86667 7.2 3.2 8 3.2C8.8 3.2 9.46667 3.86667 9.46667 4.66667V6.66667Z" fill="currentColor"/>
				</svg>
			</a>
		</div>

		<p class="simplestats-auth-card__waiting">
			<span class="simplestats-auth-card__waiting-dot" aria-hidden="true" />
			<span>{{ text_waiting }}</span>
		</p>
	</section>
</template>

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

	const props = defineProps( {
		flow: { type: String, required: true }, // 'sign-up' | 'sign-in'
	} );

	const store = useAuthStore();

	const dashboardUrl = SimpleStatsVue.dashboardUrl;

	// Direct landing guard: this page should only be reached after a real
	// sign-up / sign-in completes. If the store says otherwise, the user
	// deep-linked here — bounce them to the plugin settings screen.
	onMounted( () => {
		const isValidLanding = store.flow === props.flow
			&& store.status === 'success'
			&& !! store.connectedEmail;

		if ( ! isValidLanding ) {
			const base = String( SimpleStatsVue.dashboardUrl || '' ).split( '#' )[ 0 ];
			window.location.replace( base + '#/settings' );
		}
	} );

	const text_waiting           = wp.i18n.__( 'Waiting for first pageview…', 'simplestats-friendly-website-analytics' );
	const text_password_emailed  = wp.i18n.__( 'Your password has been emailed to', 'simplestats-friendly-website-analytics' );
	const text_success_signin    = wp.i18n.__( 'We’ve automatically set up everything for you on your website to work with Simple Stats', 'simplestats-friendly-website-analytics' );
	const ctaLabel               = wp.i18n.__( 'View Dashboard', 'simplestats-friendly-website-analytics' );

	const connectedEmail = computed( () => store.connectedEmail || '' );

	const heading = computed( () => {
		return props.flow === 'sign-up'
			? wp.i18n.__( 'Analytics is now active on your website', 'simplestats-friendly-website-analytics' )
			: wp.i18n.__( 'Analytics Added', 'simplestats-friendly-website-analytics' );
	} );

	const ctaHint = computed( () => {
		return props.flow === 'sign-up'
			? wp.i18n.__( 'See everything you can do', 'simplestats-friendly-website-analytics' )
			: wp.i18n.__( 'Visit your Dashboard to generate your first data point', 'simplestats-friendly-website-analytics' );
	} );
</script>
