/**
 * Toast notification types
 * @enum {string}
 */
export const ToastType = {
	error: "error",
	success: "success",
	warning: "warning",
};

export class Dom {
	/**
	 * Create a `<div>`
	 * @param {Object} [o]
	 * @param {Partial<CSSStyleDeclaration>} [o.styles]
	 * @param {string} [o.id]
	 * @param {string[]} [o.classes]
	 * @param {HTMLElement[]} [o.children]
	 * @param {Record<string, string>} [o.attributes]
	 * @returns {HTMLDivElement}
	 */
	static div(o = {}) {
		const div = document.createElement("div");
		if (o.styles) Object.assign(div.style, o.styles);
		if (o.id) div.id = o.id;
		if (o.classes) for (const cls of o.classes) div.classList.add(cls);
		if (o.attributes) for (const [k, v] of Object.entries(o.attributes)) div.setAttribute(k, v);
		if (o.children) div.append(...o.children);
		return div;
	}

	/**
	 * Create a `<span>`
	 * @param {Object} o
	 * @param {string} o.text
	 * @param {Partial<CSSStyleDeclaration>} [o.styles]
	 * @param {string} [o.id]
	 * @param {string[]} [o.classes]
	 * @param {HTMLElement[]} [o.children]
	 * @param {Record<string, string>} [o.attributes]
	 * @returns {HTMLSpanElement}
	 */
	static span(o) {
		const span = document.createElement("span");
		if (o.styles) Object.assign(span.style, o.styles);
		if (o.id) span.id = o.id;
		if (o.classes) for (const cls of o.classes) span.classList.add(cls);
		span.textContent = o.text;
		if (o.attributes) for (const [k, v] of Object.entries(o.attributes)) span.setAttribute(k, v);
		if (o.children) span.append(...o.children);
		return span;
	}

	/**
	 * Create a `<button>`
	 * @param {Object} o
	 * @param {string} [o.text]
	 * @param {(e: Event) => void} [o.onClick]
	 * @param {Partial<CSSStyleDeclaration>} [o.styles]
	 * @param {string} [o.id]
	 * @param {string[]} [o.classes]
	 * @param {HTMLElement[]} [o.children]
	 * @param {Record<string, string>} [o.attributes]
	 * @returns {HTMLButtonElement}
	 */
	static button(o = {}) {
		const button = document.createElement("button");
		if (o.styles) Object.assign(button.style, o.styles);
		if (o.id) button.id = o.id;
		if (o.classes) for (const cls of o.classes) button.classList.add(cls);
		if (o.text) button.textContent = o.text;
		if (o.attributes) for (const [k, v] of Object.entries(o.attributes)) button.setAttribute(k, v);
		if (o.children) button.append(...o.children);
		if (o.onClick) button.addEventListener("pointerdown", o.onClick);
		return button;
	}

	/**
	 * Create an `<input>`
	 * @param {Object} o
	 * @param {string} o.type
	 * @param {(e: Event) => void} [o.onChange]
	 * @param {(e: Event) => void} [o.onInput]
	 * @param {string|number} [o.value]
	 * @param {string} [o.placeholder]
	 * @param {string} [o.min]
	 * @param {string} [o.max]
	 * @param {string} [o.step]
	 * @param {Partial<CSSStyleDeclaration>} [o.styles]
	 * @param {string} [o.id]
	 * @param {string[]} [o.classes]
	 * @param {Record<string, string>} [o.attributes]
	 * @returns {HTMLInputElement}
	 */
	static input(o) {
		const input = document.createElement("input");
		if (o.styles) Object.assign(input.style, o.styles);
		if (o.id) input.id = o.id;
		if (o.classes) for (const cls of o.classes) input.classList.add(cls);
		if (o.attributes) for (const [k, v] of Object.entries(o.attributes)) input.setAttribute(k, v);

		input.type = o.type;
		if (o.placeholder) input.placeholder = o.placeholder;
		if (o.value !== undefined) input.value = o.value.toString();
		if (o.min !== undefined) input.min = o.min;
		if (o.max !== undefined) input.max = o.max;
		if (o.step !== undefined) input.step = o.step;

		if (o.onChange) {
			input.addEventListener("change", o.onChange);
		}
		if (o.onInput) {
			input.addEventListener("input", o.onInput);
		}
		return input;
	}

