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

	interface PendingState {
		pending: boolean;
		uploaded_at?: string | null;
		uploaded_by?: string | null;
		conflict_mode?: string;
		supervised?: boolean;
	}

	interface Props {
		pending: PendingState | null;
		onApply: () => void;
		onCancel: () => void;
	}

	let { pending, onApply, onCancel }: Props = $props();
</script>

{#if pending?.pending}
	<div class="pending-strip animate-rise" role="alert">
		<span class="pending-edge" aria-hidden="true"></span>
		<span class="aurora-pulse error" aria-hidden="true"></span>
		<div class="pending-body">
			<div class="pending-title">
				<MdiIcon name="mdiShieldAlertOutline" size={16} />
				<span>{t('backup.pendingTitle')}</span>
			</div>
			<div class="pending-meta">
				{t('backup.pendingBy').replace('{by}', pending.uploaded_by || '—')}
				<span class="pending-dot">·</span>
				{t('backup.pendingAt').replace('{at}', pending.uploaded_at || '—')}
			</div>
		</div>
		<div class="pending-actions">
			{#if pending.supervised}
				<Button size="sm" onclick={onApply}>
					<MdiIcon name="mdiRestart" size={14} /> {t('backup.restartNow')}
				</Button>
			{/if}
			<button class="pending-cancel" onclick={onCancel} type="button">
				{t('common.cancel')}
			</button>
		</div>
	</div>
{/if}

<style>
	.pending-strip {
		position: relative;
		display: flex;
		align-items: center;
		gap: 0.85rem;
		padding: 0.85rem 1.1rem 0.85rem 1.35rem;
		margin-bottom: 1.25rem;
		border-radius: 18px;
		background: var(--color-glass);
		backdrop-filter: blur(28px) saturate(160%);
		-webkit-backdrop-filter: blur(28px) saturate(160%);
		border: 1px solid color-mix(in srgb, var(--color-error-fg) 35%, var(--color-border));
		box-shadow:
			var(--shadow-card),
			0 0 0 1px color-mix(in srgb, var(--color-error-fg) 18%, transparent) inset;
		overflow: hidden;
		flex-wrap: wrap;
	}
	.pending-strip::after {
		content: '';
		position: absolute;
		inset: 0;
		border-radius: inherit;
		pointer-events: none;
		background: linear-gradient(180deg, var(--color-highlight), transparent 30%);
		opacity: 0.35;
	}
	.pending-edge {
		position: absolute;
		left: 0; top: 0; bottom: 0;
		width: 4px;
		background: linear-gradient(180deg, var(--color-coral), color-mix(in srgb, var(--color-coral) 50%, transparent));
	}
	.pending-body {
		position: relative;
		z-index: 1;
		flex: 1;
		min-width: 12rem;
	}
	.pending-title {
		display: flex;
		align-items: center;
		gap: 0.45rem;
		font-family: var(--font-display);
		font-style: italic;
		font-size: 1.05rem;
		font-weight: 500;
		color: var(--color-foreground);
		letter-spacing: -0.01em;
	}
	.pending-meta {
		font-size: 0.72rem;
		color: var(--color-muted-foreground);
		margin-top: 0.18rem;
		word-break: break-word;
	}
	.pending-dot {
		opacity: 0.6;
		margin: 0 0.25rem;
	}
	.pending-actions {
		position: relative;
		z-index: 1;
		display: flex;
		gap: 0.5rem;
		align-items: center;
		flex-wrap: wrap;
	}
	.pending-cancel {
		padding: 0 0.95rem;
		height: 34px;
		font-size: 0.82rem;
		border-radius: 12px;
		background: transparent;
		color: var(--color-muted-foreground);
		border: 1px solid var(--color-border);
		cursor: pointer;
		transition: background 0.15s, color 0.15s, border-color 0.15s;
	}
	.pending-cancel:hover {
		background: var(--color-glass-strong);
		color: var(--color-foreground);
		border-color: var(--color-rule-strong);
	}
</style>
