<script lang="ts">
	import { onMount, onDestroy } from 'svelte';
	import { EditorState, StateField, StateEffect, RangeSet } from '@codemirror/state';
	import { EditorView, keymap, lineNumbers, highlightActiveLine, highlightActiveLineGutter, gutter, GutterMarker, Decoration, WidgetType, type DecorationSet } from '@codemirror/view';
	import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands';
	import { syntaxHighlighting, defaultHighlightStyle, indentOnInput, bracketMatching } from '@codemirror/language';
	import { searchKeymap, highlightSelectionMatches } from '@codemirror/search';
	import { autocompletion, completionKeymap, closeBrackets, closeBracketsKeymap, type CompletionContext, type CompletionResult } from '@codemirror/autocomplete';
	import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark';

	// Docker Compose keywords for autocomplete
	const COMPOSE_TOP_LEVEL = ['services', 'networks', 'volumes', 'configs', 'secrets', 'name', 'version'];

	const COMPOSE_SERVICE_KEYS = [
		'annotations', 'attach', 'build', 'blkio_config', 'cap_add', 'cap_drop', 'cgroup', 'cgroup_parent',
		'command', 'configs', 'container_name', 'cpu_count', 'cpu_percent', 'cpu_period', 'cpu_quota',
		'cpu_rt_period', 'cpu_rt_runtime', 'cpu_shares', 'cpus', 'cpuset', 'credential_spec',
		'depends_on', 'deploy', 'develop', 'device_cgroup_rules', 'devices', 'dns', 'dns_opt', 'dns_search',
		'domainname', 'driver_opts', 'entrypoint', 'env_file', 'environment', 'expose', 'extends',
		'external_links', 'extra_hosts', 'gpus', 'group_add', 'healthcheck', 'hostname', 'image', 'init',
		'ipc', 'isolation', 'labels', 'label_file', 'links', 'logging', 'mac_address', 'mem_limit',
		'mem_reservation', 'mem_swappiness', 'memswap_limit', 'models', 'network_mode', 'networks',
		'oom_kill_disable', 'oom_score_adj', 'pid', 'pids_limit', 'platform', 'ports', 'post_start',
		'pre_stop', 'privileged', 'profiles', 'provider', 'pull_policy', 'read_only', 'restart', 'runtime',
		'scale', 'secrets', 'security_opt', 'shm_size', 'stdin_open', 'stop_grace_period', 'stop_signal',
		'storage_opt', 'sysctls', 'tmpfs', 'tty', 'ulimits', 'use_api_socket', 'user', 'userns_mode', 'uts',
		'volumes', 'volumes_from', 'working_dir'
	];

	const COMPOSE_BUILD_KEYS = [
		'context', 'dockerfile', 'dockerfile_inline', 'args', 'ssh', 'cache_from', 'cache_to',
		'extra_hosts', 'isolation', 'labels', 'no_cache', 'pull', 'shm_size', 'target', 'secrets',
		'tags', 'platforms', 'privileged', 'network'
	];

	const COMPOSE_DEPLOY_KEYS = [
		'mode', 'replicas', 'endpoint_mode', 'labels', 'placement', 'resources', 'restart_policy',
		'rollback_config', 'update_config'
	];

	const COMPOSE_HEALTHCHECK_KEYS = [
		'test', 'interval', 'timeout', 'retries', 'start_period', 'start_interval', 'disable'
	];

	const COMPOSE_LOGGING_KEYS = ['driver', 'options'];

	const COMPOSE_NETWORK_TOP_LEVEL = [
		'driver', 'driver_opts', 'attachable', 'enable_ipv6', 'external', 'internal', 'ipam', 'labels', 'name'
	];

	const COMPOSE_VOLUME_TOP_LEVEL = [
		'driver', 'driver_opts', 'external', 'labels', 'name'
	];

	const COMPOSE_DEPENDS_ON_VALUES = ['service_started', 'service_healthy', 'service_completed_successfully'];

	const COMPOSE_RESTART_VALUES = ['no', 'always', 'on-failure', 'unless-stopped'];

	const COMPOSE_PULL_POLICY_VALUES = ['always', 'never', 'missing', 'build', 'daily', 'weekly'];

	const COMPOSE_NETWORK_MODE_VALUES = ['none', 'host', 'bridge'];

	// All Docker Compose keywords combined for autocomplete
	const ALL_COMPOSE_KEYWORDS = [
		...COMPOSE_TOP_LEVEL,
		...COMPOSE_SERVICE_KEYS,
		...COMPOSE_BUILD_KEYS,
		...COMPOSE_DEPLOY_KEYS,
		...COMPOSE_HEALTHCHECK_KEYS,
		...COMPOSE_LOGGING_KEYS,
		...COMPOSE_NETWORK_TOP_LEVEL,
		...COMPOSE_VOLUME_TOP_LEVEL
	].filter((v, i, a) => a.indexOf(v) === i).sort(); // Remove duplicates and sort

	// Docker Compose autocomplete source - always suggest all keywords
	function composeCompletions(context: CompletionContext): CompletionResult | null {
		// Get word before cursor
		const word = context.matchBefore(/[a-z_]*/);
		if (!word) return null;

		// Only show completions if typing (not empty) or explicitly requested
		if (word.from === word.to && !context.explicit) return null;

		const line = context.state.doc.lineAt(context.pos);
		const textBefore = line.text.slice(0, context.pos - line.from);

		// Don't show in value position (after colon with content)
		if (textBefore.match(/:\s*\S/)) return null;

		return {
			from: word.from,
			options: ALL_COMPOSE_KEYWORDS.map(label => ({
				label,
				type: 'keyword',
				apply: label + ':'
			})),
			validFor: /^[a-z_]*$/
		};
	}

	// Value completions for specific keys
	function composeValueCompletions(context: CompletionContext): CompletionResult | null {
		const line = context.state.doc.lineAt(context.pos);
		const textBefore = line.text.slice(0, context.pos - line.from);

		// Check if we're after a key: pattern (value position)
		const valueMatch = textBefore.match(/^\s*([a-z_]+):\s*/);
		if (!valueMatch) return null;

		const key = valueMatch[1];

		// Get word at cursor for value
		const word = context.matchBefore(/[a-z_-]*/);
		if (!word) return null;
		if (word.from === word.to && !context.explicit) return null;

		let options: string[] = [];

		switch (key) {
			case 'restart':
				options = COMPOSE_RESTART_VALUES;
				break;
			case 'pull_policy':
				options = COMPOSE_PULL_POLICY_VALUES;
				break;
			case 'network_mode':
				options = COMPOSE_NETWORK_MODE_VALUES;
				break;
			case 'condition':
				options = COMPOSE_DEPENDS_ON_VALUES;
				break;
			default:
				return null;
		}

		return {
			from: word.from,
			options: options.map(label => ({
				label,
				type: 'value'
			})),
			validFor: /^[a-z_-]*$/
		};
	}

	// Language imports
	import { yaml } from '@codemirror/lang-yaml';
	import { json } from '@codemirror/lang-json';
	import { javascript } from '@codemirror/lang-javascript';
	import { python } from '@codemirror/lang-python';
	import { html } from '@codemirror/lang-html';
	import { css } from '@codemirror/lang-css';
	import { markdown } from '@codemirror/lang-markdown';
	import { xml } from '@codemirror/lang-xml';
	import { sql } from '@codemirror/lang-sql';

	export interface VariableMarker {
		name: string;
		type: 'required' | 'optional' | 'missing';
		value?: string; // The value provided in env vars editor
		isSecret?: boolean; // Whether to mask the value
		defaultValue?: string; // The default value from compose syntax (e.g., ${VAR:-default})
	}

	interface Props {
		value: string;
		language?: string;
		readonly?: boolean;
		theme?: 'dark' | 'light';
		onchange?: (value: string) => void;
		class?: string;
		variableMarkers?: VariableMarker[];
	}

	let { value = '', language = 'yaml', readonly = false, theme = 'dark', onchange, class: className = '', variableMarkers = [] }: Props = $props();

	let container: HTMLDivElement;
	let view: EditorView | null = null;

	// Mutable ref for callback - allows updating without recreating editor
	let onchangeRef: ((value: string) => void) | undefined = onchange;

	// Keep callback ref updated when prop changes
	$effect(() => {
		onchangeRef = onchange;
	});

	// Variable marker gutter icons
	class VariableGutterMarker extends GutterMarker {
		type: 'required' | 'optional' | 'missing';
		hasValue: boolean;

		constructor(type: 'required' | 'optional' | 'missing', hasValue: boolean = false) {
			super();
			this.type = type;
			this.hasValue = hasValue;
		}

		toDOM() {
			const wrapper = document.createElement('span');
			wrapper.className = 'var-marker-wrapper';

			// The colored dot
			const dot = document.createElement('span');
			dot.className = `var-marker var-marker-${this.type}`;
			dot.title = this.type === 'missing' ? 'Missing required variable'
				: this.type === 'required' ? 'Required variable (defined)'
				: 'Optional variable (has default)';
			wrapper.appendChild(dot);

			// Checkmark if value is provided
			if (this.hasValue) {
				const check = document.createElement('span');
				check.className = 'var-marker-check';
				check.innerHTML = '✓';
				check.title = 'Value provided';
				wrapper.appendChild(check);
			}

			return wrapper;
		}
	}

	// Widget to show variable value as inline overlay
	// Supports three states: provided (green), default (blue), missing (red)
	class VariableValueWidget extends WidgetType {
		value: string;
		isSecret: boolean;
		variant: 'provided' | 'default' | 'missing';

		constructor(value: string, isSecret: boolean = false, variant: 'provided' | 'default' | 'missing' = 'provided') {
			super();
			this.value = value;
			this.isSecret = isSecret;
			this.variant = variant;
		}

		toDOM() {
			const span = document.createElement('span');
			span.className = `var-value-overlay var-value-${this.variant}`;

			if (this.variant === 'missing') {
				// Red MISSING badge with icon
				span.innerHTML = '⚠ MISSING';
				span.title = 'Required variable not defined';
			} else {
				span.textContent = this.isSecret ? '••••••' : this.value;
				span.title = this.isSecret ? 'Secret value' : this.value;
			}
			return span;
		}

		eq(other: VariableValueWidget) {
			return this.value === other.value && this.isSecret === other.isSecret && this.variant === other.variant;
		}
	}

	// Create inline value decorations
	function createValueDecorations(doc: any, markers: VariableMarker[]): DecorationSet {
		const decorations: {from: number, to: number, decoration: Decoration}[] = [];

		if (markers.length === 0) return Decoration.none;

		const text = doc.toString();

		for (const marker of markers) {
			// Find all occurrences of this variable in the text
			// Match ${VAR_NAME} or ${VAR_NAME:-...} or $VAR_NAME patterns
			const patterns = [
				{ regex: new RegExp(`\\$\\{${marker.name}\\}`, 'g'), hasDefault: false },
				{ regex: new RegExp(`\\$\\{${marker.name}:-([^}]*)\\}`, 'g'), hasDefault: true },
				{ regex: new RegExp(`\\$\\{${marker.name}-([^}]*)\\}`, 'g'), hasDefault: true },
				{ regex: new RegExp(`\\$\\{${marker.name}:\\?[^}]*\\}`, 'g'), hasDefault: false },
				{ regex: new RegExp(`\\$\\{${marker.name}\\?[^}]*\\}`, 'g'), hasDefault: false },
				{ regex: new RegExp(`\\$\\{${marker.name}:\\+[^}]*\\}`, 'g'), hasDefault: false },
				{ regex: new RegExp(`\\$\\{${marker.name}\\+[^}]*\\}`, 'g'), hasDefault: false },
			];

			for (const { regex, hasDefault } of patterns) {
				let match;
				while ((match = regex.exec(text)) !== null) {
					const from = match.index;
					const to = from + match[0].length;

					// Determine what to show:
					// 1. If value is provided in env vars editor -> green with that value
					// 2. If no value but has default in syntax -> blue with default value
					// 3. If no value and no default (missing) -> red MISSING

					let widget: VariableValueWidget;

					if (marker.value) {
						// Value provided in env vars editor -> GREEN
						widget = new VariableValueWidget(marker.value, marker.isSecret ?? false, 'provided');
					} else if (hasDefault && match[1]) {
						// Has default value from compose syntax -> BLUE
						widget = new VariableValueWidget(match[1], false, 'default');
					} else if (marker.defaultValue) {
						// Has default value from marker -> BLUE
						widget = new VariableValueWidget(marker.defaultValue, false, 'default');
					} else if (marker.type === 'missing') {
						// Missing required variable -> RED
						widget = new VariableValueWidget('', false, 'missing');
					} else {
						// Skip if nothing to show
						continue;
					}

					// Add widget decoration at the end of the variable
					decorations.push({
						from: to,
						to: to,
						decoration: Decoration.widget({
							widget,
							side: 1
						})
					});
				}
			}
		}

		// Sort by position
		decorations.sort((a, b) => a.from - b.from);
		return Decoration.set(decorations.map(d => d.decoration.range(d.from, d.to)));
	}

	// Create decorations for variable markers
	function createVariableDecorations(doc: any, markers: VariableMarker[]): RangeSet<GutterMarker> {
		const gutterMarkers: {from: number, marker: GutterMarker}[] = [];

		if (markers.length === 0) return RangeSet.empty;

		const text = doc.toString();
		const lines = text.split('\n');
		let pos = 0;

		for (let i = 0; i < lines.length; i++) {
			const line = lines[i];

			// Check if this line contains any of our marked variables
			for (const marker of markers) {
				// Match ${VAR_NAME} or ${VAR_NAME:-...} patterns
				const patterns = [
					`\${${marker.name}}`,
					`\${${marker.name}:-`,
					`\${${marker.name}-`,
					`\${${marker.name}:?`,
					`\${${marker.name}?`,
					`\${${marker.name}:+`,
					`\${${marker.name}+`,
					`$${marker.name}`
				];

				const hasVariable = patterns.some(p => line.includes(p));
				if (hasVariable) {
					gutterMarkers.push({
						from: pos,
						marker: new VariableGutterMarker(marker.type, !!marker.value)
					});
					break; // Only one marker per line
				}
			}

			pos += line.length + 1; // +1 for newline
		}

		// Sort by position and create RangeSet
		gutterMarkers.sort((a, b) => a.from - b.from);
		return RangeSet.of(gutterMarkers.map(m => m.marker.range(m.from)));
	}

	// Effect to update variable markers
	const updateMarkersEffect = StateEffect.define<VariableMarker[]>();

	// State field to track variable markers (gutter)
	// IMPORTANT: Only updates via effects, not closure reference (fixes stale closure bug)
	const variableMarkersField = StateField.define<RangeSet<GutterMarker>>({
		create() {
			// Start empty - markers will be pushed via effect
			return RangeSet.empty;
		},
		update(markers, tr) {
			for (const effect of tr.effects) {
				if (effect.is(updateMarkersEffect)) {
					return createVariableDecorations(tr.state.doc, effect.value);
				}
			}
			// Don't recalculate on docChanged - wait for explicit effect from parent
			return markers;
		}
	});

	// State field to track value decorations (inline widgets)
	// IMPORTANT: Only updates via effects, not closure reference (fixes stale closure bug)
	const valueDecorationsField = StateField.define<DecorationSet>({
		create() {
			// Start empty - decorations will be pushed via effect
			return Decoration.none;
		},
		update(decorations, tr) {
			for (const effect of tr.effects) {
				if (effect.is(updateMarkersEffect)) {
					return createValueDecorations(tr.state.doc, effect.value);
				}
			}
			// Don't recalculate on docChanged - wait for explicit effect from parent
			return decorations;
		},
		provide: f => EditorView.decorations.from(f)
	});

	// Variable markers gutter
	const variableGutter = gutter({
		class: 'cm-variable-gutter',
		markers: view => view.state.field(variableMarkersField),
		initialSpacer: () => new VariableGutterMarker('required')
	});

	// Get language extension based on language name
	function getLanguageExtension(lang: string) {
		switch (lang) {
			case 'yaml':
				return yaml();
			case 'json':
				return json();
			case 'javascript':
			case 'js':
				return javascript();
			case 'typescript':
			case 'ts':
				return javascript({ typescript: true });
			case 'jsx':
				return javascript({ jsx: true });
			case 'tsx':
				return javascript({ jsx: true, typescript: true });
			case 'python':
			case 'py':
				return python();
			case 'html':
				return html();
			case 'css':
				return css();
			case 'markdown':
			case 'md':
				return markdown();
			case 'xml':
				return xml();
			case 'sql':
				return sql();
			case 'dockerfile':
			case 'shell':
			case 'bash':
			case 'sh':
				// No dedicated shell/dockerfile support, use basic highlighting
				return [];
			default:
				return [];
		}
	}

	// Create custom dark theme that matches our UI
	const dockhandDark = EditorView.theme({
		'&': {
			backgroundColor: '#1a1a1a',
			color: '#d4d4d4',
			height: '100%',
			fontSize: '13px'
		},
		'.cm-content': {
			fontFamily: 'Menlo, Monaco, "Courier New", monospace',
			padding: '8px 0'
		},
		'.cm-gutters': {
			backgroundColor: '#1a1a1a',
			color: '#858585',
			border: 'none',
			fontFamily: 'Menlo, Monaco, "Courier New", monospace',
			fontSize: '13px'
		},
		'.cm-activeLineGutter': {
			backgroundColor: '#2a2a2a'
		},
		'.cm-activeLine': {
			backgroundColor: '#2a2a2a'
		},
		'.cm-selectionBackground': {
			backgroundColor: 'yellow !important'
		},
		'&.cm-focused .cm-selectionBackground': {
			backgroundColor: 'yellow !important'
		},
		'&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground': {
			backgroundColor: 'yellow !important'
		},
		'.cm-cursor': {
			borderLeftColor: '#d4d4d4'
		},
		'.cm-line': {
			padding: '0 8px'
		}
	}, { dark: true });

	// Create custom light theme
	const dockhandLight = EditorView.theme({
		'&': {
			backgroundColor: '#fafafa',
			color: '#3f3f46',
			height: '100%',
			fontSize: '13px'
		},
		'.cm-content': {
			fontFamily: 'Menlo, Monaco, "Courier New", monospace',
			padding: '8px 0'
		},
		'.cm-gutters': {
			backgroundColor: '#fafafa',
			color: '#a1a1aa',
			border: 'none',
			fontFamily: 'Menlo, Monaco, "Courier New", monospace',
			fontSize: '13px'
		},
		'.cm-activeLineGutter': {
			backgroundColor: '#f4f4f5'
		},
		'.cm-activeLine': {
			backgroundColor: '#f4f4f5'
		},
		'.cm-selectionBackground': {
			backgroundColor: '#e4e4e7 !important'
		},
		'&.cm-focused .cm-selectionBackground': {
			backgroundColor: '#e4e4e7 !important'
		},
		'.cm-cursor': {
			borderLeftColor: '#3f3f46'
		},
		'.cm-line': {
			padding: '0 8px'
		}
	}, { dark: false });

	// Track if we're initialized (prevents multiple createEditor calls)
	let initialized = false;

	function createEditor() {
		if (!container || view || initialized) return;
		initialized = true;

		const themeExtensions = theme === 'dark'
			? [dockhandDark, syntaxHighlighting(oneDarkHighlightStyle)]
			: [dockhandLight, syntaxHighlighting(defaultHighlightStyle)];

		// Build autocompletion config - add Docker Compose completions for YAML
		const autocompletionConfig = language === 'yaml'
			? autocompletion({
				override: [composeCompletions, composeValueCompletions],
				activateOnTyping: true
			})
			: autocompletion();

		const extensions = [
			lineNumbers(),
			highlightActiveLineGutter(),
			highlightActiveLine(),
			history(),
			indentOnInput(),
			bracketMatching(),
			closeBrackets(),
			autocompletionConfig,
			highlightSelectionMatches(),
			syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
			keymap.of([
				...defaultKeymap,
				...historyKeymap,
				...searchKeymap,
				...completionKeymap,
				...closeBracketsKeymap,
				indentWithTab
			]),
			...themeExtensions,
			EditorView.lineWrapping,
			getLanguageExtension(language)
		].flat();

		if (readonly) {
			extensions.push(EditorState.readOnly.of(true));
		}

		// Always add variable markers gutter and value decorations (can be updated dynamically)
		extensions.push(variableMarkersField, variableGutter, valueDecorationsField);

		const state = EditorState.create({
			doc: value,
			extensions
		});

		// Custom transaction handler - this is SYNCHRONOUS and more reliable than updateListener
		// Based on the Svelte Playground pattern: https://svelte.dev/playground/91649ba3e0ce4122b3b34f3a95a00104
		const dispatchTransactions = (trs: readonly import('@codemirror/state').Transaction[]) => {
			if (!view) return;

			// Apply all transactions
			view.update(trs);

			// Check if any transaction changed the document
			const lastChangingTr = trs.findLast(tr => tr.docChanged);
			if (lastChangingTr && onchangeRef) {
				onchangeRef(lastChangingTr.newDoc.toString());
			}
		};

		view = new EditorView({
			state,
			parent: container,
			dispatchTransactions
		});


		// Push initial markers if provided
		if (variableMarkers.length > 0) {
			view.dispatch({
				effects: updateMarkersEffect.of(variableMarkers)
			});
		}
	}

	function destroyEditor() {
		if (view) {
			view.destroy();
			view = null;
		}
		initialized = false;
	}

	// Get current editor content
	export function getValue(): string {
		return view?.state.doc.toString() ?? value;
	}

	// Set editor content
	export function setValue(newValue: string) {
		if (view) {
			view.dispatch({
				changes: {
					from: 0,
					to: view.state.doc.length,
					insert: newValue
				}
			});
		}
	}

	// Focus the editor
	export function focus() {
		view?.focus();
	}

	// Update variable markers - this is the key method for parent to call
	export function updateVariableMarkers(markers: VariableMarker[]) {
		if (view) {
			view.dispatch({
				effects: updateMarkersEffect.of(markers)
			});
		}
	}

	onMount(() => {
		createEditor();
	});

	onDestroy(() => {
		destroyEditor();
	});

	// Track previous values for comparison
	let prevLanguage = $state(language);
	let prevTheme = $state(theme);

	// Recreate editor if language or theme changes
	$effect(() => {
		const currentLanguage = language;
		const currentTheme = theme;

		// Only recreate if language or theme actually changed
		if (view && (currentLanguage !== prevLanguage || currentTheme !== prevTheme)) {
			prevLanguage = currentLanguage;
			prevTheme = currentTheme;
			const currentContent = view.state.doc.toString();
			destroyEditor();
			value = currentContent; // Preserve content
			createEditor();
		}
	});

	// Update markers when prop changes (backup mechanism, parent should also call updateVariableMarkers)
	$effect(() => {
		const markers = variableMarkers;
		if (view && markers) {
			view.dispatch({
				effects: updateMarkersEffect.of(markers)
			});
		}
	});
