<script lang="ts">
import { m } from '$lib/paraglide/messages.js';

let {
	onFilesAdded
}: {
	onFilesAdded: (files: File[]) => void;
} = $props();

let isDragging = $state(false);
</script>

<div
	role="region"
	aria-label="Dateien ablegen"
	data-testid="bulk-drop-zone"
	class="flex flex-1 flex-col items-center justify-center p-6"
	ondragover={(e) => {
		e.preventDefault();
		isDragging = true;
	}}
	ondragleave={() => (isDragging = false)}
	ondrop={(e) => {
		e.preventDefault();
		isDragging = false;
		if (e.dataTransfer && e.dataTransfer.files.length > 0) {
			onFilesAdded(Array.from(e.dataTransfer.files));
		}
	}}
>
	<div
		class={[
			'flex w-full max-w-xl flex-col items-center gap-5 rounded-md border-2 border-dashed px-12 py-16 text-center transition-colors',
			isDragging ? 'border-accent bg-accent/10' : 'border-accent/50 bg-white/[0.04]'
		].join(' ')}
	>
		<!-- Circular mint icon -->
		<div class="flex h-20 w-20 items-center justify-center rounded-full bg-accent text-primary">
			<svg
				width="32"
				height="32"
				viewBox="0 0 32 32"
				xmlns="http://www.w3.org/2000/svg"
				aria-hidden="true"
			>
				<polygon
					fill="currentColor"
					points="6 12.5 16 2 26 12.5 24.5714286 14 16.999 6.049 17 30 15 30 14.999 6.051 7.42857143 14"
				/>
			</svg>
		</div>

		<!-- Serif title -->
		<p class="font-serif text-base font-bold text-ink">{m.bulk_drop_hint()}</p>

		<!-- Sub description -->
		<p class="text-sm leading-relaxed text-ink-2">
			Für jede Datei wird ein eigenes Dokument erstellt.<br />
			<strong class="text-ink">Der Titel</strong> wird aus dem Dateinamen vorausgefüllt —
			<strong class="text-ink">alle anderen Felder</strong> gelten für alle gemeinsam.
		</p>

		<!-- CTA button -->
		<label
			class="flex min-h-[44px] cursor-pointer items-center rounded-sm bg-primary px-6 py-2 text-xs font-bold tracking-widest text-primary-fg uppercase transition-opacity hover:opacity-90"
		>
			Dateien auswählen
			<input
				type="file"
				multiple
				accept="application/pdf"
				class="sr-only"
				onchange={(e) => {
					const files = Array.from(e.currentTarget.files ?? []);
					if (files.length > 0) onFilesAdded(files);
				}}
			/>
		</label>

		<!-- Format hint -->
		<p class="text-xs text-ink-3">{m.bulk_drop_sub()}</p>
	</div>
</div>
