<script lang="ts">
import * as m from '$lib/paraglide/messages.js';
import { getAccentConfig } from './eventCardConfig';
import { timelineDateLabel } from './dateLabel';
import type { components } from '$lib/generated/api';

type TimelineEntryDTO = components['schemas']['TimelineEntryDTO'];

/**
 * Full-width muted band for a HISTORICAL event, laid across the axis as context
 * (REQ-009). A RANGE carries a visible span pill ("1914–1918") with a Zeitraum
 * aria-label; a RANGE with no end degrades to the start year, no pill (REQ-010).
 * The glyph is a redundant non-color cue with an sr-only label (REQ-018); text
 * uses text-ink-2 to stay AA in both themes (REQ-019). A curator (`canWrite`,
 * gate-closed by default) gets an inline edit pencil for a curated event with an
 * eventId — #842 REQ-006/007/008; UX gate only, the #781 route guard is the boundary.
 */
let { entry, canWrite = false }: { entry: TimelineEntryDTO; canWrite?: boolean } = $props();

const config = $derived(getAccentConfig(entry));
const dateLabel = $derived(timelineDateLabel(entry.eventDate, entry.precision, entry.eventDateEnd));
const fromYear = $derived(entry.eventDate ? entry.eventDate.slice(0, 4) : null);
const toYear = $derived(entry.eventDateEnd ? entry.eventDateEnd.slice(0, 4) : null);
const showSpan = $derived(entry.precision === 'RANGE' && fromYear != null && toYear != null);
const dateText = $derived(showSpan ? null : entry.precision === 'RANGE' ? fromYear : dateLabel);
// Every WorldBand is a HISTORICAL band, so the visible "historisch" register
// always trails the subtitle as plain text — never a second pill (REQ-009).
const historical = $derived(m.timeline_layer_historical_suffix());
// A HISTORICAL event is never derived, so the edit gate is just the curator
// flag plus a real eventId (#842 REQ-006/008).
const canEdit = $derived(canWrite && entry.eventId != null);
</script>

<div class="my-3 border-y border-line bg-canvas px-4 py-2 text-center">
	<span class="font-serif text-sm text-ink-2 italic">
		<span aria-hidden="true" style="color: var(--c-tag-slate)">{config.glyph}</span>
		<span class="sr-only">{config.label}</span>
		{entry.title}
	</span>
	{#if showSpan && fromYear && toYear}
		<span
			data-testid="world-range"
			class="ml-2 inline-block rounded-full border border-line px-2 py-0.5 font-sans text-xs text-ink-2"
			aria-label={m.timeline_range_aria({ from: fromYear, to: toYear })}
		>
			{fromYear}–{toYear}
		</span>
	{:else if dateText}
		<span class="ml-2 font-sans text-xs text-ink-3">{dateText}</span>
	{/if}
	<!-- Single trailing "· historisch" register, after the title and any
	     span pill / date — one render site, consistent separator (REQ-009). -->
	<span class="ml-2 font-sans text-xs text-ink-3">· {historical}</span>
	{#if canEdit}
		<a
			data-testid="event-edit"
			href="/zeitstrahl/events/{entry.eventId}/edit"
			class="ml-2 rounded-sm px-1 font-sans text-xs text-ink-3 hover:text-brand-navy focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-navy"
		>
			<span aria-hidden="true">✎</span>
			<span class="sr-only">{m.btn_edit()}</span>
		</a>
	{/if}
</div>
