familienarchiv/frontend/src/lib/components/document/BulkDocumentEditLayout.svelte

<script lang="ts">
import { SvelteMap } from 'svelte/reactivity';
import { goto } from '$app/navigation';
import { onDestroy, untrack } from 'svelte';
import { m } from '$lib/paraglide/messages.js';
import BulkDropZone from './BulkDropZone.svelte';
import FileSwitcherStrip from './FileSwitcherStrip.svelte';
import type { FileEntry } from './FileSwitcherStrip.svelte';
import ScopeCard from './ScopeCard.svelte';
import UploadSaveBar from './UploadSaveBar.svelte';
import WhoWhenSection from './WhoWhenSection.svelte';
import DescriptionSection from './DescriptionSection.svelte';
import PdfViewer from '$lib/components/PdfViewer.svelte';
import { bulkTitleFromFilename } from '$lib/utils/filename';
import type { Tag } from '$lib/components/TagInput.svelte';
import type { components } from '$lib/generated/api';

type Person = components['schemas']['Person'];

let {
	initialSenderId = '',
	initialSenderName = '',
	initialReceivers = []
}: {
	initialSenderId?: string;
	initialSenderName?: string;
	initialReceivers?: Person[];
} = $props();

// --- File state ---
let files = new SvelteMap<string, FileEntry>();
let activeId = $state<string | null>(null);
let chunkProgress = $state<{ done: number; total: number } | undefined>(undefined);

// --- Shared metadata ---
let senderId = $state(untrack(() => initialSenderId));
let selectedReceivers = $state<Person[]>(untrack(() => initialReceivers));
let dateIso = $state('');
let tags = $state<Tag[]>([]);

// --- Derived ---
const isMulti = $derived(files.size >= 2);
const activeFile = $derived(activeId ? files.get(activeId) : null);

// --- File management ---
function addFiles(newFiles: File[]) {
	for (const file of newFiles) {
		const id = crypto.randomUUID();
		const title = bulkTitleFromFilename(file.name);
		const previewUrl = URL.createObjectURL(file);
		files.set(id, { id, file, title, status: 'idle', previewUrl });
		if (!activeId) activeId = id;
	}
}

function removeFile(id: string) {
	const entry = files.get(id);
	if (entry?.previewUrl) URL.revokeObjectURL(entry.previewUrl);
	files.delete(id);
	if (activeId === id) {
		activeId = files.keys().next().value ?? null;
	}
}

function setTitle(id: string, title: string) {
	const entry = files.get(id);
	if (entry) files.set(id, { ...entry, title });
}

function discardAll() {
	for (const entry of files.values()) {
		if (entry.previewUrl) URL.revokeObjectURL(entry.previewUrl);
	}
	files.clear();
	activeId = null;
	chunkProgress = undefined;
}

onDestroy(() => {
	for (const entry of files.values()) {
		if (entry.previewUrl) URL.revokeObjectURL(entry.previewUrl);
	}
});

// --- Save ---
async function save() {
	const entries = Array.from(files.values());
	const chunkSize = 10;
	const chunks: FileEntry[][] = [];
	for (let i = 0; i < entries.length; i += chunkSize) {
		chunks.push(entries.slice(i, i + chunkSize));
	}
	chunkProgress = { done: 0, total: chunks.length };

	for (let i = 0; i < chunks.length; i++) {
		const chunk = chunks[i];
		const formData = new FormData();
		chunk.forEach((entry) => formData.append('files', entry.file));
		const metadata = {
			titles: chunk.map((e) => e.title),
			senderId: senderId || null,
			receiverIds: selectedReceivers.map((r) => r.id),
			documentDate: dateIso || null
		};
		formData.append('metadata', new Blob([JSON.stringify(metadata)], { type: 'application/json' }));
		const res = await fetch('/api/documents/quick-upload', { method: 'POST', body: formData });
		if (!res.ok) {
			const body = await res.json().catch(() => ({ errors: [] }));
			const errorCount = (body.errors ?? []).length;
			for (let j = 0; j < errorCount && j < chunk.length; j++) {
				const e = files.get(chunk[j].id);
				if (e) files.set(chunk[j].id, { ...e, status: 'error' });
			}
		}
		chunkProgress = { done: i + 1, total: chunks.length };
	}
	goto('/documents');
}
</script>