	/**
	 * Create a `<strong>`
	 * @param {Object} o
	 * @param {string} o.text
	 * @returns {HTMLElement}
	 */
	static strong(o) {
		const strong = document.createElement("strong");
		strong.textContent = o.text;
		return strong;
	}

	/**
	 * Create a `<a>`
	 * @param {Object} o
	 * @param {string} o.url
	 * @param {string} [o.text]
	 * @param {Partial<CSSStyleDeclaration>} [o.styles]
	 * @param {string} [o.id]
	 * @param {string[]} [o.classes]
	 * @param {HTMLElement[]} [o.children]
	 * @param {Record<string, string>} [o.attributes]
	 * @returns {HTMLAnchorElement}
	 */
	static a(o) {
		const link = document.createElement("a");
		if (o.text) link.text = o.text;
		link.href = o.url;
		if (o.styles) Object.assign(link.style, o.styles);
		if (o.id) link.id = o.id;
		if (o.classes) for (const cls of o.classes) link.classList.add(cls);
		if (o.attributes) for (const [k, v] of Object.entries(o.attributes)) link.setAttribute(k, v);
		if (o.children) link.append(...o.children);
		return link;
	}

	/**
	 * Create a `<label>`
	 * @param {Object} o
	 * @param {string} o.to
	 * @param {string} [o.text]
	 * @param {Partial<CSSStyleDeclaration>} [o.styles]
	 * @param {string} [o.id]
	 * @param {string[]} [o.classes]
	 * @param {HTMLElement[]} [o.children]
	 * @param {Record<string, string>} [o.attributes]
	 * @returns {HTMLLabelElement}
	 */
	static label(o) {
		const label = document.createElement("label");
		if (o.styles) Object.assign(label.style, o.styles);
		if (o.id) label.id = o.id;
		if (o.classes) for (const cls of o.classes) label.classList.add(cls);
		if (o.attributes) for (const [k, v] of Object.entries(o.attributes)) label.setAttribute(k, v);
		if (o.children) label.append(...o.children);
		if (o.text) label.textContent = o.text;
		label.htmlFor = o.to;
		return label;
	}

	/**
	 * Create a heading `<h1>`–`<h6>`
	 * @param {Object} o
	 * @param {1|2|3|4|5|6} o.level
	 * @param {string} [o.text]
	 * @param {Partial<CSSStyleDeclaration>} [o.styles]
	 * @param {string} [o.id]
	 * @param {string[]} [o.classes]
	 * @param {HTMLElement[]} [o.children]
	 * @param {Record<string, string>} [o.attributes]
	 * @returns {HTMLHeadingElement}
	 */
	static heading(o) {
		const heading = document.createElement(`h${o.level}`);
		if (o.styles) Object.assign(heading.style, o.styles);
		if (o.id) heading.id = o.id;
		if (o.classes) for (const cls of o.classes) heading.classList.add(cls);
		if (o.text) heading.textContent = o.text;
		if (o.attributes) for (const [k, v] of Object.entries(o.attributes)) heading.setAttribute(k, v);
		if (o.children) heading.append(...o.children);
		return heading;
	}

