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

	interface Props {
		data: {
			stapleCount: number;
			memberCount: number;
			userName: string;
		};
	}

	let { data }: Props = $props();
</script>

<h1>Einstellungen</h1>

<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
	<!-- Card 1: Vorräte (inline, conditional content) -->
	<a
		href="/household/staples?ctx=settings"
		class="flex flex-col gap-3 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] p-4 no-underline text-[var(--color-text)] hover:shadow-[var(--shadow-raised)] hover:border-[#C0BFB8] transition-[box-shadow,border-color] duration-150 ease focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--green-dark)] focus-visible:outline-offset-2 border-l-[3px] border-l-[var(--green-dark)]"
	>
		<span class="font-[var(--font-sans)] text-[14px] font-medium">Vorräte</span>

		{#if data.stapleCount > 0}
			<p class="font-[var(--font-sans)] text-[13px] text-[var(--color-text-muted)] m-0">
				<span
					data-testid="staple-count"
					class="font-[var(--font-display)] text-[36px] leading-[1] text-[var(--green-dark)]"
				>{data.stapleCount}</span>
			</p>
		{:else}
			<p class="font-[var(--font-sans)] text-[13px] text-[var(--color-text-muted)] m-0">
				Noch keine Vorräte eingerichtet
			</p>
		{/if}

		<span class="font-[var(--font-sans)] text-[12px] font-medium text-[var(--green-dark)] mt-auto">
			{#if data.stapleCount > 0}
				Vorräte bearbeiten →
			{:else}
				Jetzt einrichten →
			{/if}
		</span>
	</a>

	<!-- Card 2: Haushalt (inline, needs data-testid on member count) -->
	<a
		href="/members"
		class="flex flex-col gap-3 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] p-4 no-underline text-[var(--color-text)] hover:shadow-[var(--shadow-raised)] hover:border-[#C0BFB8] transition-[box-shadow,border-color] duration-150 ease focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--green-dark)] focus-visible:outline-offset-2"
	>
		<span class="font-[var(--font-sans)] text-[14px] font-medium">Haushalt</span>

		<p class="font-[var(--font-sans)] text-[13px] text-[var(--color-text-muted)] m-0">
			<span data-testid="member-count">{data.memberCount}</span> Mitglieder
		</p>

		<span class="font-[var(--font-sans)] text-[12px] font-medium text-[var(--green-dark)] mt-auto">
			Mitglieder anzeigen →
		</span>
	</a>

	<!-- Card 3: Profil (uses SettingsCard) -->
	<SettingsCard
		title="Profil"
		href="/profile"
		cta="Profil bearbeiten →"
		meta={data.userName}
	/>
</div>
