<!--
	Image-Occlusion-Render im Study-View. Zeigt das Bild und überlagert
	es mit den Mask-Regionen. Aktive Maske ist immer opake (Prompt:
	Antwort versteckt; Reveal: aktive ist transparent grün als Bestätigung).
	Andere Masken bleiben dezent durchsichtig — der User sieht sie als
	Hinweis darauf, was es noch zu lernen gibt.
-->
<script lang="ts">
	import { parseMaskRegions } from '@cards/domain';
	import { API_BASE } from '$lib/api/client.ts';

	let {
		imageRef,
		maskRegionsJson,
		activeMaskId,
		revealed,
	}: {
		imageRef: string;
		maskRegionsJson: string;
		activeMaskId: string | null;
		revealed: boolean;
	} = $props();

	const masks = $derived(parseMaskRegions(maskRegionsJson));
	const imageUrl = $derived(`${API_BASE}/api/v1/media/${imageRef}`);

	function fillFor(maskId: string): string {
		const isActive = maskId === activeMaskId;
		if (isActive) {
			return revealed ? 'rgba(34,197,94,0.55)' : 'rgba(20,20,30,0.95)';
		}
		// Andere Masken: leicht sichtbar als Lern-Hinweis.
		return 'rgba(255,180,0,0.18)';
	}
</script>

<div class="relative inline-block max-w-full">
	<img src={imageUrl} alt="" class="block max-w-full" draggable="false" />
	<svg
		class="pointer-events-none absolute inset-0 h-full w-full"
		viewBox="0 0 1 1"
		preserveAspectRatio="none"
	>
		{#each masks as m (m.id)}
			<rect
				x={m.x}
				y={m.y}
				width={m.w}
				height={m.h}
				fill={fillFor(m.id)}
				stroke={m.id === activeMaskId ? 'rgba(20,20,30,1)' : 'rgba(255,140,0,0.4)'}
				stroke-width="0.004"
			/>
			{#if m.id === activeMaskId && revealed && m.label}
				<text
					x={m.x + m.w / 2}
					y={m.y + m.h / 2}
					text-anchor="middle"
					dominant-baseline="middle"
					fill="white"
					font-size="0.04"
					font-family="system-ui, sans-serif"
					stroke="rgba(0,0,0,0.8)"
					stroke-width="0.002"
					paint-order="stroke"
				>
					{m.label}
				</text>
			{/if}
		{/each}
	</svg>
</div>
