familienarchiv/frontend/src/routes/admin/system/ImportStatusCard.svelte

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

let {
	importStatus,
	ontrigger
}: {
	importStatus: ImportStatus | null;
	ontrigger: () => void;
} = $props();

const failureMessage = $derived(
	importStatus?.statusCode === 'IMPORT_FAILED_NO_SPREADSHEET'
		? m.admin_system_import_failed_no_spreadsheet()
		: m.admin_system_import_failed_internal()
);

function reasonLabel(code: string): string {
	if (code === 'INVALID_PDF_SIGNATURE') return m.import_reason_invalid_pdf_signature();
	if (code === 'FILE_READ_ERROR') return m.import_reason_file_read_error();
	if (code === 'S3_UPLOAD_FAILED') return m.import_reason_s3_upload_failed();
	if (code === 'ALREADY_EXISTS') return m.import_reason_already_exists();
	return code;
}
</script>

<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
	<h2 class="mb-5 font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
		{m.admin_system_import_heading()}
	</h2>
	<p class="mb-4 text-sm text-ink-2">{m.admin_system_import_description()}</p>

	{#if importStatus?.state === 'RUNNING'}
		<div class="mb-4 flex items-center gap-3">
			<span
				data-testid="spinner"
				role="status"
				aria-label={m.admin_system_import_status_running()}
				class="inline-block h-5 w-5 animate-spin rounded-full border-2 border-ink-3 border-t-brand-mint motion-reduce:animate-none"
			></span>
			<div>
				<p data-testid="processed-count" class="text-base font-bold text-ink">
					{importStatus.processed}
				</p>
				<p class="font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
					{m.admin_system_import_status_running()}
				</p>
			</div>
		</div>
	{:else if importStatus?.state === 'DONE'}
		<div class="mb-4 rounded-sm border border-green-200 bg-green-50 p-4 text-green-700">
			<p data-testid="processed-count" class="text-base font-bold">{importStatus.processed}</p>
			<p class="font-sans text-xs font-bold tracking-widest text-green-800 uppercase">
				{m.admin_system_import_status_done_label()}
			</p>
			<p class="mt-1 text-xs text-green-800">{m.admin_system_import_status_done()}</p>
		</div>
		<div aria-live="polite">
			{#if importStatus.skipped > 0}
				<details class="mb-4 rounded-sm border border-warning/40 bg-warning/10 p-4 text-amber-900">
					<summary class="flex min-h-[44px] cursor-pointer list-none items-center gap-2 py-2">
						<svg
							aria-hidden="true"
							class="details-chevron h-4 w-4 shrink-0 motion-safe:transition-transform"
							viewBox="0 0 16 16"
							fill="none"
							stroke="currentColor"
							stroke-width="2"
							stroke-linecap="round"
							stroke-linejoin="round"
						>
							<path d="M6 4l4 4-4 4" />
						</svg>
						<div>
							<span data-testid="skipped-count" class="block text-base font-bold"
								>{importStatus.skipped}</span
							>
							<span class="block font-sans text-xs font-bold tracking-widest uppercase">
								{m.admin_system_import_skipped_label()}
							</span>
						</div>
					</summary>
					<ul class="mt-3 max-h-64 space-y-1 overflow-y-auto">
						{#each importStatus.skippedFiles as skipped (skipped.filename)}
							<li class="font-mono text-sm text-ink-2">
								{skipped.filename} — {reasonLabel(skipped.reason)}
							</li>
						{/each}
					</ul>
				</details>
			{/if}
		</div>
		<button
			data-import-trigger
			onclick={ontrigger}
			class="min-h-[44px] rounded-sm bg-primary px-5 py-2 font-sans text-xs font-bold tracking-widest text-primary-fg uppercase transition-opacity hover:opacity-80"
		>
			{m.admin_system_import_btn_retry()}
		</button>
	{:else if importStatus?.state === 'FAILED'}
		<p class="mb-4 rounded-sm border border-red-200 bg-red-50 p-3 text-sm text-red-700">
			{failureMessage}
		</p>
		<button
			data-import-trigger
			onclick={ontrigger}
			class="min-h-[44px] rounded-sm bg-primary px-5 py-2 font-sans text-xs font-bold tracking-widest text-primary-fg uppercase transition-opacity hover:opacity-80"
		>
			{m.admin_system_import_btn_retry()}
		</button>
	{:else}
		{#if importStatus !== null}
			<p class="mb-4 text-sm text-ink-2">{m.admin_system_import_status_idle()}</p>
		{/if}
		<button
			data-import-trigger
			onclick={ontrigger}
			class="min-h-[44px] rounded-sm bg-primary px-5 py-2 font-sans text-xs font-bold tracking-widest text-primary-fg uppercase transition-opacity hover:opacity-80"
		>
			{m.admin_system_import_btn_start()}
		</button>
	{/if}
</div>

<style>
details[open] .details-chevron {
	transform: rotate(90deg);
}
</style>