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

	interface Props {
		enabled: boolean;
		intervalHours: string;
		secretsMode: string;
		retentionCount: string;
		saving: boolean;
		onToggle: () => void;
		onSave: () => void;
	}

	let {
		enabled,
		intervalHours = $bindable(),
		secretsMode = $bindable(),
		retentionCount = $bindable(),
		saving,
		onToggle,
		onSave,
	}: Props = $props();

	const intervalItems: GridItem[] = $derived([
		{ value: '6',   icon: 'mdiTimerSand',     label: `6 ${t('backup.hours')}` },
		{ value: '12',  icon: 'mdiClockOutline',  label: `12 ${t('backup.hours')}` },
		{ value: '24',  icon: 'mdiCalendarToday', label: `24 ${t('backup.hours')}` },
		{ value: '48',  icon: 'mdiCalendarRange', label: `48 ${t('backup.hours')}` },
		{ value: '72',  icon: 'mdiCalendarWeek',  label: `72 ${t('backup.hours')}` },
		{ value: '168', icon: 'mdiCalendarMonth', label: `7d` },
	]);

	const secretsItems: GridItem[] = $derived([
		{ value: 'exclude', icon: 'mdiShieldCheckOutline', label: t('backup.secretsExclude') },
		{ value: 'masked',  icon: 'mdiEyeOffOutline',      label: t('backup.secretsMasked') },
		{ value: 'include', icon: 'mdiKeyVariant',         label: t('backup.secretsInclude') },
	]);

	const retentionItems: GridItem[] = $derived([
		{ value: '3',  icon: 'mdiNumeric3BoxOutline',     label: `3` },
		{ value: '5',  icon: 'mdiNumeric5BoxOutline',     label: `5` },
		{ value: '10', icon: 'mdiLayersTripleOutline',    label: `10` },
		{ value: '20', icon: 'mdiNumeric9PlusBoxOutline', label: `20` },
	]);
</script>

<section class="cassette glass" class:cassette-on={enabled}>
	<button class="cassette-toggle" type="button" onclick={onToggle} aria-pressed={enabled}>
		<span class="toggle-track" class:toggle-on={enabled}>
			<span class="toggle-thumb"></span>
		</span>
		<span class="toggle-label">
			<span class="cassette-eyebrow">
				<MdiIcon name="mdiClockOutline" size={12} />
				<span>{t('backup.scheduled')}</span>
			</span>
			<span class="cassette-title">{t('backup.enableScheduled')}</span>
		</span>
	</button>

	{#if enabled}
		<div class="cassette-controls">
			<div class="ctl">
				<span class="ctl-label">{t('backup.interval')}</span>
				<IconGridSelect items={intervalItems} bind:value={intervalHours} columns={2} />
			</div>
			<div class="ctl">
				<span class="ctl-label">{t('backup.secretsMode')}</span>
				<IconGridSelect items={secretsItems} bind:value={secretsMode} columns={1} />
			</div>
			<div class="ctl">
				<span class="ctl-label">{t('backup.retention')}</span>
				<IconGridSelect items={retentionItems} bind:value={retentionCount} columns={2} />
			</div>
		</div>
	{:else}
		<div class="cassette-off">{t('backup.scheduleOff')}</div>
	{/if}

	<div class="cassette-save">
		<Button size="sm" variant="secondary" onclick={onSave} disabled={saving}>
			<MdiIcon name="mdiContentSave" size={14} />
			{saving ? t('common.loading') : t('common.save')}
		</Button>
	</div>
</section>

<style>
	.cassette {
		display: flex;
		align-items: stretch;
		gap: 1.1rem;
		padding: 0.95rem 1.15rem;
		flex-wrap: wrap;
	}
	.cassette-on { border-color: color-mix(in srgb, var(--color-mint) 30%, var(--color-border)); }

	.cassette-toggle {
		display: flex;
		align-items: center;
		gap: 0.7rem;
		background: transparent;
		border: 0;
		cursor: pointer;
		font-family: inherit;
		color: var(--color-foreground);
		text-align: left;
		padding: 0.2rem 0.1rem;
		flex-shrink: 0;
		position: relative;
		z-index: 1;
	}

	.toggle-track {
		position: relative;
		width: 40px;
		height: 22px;
		border-radius: 999px;
		background: var(--color-glass-strong);
		border: 1px solid var(--color-rule-strong);
		flex-shrink: 0;
		transition: background 0.2s, border-color 0.2s;
	}
	.toggle-thumb {
		position: absolute;
		top: 2px;
		left: 2px;
		width: 16px; height: 16px;
		border-radius: 50%;
		background: var(--color-muted-foreground);
		transition: transform 0.2s, background 0.2s;
	}
	.toggle-on {
		background: linear-gradient(135deg, color-mix(in srgb, var(--color-mint) 60%, transparent), color-mix(in srgb, var(--color-primary) 60%, transparent));
		border-color: color-mix(in srgb, var(--color-mint) 60%, var(--color-rule-strong));
	}
	.toggle-on .toggle-thumb {
		background: white;
		transform: translateX(18px);
	}

	.toggle-label { display: flex; flex-direction: column; gap: 0.1rem; }
	.cassette-eyebrow {
		display: inline-flex;
		align-items: center;
		gap: 0.3rem;
		font-family: var(--font-mono);
		font-size: 0.6rem;
		text-transform: uppercase;
		letter-spacing: 0.18em;
		color: var(--color-muted-foreground);
	}
	.cassette-title {
		font-size: 0.85rem;
		font-weight: 500;
		font-family: var(--font-display);
		font-style: italic;
		letter-spacing: -0.005em;
		color: var(--color-foreground);
	}

	.cassette-controls {
		position: relative;
		z-index: 1;
		display: grid;
		grid-template-columns: 1fr;
		gap: 0.7rem;
		flex: 1;
		min-width: 0;
	}
	@media (min-width: 720px) {
		.cassette-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	}
	.ctl { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
	.ctl-label {
		font-family: var(--font-mono);
		font-size: 0.6rem;
		text-transform: uppercase;
		letter-spacing: 0.16em;
		color: var(--color-muted-foreground);
	}

	.cassette-off {
		flex: 1;
		display: flex;
		align-items: center;
		font-size: 0.78rem;
		color: var(--color-muted-foreground);
		font-style: italic;
		font-family: var(--font-display);
		position: relative;
		z-index: 1;
	}

	.cassette-save {
		display: flex;
		align-items: flex-end;
		position: relative;
		z-index: 1;
		flex-shrink: 0;
	}
	@media (max-width: 720px) {
		.cassette-save { width: 100%; }
		.cassette-save > :global(*) { width: 100%; }
	}
</style>
