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

type Props = {
	mode: 'read' | 'edit';
	hasBlocks: boolean;
	blockCount: number;
	lastEditedAt: string | null;
	onModeChange: (mode: 'read' | 'edit') => void;
	onClose: () => void;
};

let { mode, hasBlocks, blockCount, lastEditedAt, onModeChange, onClose }: Props = $props();

const formattedDate = $derived(
	lastEditedAt
		? new Intl.DateTimeFormat(getLocale(), {
				day: 'numeric',
				month: 'short',
				year: 'numeric'
			}).format(new Date(lastEditedAt))
		: null
);

function handleReadClick() {
	if (hasBlocks) {
		onModeChange('read');
	}
}
</script>

<div
	class="flex h-[44px] items-center justify-between border-b border-line bg-surface px-3 font-sans"
>
	<!-- Segmented toggle -->
	<div class="flex h-9 items-center rounded-full border border-line bg-muted p-0.5 md:h-7">
		<button
			type="button"
			data-testid="mode-read"
			aria-disabled={!hasBlocks}
			onclick={handleReadClick}
			class="h-full rounded-full px-3 text-xs font-semibold transition-colors {mode === 'read'
				? 'bg-primary text-primary-fg'
				: 'text-ink-2 hover:text-ink'}"
			style:opacity={!hasBlocks ? '0.35' : undefined}
		>
			{m.mode_read()}
		</button>
		<button
			type="button"
			data-testid="mode-edit"
			onclick={() => onModeChange('edit')}
			class="h-full rounded-full px-3 text-xs font-semibold transition-colors {mode === 'edit'
				? 'bg-primary text-primary-fg'
				: 'text-ink-2 hover:text-ink'}"
		>
			<span class="md:hidden">{m.mode_edit_short()}</span>
			<span class="hidden md:inline">{m.mode_edit()}</span>
		</button>
	</div>

	<!-- Status line (hidden on mobile to save space) -->
	<p class="hidden text-xs text-ink-2 md:block">
		{#if blockCount === 1}
			{m.transcription_status_section()}
		{:else}
			{m.transcription_status_sections({ count: blockCount })}
		{/if}
		{#if formattedDate}
			<span class="ml-1"
				>&middot; {m.transcription_status_last_edited({ time: formattedDate })}</span
			>
		{/if}
	</p>

	<!-- Close button -->
	<button
		type="button"
		data-testid="panel-close"
		onclick={onClose}
		aria-label={m.transcription_panel_close()}
		class="flex h-11 w-11 items-center justify-center rounded text-ink-2 transition-colors hover:bg-muted hover:text-ink"
	>
		<svg
			class="h-4 w-4"
			viewBox="0 0 24 24"
			fill="none"
			stroke="currentColor"
			stroke-width="2"
			aria-hidden="true"
		>
			<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
		</svg>
	</button>
</div>
