bea-edit/src/lib/components/ProcessedZipArchiveEditor.svelte

<script lang="ts">
	import AttachmentPreview from '$lib/components/AttachmentPreview.svelte';
	import Button from '$lib/components/ui/button.svelte';
	import SubDocumentEditor from '$lib/components/SubDocumentEditor.svelte';
	import {
		buildArchiveExport,
		buildSubDocumentExport,
		createSubDocument,
		dissolveSubDocument,
		moveAttachmentIntoSubDocument,
		moveSubDocument,
		type AttachmentLocation,
		type ExportMode,
		type ProcessedZipArchive,
		type SubDocument,
		type ZipAttachment
	} from '$lib/zip-processing';
	import { cn } from '$lib/utils';

	type Props = {
		archive: ProcessedZipArchive;
		thumbnailWidth: number;
		onArchiveChange?: (archive: ProcessedZipArchive) => void;
	};

	let { archive, thumbnailWidth = 200, onArchiveChange = () => {} }: Props = $props();

	const ATTACHMENT_MIME = 'application/x-juri-merger-attachment';

	let archiveName = $state('');
	let looseAttachments = $state<ZipAttachment[]>([]);
	let subDocuments = $state<SubDocument[]>([]);

	let selectionMode = $state(false);
	let selectedPaths = $state<Set<string>>(new Set());

	let dragIndex = $state<number | null>(null);
	let dropIndex = $state<number | null>(null);

	let blockDragIndex = $state<number | null>(null);
	let blockDropIndex = $state<number | null>(null);

	let downloadMode = $state<ExportMode>('single');
	let isMerging = $state(false);
	let downloadingSubDocumentId = $state<string | null>(null);
	let mergeError = $state<string | null>(null);

	const isExportActive = $derived(isMerging || downloadingSubDocumentId !== null);

	$effect(() => {
		archiveName = archive.name;
		looseAttachments = archive.attachments.map((attachment) => ({ ...attachment }));
		subDocuments = archive.subDocuments.map((subDocument) => ({
			...subDocument,
			attachments: subDocument.attachments.map((attachment) => ({ ...attachment }))
		}));
	});

	const toArrayBuffer = (bytes: Uint8Array) => {
		const copy = new Uint8Array(bytes.byteLength);
		copy.set(bytes);
		return copy.buffer;
	};

	const normalizeFileName = (name: string) =>
		name.toLowerCase().endsWith('.pdf') ? name : `${name}.pdf`;

	const downloadPdfBytes = (bytes: Uint8Array, fileName: string) => {
		const pdfBlob = new Blob([toArrayBuffer(bytes)], { type: 'application/pdf' });
		const objectUrl = URL.createObjectURL(pdfBlob);
		const downloadLink = document.createElement('a');
		downloadLink.href = objectUrl;
		downloadLink.download = normalizeFileName(fileName);
		downloadLink.rel = 'noopener';
		downloadLink.click();
		window.setTimeout(() => URL.revokeObjectURL(objectUrl), 1000);
	};

	const composedArchive = (): ProcessedZipArchive => ({
		...archive,
		name: archiveName,
		attachments: looseAttachments,
		subDocuments
	});

	const emitArchiveChange = (nextArchive: ProcessedZipArchive) => {
		archiveName = nextArchive.name;
		looseAttachments = nextArchive.attachments;
		subDocuments = nextArchive.subDocuments;
		onArchiveChange(nextArchive);
	};

	const commit = () => {
		onArchiveChange(composedArchive());
	};

	const hasSubDocuments = $derived(subDocuments.length > 0);

	const toggleSelection = (path: string) => {
		const next = new Set(selectedPaths);

		if (next.has(path)) {
			next.delete(path);
		} else {
			next.add(path);
		}

		selectedPaths = next;
	};

	const toggleSelectionMode = () => {
		selectionMode = !selectionMode;
		selectedPaths = new Set();
	};

	const exitSelectionMode = () => {
		selectionMode = false;
		selectedPaths = new Set();
	};

	const handleWindowKeydown = (event: KeyboardEvent) => {
		if (event.key === 'Escape' && selectionMode) {
			exitSelectionMode();
		}
	};

	const createSubDocumentFromSelection = () => {
		if (selectedPaths.size === 0) {
			return;
		}

		const selectedAttachments = looseAttachments.filter((attachment) =>
			selectedPaths.has(attachment.path)
		);
		const remainingAttachments = looseAttachments.filter(
			(attachment) => !selectedPaths.has(attachment.path)
		);

		if (selectedAttachments.length === 0) {
			return;
		}

		const subDocumentNumber = subDocuments.length + 1;
		const nextSubDocument = createSubDocument(
			`Teildokument ${subDocumentNumber}`,
			selectedAttachments
		);

		looseAttachments = remainingAttachments;
		subDocuments = [...subDocuments, nextSubDocument];
		selectedPaths = new Set();
		commit();
	};

	const dissolveSubDocumentBlock = (subDocumentId: string) => {
		const nextArchive = dissolveSubDocument(composedArchive(), subDocumentId);

		emitArchiveChange(nextArchive);
	};

	const handleSubDocumentChange = (next: SubDocument) => {
		subDocuments = subDocuments.map((subDocument) =>
			subDocument.id === next.id ? next : subDocument
		);
		commit();
	};

	const handleAttachmentMove = (source: AttachmentLocation, target: AttachmentLocation) => {
		const nextArchive = moveAttachmentIntoSubDocument(composedArchive(), source, target);

		emitArchiveChange(nextArchive);
	};

	const handleBlockDragStart = (blockIndex: number, _event: DragEvent) => {
		blockDragIndex = blockIndex;
		blockDropIndex = blockIndex;
	};

	const handleBlockDragOver = (blockIndex: number, _event: DragEvent) => {
		blockDropIndex = blockIndex;
	};

	const handleBlockDrop = (blockIndex: number, _event: DragEvent) => {
		if (blockDragIndex === null) {
			return;
		}

		const fromIndex = blockDragIndex;
		const nextArchive = moveSubDocument(composedArchive(), fromIndex, blockIndex);

		emitArchiveChange(nextArchive);
		blockDragIndex = null;
		blockDropIndex = null;
	};

	const handleBlockDragEnd = () => {
		blockDragIndex = null;
		blockDropIndex = null;
	};

	const moveLooseAttachment = (fromIndex: number, toIndex: number) => {
		if (
			fromIndex === toIndex ||
			fromIndex < 0 ||
			toIndex < 0 ||
			fromIndex >= looseAttachments.length ||
			toIndex >= looseAttachments.length
		) {
			return;
		}

		const nextAttachments = [...looseAttachments];
		const [movedAttachment] = nextAttachments.splice(fromIndex, 1);

		nextAttachments.splice(toIndex, 0, movedAttachment);

		looseAttachments = nextAttachments;
		commit();
	};

	const handleLooseDragStart = (index: number, event: DragEvent) => {
		if (selectionMode) {
			event.preventDefault();
			return;
		}

		dragIndex = index;
		dropIndex = index;

		const source: AttachmentLocation = { kind: 'loose', index };

		if (event.dataTransfer) {
			event.dataTransfer.effectAllowed = 'move';
			event.dataTransfer.setData(ATTACHMENT_MIME, JSON.stringify(source));
			event.dataTransfer.setData('text/plain', String(index));
		}
	};

	const parseAttachmentPayload = (event: DragEvent): AttachmentLocation | null => {
		const raw = event.dataTransfer?.getData(ATTACHMENT_MIME);

		if (!raw) {
			return null;
		}

		try {
			const parsed = JSON.parse(raw) as AttachmentLocation;

			if (parsed.kind === 'loose' || parsed.kind === 'subDocument') {
				return parsed;
			}

			return null;
		} catch {
			return null;
		}
	};

	const handleLooseDragOver = (index: number, event: DragEvent) => {
		if (event.dataTransfer?.types.includes(ATTACHMENT_MIME)) {
			event.preventDefault();
			dropIndex = index;
		}
	};

	const handleLooseDrop = (index: number, event: DragEvent) => {
		const source = parseAttachmentPayload(event);

		if (!source) {
			return;
		}

		event.preventDefault();

		if (source.kind === 'loose') {
			moveLooseAttachment(source.index, index);
		} else {
			const nextArchive = moveAttachmentIntoSubDocument(composedArchive(), source, {
				kind: 'loose',
				index
			});

			emitArchiveChange(nextArchive);
		}

		dragIndex = null;
		dropIndex = null;
	};

	const handleLooseDragEnd = () => {
		dragIndex = null;
		dropIndex = null;
	};

	const downloadArchive = async () => {
		if (looseAttachments.length === 0 && subDocuments.length === 0) {
			return;
		}

		if (isExportActive) {
			return;
		}

		isMerging = true;
		mergeError = null;

		try {
			const exportUnits = await buildArchiveExport(composedArchive(), downloadMode);

			for (const unit of exportUnits) {
				downloadPdfBytes(unit.bytes, unit.name);
			}
		} catch (error) {
			console.error(`Failed to export archive ${archive.name}`, error);
			mergeError = 'PDF konnte nicht erstellt werden.';
		} finally {
			isMerging = false;
		}
	};

	const downloadSubDocument = async (subDocument: SubDocument) => {
		if (isExportActive || subDocument.attachments.length === 0) {
			return;
		}

		downloadingSubDocumentId = subDocument.id;
		mergeError = null;

		try {
			const exportUnit = await buildSubDocumentExport(archiveName, subDocument);

			downloadPdfBytes(exportUnit.bytes, exportUnit.name);
		} catch (error) {
			console.error(
				`Failed to export sub-document "${subDocument.name}" from archive ${archive.name}`,
				error
			);
			mergeError = `Teildokument „${subDocument.name}“ konnte nicht als PDF erstellt werden.`;
		} finally {
			downloadingSubDocumentId = null;
		}
	};