	/**
	 * Create an `<img>`
	 * @param {Object} o
	 * @param {string} o.src
	 * @param {Partial<CSSStyleDeclaration>} [o.styles]
	 * @param {string} [o.id]
	 * @param {string[]} [o.classes]
	 * @param {Record<string, string>} [o.attributes]
	 * @returns {HTMLImageElement}
	 */
	static img(o) {
		const img = document.createElement("img");
		if (o.styles) Object.assign(img.style, o.styles);
		if (o.id) img.id = o.id;
		if (o.classes) for (const cls of o.classes) img.classList.add(cls);
		if (o.attributes) for (const [k, v] of Object.entries(o.attributes)) img.setAttribute(k, v);
		img.src = o.src;
		return img;
	}

	/**
	 * Create a `<select>`
	 * @param {Object} o
	 * @param {string} [o.selected]
	 * @param {(e: Event) => void} [o.onChange]
	 * @param {Partial<CSSStyleDeclaration>} [o.styles]
	 * @param {string} [o.id]
	 * @param {string[]} [o.classes]
	 * @param {HTMLElement[]} [o.children]
	 * @param {Record<string, string>} [o.attributes]
	 * @returns {HTMLSelectElement}
	 */
	static select(o = {}) {
		const select = document.createElement("select");
		if (o.styles) Object.assign(select.style, o.styles);
		if (o.selected !== undefined) select.value = o.selected;
		if (o.id) select.id = o.id;
		if (o.classes) for (const cls of o.classes) select.classList.add(cls);
		if (o.attributes) for (const [k, v] of Object.entries(o.attributes)) select.setAttribute(k, v);
		if (o.children) select.append(...o.children);
		if (o.onChange) select.addEventListener("change", o.onChange);
		return select;
	}

	/**
	 * Create an `<option>`
	 * @param {Object} o
	 * @param {string} o.value
	 * @param {string} o.text
	 * @param {boolean} [o.selected]
	 * @returns {HTMLOptionElement}
	 */
	static option(o) {
		const opt = document.createElement("option");
		opt.value = o.value;
		opt.textContent = o.text;
		opt.selected = o.selected || false;
		return opt;
	}

	/**
	 * Create a `<p>`
	 * @param {Object} o
	 * @param {string} [o.text]
	 * @param {Partial<CSSStyleDeclaration>} [o.styles]
	 * @param {string} [o.id]
	 * @param {string[]} [o.classes]
	 * @param {HTMLElement[]} [o.children]
	 * @param {Record<string, string>} [o.attributes]
	 * @returns {HTMLParagraphElement}
	 */
	static p(o = {}) {
		const p = document.createElement("p");
		if (o.styles) Object.assign(p.style, o.styles);
		if (o.id) p.id = o.id;
		if (o.classes) for (const cls of o.classes) p.classList.add(cls);
		if (o.text) p.textContent = o.text;
		if (o.attributes) for (const [k, v] of Object.entries(o.attributes)) p.setAttribute(k, v);
		if (o.children) p.append(...o.children);
		return p;
	}

