<script lang="ts">
	import { currentStep, steps as stepNames, currentStepName } from '$lib/stores';
	import Splash from './Splash.svelte';
	import StepAuth from './wizard/StepAuth.svelte';
	import StepSheetSearch from './wizard/StepSheetSearch.svelte';
	import StepColumnMap from './wizard/StepColumnMap.svelte';
	import StepRowFilter from './wizard/StepRowFilter.svelte';
	import StepCardDetails from './wizard/StepCardDetails.svelte';
	import StepCardSelect from './wizard/StepCardSelect.svelte';
	import StepGallery from './wizard/StepGallery.svelte';
	import StepGenerate from './wizard/StepGenerate.svelte';

	const stepTitles = {
		splash: 'Welcome',
		auth: 'Authenticate',
		search: 'Select Sheet',
		mapping: 'Map Columns',
		validation: 'Filter Rows',
		'card-details': 'Enter Card Details',
		'card-select': 'Select Card Type',
		gallery: 'Preview Gallery',
		generate: 'Generate Cards'
	};

	let currentTitle = $derived(stepTitles[$currentStepName]);
	let currentStepIndex = $derived(stepNames.indexOf($currentStepName));
</script>

<div class="bg-gray-100 min-h-screen p-4">
	<div class="container mx-auto max-w-5xl pb-10">
		{#if $currentStepName !== 'splash'}
			<!-- Progress indicator -->
			<div class="bg-white rounded-lg shadow-sm p-6 mb-6">
				<div class="flex items-center justify-between mb-4">
					<h1 class="text-2xl font-bold text-gray-800">
						{currentTitle}
					</h1>
					<span class="text-sm text-gray-500">
						Step {currentStepIndex} of {stepNames.length - 1}
					</span>
				</div>

				<!-- Progress bar -->
				<div class="w-full bg-gray-200 rounded-full h-2">
					<div
						class="bg-blue-600 h-2 rounded-full transition-all duration-300"
						style="width: {(currentStepIndex / (stepNames.length - 1)) * 100}%"
					></div>
				</div>
			</div>
		{/if}

		<!-- Step content -->
		<div class="bg-white rounded-lg shadow-sm">
			{#if $currentStepName === 'splash'}
				<Splash />
			{:else if $currentStepName === 'auth'}
				<StepAuth />
			{:else if $currentStepName === 'search'}
				<StepSheetSearch />
			{:else if $currentStepName === 'mapping'}
				<StepColumnMap />
			{:else if $currentStepName === 'validation'}
				<StepRowFilter />
			{:else if $currentStepName === 'card-details'}
				<StepCardDetails />
			{:else if $currentStepName === 'card-select'}
				<StepCardSelect />
			{:else if $currentStepName === 'gallery'}
				<StepGallery />
			{:else if $currentStepName === 'generate'}
				<StepGenerate />
			{/if}
		</div>
	</div>
</div>
