<script lang="ts">
	import { t } from '$lib/i18n';
	import MdiIcon from '$lib/components/MdiIcon.svelte';
	import Button from '$lib/components/Button.svelte';

	interface Props {
		dirty: boolean;
		saving: boolean;
		changedCount: number;
		onSave: () => void;
		onDiscard: () => void;
	}

	let { dirty, saving, changedCount, onSave, onDiscard }: Props = $props();
</script>

{#if dirty || saving}
	<div class="save-bar" role="region" aria-label={t('settings.unsavedChanges')}>
		<div class="save-bar-inner glass">
			<span class="save-edge" aria-hidden="true"></span>
			<span class="save-pulse" aria-hidden="true"></span>
			<div class="save-text">
				<span class="save-eyebrow">{t('settings.unsaved')}</span>
				<span class="save-message">
					{#if changedCount === 1}
						{t('settings.changedOne')}
					{:else}
						{t('settings.changedMany').replace('{n}', String(changedCount))}
					{/if}
				</span>
			</div>
			<div class="save-actions">
				<button
					type="button"
					class="discard"
					onclick={onDiscard}
					disabled={saving}
				>
					{t('settings.discard')}
				</button>
				<Button size="sm" onclick={onSave} disabled={saving}>
					{#if saving}
						<MdiIcon name="mdiLoading" size={14} />
					{:else}
						<MdiIcon name="mdiContentSave" size={14} />
					{/if}
					{saving ? t('common.loading') : t('settings.saveChanges')}
				</Button>
			</div>
		</div>
	</div>
{/if}

<style>
	.save-bar {
		position: sticky;
		bottom: 1rem;
		z-index: 40;
		margin-top: 1.25rem;
		display: flex;
		justify-content: center;
		pointer-events: none;
		animation: save-rise 0.3s cubic-bezier(.2,.7,.2,1) both;
	}
	.save-bar-inner {
		pointer-events: auto;
		position: relative;
		display: flex;
		align-items: center;
		gap: 1rem;
		padding: 0.7rem 1rem 0.7rem 1.25rem;
		max-width: min(640px, calc(100% - 1rem));
		width: 100%;
		border-color: color-mix(in srgb, var(--color-citrus) 40%, var(--color-border));
		box-shadow:
			var(--shadow-card),
			0 0 0 1px color-mix(in srgb, var(--color-citrus) 22%, transparent) inset;
		overflow: hidden;
		flex-wrap: wrap;
	}
	.save-edge {
		position: absolute;
		left: 0; top: 0; bottom: 0;
		width: 4px;
		background: linear-gradient(180deg, var(--color-citrus), color-mix(in srgb, var(--color-citrus) 50%, transparent));
	}
	.save-pulse {
		position: absolute;
		left: 1rem;
		top: 50%;
		transform: translateY(-50%);
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: var(--color-citrus);
		box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-citrus) 60%, transparent);
		animation: save-pulse 1.6s ease-in-out infinite;
	}

	.save-text {
		position: relative;
		z-index: 1;
		display: flex;
		flex-direction: column;
		gap: 0.1rem;
		flex: 1;
		min-width: 0;
		padding-left: 1rem; /* clear room for the pulse dot */
	}
	.save-eyebrow {
		font-family: var(--font-mono);
		font-size: 0.55rem;
		text-transform: uppercase;
		letter-spacing: 0.18em;
		color: var(--color-citrus);
	}
	.save-message {
		font-family: var(--font-display);
		font-style: italic;
		font-weight: 400;
		font-size: 0.95rem;
		color: var(--color-foreground);
		letter-spacing: -0.01em;
		line-height: 1.2;
	}

	.save-actions {
		position: relative;
		z-index: 1;
		display: flex;
		gap: 0.5rem;
		align-items: center;
		flex-wrap: wrap;
	}
	.discard {
		padding: 0 0.95rem;
		height: 34px;
		border-radius: 12px;
		background: transparent;
		border: 1px solid var(--color-border);
		color: var(--color-muted-foreground);
		font-family: inherit;
		font-size: 0.82rem;
		cursor: pointer;
		transition: background 0.15s, color 0.15s, border-color 0.15s;
	}
	.discard:hover:not(:disabled) {
		background: var(--color-glass-strong);
		color: var(--color-foreground);
		border-color: var(--color-rule-strong);
	}
	.discard:disabled { opacity: 0.5; cursor: default; }

	@keyframes save-rise {
		from { opacity: 0; transform: translateY(12px); }
		to   { opacity: 1; transform: translateY(0); }
	}
	@keyframes save-pulse {
		0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-citrus) 60%, transparent); }
		50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-citrus) 0%, transparent); }
	}

	@media (prefers-reduced-motion: reduce) {
		.save-bar, .save-pulse { animation: none !important; }
	}
</style>