<div class="fixed inset-x-0 bottom-0 flex flex-col" style="top: var(--header-height)">
	<!-- Topbar -->
	<div class="flex shrink-0 items-center gap-3 border-b border-line bg-surface px-6 py-3">
		<a
			href="/documents"
			class="flex items-center gap-1.5 text-xs font-bold tracking-widest text-ink-3 uppercase hover:text-ink"
		>
			<svg
				class="h-3.5 w-3.5"
				fill="none"
				stroke="currentColor"
				viewBox="0 0 24 24"
				aria-hidden="true"
			>
				<path
					stroke-linecap="round"
					stroke-linejoin="round"
					stroke-width="2"
					d="M10 19l-7-7m0 0l7-7m-7 7h18"
				/>
			</svg>
			{m.btn_back_to_overview()}
		</a>
		<span class="text-ink-3" aria-hidden="true">·</span>
		<span class="font-serif text-sm font-bold text-ink">
			{isMulti ? 'Neue Dokumente' : 'Neues Dokument'}
		</span>
		{#if isMulti}
			<span class="ml-auto flex items-center gap-3">
				<span class="rounded-[2px] bg-accent px-2 py-0.5 text-xs font-bold text-primary">
					{m.bulk_count_pill({ count: files.size })}
				</span>
				<button
					type="button"
					onclick={discardAll}
					class="text-xs font-medium text-red-600/70 hover:text-red-700"
				>
					{m.bulk_discard_all()}
				</button>
			</span>
		{/if}
	</div>

	<!-- Split panel -->
	<div class="flex flex-1 overflow-hidden">
		<!-- Left: PDF preview / drop zone (55%) -->
		<div class="relative flex flex-[55] flex-col overflow-hidden border-r border-line bg-pdf-bg">
			{#if files.size === 0}
				<!-- N=0: centred drop-zone box fills the panel -->
				<BulkDropZone onFilesAdded={addFiles} />
			{:else}
				<!-- N≥1: real PDF preview via local blob URL -->
				<div class="relative flex-1 overflow-hidden">
					{#if activeFile}
						<PdfViewer url={activeFile.previewUrl} />
					{/if}
				</div>
				{#if isMulti}
					<!-- File switcher strip pinned to bottom of left panel -->
					<FileSwitcherStrip
						files={Array.from(files.values())}
						activeId={activeId ?? ''}
						onSelect={(id) => (activeId = id)}
						onRemove={removeFile}
					/>
				{/if}
			{/if}
		</div>

		<!-- Right: metadata form (45%) -->
		<div class="flex flex-[45] flex-col overflow-hidden">
			<!-- Scrollable form area — greyed out and non-interactive when no files selected -->
			<div
				class="flex-1 space-y-4 overflow-y-auto p-4 transition-opacity"
				class:opacity-60={files.size === 0}
				class:pointer-events-none={files.size === 0}
			>
				{#if isMulti}
					<!-- N≥2: per-file card (title) + shared card (metadata) -->
					<ScopeCard variant="per-file">
						{#if activeFile}
							<label class="block">
								<span class="mb-1 block text-xs font-medium tracking-widest text-ink-2 uppercase">
									{m.form_label_title()} <span class="text-danger">*</span>
								</span>
								<input
									type="text"
									value={activeFile.title}
									oninput={(e) =>
										setTitle(activeId!, (e.currentTarget as HTMLInputElement).value)}
									class="block w-full rounded-sm border border-line bg-surface p-2 text-sm focus:border-accent focus:outline-none"
								/>
							</label>
						{/if}
					</ScopeCard>

					<ScopeCard variant="shared" count={files.size}>
						<WhoWhenSection
							bind:senderId={senderId}
							bind:selectedReceivers={selectedReceivers}
							bind:dateIso={dateIso}
							initialSenderName={initialSenderName}
							autofocus={false}
						/>
						<DescriptionSection bind:tags={tags} hideTitle />
					</ScopeCard>
				{:else}
					<!-- N=0 (disabled placeholder) or N=1 (active): title + shared form -->
					<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
						<label class="block">
							<span class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase">
								{m.form_label_title()} <span class="text-danger">*</span>
							</span>
							{#if activeFile}
								<input
									type="text"
									value={activeFile.title}
									oninput={(e) =>
										setTitle(activeId!, (e.currentTarget as HTMLInputElement).value)}
									class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
								/>
							{:else}
								<input
									type="text"
									disabled
									placeholder="—"
									class="block w-full rounded border border-line p-2 text-sm text-ink-3 shadow-sm"
								/>
							{/if}
						</label>
					</div>

					<WhoWhenSection
						bind:senderId={senderId}
						bind:selectedReceivers={selectedReceivers}
						bind:dateIso={dateIso}
						initialSenderName={initialSenderName}
					/>
					<DescriptionSection bind:tags={tags} hideTitle />
				{/if}
			</div>

			<!-- Action bar: always visible at bottom of right panel -->
			<UploadSaveBar
				fileCount={files.size}
				chunkProgress={chunkProgress}
				onSave={save}
				onDiscard={discardAll}
			/>
		</div>
	</div>
</div>