import { House } from "models";

export class DomOptions {
	attributes;
	children;
	classes;
	id;
	styles;

	/**
	 * @param {Object} [options]
	 * @param {Partial<CSSStyleDeclaration>} [options.styles]
	 * @param {string|null} [options.id]
	 * @param {string[]} [options.classes]
	 * @param {HTMLElement[]} [options.children]
	 * @param {Record<string, string>} [options.attributes]
	 */
	constructor({ id = "", styles = {}, classes = [], children = [], attributes = {} } = {}) {
		this.attributes = attributes;
		this.children = children;
		this.classes = classes;
		this.id = id;
		this.styles = styles;
	}
}

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

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

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

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

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

		input.type = type;
		input.placeholder = placeholder;
		input.value = value;
		if (onChange) {
			input.addEventListener("change", onChange);
		}
		return input;
	}

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

	/**
	 * Create a heading `<h1>`–`<h6>`
	 * @param {1|2|3|4|5|6} level
	 * @param {string} text
	 * @param {DomOptions} o
	 * @returns {HTMLHeadingElement}
	 */
	static heading(level, text, o = new DomOptions()) {
		const heading = document.createElement(`h${level}`);
		Object.assign(heading.style, o.styles);
		if (o.id) heading.id = o.id;
		for (const cls of o.classes) heading.classList.add(cls);
		if (text) heading.textContent = text;
		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 {string} src
	 * @param {DomOptions} o
	 * @returns {HTMLImageElement}
	 */
	static img(src, o = new DomOptions()) {
		const img = document.createElement("img");
		Object.assign(img.style, o.styles);
		if (o.id) img.id = o.id;
		for (const cls of o.classes) img.classList.add(cls);
		for (const [k, v] of Object.entries(o.attributes)) img.setAttribute(k, v);
		img.src = src;
		return img;
	}

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

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

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

export class Widgets {
	/**
	 * Build a modal dialog
	 * @param {object} style
	 * @param {() => void} onClose
	 * @returns {HTMLDialogElement}
	 */
	static buildModal(style, onClose) {
		const modal = document.createElement("dialog");
		Object.assign(
			modal.style,
			{
				background: "white",
				border: "none",
				borderRadius: "8px",
				boxShadow: "0 4px 20px rgba(0,0,0,0.2)",
				maxHeight: "80vh",
				maxWidth: "600px",
				overflowY: "auto",
				padding: "20px",
				position: "fixed",
				top: "50%",
				transform: "translateY(-50%)",
				width: "90%",
				zIndex: "1000",
			},
			style,
		);

		const closeBtn = Dom.button(
			"x",
			onClose,
			new DomOptions({
				styles: {
					background: "none",
					border: "none",
					color: "#666",
					cursor: "pointer",
					fontSize: "24px",
					position: "absolute",
					right: "10px",
					top: "10px",
				},
			}),
		);

		modal.appendChild(closeBtn);
		modal.addEventListener("close", onClose);
		return modal;
	}

	/**
	 * Build modal content for a house
	 * @param {House} house
	 * @returns {DocumentFragment}
	 */
	static buildModalContent(house) {
		const frag = document.createDocumentFragment();

		/* Header */
		const header = Dom.div(
			new DomOptions({
				styles: {
					alignItems: "center",
					display: "flex",
					justifyContent: "space-between",
					marginBottom: "20px",
				},
			}),
		);

		const title = Dom.heading(
			2,
			house.address,
			new DomOptions({
				styles: { color: "#333", fontSize: "20px", margin: "0" },
			}),
		);
		const score = Dom.span(
			`Score: ${house.scores.current.toFixed(1)}`,
			new DomOptions({
				styles: {
					background: "#e8f5e9",
					borderRadius: "4px",
					color: "#2e7d32",
					fontSize: "16px",
					fontWeight: "bold",
					padding: "4px 8px",
				},
			}),
		);
		header.append(title, score);
		frag.appendChild(header);

		const grid = Dom.div(
			new DomOptions({
				styles: {
					display: "grid",
					gap: "15px",
					gridTemplateColumns: "repeat(2,1fr)",
					marginBottom: "20px",
				},
			}),
		);
		const details = [
			{ label: "Price", value: `${house.price} €` },
			{ label: "Building Type", value: house.buildingType },
			{ label: "Construction Year", value: house.constructionYear?.toString() ?? "N/A" },
			{ label: "Living Area", value: `${house.livingArea} m²` },
			{ label: "District", value: house.district },
			{ label: "Rooms", value: house.rooms?.toString() ?? "N/A" },
			{ label: "Price", value: `${house.price} €` },
			{ label: "Building Type", value: house.buildingType },
			{ label: "Construction Year", value: house.constructionYear?.toString() ?? "N/A" },
			{ label: "Living Area", value: `${house.livingArea} m²` },
			{ label: "District", value: house.district },
			{ label: "Rooms", value: house.rooms?.toString() ?? "N/A" },
		];
		for (const { label, value } of details) {
			const item = Dom.div(
				new DomOptions({
					children: [
						Dom.span(
							label,
							new DomOptions({
								styles: { fontSize: "14px", fontWeight: "bold", marginBottom: "4px" },
							}),
						),
						Dom.span(value, new DomOptions({ styles: { color: "#333", fontSize: "14px" } })),
					],
				}),
			);
			grid.appendChild(item);
		}
		frag.appendChild(grid);

		/* Description */
		const descSect = Dom.div(new DomOptions({ styles: { marginBottom: "20px" } }));
		const descTitle = Dom.span(
			"Description",
			new DomOptions({
				styles: { fontSize: "14px", fontWeight: "bold", marginBottom: "5px" },
			}),
		);
		const descText = Dom.p(
			house.description ?? "No description available.",
			new DomOptions({
				styles: { color: "#333", fontSize: "14px", lineHeight: "1.4", marginTop: "5px" },
			}),
		);
		descSect.append(descTitle, descText);
		frag.appendChild(descSect);

		/* Images */
		if (house.images?.length) {
			const imgSect = Dom.div(new DomOptions({ styles: { marginBottom: "20px" } }));
			const imgTitle = Dom.div(
				new DomOptions({
					styles: { fontSize: "14px", fontWeight: "bold", marginBottom: "10px" },
				}),
			);
			const imgCont = Dom.div(
				new DomOptions({
					styles: { display: "flex", gap: "10px", overflowX: "auto", paddingBottom: "5px" },
				}),
			);
			for (const src of house.images.slice(0, 3)) {
				imgCont.appendChild(
					Dom.img(
						src,
						new DomOptions({
							attributes: { loading: "lazy" },
							styles: { borderRadius: "4px", flexShrink: "0", height: "100px" },
						}),
					),
				);
			}
			imgSect.append(imgTitle, imgCont);
			frag.appendChild(imgSect);
		}

		return frag;
	}

	/**
	 * Show toast notification
	 * @param {string} message
	 * @param {ToastType} [type=ToastType.error]
	 * @param {number} [duration=5000]
	 */
	static showToast(message, type = ToastType.error, duration = 5000) {
		document.getElementById("app-toast")?.remove();

		const bg =
			type === ToastType.error ? "#f44336" : type === ToastType.warning ? "#ff9800" : "#4caf50";

		const toast = Dom.div(
			new DomOptions({
				children: [Dom.p(message)],
				classes: ["toast", `toast-${type}`],
				id: "app-toast",
				styles: {
					background: bg,
					borderRadius: "4px",
					boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
					color: "white",
					fontSize: "14px",
					fontWeight: "500",
					maxWidth: "300px",
					padding: "12px 20px",
					position: "fixed",
					right: "20px",
					top: "20px",
					transition: "all .3s ease",
					zIndex: "10000",
				},
			}),
		);

		document.body.appendChild(toast);

		setTimeout(() => {
			if (toast.parentNode) {
				toast.style.opacity = "0";
				setTimeout(() => toast.remove(), 300);
			}
		}, duration);
	}

	/**
	 * Remove all children
	 * @param {HTMLElement} el
	 */
	static clear(el) {
		while (el.firstChild) el.removeChild(el.firstChild);
	}

	/**
	 * Create a weight slider
	 * @param {string} id
	 * @param {string} labelText
	 * @param {string} weightKey
	 * @param {number} initialValue
	 * @param {(key: string, value: number) => void} onChange
	 * @returns {HTMLElement}
	 */
	static slider(id, labelText, weightKey, initialValue, onChange) {
		const group = Dom.div(
			new DomOptions({
				styles: { display: "flex", flexDirection: "column", marginBottom: "1rem" },
			}),
		);

		const label = Dom.label(id, labelText);
		const output = Dom.span(
			initialValue.toFixed(1),
			new DomOptions({
				id: `${id}-value`,
				styles: { color: "#0066cc", fontSize: "0.85rem", fontWeight: "bold", textAlign: "center" },
			}),
		);

		const labelTextSpan = Dom.span(
			labelText,
			new DomOptions({
				styles: { fontSize: "0.85rem" },
			}),
		);

		label.append(labelTextSpan, " ", output);

		const slider = Dom.input(
			"range",
			(e) => {
				const target = /** @type {HTMLInputElement} */ (e.target);
				const val = Number(target.value);
				output.textContent = val.toFixed(1);
				onChange(weightKey, val);
			},
			"",
			"",
			new DomOptions({
				attributes: { max: "1", min: "0", step: "0.1", value: initialValue.toString() },
				id,
				styles: {
					margin: "0.5rem 0",
					width: "100%",
				},
			}),
		);

		group.append(label, slider);
		return group;
	}

	/**
	 * Create a number filter input
	 * @param {string} id
	 * @param {string} labelText
	 * @param {(value: number | null) => void} onChange
	 * @returns {HTMLElement}
	 */
	static addNumberFilter(id, labelText, onChange) {
		return Dom.div(
			new DomOptions({
				children: [
					Dom.label(
						id,
						labelText,
						new DomOptions({
							styles: { fontSize: "0.85rem", fontWeight: "bold", marginBottom: "0.25rem" },
						}),
					),
					Dom.input(
						"number",
						(e) => {
							const target = /** @type {HTMLInputElement} */ (e.target);
							const raw = target.value.trim();
							onChange(raw === "" ? null : Number(raw));
						},
						"any",
						"",
						new DomOptions({
							id,
							styles: {
								border: "1px solid #ddd",
								borderRadius: "4px",
								fontSize: "0.9rem",
								padding: "0.5rem",
							},
						}),
					),
				],
				styles: { display: "flex", flexDirection: "column", marginBottom: "1.75rem" },
			}),
		);
	}
}