<!--
Single mounting point for the global toast slot, rendered once from
the root layout. The host reads `toast.current` reactively and stays
fully empty (zero DOM nodes inside the wrapper) when no toast is
active so the surrounding shell layout is not perturbed.
-->
<script lang="ts">
	import { i18n } from "$lib/i18n/index.svelte";
	import { toast } from "$lib/toast.svelte";

	function handleAction(): void {
		const current = toast.current;
		if (current === null) {
			return;
		}
		const action = current.onAction;
		toast.dismiss(current.id);
		action?.();
	}

	function handleClose(): void {
		if (toast.current === null) {
			return;
		}
		toast.dismiss(toast.current.id);
	}
</script>

{#if toast.current !== null}
	<div class="toast-host" role="status" aria-live="polite">
		<div class="toast" data-testid="toast">
			<span class="toast-message" data-testid="toast-message">
				{i18n.t(toast.current.messageKey, toast.current.messageParams)}
			</span>
			{#if toast.current.actionLabelKey !== undefined}
				<button
					type="button"
					class="toast-action"
					data-testid="toast-action"
					onclick={handleAction}
				>
					{i18n.t(toast.current.actionLabelKey)}
				</button>
			{/if}
			<button
				type="button"
				class="toast-close"
				data-testid="toast-close"
				aria-label={i18n.t("common.dismiss")}
				onclick={handleClose}
			>
				×
			</button>
		</div>
	</div>
{/if}

<style>
	.toast-host {
		position: fixed;
		top: 1rem;
		left: 50%;
		transform: translateX(-50%);
		z-index: 1000;
		max-width: min(28rem, calc(100vw - 2rem));
	}
	.toast {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		padding: 0.6rem 0.85rem;
		background: #1a2034;
		color: #e8eaf6;
		border: 1px solid #2c3354;
		border-radius: 0.5rem;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
		font-size: 0.9rem;
	}
	.toast-message {
		flex: 1;
		min-width: 0;
	}
	.toast-action {
		background: transparent;
		color: #8ab4f8;
		border: none;
		font-weight: 600;
		cursor: pointer;
		font-size: 0.8rem;
		padding: 0.2rem 0.5rem;
		text-transform: uppercase;
		letter-spacing: 0.04em;
	}
	.toast-action:hover {
		text-decoration: underline;
	}
	.toast-close {
		background: transparent;
		color: #94a3b8;
		border: none;
		font-size: 1.1rem;
		line-height: 1;
		cursor: pointer;
		padding: 0 0.25rem;
	}
	.toast-close:hover {
		color: #e8eaf6;
	}
</style>