</script>

<div
	bind:this={container}
	class="h-full w-full overflow-hidden {className}"
	onkeydown={(e) => e.stopPropagation()}
></div>

<style>
	div :global(.cm-editor) {
		height: 100%;
	}
	div :global(.cm-scroller) {
		overflow: auto;
	}

	/* Variable marker gutter */
	div :global(.cm-variable-gutter) {
		width: 28px;
		min-width: 28px;
	}

	div :global(.var-marker-wrapper) {
		display: inline-flex;
		align-items: center;
		gap: 2px;
		padding-left: 2px;
	}

	div :global(.var-marker-check) {
		color: #22c55e;
		font-size: 14px;
		font-weight: bold;
		line-height: 1;
		margin-top: -1px;
	}

	div :global(.var-marker) {
		display: inline-block;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		margin: 4px 3px;
		cursor: help;
	}

	div :global(.var-marker-required) {
		background-color: #22c55e; /* green-500 */
		box-shadow: 0 0 4px #22c55e;
	}

	div :global(.var-marker-optional) {
		background-color: #60a5fa; /* blue-400 */
		box-shadow: 0 0 4px #60a5fa;
	}

	div :global(.var-marker-missing) {
		background-color: #ef4444; /* red-500 */
		box-shadow: 0 0 4px #ef4444;
	}

	/* Variable value overlay widget - base styles */
	div :global(.var-value-overlay) {
		display: inline-block;
		margin-left: 4px;
		padding: 0 6px;
		font-size: 11px;
		font-family: inherit;
		border-radius: 4px;
		max-width: 150px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		vertical-align: middle;
		cursor: help;
	}

	/* Provided value - GREEN */
	div :global(.var-value-provided) {
		background-color: rgba(34, 197, 94, 0.15);
		color: #22c55e;
		border: 1px solid rgba(34, 197, 94, 0.3);
	}

	/* Default value - BLUE */
	div :global(.var-value-default) {
		background-color: rgba(96, 165, 250, 0.15);
		color: #60a5fa;
		border: 1px solid rgba(96, 165, 250, 0.3);
	}

	/* Missing value - RED */
	div :global(.var-value-missing) {
		background-color: rgba(239, 68, 68, 0.15);
		color: #ef4444;
		border: 1px solid rgba(239, 68, 68, 0.3);
		font-weight: 600;
	}

	/* Light theme adjustments */
	:global(.cm-editor:not(.cm-dark)) div :global(.var-value-provided) {
		background-color: rgba(34, 197, 94, 0.1);
		color: #16a34a;
		border-color: rgba(34, 197, 94, 0.4);
	}

	:global(.cm-editor:not(.cm-dark)) div :global(.var-value-default) {
		background-color: rgba(59, 130, 246, 0.1);
		color: #2563eb;
		border-color: rgba(59, 130, 246, 0.4);
	}

	:global(.cm-editor:not(.cm-dark)) div :global(.var-value-missing) {
		background-color: rgba(239, 68, 68, 0.1);
		color: #dc2626;
		border-color: rgba(239, 68, 68, 0.4);
	}
</style>
