<script lang="ts">
	import { getSettings, updateSettings, listBackups, triggerBackup, deleteBackup, restoreBackup, backupDownloadUrl } from '$lib/api';
	import type { BackupInfo } from '$lib/types';
	import FormField from '$lib/components/FormField.svelte';
	import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
	import ToggleSwitch from '$lib/components/ToggleSwitch.svelte';
	import { toasts } from '$lib/stores/toast';
	import { t } from '$lib/i18n';
	import { IconLoader, IconTrash, IconRefresh } from '$lib/components/icons';
	import Skeleton from '$lib/components/Skeleton.svelte';
	import { getAuthToken } from '$lib/auth';

	let loading = $state(true);
	let saving = $state(false);
	let creatingBackup = $state(false);
	let refreshing = $state(false);

	let backupEnabled = $state(false);
	let backupIntervalHours = $state('24');
	let backupRetentionCount = $state('10');
	let backups = $state<BackupInfo[]>([]);

	let confirmDeleteId = $state('');
	let confirmRestoreId = $state('');

	async function loadData(refresh = false) {
		if (refresh) {
			refreshing = true;
		} else {
			loading = true;
		}
		try {
			const [settings, backupList] = await Promise.all([
				getSettings(),
				listBackups()
			]);
			backupEnabled = settings.backup_enabled ?? false;
			backupIntervalHours = String(settings.backup_interval_hours ?? 24);
			backupRetentionCount = String(settings.backup_retention_count ?? 10);
			backups = backupList ?? [];
		} catch (err) {
			toasts.error(err instanceof Error ? err.message : 'Failed to load backup settings');
		} finally {
			loading = false;
			refreshing = false;
		}
	}

	async function handleSave() {
		saving = true;
		try {
			await updateSettings({
				backup_enabled: backupEnabled,
				backup_interval_hours: Math.max(1, parseInt(backupIntervalHours, 10) || 24),
				backup_retention_count: Math.max(1, parseInt(backupRetentionCount, 10) || 10)
			} as any);
			toasts.success($t('settingsBackup.saved'));
		} catch (err) {
			toasts.error(err instanceof Error ? err.message : $t('settingsBackup.saveFailed'));
		} finally {
			saving = false;
		}
	}

	async function handleBackupNow() {
		creatingBackup = true;
		try {
			const backup = await triggerBackup();
			backups = [backup, ...backups];
			toasts.success($t('settingsBackup.backupCreated'));
		} catch (err) {
			toasts.error(err instanceof Error ? err.message : $t('settingsBackup.backupFailed'));
		} finally {
			creatingBackup = false;
		}
	}

	async function handleDelete() {
		const id = confirmDeleteId;
		confirmDeleteId = '';
		try {
			await deleteBackup(id);
			backups = backups.filter(b => b.id !== id);
			toasts.success($t('settingsBackup.deleted'));
		} catch (err) {
			toasts.error(err instanceof Error ? err.message : $t('settingsBackup.deleteFailed'));
		}
	}

	async function handleRestore() {
		const id = confirmRestoreId;
		confirmRestoreId = '';
		try {
			await restoreBackup(id);
			toasts.success($t('settingsBackup.restored'));
		} catch (err) {
			toasts.error(err instanceof Error ? err.message : $t('settingsBackup.restoreFailed'));
		}
	}

	function handleDownload(id: string) {
		const token = getAuthToken();
		const url = backupDownloadUrl(id);
		// Open download in new tab with auth header via fetch+blob
		fetch(url, { headers: { Authorization: `Bearer ${token}` } })
			.then(r => {
				if (!r.ok) throw new Error('Download failed');
				return r.blob();
			})
			.then(blob => {
				const a = document.createElement('a');
				a.href = URL.createObjectURL(blob);
				a.download = '';
				a.click();
				URL.revokeObjectURL(a.href);
			})
			.catch(err => toasts.error(err instanceof Error ? err.message : 'Download failed'));
	}

	function formatSize(bytes: number): string {
		if (bytes < 1024) return bytes + ' B';
		if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
		return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
	}

	function formatDate(dateStr: string): string {
		if (!dateStr) return '';
		const d = new Date(dateStr + 'Z');
		return d.toLocaleString();
	}

	$effect(() => { loadData(); });
