<script lang="ts">
	import { onMount, onDestroy } from 'svelte';
	import { invoke } from '@tauri-apps/api/core';
	import { listen, type UnlistenFn } from '@tauri-apps/api/event';
	import { updateDialogOpen, updateCheckManual } from '$lib/stores/updateTrigger';

	interface UpdateStatus {
		available: boolean;
		current_version: string;
		latest_version: string | null;
		release_notes: string | null;
		download_url: string | null;
		download_size: number | null;
		sha256: string | null;
		bundle_url: string | null;
		bundle_sha256: string | null;
	}

	interface DownloadProgress {
		downloaded: number;
		total: number;
		percent: number;
	}

	// Svelte 5 Runes
	let updateInfo = $state<UpdateStatus | null>(null);
	let downloading = $state(false);
	let progress = $state<DownloadProgress | null>(null);
	let error = $state<string | null>(null);
	let downloadedPath = $state<string | null>(null);
	let checking = $state(false);
	let manualMode = $state(false);
	// Neuer Zustand: Update heruntergeladen, warte auf User-Bestätigung
	let awaitingConfirmation = $state(false);
	// Neuer Zustand: Update wird vorbereitet (Graceful Shutdown)
	let preparing = $state(false);

	let progressListener: UnlistenFn | null = null;
	let preparingListener: UnlistenFn | null = null;
	let manualUnsub: (() => void) | null = null;

	// Reaktiv: wenn Store schließt → State zurücksetzen (aber nicht wenn Bestätigung aussteht)
	$effect(() => {
		if (!$updateDialogOpen && !preparing) {
			resetState();
		}
	});

	// Manueller Check-Trigger aus dem Settings-Panel
	$effect(() => {
		manualMode = $updateCheckManual;
	});

	// Abgeleiteter Zustand
	let isNoUpdateDialog = $derived(
		$updateDialogOpen && updateInfo && !updateInfo.available && !error
	);

	onMount(async () => {
		// Progress-Events vom Backend
		progressListener = await listen<DownloadProgress>('update-progress', (event) => {
			progress = event.payload;
		});

		// Graceful-Shutdown-Event vom Backend
		preparingListener = await listen('update-preparing', () => {
			preparing = true;
		});

		// Manueller Check wird via Store gestartet
		manualUnsub = updateCheckManual.subscribe((active) => {
			if (active) {
				// Store-Reset, bevor wir starten — damit erneutes Klicken wieder triggert
				updateCheckManual.set(false);
				runCheck(true);
			}
		});

		// Auto-Check 3s nach Start (nur wenn Dialog nicht bereits offen)
		setTimeout(() => runCheck(false), 3000);
	});

	onDestroy(() => {
		progressListener?.();
		preparingListener?.();
		manualUnsub?.();
	});

	async function runCheck(manual: boolean) {
		checking = true;
		error = null;
		try {
			const status: UpdateStatus = await invoke('check_for_update');
			updateInfo = status;
			if (status.available) {
				manualMode = manual;
				updateDialogOpen.set(true);
			} else if (manual) {
				// Bei manuellem Check auch "kein Update"-Dialog zeigen
				manualMode = true;
				updateDialogOpen.set(true);
			}
		} catch (err) {
			if (manual) {
				error = String(err);
				updateDialogOpen.set(true);
			} else {
				console.debug('Auto-Update-Check fehlgeschlagen:', err);
			}
		} finally {
			checking = false;
		}
	}

	async function startDownload() {
		if (!updateInfo?.download_url) return;

		downloading = true;
		error = null;
		progress = { downloaded: 0, total: 0, percent: 0 };

		try {
			downloadedPath = await invoke('download_update', {
				downloadUrl: updateInfo.download_url,
				expectedSha256: updateInfo.sha256,
			});
			console.log('Download abgeschlossen:', downloadedPath);
			// NICHT sofort installieren — User-Bestätigung abwarten
			downloading = false;
			awaitingConfirmation = true;
		} catch (err) {
			error = String(err);
			downloading = false;
		}
	}

	async function applyUpdate() {
		if (!downloadedPath) return;
		// Sofort in Preparing-Zustand wechseln
		awaitingConfirmation = false;
		preparing = true;
		try {
			// Im Nix-Wrapper-Modus zuerst das scripts-Bundle aktualisieren (npm ci),
			// damit nach dem Neustart die claude-bridge.js neben dem Binary liegt.
			// apply_bundle_update ist no-op im AppImage-Modus.
			if (updateInfo?.bundle_url) {
				await invoke('apply_bundle_update', {
					bundleUrl: updateInfo.bundle_url,
					expectedSha256: updateInfo.bundle_sha256,
				});
			}
			await invoke('apply_update', { updatePath: downloadedPath });
			// App startet neu, kein weiterer Code erreicht
		} catch (err) {
			preparing = false;
			error = String(err);
		}
	}

	function postponeUpdate() {
		// Update wurde heruntergeladen, aber User will später installieren
		// Beim nächsten App-Start kann es angewendet werden
		awaitingConfirmation = false;
		updateDialogOpen.set(false);
	}

	function closeDialog() {
		if (preparing) return; // Während Vorbereitung nicht schließbar
		updateDialogOpen.set(false);
	}

	function resetState() {
		downloading = false;
		progress = null;
		error = null;
		// downloadedPath bewusst NICHT zurücksetzen — Update bleibt für späteren Neustart
		awaitingConfirmation = false;
		preparing = false;
		manualMode = false;
	}

	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`;
	}
</script>

{#if $updateDialogOpen && (updateInfo || preparing)}
	<!-- svelte-ignore a11y_click_events_have_key_events -->
	<!-- svelte-ignore a11y_no_static_element_interactions -->
	<div class="modal-overlay" on:click={closeDialog}>
		<div class="modal" on:click|stopPropagation>
			<div class="modal-header">
				{#if preparing}
					<h2>Update wird vorbereitet...</h2>
				{:else if awaitingConfirmation}
					<h2>Update bereit</h2>
				{:else if isNoUpdateDialog}
					<h2>Aktuell</h2>
				{:else if error && !updateInfo?.available}
					<h2>Update-Check fehlgeschlagen</h2>
				{:else}
					<h2>Update verfuegbar</h2>
				{/if}
				{#if !preparing}
					<button class="close-btn" on:click={closeDialog}>&#x2715;</button>
				{/if}
			</div>

			<div class="modal-body">
				{#if preparing}
					<!-- Graceful-Shutdown-Anzeige -->
					<div class="preparing-container">
						<div class="spinner"></div>
						<p class="preparing-text">
							Update wird vorbereitet, bitte warten...<br>
							<span class="preparing-sub">Sessions werden gesichert, App startet gleich neu.</span>
						</p>
					</div>
				{:else if awaitingConfirmation}
					<!-- Bestaetigungs-Dialog nach erfolgreichem Download -->
					<div class="confirmation-container">
						<div class="confirmation-icon">&#x2714;</div>
						<p class="confirmation-text">
							Update wurde heruntergeladen und verifiziert.
						</p>
						{#if updateInfo}
							<div class="version-info">
								<span class="current">v{updateInfo.current_version}</span>
								<span class="arrow">&rarr;</span>
								<span class="new">v{updateInfo.latest_version}</span>
							</div>
						{/if}
						<p class="confirmation-hint">
							Jetzt installieren und neu starten?
						</p>
					</div>
				{:else if isNoUpdateDialog}
					<p class="no-update-text">
						Du verwendest bereits die neueste Version:
						<strong>v{updateInfo?.current_version}</strong>
					</p>
				{:else if updateInfo?.available}
					<div class="version-info">
						<span class="current">v{updateInfo.current_version}</span>
						<span class="arrow">&rarr;</span>
						<span class="new">v{updateInfo.latest_version}</span>
					</div>

					{#if updateInfo.release_notes}
						<div class="release-notes">
							<h3>Aenderungen:</h3>
							<div class="notes-content">
								{@html updateInfo.release_notes.replace(/\n/g, '<br>')}
							</div>
						</div>
					{/if}

					{#if downloading && progress}
						<div class="progress-container">
							<div class="progress-bar">
								<div class="progress-fill" style="width: {progress.percent}%"></div>
							</div>
							<span class="progress-text">
								{#if progress.total > 0}
									{formatSize(progress.downloaded)} / {formatSize(progress.total)}
									({progress.percent.toFixed(0)}%)
								{:else}
									{formatSize(progress.downloaded)} geladen...
								{/if}
							</span>
						</div>
					{/if}
				{/if}

				{#if error}
					<div class="error">
						{error}
					</div>
				{/if}
			</div>

			<div class="modal-footer">
				{#if preparing}
					<!-- Keine Buttons waehrend Vorbereitung -->
					<span class="footer-hint">Bitte nicht schliessen...</span>
				{:else if awaitingConfirmation}
					<button class="btn btn-secondary" on:click={postponeUpdate}>
						Spaeter
					</button>
					<button class="btn btn-primary" on:click={applyUpdate}>
						Jetzt installieren
					</button>
				{:else if isNoUpdateDialog}
					<button class="btn btn-primary" on:click={closeDialog}>OK</button>
				{:else if downloading}
					<button class="btn btn-disabled" disabled>
						Wird heruntergeladen...
					</button>
				{:else if updateInfo?.available}
					<button class="btn btn-secondary" on:click={closeDialog}>Spaeter</button>
					<button class="btn btn-primary" on:click={startDownload}>
						Jetzt aktualisieren
					</button>
				{:else}
					<button class="btn btn-primary" on:click={closeDialog}>Schliessen</button>
				{/if}
			</div>
		</div>
	</div>
{/if}

<style>
	.modal-overlay {
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.6);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
	}

	.modal {
		background: var(--bg-primary);
		border: 1px solid var(--border);
		border-radius: var(--radius-lg);
		width: 90%;
		max-width: 450px;
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
	}

	.modal-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: var(--spacing-md);
		border-bottom: 1px solid var(--border);
	}

	.modal-header h2 {
		font-size: 1rem;
		margin: 0;
	}

	.close-btn {
		background: none;
		border: none;
		font-size: 1.2rem;
		cursor: pointer;
		color: var(--text-secondary);
		padding: 4px;
	}

	.close-btn:hover {
		color: var(--text-primary);
	}

	.modal-body {
		padding: var(--spacing-md);
	}

	.version-info {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--spacing-md);
		font-size: 1.1rem;
		margin-bottom: var(--spacing-md);
	}

	.version-info .current {
		color: var(--text-secondary);
	}

	.version-info .arrow {
		color: var(--accent);
	}

	.version-info .new {
		color: var(--success);
		font-weight: 600;
	}

	.no-update-text {
		text-align: center;
		font-size: 0.95rem;
		margin: var(--spacing-md) 0;
	}

	.release-notes {
		background: var(--bg-secondary);
		border-radius: var(--radius-md);
		padding: var(--spacing-sm);
		margin-bottom: var(--spacing-md);
		max-height: 150px;
		overflow-y: auto;
	}

	.release-notes h3 {
		font-size: 0.8rem;
		color: var(--text-secondary);
		margin: 0 0 var(--spacing-xs) 0;
	}

	.notes-content {
		font-size: 0.85rem;
		line-height: 1.5;
	}

	.progress-container {
		margin: var(--spacing-md) 0;
	}

	.progress-bar {
		height: 8px;
		background: var(--bg-tertiary);
		border-radius: 4px;
		overflow: hidden;
	}

	.progress-fill {
		height: 100%;
		background: var(--accent);
		transition: width 0.2s ease;
	}

	.progress-text {
		display: block;
		text-align: center;
		font-size: 0.75rem;
		color: var(--text-secondary);
		margin-top: var(--spacing-xs);
	}

	/* Bestaetigungs-Zustand nach Download */
	.confirmation-container {
		text-align: center;
		padding: var(--spacing-sm) 0;
	}

	.confirmation-icon {
		font-size: 2.5rem;
		color: var(--success);
		margin-bottom: var(--spacing-sm);
	}

	.confirmation-text {
		font-size: 0.95rem;
		margin-bottom: var(--spacing-sm);
	}

	.confirmation-hint {
		font-size: 0.85rem;
		color: var(--text-secondary);
		margin-top: var(--spacing-sm);
	}

	/* Preparing-Zustand (Graceful Shutdown) */
	.preparing-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: var(--spacing-md) 0;
		gap: var(--spacing-md);
	}

	.preparing-text {
		text-align: center;
		font-size: 0.95rem;
		line-height: 1.6;
	}

	.preparing-sub {
		font-size: 0.8rem;
		color: var(--text-secondary);
	}

	.spinner {
		width: 36px;
		height: 36px;
		border: 3px solid var(--bg-tertiary);
		border-top: 3px solid var(--accent);
		border-radius: 50%;
		animation: spin 0.8s linear infinite;
	}

	@keyframes spin {
		from { transform: rotate(0deg); }
		to { transform: rotate(360deg); }
	}

	.footer-hint {
		font-size: 0.8rem;
		color: var(--text-secondary);
		font-style: italic;
	}

	.error {
		background: rgba(239, 68, 68, 0.1);
		border: 1px solid rgba(239, 68, 68, 0.3);
		color: #ef4444;
		padding: var(--spacing-sm);
		border-radius: var(--radius-md);
		font-size: 0.85rem;
		margin-top: var(--spacing-md);
	}

	.modal-footer {
		display: flex;
		justify-content: flex-end;
		gap: var(--spacing-sm);
		padding: var(--spacing-md);
		border-top: 1px solid var(--border);
	}

	.btn {
		padding: var(--spacing-sm) var(--spacing-md);
		border-radius: var(--radius-md);
		font-size: 0.85rem;
		font-weight: 500;
		cursor: pointer;
		transition: all 0.15s ease;
	}

	.btn-primary {
		background: var(--accent);
		color: white;
		border: none;
	}

	.btn-primary:hover {
		background: var(--accent-hover);
	}

	.btn-secondary {
		background: transparent;
		color: var(--text-secondary);
		border: 1px solid var(--border);
	}

	.btn-secondary:hover {
		background: var(--bg-hover);
	}

	.btn-disabled {
		background: var(--bg-tertiary);
		color: var(--text-secondary);
		border: none;
		cursor: not-allowed;
	}
</style>