	/**
	 * Create a dual range input (min and max)
	 * @param {Object} o
	 * @param {number} o.min - Minimum possible value
	 * @param {number} o.max - Maximum possible value
	 * @param {number} o.currentMin - Current minimum value
	 * @param {number} o.currentMax - Current maximum value
	 * @param {number} o.step - Step size
	 * @param {(min: number, max: number) => void} o.onChange - Callback when range changes
	 * @param {Partial<CSSStyleDeclaration>} [o.styles]
	 * @param {string} [o.id]
	 * @param {string[]} [o.classes]
	 * @param {HTMLElement[]} [o.children]
	 * @param {Record<string, string>} [o.attributes]
	 * @returns {HTMLDivElement}
	 */
	static range(o) {
		const container = document.createElement("div");
		if (o.styles) Object.assign(container.style, o.styles);
		if (o.id) container.id = o.id;
		if (o.classes) for (const cls of o.classes) container.classList.add(cls);
		if (o.attributes)
			for (const [k, v] of Object.entries(o.attributes)) container.setAttribute(k, v);

		// Ensure current values are within bounds
		const safeCurrentMin = Math.max(o.min, Math.min(o.currentMin, o.max));
		const safeCurrentMax = Math.max(o.min, Math.min(o.currentMax, o.max));

		// Create track container
		const trackContainer = Dom.div({
			styles: {
				alignItems: "center",
				display: "flex",
				height: "20px",
				margin: "10px 0",
				position: "relative",
			},
		});

		// Create track
		const track = Dom.div({
			styles: {
				background: "#e0e0e0",
				borderRadius: "4px",
				height: "6px",
				position: "relative",
				width: "100%",
			},
		});

		// Create active range
		const activeRange = Dom.div({
			styles: {
				background: "#4caf50",
				borderRadius: "4px",
				height: "100%",
				left: "0%",
				position: "absolute",
				width: "100%",
			},
		});

		// Create min slider using Dom.input
		const minSlider = Dom.input({
			max: o.max.toString(),
			min: o.min.toString(),
			onInput: () => {
				const minVal = parseInt(minSlider.value, 10);
				const maxVal = parseInt(maxSlider.value, 10);

				if (minVal > maxVal) {
					minSlider.value = maxVal.toString();
				}

				updateActiveRange();
				o.onChange(parseInt(minSlider.value, 10), parseInt(maxSlider.value, 10));
			},
			step: o.step.toString(),
			styles: {
				appearance: "none",
				background: "transparent",
				height: "100%",
				pointerEvents: "none",
				position: "absolute",
				width: "100%",
				zIndex: "2",
			},
			type: "range",
			value: safeCurrentMin,
		});
		minSlider.style.pointerEvents = "auto";

		// Create max slider using Dom.input
		const maxSlider = Dom.input({
			max: o.max.toString(),
			min: o.min.toString(),
			onInput: () => {
				const minVal = parseInt(minSlider.value, 10);
				const maxVal = parseInt(maxSlider.value, 10);

				if (maxVal < minVal) {
					maxSlider.value = minVal.toString();
				}

				updateActiveRange();
				o.onChange(parseInt(minSlider.value, 10), parseInt(maxSlider.value, 10));
			},
			step: o.step.toString(),
			styles: {
				appearance: "none",
				background: "transparent",
				height: "100%",
				pointerEvents: "none",
				position: "absolute",
				width: "100%",
				zIndex: "2",
			},
			type: "range",
			value: safeCurrentMax,
		});
		maxSlider.style.pointerEvents = "auto";

		// Value displays
		const minValueDisplay = Dom.span({
			styles: {
				color: "#0066cc",
				fontSize: "0.85rem",
				fontWeight: "bold",
			},
			text: safeCurrentMin.toString(),
		});

		const maxValueDisplay = Dom.span({
			styles: {
				color: "#0066cc",
				fontSize: "0.85rem",
				fontWeight: "bold",
			},
			text: safeCurrentMax.toString(),
		});

		const valueDisplay = Dom.div({
			children: [minValueDisplay, maxValueDisplay],
			styles: {
				display: "flex",
				justifyContent: "space-between",
				marginBottom: "5px",
			},
		});

		// Update active range position
		const updateActiveRange = () => {
			const minVal = parseInt(minSlider.value, 10);
			const maxVal = parseInt(maxSlider.value, 10);

			const minPercent = ((minVal - o.min) / (o.max - o.min)) * 100;
			const maxPercent = ((maxVal - o.min) / (o.max - o.min)) * 100;

			activeRange.style.left = `${minPercent}%`;
			activeRange.style.width = `${maxPercent - minPercent}%`;

			minValueDisplay.textContent = minVal.toString();
			maxValueDisplay.textContent = maxVal.toString();
		};

		// Initial update
		updateActiveRange();

		// Assemble track
		track.append(activeRange, minSlider, maxSlider);
		trackContainer.appendChild(track);

		// Assemble container
		container.append(valueDisplay, trackContainer);

		if (o.children) container.append(...o.children);

		return container;
	}
}