</script>

<svelte:head>
	<title>{$t('settingsBackup.title')} - {$t('app.name')}</title>
</svelte:head>

<div class="space-y-6">
	{#if loading}
		<div class="space-y-4">
			<Skeleton height="2rem" width="12rem" />
			<Skeleton height="10rem" />
			<Skeleton height="15rem" />
		</div>
	{:else}
		<!-- Backup Settings -->
		<div class="rounded-xl border border-[var(--border-primary)] bg-[var(--surface-card)] p-6 shadow-[var(--shadow-sm)]">
			<h2 class="mb-1 text-lg font-semibold text-[var(--text-primary)]">{$t('settingsBackup.title')}</h2>
			<p class="mb-4 text-sm text-[var(--text-secondary)]">{$t('settingsBackup.description')}</p>

			<div class="space-y-4">
				<!-- Auto backup toggle -->
				<div class="flex items-center gap-3">
					<ToggleSwitch bind:checked={backupEnabled} label={$t('settingsBackup.autoBackup')} />
					<div>
						<span class="text-sm font-medium text-[var(--text-primary)]">{$t('settingsBackup.autoBackup')}</span>
						<p class="text-xs text-[var(--text-tertiary)]">{$t('settingsBackup.autoBackupHelp')}</p>
					</div>
				</div>

				{#if backupEnabled}
					<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 ml-7">
						<FormField
							label={$t('settingsBackup.interval')}
							name="backupIntervalHours"
							type="number"
							bind:value={backupIntervalHours}
							placeholder="24"
							helpText={$t('settingsBackup.intervalHelp')}
						/>
						<FormField
							label={$t('settingsBackup.retention')}
							name="backupRetentionCount"
							type="number"
							bind:value={backupRetentionCount}
							placeholder="10"
							helpText={$t('settingsBackup.retentionHelp')}
						/>
					</div>
				{/if}

				<div class="flex items-center gap-3">
					<button onclick={handleSave} disabled={saving}
						class="inline-flex items-center gap-2 rounded-lg bg-[var(--color-brand-600)] px-4 py-2.5 text-sm font-medium text-white shadow-sm transition-all duration-150 hover:bg-[var(--color-brand-700)] disabled:opacity-50 active:animate-press">
						{#if saving}<IconLoader size={16} />{/if}
						{saving ? $t('settingsBackup.saving') : $t('settingsBackup.save')}
					</button>
					<button onclick={handleBackupNow} disabled={creatingBackup}
						class="inline-flex items-center gap-2 rounded-lg border border-[var(--color-brand-600)] px-4 py-2.5 text-sm font-medium text-[var(--color-brand-600)] hover:bg-[var(--color-brand-50)] disabled:opacity-50 transition-colors active:animate-press">
						{#if creatingBackup}<IconLoader size={16} />{/if}
						{creatingBackup ? $t('settingsBackup.creatingBackup') : $t('settingsBackup.backupNow')}
					</button>
				</div>
			</div>
		</div>

		<!-- Backup List -->
		<div class="rounded-xl border border-[var(--border-primary)] bg-[var(--surface-card)] shadow-[var(--shadow-sm)] overflow-hidden">
			<div class="flex items-center justify-between px-6 py-4 border-b border-[var(--border-primary)]">
				<h2 class="text-lg font-semibold text-[var(--text-primary)]">{$t('settingsBackup.backupList')}</h2>
				<button onclick={() => loadData(true)} disabled={refreshing}
					class="inline-flex items-center gap-1.5 rounded-lg border border-[var(--border-primary)] px-3 py-1.5 text-sm text-[var(--text-secondary)] hover:bg-[var(--surface-card-hover)] transition-colors disabled:opacity-50">
					{#if refreshing}
						<IconLoader size={14} class="animate-spin" />
					{:else}
						<IconRefresh size={14} />
					{/if}
				</button>
			</div>

			{#if backups.length === 0}
				<div class="p-8 text-center text-sm text-[var(--text-tertiary)]">
					{$t('settingsBackup.noBackups')}
				</div>
			{:else}
				<div class="overflow-x-auto">
					<table class="w-full text-sm">
						<thead>
							<tr class="border-b border-[var(--border-primary)] bg-[var(--surface-card-hover)]">
								<th class="px-4 py-3 text-left font-medium text-[var(--text-secondary)]">{$t('settingsBackup.columnFilename')}</th>
								<th class="px-4 py-3 text-left font-medium text-[var(--text-secondary)]">{$t('settingsBackup.columnSize')}</th>
								<th class="px-4 py-3 text-left font-medium text-[var(--text-secondary)]">{$t('settingsBackup.columnType')}</th>
								<th class="px-4 py-3 text-left font-medium text-[var(--text-secondary)]">{$t('settingsBackup.columnDate')}</th>
								<th class="px-4 py-3 text-right font-medium text-[var(--text-secondary)]">{$t('settingsBackup.columnActions')}</th>
							</tr>
						</thead>
						<tbody>
							{#each backups as backup}
								<tr class="border-b border-[var(--border-primary)] last:border-b-0 hover:bg-[var(--surface-card-hover)] transition-colors">
									<td class="px-4 py-3 font-mono text-xs text-[var(--text-primary)]">{backup.filename}</td>
									<td class="px-4 py-3 text-[var(--text-secondary)]">{formatSize(backup.size_bytes)}</td>
									<td class="px-4 py-3">
										<span class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium
											{backup.backup_type === 'auto' ? 'badge-info' : 'badge-success'}">
											{backup.backup_type === 'auto' ? $t('settingsBackup.typeAuto') : $t('settingsBackup.typeManual')}
										</span>
									</td>
									<td class="px-4 py-3 text-[var(--text-secondary)]">{formatDate(backup.created_at)}</td>
									<td class="px-4 py-3 text-right">
										<div class="flex items-center justify-end gap-1">
											<button onclick={() => handleDownload(backup.id)}
												class="rounded-lg px-2 py-1 text-xs text-[var(--color-brand-600)] hover:bg-[var(--color-brand-50)] transition-colors">
												{$t('settingsBackup.download')}
											</button>
											<button onclick={() => { confirmRestoreId = backup.id; }}
												class="rounded-lg px-2 py-1 text-xs text-[var(--text-secondary)] hover:bg-[var(--surface-card-hover)] transition-colors">
												{$t('settingsBackup.restore')}
											</button>
											<button onclick={() => { confirmDeleteId = backup.id; }}
												class="rounded-lg px-2 py-1 text-xs text-[var(--color-danger)] hover:bg-[var(--color-danger-light)] transition-colors"
												title={$t('settingsBackup.delete')} aria-label={$t('settingsBackup.delete')}>
												<IconTrash size={14} />
											</button>
										</div>
									</td>
								</tr>
							{/each}
						</tbody>
					</table>
				</div>
			{/if}
		</div>
	{/if}
</div>

<!-- Delete confirmation -->
<ConfirmDialog
	open={confirmDeleteId !== ''}
	title={$t('settingsBackup.delete')}
	message={$t('settingsBackup.deleteConfirm')}
	onconfirm={handleDelete}
	oncancel={() => { confirmDeleteId = ''; }}
/>

<!-- Restore confirmation -->
<ConfirmDialog
	open={confirmRestoreId !== ''}
	title={$t('settingsBackup.restore')}
	message={$t('settingsBackup.restoreConfirm') + '\n\n' + $t('settingsBackup.restoreWarning')}
	onconfirm={handleRestore}
	oncancel={() => { confirmRestoreId = ''; }}
/>
