<svelte:head>
	<title>Vorräte einrichten — Mealplan</title>
</svelte:head>

<script lang="ts">
	import ProgressSidebar from '$lib/components/ProgressSidebar.svelte';
	import StaplesManager from '$lib/onboarding/StaplesManager.svelte';

	type Category = { id: string; name: string; ingredients: { id: string; name: string; isStaple: boolean }[] };

	let { data, ctx }: { data: { categories: Category[] }; ctx?: string } = $props();

	const isOnboarding = $derived(ctx === 'onboarding');
</script>

{#if isOnboarding}
	<div class="flex min-h-screen bg-[var(--color-page)]">
		<!-- Desktop sidebar -->
		<aside class="hidden md:flex w-[300px] flex-shrink-0 flex-col bg-[var(--color-surface)] border-r border-[var(--color-border)] p-[40px_28px]">
			<ProgressSidebar currentStep={2} />
		</aside>

		<!-- Main area -->
		<main class="flex flex-1 flex-col">
			<!-- Mobile step indicator -->
			<p class="md:hidden px-6 pt-6 text-sm text-[var(--color-text-muted)]">Schritt 2 von 3</p>

			<!-- Content -->
			<div class="flex-1 p-6">
				<StaplesManager categories={data.categories} context="onboarding" />
			</div>

			<!-- Footer navigation -->
			<div class="flex justify-between p-6">
				<a href="/planner">Überspringen</a>
				<a href="/household/invite">Weiter</a>
			</div>
		</main>
	</div>
{:else}
	<div class="flex min-h-screen flex-col bg-[var(--color-page)]">
		<h1>Vorräte</h1>
		<StaplesManager categories={data.categories} context="settings" />
	</div>
{/if}
