import type { HighlightJS, HighlightTheme } from './CodeTypes'
import { appendStyle, appendScript, awaitGlobal } from '@bagelink/vue'
import { ref } from 'vue'

// Extend the Window interface
interface CustomWindow extends Window {
	hljs: HighlightJS
}
declare const window: CustomWindow

export function useHighlight(theme: HighlightTheme = 'dark') {
	const hljs = ref<HighlightJS | null>(null)
	const loaded = ref(false)
	const currentTheme = ref<HighlightTheme>(theme)

	const normalizeTheme = (t: HighlightTheme): HighlightTheme => {
		if (t === 'dark') { return 'atom-one-dark' }
		if (t === 'light') { return 'atom-one-light' }
		return t
	}

	const getThemeCssUrl = (t: HighlightTheme) => `https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/styles/${t}.min.css`

	// Remove highlight.js theme links EXCEPT the one we're about to keep.
	// Removing a <link> that is still loading prevents its onload from ever
	// firing, which would leave `appendStyle` hanging forever. When multiple
	// editors mount at once this caused one editor to get stuck on `loaded=false`.
	const removeOtherThemeLinks = (keepUrl: string) => {
		document.querySelectorAll('link[rel="stylesheet"]').forEach((link) => {
			if (link instanceof HTMLLinkElement && link.href.includes('/styles/') && link.href.includes('highlight.js')) {
				if (link.href !== keepUrl) { link.parentElement?.removeChild(link) }
			}
		})
	}

	const loadTheme = async (theme: HighlightTheme) => {
		const next = normalizeTheme(theme)
		try {
			const url = getThemeCssUrl(next)
			// Append first (idempotent: appendStyle resolves immediately if the
			// link already exists), then remove only the *other* theme links.
			await appendStyle(url)
			removeOtherThemeLinks(url)
			currentTheme.value = next
		} catch (error) {
			console.error('Failed to apply theme. Falling back to atom-one-dark:', error)
			currentTheme.value = 'atom-one-dark'
			const url = getThemeCssUrl(currentTheme.value)
			await appendStyle(url)
			removeOtherThemeLinks(url)
		}
	}

	const setTheme = async (theme: HighlightTheme) => {
		const next = normalizeTheme(theme)
		if (next === currentTheme.value) { return }
		await loadTheme(next)
	}

	const loadHighlight = async () => {
		if (loaded.value) { return }

		try {
			// Load highlight.js
			await appendScript('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/highlight.min.js', { id: 'hljs-cdn' })
			// `appendScript` may resolve before the script has finished executing when
			// multiple editors mount at once (a duplicate <script id> is detected in the
			// DOM and resolves immediately). Wait for the actual global to appear.
			const lib = await awaitGlobal<HighlightJS>('hljs')
			await loadTheme(currentTheme.value)

			hljs.value = lib
			loaded.value = true
		} catch (error) {
			console.error('Error loading highlight.js:', error)
		}
	}

	const escapeHtml = (unsafe: string) => {
		return unsafe.replace(/[&<>"']/g, (m) => {
			const replacements: { [key: string]: string } = {
				'&': '&amp;',
				'<': '&lt;',
				'>': '&gt;',
				'"': '&quot;',
				'\'': '&#039;'
			}
			return replacements[m] || ''
		})
	}

	const highlightCode = (code: string, language?: string, autodetect = true, ignoreIllegals = true) => {
		if (!hljs.value) { return escapeHtml(code) }

		try {
			const lang = language || ''

			if (lang && !autodetect && !hljs.value.getLanguage(lang)) {
				console.warn(`The language "${lang}" is not available.`)
				return escapeHtml(code)
			}

			const result = autodetect
				? hljs.value.highlightAuto(code)
				: hljs.value.highlight(code, { language: lang, ignoreIllegals })

			return result.value || escapeHtml(code)
		} catch (error) {
			console.error('Highlighting error:', error)
			return escapeHtml(code)
		}
	}

	return {
		hljs,
		loaded,
		loadHighlight,
		setTheme,
		currentTheme,
		escapeHtml,
		highlightCode
	}
}