import type { Attributes, BglFormSchemaT, Path } from '../types/BagelForm'

const debouncers = new Map<() => void, ReturnType<typeof setTimeout>>()

export function debounce(fn: () => void, wait: number = 500) {
	clearTimeout(debouncers.get(fn))
	const timeout = setTimeout(() => {
		fn()
		debouncers.delete(fn)
	}, wait)
	debouncers.set(fn, timeout)
}

export function slugify(str: string) {
	return str
		.toLowerCase()
		.replace(/[^a-z0-9-\s]/g, '')
		.split(/[\s-]+/)
		.join('-')
}

export function keyToLabel(key?: string): string | undefined {
	if (key === undefined) { return key }
	return (
		key
			.split('_')
			.map(k => k.charAt(0).toUpperCase() + k.slice(1))
			.join(' ') || key
	)
}

export async function copyText(text: string, cb?: (msg: string) => void) {
	await navigator.clipboard.writeText(text)
	if (cb) { cb('Copied to clipboard') }
}

export function initials(...strArr: string[]) {
	strArr = strArr.flatMap(str => str.split(/\s/))
	return strArr.map(str => str.charAt(0)).join('')
}

/**
 * Strip script-capable content from an HTML string so it is safe for v-html.
 * Removes <script>/<style>/<iframe>/<object>/<embed> elements, on* event
 * handler attributes, and javascript: / data: URLs in href/src.
 * Allowlist-free by design — formatting tags (b, i, a, span…) pass through.
 */
export function sanitizeHtml(html: string): string {
	if (!html || typeof document === 'undefined') { return html }
	const template = document.createElement('template')
	template.innerHTML = html
	const walk = (el: Element | DocumentFragment) => {
		for (const child of Array.from(el.children)) {
			const tag = child.tagName.toLowerCase()
			if (['script', 'iframe', 'object', 'embed', 'link', 'meta', 'base', 'form'].includes(tag)) {
				child.remove()
				continue
			}
			for (const attr of Array.from(child.attributes)) {
				const name = attr.name.toLowerCase()
				const value = attr.value.trim().toLowerCase()
				if (name.startsWith('on')
					|| ((name === 'href' || name === 'src' || name === 'xlink:href')
						&& (value.startsWith('javascript:') || value.startsWith('data:')))) {
					child.removeAttribute(attr.name)
				}
			}
			walk(child)
		}
	}
	walk(template.content)
	return template.innerHTML
}

export function useEscape(event: KeyboardEvent, closeModel: () => void) {
	if (event.key === 'Escape') {
		closeModel()
	}
}

export function classify(fieldVal?: any, row?: any, ...classes: any[]) {
	return classes
		.map((cls) => {
			if (typeof cls === 'function') { return cls(fieldVal, row) }
			return cls
		})
		.join(' ')
}

export function bindAttrs<T, P extends Path<T>>(
	attrs?: Attributes<T, P>,
	fieldVal?: any,
	row?: T
) {
// TODO: Fix this so that you don't have to return a fn for other on* event handlers
	if (!attrs) { return {} }

	const exclude = ['class', 'onClick', '$el'] as const
	const arr = Object.entries(attrs)
		.filter(([key]) => !exclude.includes(key as typeof exclude[number]))
		.map(([key, value]) => [
			key,
			typeof value === 'function' ? value(fieldVal, row) : value,
		])

	const resolvedAttrs: { [key: string]: any } = Object.fromEntries(arr)

	// resolvedAttrs.onClick = attrs.onClick
	// add back the rest of the attrs that were excluded //! except for class
	for (const key of exclude.slice(1)) {
		if (attrs[key]) {
			resolvedAttrs[key] = attrs[key]
		}
	}

	return resolvedAttrs
}

export function iffer(field: any, itemData: any) {
	if (field['v-if'] === undefined) { return true }
	if (typeof field['v-if'] === 'boolean') { return field['v-if'] }
	if (typeof field['v-if'] === 'string') { return true }
	if (typeof field['v-if'] === 'function')
	{ return field['v-if']?.(itemData?.[field.id], itemData) }
	return true
}

