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

let { originalFilename }: { originalFilename: string } = $props();

let selectedFilename = $state<string | null>(null);

function handleFileChange(e: Event) {
	const file = (e.target as HTMLInputElement).files?.[0];
	selectedFilename = file?.name ?? null;
}
</script>

<div class="rounded-sm border border-line bg-surface shadow-sm">
	<div class="border-b border-line px-6 py-4">
		<h2 class="text-xs font-bold tracking-widest text-ink-3 uppercase">
			{m.doc_section_file()}
		</h2>
	</div>

	<!-- Current file -->
	<div class="flex items-center gap-3 border-b border-line px-6 py-3 text-sm text-ink-2">
		<img
			src="/degruyter-icons/Simple/Medium-24px/SVG/Action/PDF-Document-MD.svg"
			alt=""
			aria-hidden="true"
			class="h-4 w-4 flex-shrink-0"
		/>
		<span
			>{m.doc_current_file_label()}
			<strong class="font-medium text-ink">{originalFilename}</strong></span
		>
	</div>

	<!-- Replace file upload zone -->
	<label
		for="file-upload"
		class="flex cursor-pointer flex-col items-center gap-3 px-6 py-8 transition-colors hover:bg-muted/40"
	>
		<svg
			class="h-8 w-8 text-ink-3"
			fill="none"
			stroke="currentColor"
			viewBox="0 0 24 24"
			aria-hidden="true"
		>
			<path
				stroke-linecap="round"
				stroke-linejoin="round"
				stroke-width="1.5"
				d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"
			/>
		</svg>
		{#if selectedFilename}
			<span class="text-sm font-medium text-ink">{selectedFilename}</span>
		{:else}
			<span class="text-sm font-medium text-ink-2">{m.doc_file_replace_label()}</span>
			<span class="text-xs text-ink-3">{m.doc_file_replace_note()}</span>
		{/if}
	</label>
	<input id="file-upload" type="file" name="file" onchange={handleFileChange} class="sr-only" />
</div>
