---
import VtBotDebug1 from './VtBotDebug1.astro';
export interface Props {
	production?: boolean;
}
const TAG = 'vtbot-debug';
const { production = false } = Astro.props;
const active = import.meta.env.DEV || production;
---

{active && <meta name={TAG} content="true" />}

{active && <VtBotDebug1 />}
<script>
	// start of "late" part in (defered loaded) module script
	import {
		supportsViewTransitions,
		type TransitionBeforePreparationEvent,
		type TransitionBeforeSwapEvent,
	} from 'astro:transitions/client';
	import { elementsWithStyleProperty } from './css';
	import { deriveCSSSelector } from './derive-css-selector';
	import * as prefix from './log';

	const BOLD = 'font-weight: 800';
	const NORMAL = '';
	const COLORED = 'color: #48f';
	const ALTERNATE = 'color: #585';

	type Events = Set<string>;
	type ActiveElements = Map<EventTarget, Events>;
	type ListeningScripts = Record<string, ActiveElements>;

	declare global {
		interface Window {
			__vtbot: {
				debug: {
					capture: Record<string, any>;
					originalMap: Map<string, string>;
					savedSwapEvent: TransitionBeforeSwapEvent;
					listeningScripts: ListeningScripts;
					// 2 = waiting for both, page-load and finished, 1 = waiting for one, 0 = all done
					closing: number;
				};
			};
		}
	}

	prefix.init('[vtbot-debug]', COLORED);
	const enabled_out = () => !!document.querySelector('meta[name="vtbot-debug"]');

	const enabled_in = () => window.__vtbot?.debug?.closing ?? 0 > 0;

	let beginning = 0;

	// transition -> pseudo -> animationName -> {start, end}
	type Animation = { start: AnimationEvent; end: AnimationEvent };
	type AnimPseudo = Record<string, Animation>;
	type AnimTransition = Record<string, AnimPseudo>;
	let animations: Record<string, AnimTransition> = Object.create(null);

	/*
	 * address/content surrogate
	 */
	let addressCounter = 0;
	const mem = new WeakMap();
	const doc = (obj: Document) => {
		const units = ['B', 'kB', 'MB'];
		const humanReadable = (n: number) => {
			let i = 0;
			while ((n /= 1024) > 1 && i++ < units.length);
			return `${(n * 1024).toFixed(1)} ${units[i]}`;
		};
		const a = mem.get(obj) ?? `${++addressCounter}`;
		const html = obj.documentElement.outerHTML;
		mem.set(obj, a);
		return `@${a} (${humanReadable(html.length)})`;
	};

	const logWithStyle = (s: string, usePrefix: boolean, ...rest: string[]) => {
		const css: string[] = [...rest];
		s = s.replaceAll('**', '%c');
		const count = ((s.match(/%c/g) || []).length - rest.length) / 2;
		for (let i = 0; i < count; i++) {
			css.push(BOLD);
			css.push(NORMAL);
		}
		prefix[usePrefix ? 'log' : 'slog'](s, ...css);
	};

	/*
	 * log a property of the event
	 */
	async function delta(e: Record<string, any>, prop: string, deltaOnly = false) {
		const vtbot_debug = window.__vtbot.debug;
		let bold = (s: string) => `**${s}**`;
		let deref = (x: any) => x; // map value from properties
		let print = (x: any) => x; // pretty print value
		let value = (x: any) => x; // comaprison for difference

		if (prop === 'to' || prop === 'from') {
			deref = (x) => x?.href;
			print = deref;
		} else if (prop === 'newDocument') {
			print = doc;
			value = doc;
		} else if (prop === 'swap' || prop === 'loader') {
			print = (x) => (x ? x.toString() : '(null)');
			bold = (x) => x + '\n';
		} else if (prop === 'signal') {
			print = (x) => {
				if (x.aborted) {
					return `aborted${x.reason ? ' (' + x.reason + ')' : ''}${x.onabort ? ': ' + x.onabort.toString + '\n' : ''}`;
				}
				return `not aborted ${x.onabort ? ': ' + x.onabort.toString + '\n' : ''}`;
			};
			deref = print;
		}

		let different = () => value(deref(vtbot_debug.capture[prop])) !== value(deref(e[prop]));

		if (different()) {
			logWithStyle(
				`%c${prop}%c changed from ${bold(print(vtbot_debug.capture[prop]))} to ${bold(print(e[prop]))}`,
				deltaOnly,
				ALTERNATE,
				NORMAL
			);
		} else if (!deltaOnly) {
			logWithStyle(`%c${prop}:%c ${bold(print(e[prop]))}`, false, ALTERNATE, NORMAL);
		}
	}

	/*
	 * Capture the event properties
	 */
	const doCapture = (e: Event) => {
		window.__vtbot.debug.capture = {
			...e,
			type: e.type,
			cancelable: e.cancelable,
			defaultPrevented: e.defaultPrevented,
			event: e,
		};
	};

	/*
	 * log the properties of the event
	 */
	function logProperties(
		e: TransitionBeforePreparationEvent | TransitionBeforeSwapEvent,
		deltaOnly = false
	) {
		delta(e, 'type', deltaOnly);
		delta(e, 'cancelable', deltaOnly);
		delta(e, 'defaultPrevented', deltaOnly);
		delta(e, 'from', deltaOnly);
		delta(e, 'to', deltaOnly);
		delta(e, 'direction', deltaOnly);
		delta(e, 'navigationType', deltaOnly);
		delta(e, 'info', deltaOnly);
		delta(e, 'newDocument', deltaOnly);
		delta(e, 'signal', deltaOnly);
		if (e.type === 'astro:before-preparation') {
			delta(e, 'formData', deltaOnly);
			delta(e, 'loader', deltaOnly);
		}
		if (e.type === 'astro:before-swap') {
			delta(e, 'swap', deltaOnly);
		}
		doCapture(e);
	}

	const toCSSSelectorMap = (map: Map<string, Set<Element>> | undefined, where: string) => {
		const result = new Map<string, string>();
		if (map) {
			map.forEach((set, key) => {
				if (set.size === 1) {
					result.set(key, deriveCSSSelector([...set][0]!));
				} else if (supportsViewTransitions && (set?.size ?? 0) > 1) {
					prefix.log(`view-transition-name ${key} is not unique in ${where} document\n`);
				}
			});
		}
		return result;
	};

	const logTransitions = (
		originalMap: Map<string, string> | undefined,
		swapEvent: TransitionBeforeSwapEvent
	) => {
		if (originalMap === undefined) return;

		const bold = (s: string) => `**${s}**`;
		const map = elementsWithStyleProperty(document, 'view-transition-name');
		[...map.values()].filter((set) => set.has(document.documentElement)).length === 0 &&
			map.set('root', (map.get('root') ?? new Set()).add(document.documentElement));
		const newMap = toCSSSelectorMap(map, 'new');
		let i = 0;

		prefix.groupCollapsed(
			`Transitions from ${swapEvent.from.pathname} to ${swapEvent.to.pathname}`
		);

		logTransition('root');

		[...new Set([...originalMap.keys(), ...newMap.keys()])]
			.sort()
			.forEach((name) => name !== 'root' && logTransition(name));

		console.groupEnd();

		function logTransition(name: string) {
			const oldSelector = originalMap!.get(name);
			const newSelector = newMap.get(name);

			if (oldSelector || newSelector) {
				logWithStyle(
					`%ctransition ${++i}%c ${bold(name)} from ${bold(
						oldSelector ?? '(nowhere)'
					)} --to-> ${bold(newSelector ?? '(nowhere)')}`,
					false
				);
			}
		}
	};

	const knownModuleScripts = new Set();
	const recordScripts = () =>
		[...document.scripts].forEach(
			(script) => script.type === 'module' && script.src && knownModuleScripts.add(script.src)
		);

	function logScripts() {
		const scripts = document.scripts;
		const nScripts = scripts.length;
		if (nScripts === 0) return;
		const scriptsArray = [...scripts];
		const toExecute = scriptsArray.filter(
			(s) =>
				(s.dataset.astroExec !== '' || s.dataset.astroRerun) &&
				(!s.type || s.type === 'module' || s.type === 'text/javascript') &&
				(s.type !== 'module' || !knownModuleScripts.has(s.src))
		);
		let idx = 0;
		if (toExecute.length > 0) {
			prefix.groupCollapsed(
				`Scripts executions from now to astro:page-load: (${toExecute.length})`
			);
			toExecute.forEach((script) => {
				idx = logScript(script, idx);
			});
			console.groupEnd();
		}
		if (nScripts > toExecute.length) {
			prefix.groupCollapsed(`Scripts that will NOT be executed: (${nScripts - toExecute.length})`);
			scriptsArray.forEach((script) => {
				if (!toExecute.includes(script)) {
					idx = logScript(script, idx);
				}
			});
			console.groupEnd();
		}

		function logScript(script: HTMLScriptElement, idx: number) {
			script.type === 'module' && script.src && knownModuleScripts.add(script.src);
			let s = `%c script ${++idx}%c `;
			for (const attribute of script.attributes) {
				s += `${attribute.name}="${attribute.value}" `;
			}
			if (script.src) {
				prefix.slog(s, ALTERNATE, NORMAL);
			} else {
				prefix.sgroupCollapsed(s + 'inline script ', ALTERNATE, NORMAL);
				prefix.slog(script.textContent ?? '');
				console.groupEnd();
			}
			return idx;
		}
	}

	function stamp(e: AnimationEvent) {
		return (e.timeStamp - beginning).toFixed(2);
	}
	function transition(e: AnimationEvent) {
		return e.pseudoElement.match(/\(([^)]*)\)/)?.[1] ?? '~other~';
	}

	function logAnimPseudo(name: string, anims: AnimPseudo) {
		const keys = Object.keys(anims);
		if (keys.length === 0) return;
		if (keys.length > 1) {
			prefix.sgroup(name);
			keys.sort().forEach((anim) => {
				const a = anims[anim]!;
				prefix.slog(`${anim} from ${stamp(a.start)} to ${stamp(a.end)}`);
			});
			console.groupEnd();
		} else {
			const k = keys[0]!;
			const a = anims[k]!;
			prefix.slog(`${name} ${k} from ${stamp(a.start)} to ${stamp(a.end)}`);
		}
	}

	function logAnimTransition(name: string, idx: number, transition: AnimTransition) {
		if (idx >= 0) {
			prefix.sgroupCollapsed(`%ctransition ${++idx} %c${name}`, ALTERNATE, BOLD);
		} else {
			prefix.sgroupCollapsed(`%cother`, ALTERNATE);
		}
		const group = `::view-transition-group(${name})`;
		if (group in transition) {
			logAnimPseudo(group, transition[group]!);
			delete transition[group];
		}
		const old = `::view-transition-old(${name})`;
		if (old in transition) {
			logAnimPseudo(old, transition[old]!);
			delete transition[old];
		}
		const new_ = `::view-transition-new(${name})`;
		if (new_ in transition) {
			logAnimPseudo(new_, transition[new_]!);
			delete transition[new_];
		}
		Object.keys(transition)
			.sort()
			.forEach((name) => {
				logAnimPseudo(name, transition[name]!);
			});
		console.groupEnd();

		return idx;
	}

	function logAnimations() {
		prefix.groupCollapsed(`Animations`);
		let idx = 0;
		if ('root' in animations) {
			idx = logAnimTransition('root', idx, animations['root']);
			delete animations['root'];
		}

		let other = false;
		Object.keys(animations)
			.sort()
			.forEach((name) => {
				if (name === '~other~') {
					other = true;
				} else {
					idx = logAnimTransition(name, idx, animations[name]!);
				}
			});
		if (other) {
			logAnimTransition('', -1, animations['~other~']!);
		}
		console.groupEnd();
	}

	const mutations: string[] = [];
	const mutationObserver = new MutationObserver(mutationObserverCallback);
	const mutationObserverOptions = {
		childList: true,
		subtree: true,
		attributes: true,
		attributeOldValue: true,
		characterData: true,
		characterDataOldValue: true,
	};

	function mutationObserverCallback(records: MutationRecord[]) {
		for (const record of records) {
			const target = record.target as Element;
			const text = 'At ' + deriveCSSSelector(target) + ': ';
			switch (record.type) {
				case 'attributes':
					mutations.push(
						text +
							`override ${record.attributeName}="${record.oldValue}" (currently: "${target.getAttribute(record.attributeName!)}")`
					);
					break;

				case 'characterData':
					mutations.push(text + `"${record.oldValue} => "${target.nodeValue}"`);
					break;

				default:
					const attributes = (el: Element) => {
						let result = '';
						for (let i = 0; i < el.attributes.length; ++i) {
							const attr = el.attributes[i];
							result += ` ${attr.name}="${attr.value}"`;
						}
						return result;
					};
					const element = (el: Element) => `<${el.tagName.toLowerCase()}${attributes(el)}>`;
					const what = (node: Node) =>
						node.nodeType === Node.TEXT_NODE
							? `"${node.textContent}"`
							: node.nodeType === Node.ELEMENT_NODE
								? element(node as Element)
								: node.nodeName;

					record.removedNodes.forEach((node) => {
						mutations.push(text + `removed ${what(node)}`);
					});
					record.addedNodes.forEach((node) => {
						mutations.push(text + `added ${what(node)}`);
					});

					break;
			}
		}
	}
	function activateMutationObserver() {
		mutations.length = 0;
		mutationObserver.observe(document.documentElement, mutationObserverOptions);
	}
	function deactivateMutationObserver() {
		mutationObserver.disconnect();
		if (mutations.length > 0) {
			prefix.groupCollapsed(`DOM Mutations`);
			for (const mutation of mutations) {
				prefix.slog(mutation);
			}
			console.groupEnd();
		}
		mutations.length = 0;
	}
	/* ------------------------------------------------------ */

	function beforePreparation(preparationEvent: TransitionBeforePreparationEvent) {
		if (enabled_out()) {
			prefix.groupCollapsed(`Properties of the ${preparationEvent.type} event`);
			logProperties(preparationEvent);
			console.groupEnd();
			const originalLoader = preparationEvent.loader;
			preparationEvent.loader = async () => {
				prefix.log(`before execution of loader()`);
				await originalLoader();
				logProperties(preparationEvent, true);
				prefix.log(`after execution of loader()`);
			};
			doCapture(preparationEvent);
		}
	}

	function afterPreparation(e: Event) {
		if (enabled_out()) {
			logProperties(window.__vtbot.debug.capture.event, true);
			prefix.log(`Event handler for ${e.type}`);
		}
	}

	function beforeSwap(swapEvent: TransitionBeforeSwapEvent) {
		if (enabled_out()) {
			recordScripts();
			prefix.groupCollapsed(`Properties of the ${swapEvent.type} event`);
			logProperties(swapEvent);
			console.groupEnd();
			if (supportsViewTransitions) {
				const map = elementsWithStyleProperty(document, 'view-transition-name');
				[...map.values()].filter((set) => set.has(document.documentElement)).length === 0 &&
					map.set('root', (map.get('root') ?? new Set()).add(document.documentElement));
				window.__vtbot.debug.originalMap = toCSSSelectorMap(map, 'old');
			}
			activateMutationObserver();
			const originalSwap = swapEvent.swap;
			swapEvent.swap = async () => {
				prefix.log(`before execution of swap()`);
				originalSwap();
				logProperties(window.__vtbot.debug.capture.event, true);
				prefix.log(`after execution of swap()`);
				prefix.log(`%o`, document.documentElement);
				window.__vtbot.debug.savedSwapEvent = swapEvent;
			};
			doCapture(swapEvent);
			swapEvent.viewTransition.updateCallbackDone
				.then(() => prefix.log(`resolve viewTransition.updateCallbackDone`))
				.catch((error: any) => prefix.log(`reject viewTransition.updateCallbackDone with`, error))
				.finally(deactivateMutationObserver);
			swapEvent.viewTransition.ready
				.then(() => prefix.log(`resolve viewTransition.ready`))
				.catch((error: any) => prefix.log(`reject viewTransition.ready with`, error));
			swapEvent.viewTransition.finished
				.then(() => {
					prefix.log(`resolve viewTransition.finished`);
				})
				.catch((error: any) => {
					prefix.log(`reject viewTransition.finished with`, error);
				})
				.finally(() => {
					logAnimations();
					window.__vtbot.debug.closing--;
				});
		}
	}

	const afterSwap = (e: Event) => {
		if (enabled_in()) {
			prefix.log(`Event handler for ${e.type}`);
			const event = window.__vtbot.debug.capture.event;
			logProperties(event, true);
			const vtbot_debug = window.__vtbot.debug;
			if (supportsViewTransitions) {
				logTransitions(vtbot_debug.originalMap, vtbot_debug.savedSwapEvent);
			} else {
				prefix.log(`morphing transitions are not supported by this browser`);
			}
			logScripts();

			beginning = 0;
			animations = Object.create(null);
		}
	};

	function pageLoad(e: Event) {
		if (enabled_in()) {
			logProperties(window.__vtbot.debug.capture.event, true);
			prefix.log(`Event handler for ${e.type}`);
			window.__vtbot.debug.closing--;
		}
	}

	function animationStart(e: Event) {
		if (e instanceof AnimationEvent) {
			beginning !== 0 || (beginning = e.timeStamp);
			const trans = transition(e);
			animations[trans] ??= Object.create(null);
			const pseudo = e.pseudoElement;
			animations[trans]![pseudo] ??= {};
			const animation = e.animationName;
			animations[trans]![pseudo]![animation] = {
				start: e,
				end: e,
			};
		}
	}

	function animationEnd(e: Event) {
		e instanceof AnimationEvent &&
			animations[transition(e)]?.[e.pseudoElement]?.[e.animationName] &&
			(animations[transition(e)]![e.pseudoElement]![e.animationName]!.end = e);
	}

	/*
	 * Register the "late" handlers
	 */
	// register as late as possible (= in pageshow event) to be the last handler in the chain
	window.addEventListener('pageshow', () => {
		prefix.log(`Setup ...`);
		document.addEventListener('astro:before-preparation', beforePreparation);
		document.addEventListener('astro:after-preparation', afterPreparation);
		document.addEventListener('astro:before-swap', beforeSwap);
		document.addEventListener('astro:after-swap', afterSwap);
		document.addEventListener('astro:page-load', pageLoad);
		document.addEventListener('animationstart', animationStart);
		document.addEventListener('animationend', animationEnd);
	});
</script>