export function denullify(itemData?: { [key: string]: any }, fieldID?: string) {
	if (!fieldID) { return undefined }
	return itemData ? itemData[fieldID] : undefined
}

export const isDate = (dateToTest: any) => !Number.isNaN(Date.parse(dateToTest))

export function getFallbackSchema<T>(
	data?: any[],
	columns?: string[]
): BglFormSchemaT<T> {
	const keys = Array.from(new Set((data ?? []).flatMap(Object.keys)))

	const schema = keys.map(id => ({
		id,
		label: keyToLabel(id),
		transform: (val: any) => {
			const dateFields = ['created_at', 'updated_at']
			if (dateFields.includes(id)) { return val ? new Date(val).toLocaleString() : val }
			return val
		},
	})) as BglFormSchemaT<T>

	return columns
		? schema.filter(f => columns.includes(f.id as string) || !f.id)
		: schema
}

export function sleep(ms: number = 100) {
	return new Promise(resolve => setTimeout(resolve, ms))
}

// Keep track of loading scripts
const scriptsLoading = new Map<string, Promise<void>>()

export async function appendScript(src: string, options?: { id?: string }): Promise<void> {
	const scriptId = options?.id || src
	await sleep(1)
	// If this script is already loading, return the existing promise
	if (scriptsLoading.has(scriptId)) {
		const existingPromise = scriptsLoading.get(scriptId)
		if (existingPromise) { return existingPromise }
	}

	// Check if script is already in the document
	if (options?.id && document.getElementById(options.id)) {
		return Promise.resolve()
	} if (document.querySelector(`script[src="${src}"]`)) {
		return Promise.resolve()
	}

	// Create a new loading promise for this script
	const loadingPromise = new Promise<void>((resolve, reject) => {
		const script = document.createElement('script')
		script.src = src
		if (options?.id) {
			script.id = options.id
		}

		script.onload = () => {
			resolve()
			// Remove from loading scripts map when done
			scriptsLoading.delete(scriptId)
		}

		script.onerror = (err) => {
			reject(new Error(String(err)))
			// Remove from loading scripts map on error
			scriptsLoading.delete(scriptId)
		}

		document.head.append(script)
	})

	// Store the loading promise for this script
	scriptsLoading.set(scriptId, loadingPromise)

	return loadingPromise
}

/**
 * Wait for a global (e.g. a CDN script's `window.X`) to become available.
 * Resolves with the global value, or rejects after `timeout` ms (default 10s).
 *
 * @example
 * await appendScript('https://unpkg.com/leaflet/dist/leaflet.js')
 * const L = await awaitGlobal('L')
 */
export async function awaitGlobal<T = any>(name: string, { timeout = 10_000, interval = 50 }: { timeout?: number, interval?: number } = {}): Promise<T> {
	const start = Date.now()
	while ((window as any)[name] === undefined) {
		if (Date.now() - start > timeout) {
			throw new Error(`awaitGlobal: window.${name} not available after ${timeout}ms`)
		}
		await sleep(interval)
	}
	return (window as any)[name] as T
}

export function appendStyle(src: string): Promise<void> {
	return new Promise((resolve, reject) => {
		if (document.querySelector(`link[href="${src}"]`)) {
			resolve()
			return
		}
		const link = document.createElement('link')
		link.href = src
		link.rel = 'stylesheet'
		link.onload = () => { resolve() }
		link.onerror = reject
		document.head.append(link)
	})
}