</script>

<svelte:window onkeydown={handleWindowKeydown} />

<section
	class="flex flex-col gap-4 rounded-2xl border border-primary-100 bg-white px-4 py-4 shadow-sm"
>
	<header class="flex flex-wrap items-baseline justify-between gap-2 text-primary">
		<div class="min-w-0 flex-1">
			<label class="block min-w-0">
				<span class="sr-only">Archivname</span>
				<input
					class="w-full max-w-xl rounded-md border border-primary-200 bg-white px-3 py-2 text-[16px] font-bold text-primary-900 outline-none transition focus:border-primary-400 focus:ring-2 focus:ring-primary-200"
					type="text"
					value={archiveName}
					draggable="false"
					oninput={(event) => {
						archiveName = (event.currentTarget as HTMLInputElement).value;
						commit();
					}}
				/>
			</label>
			<p class="mt-1 text-[13px] text-primary">
				{looseAttachments.length} lose Datei{looseAttachments.length === 1 ? '' : 'en'}
				{#if hasSubDocuments}
					· {subDocuments.length} Teildokument{subDocuments.length === 1 ? '' : 'e'}
				{/if}
			</p>
		</div>

		<div class="flex flex-wrap items-center gap-2">
			<Button
				type="button"
				variant={selectionMode ? 'secondary' : 'bordered'}
				onclick={toggleSelectionMode}
			>
				{selectionMode ? 'Fertig' : 'Auswählen'}
			</Button>

			{#if hasSubDocuments}
				<div
					class={cn(
						'inline-flex items-center rounded-[16px] border border-primary-200 bg-white p-0.5',
						downloadingSubDocumentId !== null ? 'opacity-60' : ''
					)}
					role="radiogroup"
					aria-label="Export-Modus"
				>
					{#each [{ value: 'single', label: 'Eine PDF' }, { value: 'separate', label: 'Getrennt' }] as option (option.value)}
						<label
							class={cn(
								'rounded-[14px] px-3 py-1 text-[13px] font-semibold transition',
								downloadMode === option.value
									? 'bg-primary text-primary-foreground'
									: 'text-primary-700 hover:bg-primary-50',
								downloadingSubDocumentId !== null ? 'cursor-not-allowed' : 'cursor-pointer'
							)}
						>
							<input
								class="sr-only"
								type="radio"
								name={`download-mode-${archive.name}`}
								value={option.value}
								checked={downloadMode === option.value}
								disabled={downloadingSubDocumentId !== null}
								onchange={() => {
									downloadMode = option.value as ExportMode;
								}}
							/>
							{option.label}
						</label>
					{/each}
				</div>
			{/if}

			<Button
				class="bg-primary"
				type="button"
				disabled={(looseAttachments.length === 0 && subDocuments.length === 0) || isExportActive}
				onclick={downloadArchive}
			>
				{isMerging ? 'PDF wird erstellt' : 'PDF herunterladen'}
			</Button>
		</div>
	</header>

	{#if mergeError}
		<div class="rounded-container bg-red-50 px-4 py-3 text-[14px] font-medium text-red-900">
			{mergeError}
		</div>
	{/if}

	{#if selectionMode && selectedPaths.size > 0}
		<div
			class="flex flex-wrap items-center gap-3 rounded-xl border border-primary-200 bg-primary-50 px-4 py-2 text-[13px] font-medium text-primary-900"
		>
			<span>{selectedPaths.size} Datei{selectedPaths.size === 1 ? '' : 'en'} ausgewählt</span>
			<Button type="button" onclick={createSubDocumentFromSelection}>Teildokument erstellen</Button>
		</div>
	{/if}

	<ul class="flex gap-3 overflow-x-auto pb-1">
		{#each looseAttachments as attachment, index (attachment.path)}
			<li
				class={cn(
					'flex flex-col shrink-0 items-stretch gap-2 rounded-xl border bg-accent p-2 text-primary transition',
					dropIndex === index ? 'border-primary-400 ring-1 ring-primary-200' : 'border-primary-100',
					dragIndex === index ? 'opacity-60' : '',
					selectedPaths.has(attachment.path) ? 'border-primary-500 ring-2 ring-primary-300' : ''
				)}
				style={`width: ${thumbnailWidth}px;`}
				draggable={selectionMode ? 'false' : 'true'}
				ondragstart={(event) => handleLooseDragStart(index, event)}
				ondragover={(event) => handleLooseDragOver(index, event)}
				ondrop={(event) => handleLooseDrop(index, event)}
				ondragend={handleLooseDragEnd}
			>
				{#if selectionMode}
					<label class="flex cursor-pointer flex-col gap-2">
						<div class="flex items-center gap-2 px-1 text-[13px] font-medium text-primary-900">
							<input
								class="h-4 w-4 accent-primary-700"
								type="checkbox"
								checked={selectedPaths.has(attachment.path)}
								onchange={() => toggleSelection(attachment.path)}
							/>
							<span class="truncate"
								>{selectedPaths.has(attachment.path) ? 'Ausgewählt' : 'Auswählen'}</span
							>
						</div>

						<div
							class="truncate text-[13px] font-medium leading-tight text-primary-900"
							title={attachment.name}
						>
							{attachment.name}
						</div>
						<AttachmentPreview {attachment} />
					</label>
				{:else}
					<div class="flex min-w-0 flex-1 flex-row items-baseline gap-2 py-1">
						<button
							class="w-fit cursor-grab rounded-md border border-primary-200 bg-white px-2 py-1 text-sm font-semibold leading-none text-primary-700 active:cursor-grabbing"
							draggable="false"
							type="button"
							aria-label="Datei verschieben"
						>
							::
						</button>

						<div
							class="truncate text-[13px] font-medium leading-tight text-primary-900"
							title={attachment.name}
						>
							{attachment.name}
						</div>
					</div>
					<AttachmentPreview {attachment} />
				{/if}
			</li>
		{/each}
	</ul>

	{#if looseAttachments.length === 0 && subDocuments.length === 0}
		<div
			class="rounded-md border border-dashed border-primary-200 bg-primary-50 px-4 py-4 text-[13px] text-primary-700"
		>
			Keine Dateien in diesem Archiv. Lade ein anderes ZIP, um weiterzuarbeiten.
		</div>
	{/if}

	{#if hasSubDocuments}
		<div class="flex flex-col gap-3">
			{#each subDocuments as subDocument, blockIndex (subDocument.id)}
				<SubDocumentEditor
					{subDocument}
					{blockIndex}
					{thumbnailWidth}
					isBlockDragSource={blockDragIndex === blockIndex}
					isBlockDropTarget={blockDropIndex === blockIndex && blockDragIndex !== blockIndex}
					onSubDocumentChange={handleSubDocumentChange}
					onRemove={() => dissolveSubDocumentBlock(subDocument.id)}
					onAttachmentMove={handleAttachmentMove}
					onBlockDragStart={handleBlockDragStart}
					onBlockDragOver={handleBlockDragOver}
					onBlockDrop={handleBlockDrop}
					onBlockDragEnd={handleBlockDragEnd}
					onDownload={() => downloadSubDocument(subDocument)}
					isDownloading={downloadingSubDocumentId === subDocument.id}
					downloadDisabled={isExportActive}
				/>
			{/each}
		</div>
	{/if}
</section>