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

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

let {
	mode,
	hasBlocks,
	blockCount,
	lastEditedAt,
	canEdit = true,
	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 + help chip for editors; plain title for read-only users -->
	{#if canEdit}
		<div class="flex items-center gap-1.5">
			<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>
			<HelpPopover label={m.transcription_mode_help_label()}>
				<p class="text-xs leading-relaxed">{m.transcription_mode_help_body()}</p>
			</HelpPopover>
		</div>
	{:else}
		<h2 class="text-[16px] font-semibold text-ink">{m.transcription_panel_title()}</h2>
	{/if}

	<!-- 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>