export function normalizeURL(url: string) {
	if (url.startsWith('https://')) { return url }
	url = url.replace(/http:\/\//, '')
	return `https://${url}`
}

export function normalizeDimension(value: string | number | undefined, defaultMetric = 'px'): string | undefined {
	if (typeof value === 'number') { return `${value}${defaultMetric}` }
	return value
}

export type { NormalizedOption } from './options'
export { getOptionIcon, getOptionLabel, getOptionValue, normalizeOption } from './options'

export type { ComparisonOperator, FilterCondition, LogicalOperator, QueryConditions, QueryFilter } from './queryFilter'
export { anyOf, buildQuery, evaluateQuery, parseQuery, queryFilter, range, search } from './queryFilter'
export type { ShowdownConverter, ShowdownOptions } from './showdown'

const URL_REGEX = /^https?:\/\/|^\/\/|^blob:|^data:/

export function pathKeyToURL(pathKey?: string | null): string | undefined {
	if (pathKey == null || pathKey === '') {
		return undefined
	}
	if (URL_REGEX.test(pathKey)) {
		return pathKey
	}

	// For local public assets (e.g. images/foo.jpg), return as relative path
	if (pathKey.startsWith('/')) {
		return pathKey
	}

	// For static files from the API server, return relative path
	if (pathKey.startsWith('static/') || pathKey.startsWith('images/')) {
		return `/${pathKey}`
	}

	// For uploaded files, use the default file server
	// TODO: Make this configurable via SDK init
	const baseUrl = 'https://files.bagel.design'
	return `${baseUrl}/${pathKey}`
}

export function getNestedValue(obj: any, path?: string, defaultValue: any = undefined): any {
	if (!path) { return obj }
	const keys = path.split(/[.[]/)
	let current = obj

	for (const key of keys) {
		if (!current || typeof current !== 'object' || !(key in current)) {
			return defaultValue
		}
		current = current[key]
	}

	return current ?? defaultValue
}

const upgradeHeaders = (url: string) => url.replace(/http:\/\//, '//')

export function tryRun<T>(func: () => T, callback?: (error: Error) => void): T | undefined {
	try {
		return func()
	} catch (error) {
		if (callback) {
			callback(error as Error)
		}
	}
}

export function downloadFile(source: string | Blob, fileName?: string) {
	if (typeof document === 'undefined') { return } // SSR / non-browser guard

	const link = document.createElement('a')
	link.target = '_blank'
	link.rel = 'noopener noreferrer'

	const hasProvidedFileName
		= fileName !== undefined
			&& fileName !== ''

	if (typeof source === 'string') {
		link.href = upgradeHeaders(source)
		const fileNameFromSource = source.split('/').pop()
		const hasFileNameFromSource = fileNameFromSource !== undefined && fileNameFromSource !== ''
		link.download = hasProvidedFileName
			? fileName
			: (hasFileNameFromSource ? fileNameFromSource : 'download')
	} else {
		const url = URL.createObjectURL(source)
		link.href = url
		link.download = hasProvidedFileName ? fileName : 'download'
		// IMPORTANT: revoke after the browser started consuming (revoking immediately can break the download .
		setTimeout(() => tryRun(() => { URL.revokeObjectURL(url) }), 0)
	}

	document.body.appendChild(link)
	link.click()
	document.body.removeChild(link)
}

export { defaultOptions, showdown } from './showdown'

// Note: the `DateInput` type from './date' is intentionally not re-exported
// here to avoid clashing with the DateInput component. Import it from
// '@bagelink/vue/src/utils/date' directly if needed.
export type {
	CommonDateFormats,
	CommonDateTimeFormats,
	CommonTimeFormats,
	DateDiffUnit,
	DateTimeAcceptedFormats,
	FormatDateOptions,
	NamedFormats,
	TimeDeltaOptions,
	TimeDeltaUnit,
} from './date'
export {
	d,
	DateChain,
	dateDiff,
	DAY,
	fmtDate,
	formatDate,
	getDatePartsMap,
	handleTimezone,
	HOUR,
	local,
	MINUTE,
	MS,
	SECOND,
	timeDelta,
	utc,
	WEEK,
} from './date'
export * from './fetch'
export * from './string'

export { formatString } from './strings'
export { useDebounceFn } from '@vueuse/core'