<script lang="ts">
	import { mount, unmount, untrack } from "svelte";
	import {
		CodeView,
		type CodeViewDiffItem,
		type CodeViewLineSelection,
		type FileDiffMetadata,
		type SelectedLineRange,
		type SelectionSide,
		type VirtualizedFileDiff
	} from "@pierre/diffs";
	import { diffLineSpan } from "#lib/components/repo/lineAnchor.ts";
	import {
		retainPierreWorkerPool,
		pierreCodeViewOptions,
		PIERRE_ITEM_METRICS,
		PIERRE_VALIDATE_ITEM_HEIGHTS,
		PIERRE_LINE_HEIGHT,
		type DiffStyle
	} from "#lib/components/repo/pierre.ts";
	import { remToPx } from "#lib/rem.ts";
	import DiffFileHeader from "#lib/components/repo/DiffFileHeader.svelte";
	import LineHandles from "#lib/components/repo/LineHandles.svelte";
	import { SvelteMap } from "svelte/reactivity";
	import type { Snippet } from "svelte";
	import {
		hiddenLine,
		newSideLine,
		reservedRows,
		type DiffEntry
	} from "#lib/components/repo/fileDiff.ts";
	import {
		clearHighlights,
		paintHighlights,
		textRange
	} from "#lib/components/lines/highlight.ts";
	import {
		diffRows,
		rowLine,
		rowSide,
		type DiffMatch,
		type DiffRow
	} from "#lib/components/lines/diff.ts";

	export interface CodeViewApi {
		scrollToFile: (key: string, range?: SelectedLineRange | null) => number | undefined;
		resync: () => void;
	}

	export interface CodeViewFile {
		key: string;
		name: string;
		oldName?: string;
		kind: "new" | "deleted" | "renamed" | "change";
		stat: { insertions: number; deletions: number };
		note?: string;
		lines?: number;
	}

	interface Props {
		files: CodeViewFile[];
		entry: (key: string) => DiffEntry | undefined;
		blobUrl?: (file: CodeViewFile) => string | undefined;
		headerActions?: Snippet<[string]>;
		diffStyle?: DiffStyle;
		wrap?: boolean;
		isOpen?: (key: string) => boolean;
		onSetOpen?: (key: string, open: boolean) => void;
		onWant?: (key: string) => void;
		onFocus?: (key: string) => void;
		dockTop?: () => number;
		onScrollExtent?: (max: number) => void;
		onLineSelected?: (key: string, range: SelectedLineRange | null) => void;
		onWantWhole?: (key: string) => boolean;
		onQuoteLines?: (key: string, range: SelectedLineRange) => void;
		matches?: DiffMatch[];
		current?: number;
	}

	let {
		files,
		entry,
		blobUrl,
		headerActions,
		diffStyle = "unified",
		wrap = false,
		isOpen,
		onSetOpen,
		onWant,
		onFocus,
		dockTop = () => 0,
		onScrollExtent,
		onLineSelected,
		onWantWhole,
		onQuoteLines,
		matches = [],
		current = -1
	}: Props = $props();

	const HEADER_HEIGHT = remToPx(2.25) + 2;
	const DIFF_BOTTOM_BORDER = 1;
	const LOOKAHEAD_ITEMS = 8;

	let root: HTMLElement | undefined = $state();
	let frame: HTMLElement | undefined = $state();
	let scroller: HTMLElement | undefined;
	let contentHeight = $state(0);
	let painted = $state(0);
	let view: CodeView | undefined = $state.raw();
	let initError = $state<string | undefined>();

	// eslint-disable-next-line svelte/prefer-svelte-reactivity -- internal version tracking
	const versions = new Map<string, number>();
	const openState = new SvelteMap<string, boolean>();
	const noteState = new SvelteMap<string, string>();

	type HeaderEntry = { div: HTMLDivElement; app: Record<string, unknown> };
	// eslint-disable-next-line svelte/prefer-svelte-reactivity -- dom bookkeeping
	const headers = new Map<string, HeaderEntry>();

	const mountHeader = (rendered: { id: string; element: HTMLElement }) => {
		const file = files.find((candidate) => candidate.key === rendered.id);
		if (!file || headers.has(rendered.id)) return;
		const div = document.createElement("div");
		div.slot = "header-custom";
		const app = mount(DiffFileHeader, {
			target: div,
			props: {
				file,
				openState,
				noteState,
				note: noteOf(file),
				blobUrl: blobUrl?.(file),
				headerActions,
				onToggle: () => onSetOpen?.(file.key, !(openState.get(file.key) ?? true))
			}
		});
		rendered.element.appendChild(div);
		headers.set(rendered.id, { div, app });
	};

	const dropHeader = (id: string) => {
		const held = headers.get(id);
		if (!held) return;
		void unmount(held.app);
		held.div.remove();
		headers.delete(id);
	};

	const codeViewOptions = (style: DiffStyle, forWrap: boolean) => ({
		...pierreCodeViewOptions(style, forWrap),
		disableFileHeader: false,
		// Presence of renderCustomHeader activates custom-header slot in Pierre's renderer.
		renderCustomHeader: () => undefined,
		itemMetrics: {
			...PIERRE_ITEM_METRICS,
			diffHeaderHeight: HEADER_HEIGHT,
			paddingBottom: DIFF_BOTTOM_BORDER
		},
		stickyHeaders: true,
		enableLineSelection: onLineSelected !== undefined,
		onLineSelectionStart: trackSelection,
		onLineSelectionChange: trackSelection,
		onLineSelected: (range: SelectedLineRange | null, context: ItemContext) => {
			if (quoting) {
				quoting = false;
				restoreSelection();
				return;
			}
			trackSelection(range, context);
			committed = selected;
			onLineSelected?.(context.item.id, range);
		},
		enableGutterUtility: onQuoteLines !== undefined,
		onGutterUtilityClick:
			onQuoteLines &&
			((range: SelectedLineRange, context: ItemContext) => {
				quoting = true;
				onQuoteLines(context.item.id, range);
			}),
		__devOnlyValidateItemHeights: PIERRE_VALIDATE_ITEM_HEIGHTS,
		layout: { paddingTop: 0, paddingBottom: 8, gap: 8 }
	});

	let selected: CodeViewLineSelection | null = null;
	let committed: CodeViewLineSelection | null = null;
	let quoting = false;

	type ItemContext = { item: { id: string } };

	const highlightSide = (range: SelectedLineRange): SelectionSide | undefined => {
		const { side, endSide } = diffLineSpan(range);
		return side === endSide ? side : undefined;
	};

	const paintSelection = () => {
		const current = selected;
		if (!view || !current) return;
		for (const rendered of view.getRenderedItems()) {
			if (rendered.id !== current.id || rendered.type !== "diff") continue;
			rendered.instance.setSelectedLines(current.range, {
				notify: false,
				activeLineSide: highlightSide(current.range)
			});
		}
	};

	const restoreSelection = () => {
		selected = committed;
		view?.setSelectedLines(committed, { notify: false });
		paintSelection();
	};

	const trackSelection = (range: SelectedLineRange | null, context: ItemContext): void => {
		selected = range ? { id: context.item.id, range } : null;
		paintSelection();
	};

	const placeholder = (file: CodeViewFile): FileDiffMetadata => {
		const split = reservedRows(file, true);
		const lines = reservedRows(file, false);
		return {
			name: file.name,
			prevName: file.oldName,
			type:
				file.kind === "new"
					? "new"
					: file.kind === "deleted"
						? "deleted"
						: file.kind === "renamed"
							? "rename-changed"
							: "change",
			hunks: [],
			splitLineCount: split,
			unifiedLineCount: lines,
			isPartial: true,
			deletionLines: [],
			additionLines: [],
			deletionCharacterCount: 0,
			additionCharacterCount: 0
		} as FileDiffMetadata;
	};

	const metadataOf = (file: CodeViewFile): FileDiffMetadata => {
		const parsed = entry(file.key);
		if (parsed && "hunks" in parsed) return parsed;
		return placeholder(file);
	};

	const noteOf = (file: CodeViewFile): string | undefined => {
		const parsed = entry(file.key);
		return file.note ?? (parsed && "note" in parsed ? parsed.note : undefined);
	};

	const bumpVersion = (key: string): number => {
		const version = (versions.get(key) ?? 0) + 1;
		versions.set(key, version);
		return version;
	};

	const itemOf = (file: CodeViewFile): CodeViewDiffItem => {
		const version = bumpVersion(file.key);
		return {
			id: file.key,
			type: "diff",
			fileDiff: metadataOf(file),
			collapsed: isOpen ? !isOpen(file.key) : false,
			version
		};
	};

	$effect(() => {
		const element = root;
		if (!element) return;
		let disposed = false;
		const { pool: poolPromise, release } = retainPierreWorkerPool();

		void (async () => {
			try {
				await start(element);
			} catch (error) {
				if (!disposed) initError = "The diff viewer could not start in this browser.";
				console.error("Failed to start the diff viewer:", error);
			}
		})();

		async function start(element: HTMLElement) {
			const pool = await poolPromise;
			if (disposed || !root) return;

			const instance = new CodeView(codeViewOptions(diffStyle, wrap), pool, true);

			let filled = false;
			instance.setSlotCoordinator({
				hasHeaderRenderers: true,
				hasAnnotationRenderer: false,
				hasGutterRenderer: false,
				onSnapshotChange: (snapshot) => {
					if (!snapshot) {
						for (const id of [...headers.keys()]) dropHeader(id);
						return;
					}
					const items = snapshot.items ?? [];
					const live = new Set(items.map((rendered) => rendered.id));
					for (const id of [...headers.keys()]) if (!live.has(id)) dropHeader(id);
					for (const rendered of items) {
						if (!headers.has(rendered.id)) mountHeader(rendered);
						const file = files.find((candidate) => candidate.key === rendered.id);
						rendered.element.toggleAttribute(
							"data-pending",
							!entry(rendered.id) && !(file && noteOf(file))
						);
					}
					paintSelection();
					painted++;
					if (!filled) {
						filled = true;
						requestContents();
					}
				}
			});

			instance.setup(element);
			scroller = element;
			instance.setItems(files.map(itemOf));
			appliedStyle = untrack(() => diffStyle);
			appliedWrap = untrack(() => wrap);
			appliedFiles = files;
			instance.render(true);
			view = instance;
			requestContents();
		}

		return () => {
			disposed = true;
			for (const id of [...headers.keys()]) dropHeader(id);
			view?.cleanUp();
			view = undefined;
			scroller = undefined;
			release();
		};
	});

	const requestContents = () => {
		if (!view || !onWant) return;
		const rendered = view.getRenderedItems();
		if (!rendered.length) return;
		const first = files.findIndex((file) => file.key === rendered[0]?.id);
		if (first < 0) return;
		if (rendered[0]) onFocus?.(rendered[0].id);
		const last = first + rendered.length;
		for (const file of files.slice(
			Math.max(0, first - LOOKAHEAD_ITEMS),
			last + LOOKAHEAD_ITEMS
		)) {
			if (!entry(file.key)) onWant(file.key);
		}
	};

	const syncScroll = () => {
		const element = scroller;
		if (!element) return;
		const container = element.firstElementChild;
		if (container) {
			const style = getComputedStyle(container);
			contentHeight =
				container.getBoundingClientRect().height +
				parseFloat(style.marginTop) +
				parseFloat(style.marginBottom);
		}
		const max = Math.max(0, element.scrollHeight - element.clientHeight);
		onScrollExtent?.(max);
		const position = Math.min(Math.max(0, window.scrollY - dockTop()), max);
		if (Math.abs(element.scrollTop - position) < 0.5) return;
		element.scrollTop = position;
	};

	$effect(() => {
		const instance = view;
		const element = scroller;
		if (!instance || !element) return;
		syncScroll();
		const observer = new ResizeObserver(syncScroll);
		observer.observe(element);
		if (element.firstElementChild) observer.observe(element.firstElementChild);
		window.addEventListener("scroll", syncScroll, { passive: true });
		window.addEventListener("resize", syncScroll);
		return () => {
			observer.disconnect();
			window.removeEventListener("scroll", syncScroll);
			window.removeEventListener("resize", syncScroll);
		};
	});

	$effect(() => {
		const instance = view;
		if (!instance) return;
		return instance.subscribeToScroll(() => {
			requestContents();
			syncScroll();
			painted++;
		});
	});

	$effect(() => {
		const instance = view;
		if (!instance) return;
		let pinTo: number | undefined;
		for (const file of files) {
			const open = isOpen ? isOpen(file.key) : true;
			if (openState.get(file.key) !== open) openState.set(file.key, open);
			const item = instance.getItem(file.key);
			if (item?.type !== "diff" || item.collapsed === !open) continue;
			if (!open) {
				const top = instance.getTopForItem(file.key);
				if (top != null && window.scrollY > dockTop() + top) pinTo = top;
			}
			instance.updateItem({ ...item, collapsed: !open, version: bumpVersion(file.key) });
		}
		paintSelection();
		syncScroll();
		if (pinTo != null) {
			window.scrollTo({ top: dockTop() + pinTo, behavior: "instant" });
			syncScroll();
		}
	});

	$effect(() => {
		const instance = view;
		if (!instance) return;
		for (const file of files) {
			const parsed = entry(file.key);
			if (parsed && "note" in parsed && !file.note) {
				if (untrack(() => noteState.get(file.key)) !== parsed.note) {
					noteState.set(file.key, parsed.note);
				}
				continue;
			}
			if (!parsed || !("hunks" in parsed)) continue;
			const current = untrack(() => instance.getItem(file.key));
			if (current?.type === "diff" && current.fileDiff === parsed) continue;
			instance.updateItem(itemOf(file));
		}
		paintSelection();
		syncScroll();
	});

	let appliedStyle: DiffStyle | undefined;
	let appliedWrap: boolean | undefined;
	let appliedFiles: CodeViewFile[] | undefined;
	$effect(() => {
		const instance = view;
		if (!instance) return;
		if (appliedStyle !== diffStyle || appliedWrap !== wrap) {
			appliedStyle = diffStyle;
			appliedWrap = wrap;
			appliedFiles = files;
			instance.setOptions(codeViewOptions(diffStyle, wrap));
			instance.setItems(files.map(itemOf));
		} else if (appliedFiles !== files) {
			appliedFiles = files;
			instance.setItems(files.map(itemOf));
		}
		paintSelection();
		syncScroll();
	});

	const revealRange = (
		key: string,
		instance: VirtualizedFileDiff<undefined, undefined>,
		range: SelectedLineRange
	): boolean => {
		const parsed = entry(key);
		if (!parsed || !("hunks" in parsed)) return true;
		const { start, end, side, endSide } = diffLineSpan(range);
		const from = newSideLine(parsed.hunks, start, side);
		const to = newSideLine(parsed.hunks, end, endSide);
		const ends = [
			hiddenLine(parsed.hunks, start, side),
			hiddenLine(parsed.hunks, end, endSide)
		];
		for (let line = Math.min(from, to); line <= Math.max(from, to); line++) {
			if (hiddenLine(parsed.hunks, line, "additions") !== undefined) ends.push(line);
		}
		const hidden = ends.filter((line) => line !== undefined);
		if (!hidden.length) return false;
		if (parsed.isPartial) return onWantWhole?.(key) ?? false;
		return hidden.some((line) => instance.revealLine(line));
	};

	const scrollToOffset = (top: number) =>
		window.scrollTo({ top: dockTop() + top, behavior: "instant" });

	export const scrollToFile = (
		key: string,
		range?: SelectedLineRange | null
	): number | undefined => {
		const instance = view;
		const top = instance?.getTopForItem(key);
		if (!instance || top == null) return undefined;
		if (!range) {
			scrollToOffset(top);
			return top;
		}
		selected = { id: key, range };
		committed = selected;
		instance.setSelectedLines(selected, { notify: false });
		paintSelection();
		if (isOpen && !isOpen(key)) {
			onSetOpen?.(key, true);
			scrollToOffset(top);
			return undefined;
		}
		const rendered = instance.getRenderedItems().find((item) => item.id === key);
		if (rendered?.type !== "diff") {
			scrollToOffset(top);
			return undefined;
		}
		const pending = revealRange(key, rendered.instance, range);
		const first = rendered.instance.getLinePosition(range.start, range.side);
		const last = rendered.instance.getLinePosition(range.end, range.endSide ?? range.side);
		if (!first || !last) {
			scrollToOffset(top);
			return pending ? undefined : top;
		}
		const lineTop = Math.min(first.top, last.top);
		const lineBottom = Math.max(first.top + first.height, last.top + last.height);
		const room = window.innerHeight - 2 * HEADER_HEIGHT;
		const span = lineBottom - lineTop;
		const margin = span < room ? (room - span) / 2 : PIERRE_LINE_HEIGHT * 2;
		const at = Math.max(0, Math.round(top + lineTop - HEADER_HEIGHT - margin));
		scrollToOffset(at);
		return pending ? undefined : at;
	};

	export const resync = () => syncScroll();

	const rowsOf = (key: string): DiffRow[] | undefined => {
		const parsed = entry(key);
		return parsed && "hunks" in parsed ? diffRows(parsed) : undefined;
	};

	const rowElement = (key: string, row: DiffRow | undefined, side: SelectionSide) => {
		const shadow = view?.getRenderedItems().find((rendered) => rendered.id === key)
			?.element.shadowRoot;
		if (!shadow || !row) return null;
		if (diffStyle === "split") {
			const column = rowLine(row, side) !== undefined ? side : rowSide(row);
			return shadow.querySelector<HTMLElement>(
				`[data-${column}] [data-line="${rowLine(row, column)}"]`
			);
		}
		return row.addition === undefined
			? shadow.querySelector<HTMLElement>(
					`[data-line="${row.deletion}"][data-line-type="change-deletion"]`
				)
			: shadow.querySelector<HTMLElement>(
					`[data-line="${row.addition}"]:not([data-line-type="change-deletion"])`
				);
	};

	const matchesById = $derived.by(() => {
		const grouped: Record<string, { match: DiffMatch; index: number }[]> = {};
		matches.forEach((match, index) => (grouped[match.id] ??= []).push({ match, index }));
		return grouped;
	});

	$effect(() => {
		void painted;
		const instance = view;
		if (!instance || matches.length === 0) {
			clearHighlights();
			return;
		}
		const ranges: Range[] = [];
		let active: Range | null = null;
		for (const item of instance.getRenderedItems()) {
			const rows = rowsOf(item.id);
			if (!rows) continue;
			for (const { match, index } of matchesById[item.id] ?? []) {
				const row = rowElement(item.id, rows[match.row], match.side);
				const range = row && textRange(row, match.start, match.end);
				if (!range) continue;
				ranges.push(range);
				if (index === current) active = range;
			}
		}
		paintHighlights(ranges, active);
		return clearHighlights;
	});

	const visibleBounds = (): DOMRect | undefined => {
		if (!scroller) return undefined;
		const box = scroller.getBoundingClientRect();
		const top = Math.max(box.top + HEADER_HEIGHT, 0);
		const bottom = Math.min(box.bottom, window.innerHeight);
		return new DOMRect(box.left, top, box.width, Math.max(0, bottom - top));
	};

	const onScreen = (element: HTMLElement | null): boolean => {
		const bounds = visibleBounds();
		if (!element || !bounds) return false;
		const box = element.getBoundingClientRect();
		return box.top >= bounds.top && box.bottom <= bounds.bottom;
	};

	const matchTop = (match: DiffMatch): number | undefined => {
		const top = view?.getTopForItem(match.id);
		const rendered = view?.getRenderedItems().find((item) => item.id === match.id);
		if (top == null || rendered?.type !== "diff" || !scroller) return undefined;
		const position = rendered.instance.getLinePosition(match.line, match.side);
		if (!position) return undefined;
		return Math.max(
			0,
			Math.round(top + position.top - (scroller.clientHeight - position.height) / 2)
		);
	};

	const nextFrame = () => new Promise((done) => requestAnimationFrame(done));

	const revealMatch = async (match: DiffMatch) => {
		for (let attempt = 0; attempt < 4; attempt++) {
			if (onScreen(rowElement(match.id, rowsOf(match.id)?.[match.row], match.side))) return;
			const top = matchTop(match);
			if (top !== undefined) {
				scrollToOffset(top);
				return;
			}
			scrollToFile(match.id);
			await nextFrame();
			await nextFrame();
		}
	};

	let revealed: DiffMatch | undefined;

	$effect(() => {
		const match = matches[current];
		if (!view || !match || match === revealed) return;
		revealed = match;
		void revealMatch(match);
	});
</script>

{#if initError}
	<div class="flex min-h-32 items-center justify-center p-md">
		<span class="typography-paragraph-small text-foreground-danger">{initError}</span>
	</div>
{:else}
	<div bind:this={frame} class="relative isolate flex min-h-0 shrink grow basis-auto flex-col">
		<div
			bind:this={root}
			class="codeview relative min-h-0 w-full shrink grow basis-auto overflow-x-clip overflow-y-hidden will-change-scroll contain-strict"
			style:height="{contentHeight}px"
		></div>
		{#if onLineSelected}
			<LineHandles container={frame} />
		{/if}
	</div>
{/if}