<script lang="ts">
	import { computeReasoningTags } from './reasoningTags';
	import { formatDayAbbr } from '$lib/planner/week';
	import type { Suggestion, SlotMap } from '$lib/planner/types';

	let {
		slotDate,
		slotId,
		isPlanner,
		slotMap,
		topSuggestion,
		onaddrecipe
	}: {
		slotDate: string;
		slotId: string;
		isPlanner: boolean;
		slotMap: SlotMap;
		topSuggestion?: Suggestion;
		onaddrecipe?: () => void;
	} = $props();

	let reasoningTags = $derived(
		topSuggestion ? computeReasoningTags(slotMap, topSuggestion.recipe) : []
	);

	const dayAbbr = $derived(slotDate ? formatDayAbbr(slotDate, 'short') : '');
	const dateNum = $derived(slotDate ? slotDate.slice(-2).replace(/^0/, '') : '');
</script>

<div
	data-testid="empty-day-tile"
	role="group"
	class="h-full flex flex-col overflow-hidden"
	style="border: 1.5px dashed var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: 0 1px 3px rgba(28,28,24,.06);"
>
	<!-- Day header -->
	<div style="display: flex; align-items: center; justify-content: space-between; padding: 7px 8px 0; flex-shrink: 0;">
		<span style="font-size: 9px; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); font-weight: 500;">{dayAbbr}</span>
		<span style="font-size: 10px; font-weight: 500; color: var(--color-text-muted);">{dateNum}</span>
	</div>

	<!-- CTA -->
	{#if isPlanner}
		<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 6px 6px; gap: 2px; flex-shrink: 0; border-bottom: 1px solid var(--color-border);">
			<button
				type="button"
				aria-label="Gericht wählen"
				onclick={() => onaddrecipe?.()}
				style="background: none; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px;"
			>
				<span style="font-size: 18px; color: var(--color-border); line-height: 1;">+</span>
				<span style="font-size: 9px; color: var(--color-text-muted); font-family: var(--font-sans);">Gericht wählen</span>
			</button>
		</div>
	{/if}

	{#if topSuggestion}
		<div style="display: flex; flex-direction: column; padding: 5px 7px 6px; flex: 1; overflow: hidden;">
			<div style="font-size: 8px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--color-text-muted); padding: 3px 0 5px; border-bottom: 1px solid var(--color-subtle, var(--color-border)); margin-bottom: 2px;">Vorschlag</div>
			<div style="display: flex; align-items: center; gap: 4px; padding: 5px 0;">
				<span style="font-family: var(--font-display); font-size: 11px; font-weight: 300; color: var(--color-text); flex: 1; line-height: 1.2;">{topSuggestion.recipe.name}</span>
				{#each reasoningTags as tag (tag.id)}
					<span
						data-testid="reasoning-tag"
						style="font-size: 8px; font-weight: 500; padding: 1px 4px; border-radius: 2px; white-space: nowrap; flex-shrink: 0; {tag.color === 'green' ? 'background: var(--green-tint); color: var(--green-dark);' : 'background: var(--yellow-tint); color: var(--yellow-text);'}"
					>
						{tag.label}
					</span>
				{/each}
			</div>
		</div>
	{/if}
</div>
