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

let {
	fileCount,
	chunkProgress,
	onSave,
	onDiscard,
	disabled = false,
	editMode = false
}: {
	fileCount: number;
	chunkProgress?: { done: number; total: number };
	onSave: () => void;
	onDiscard: () => void | Promise<void>;
	disabled?: boolean;
	editMode?: boolean;
} = $props();

const saveCta = $derived.by(() => {
	if (editMode) return m.bulk_edit_save_button();
	return fileCount === 1 ? m.bulk_save_cta_one() : m.bulk_save_cta({ count: fileCount });
});
</script>

<div class="shrink-0 border-t border-line bg-surface px-4 py-3">
	{#if chunkProgress}
		<progress
			value={chunkProgress.done}
			max={chunkProgress.total}
			aria-valuenow={chunkProgress.done}
			aria-valuemin={0}
			aria-valuemax={chunkProgress.total}
			aria-label={editMode
				? m.bulk_edit_save_progress({ done: chunkProgress.done, total: chunkProgress.total })
				: m.bulk_upload_progress({ done: chunkProgress.done, total: chunkProgress.total })}
			class="[&::-webkit-progress-bar]:bg-brand-sand mb-2 h-1 w-full rounded-full [&::-webkit-progress-bar]:rounded-full [&::-webkit-progress-value]:rounded-full [&::-webkit-progress-value]:bg-accent"
		></progress>
		{#if editMode && chunkProgress.total > 1}
			<!-- Visible progress text for sighted users on multi-chunk PATCH
				 (Elicit S3 — the unitless bar isn't enough for a 30-second op). -->
			<p
				class="mb-2 font-sans text-xs text-ink-2"
				aria-live="polite"
				data-testid="bulk-edit-chunk-progress-text"
			>
				{m.bulk_edit_save_progress({ done: chunkProgress.done, total: chunkProgress.total })}
			</p>
		{/if}
	{/if}
	<div class="flex items-center justify-between gap-3">
		<button
			type="button"
			onclick={onDiscard}
			class="flex min-h-[44px] items-center px-2 text-sm text-red-600/70 hover:text-red-700"
		>
			{m.bulk_discard_all()}
		</button>
		<button
			type="button"
			data-testid="bulk-save-btn"
			disabled={fileCount === 0 || disabled}
			onclick={onSave}
			class="min-h-[44px] rounded-sm bg-primary px-6 text-sm font-bold tracking-widest text-primary-fg uppercase transition-opacity hover:opacity-90 disabled:opacity-40"
		>
			{saveCta}
		</button>
	</div>
</div>
