/**
    * @file SvgEditorM.js
    * @brief Основной файл SvgEditorM, реализует функционал редактирования SVG-графики на сайте
*/

/**
    * @brief Базовый SVG-элемент
    * @param width Ширина
    * @param height Высота
    * @param posX Позиция X
    * @param posY Позиция Y
    * @param id ID элемента
    * @param type Тип SVG-элемента
*/
class SVGElement {
    constructor({ width, height, posX, posY, id, type } = {}) {
        this.width = width || 100;
        this.height = height || 100;
        this.posX = posX || 100;
        this.posY = posY || 100;
        this.id = id || `svgElement_${Date.now()}`;
        this.type = type || 'svg';
        this.domNode = this.createSVGDOMNode(this.type);
    }

    createSVGDOMNode(type) {
        let { height, width, posY, posX, id } = this;
        let svg = document.createElementNS('http://www.w3.org/2000/svg', type);
        svg.setAttribute('style', 'border: 1px solid black; box-sizing: border-box;');
        svg.setAttribute('id', id);
        if (type !== 'svg') {
            svg.setAttribute('x', posX);
            svg.setAttribute('y', posY);
            svg.setAttribute('width', width);
            svg.setAttribute('height', height);
        } else {
            svg.setAttribute('width', width);
            svg.setAttribute('height', height);
        }
        svg.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns:xlink', 'http://www.w3.org/1999/xlink');
        return svg;
    }
}

/**
    * @brief Класс для модификации SVG-элементов
*/
class SVGElementModifier {
    static moveSelectedElement({ handler, event }) {
        const { selected, selector, editor, offset } = handler;
        const { clientX, clientY } = event;
        if (selected) {
            if (selected.tagName.toLowerCase() === 'circle') {
                selected.setAttribute('cx', clientX + offset.x);
                selected.setAttribute('cy', clientY + offset.y);
            } else {
                selected.setAttribute('x', clientX + offset.x);
                selected.setAttribute('y', clientY + offset.y);
                selector.updateSelection(selected, editor);
            }
            selector.updateSelection(selected);
        }
    }

    static deselectElement({ handler }) {
        handler.selected = null;
    }

    static toggelHoveredElement({ handler, target }) {
        return handler.selector.updateSelection(target, handler.editor);
    }

    static selectElement({ handler, event }) {
        let { target, clientX, clientY } = event;
        const { selector, editor } = handler;
        if (selector.isSelectable(target, editor)) {
            handler.offset.x = parseFloat(target.getAttribute('x')) - clientX || 0;
            handler.offset.y = parseFloat(target.getAttribute('y')) - clientY || 0;
            handler.selected = target;
        }
    }
}

/**
    * @brief Прямоугольник
    * @param posX Позиция X
    * @param posY Позиция Y
    * @param width Ширина
    * @param height Высота
    * @param id ID элемента
*/
class Rect extends SVGElement {
    constructor({ posX, posY, width, height, id } = {}) {
        super({ type: 'rect', posX, posY, width, height, id });
        this.domNode.setAttribute('width', width || 100);
        this.domNode.setAttribute('height', height || 100);
        this.domNode.setAttribute('x', posX || 100);
        this.domNode.setAttribute('y', posY || 100);
        this.domNode.setAttribute('fill', 'rgba(0,120,200,0.2)');
        this.domNode.setAttribute('stroke', '#0078c8');
    }
}

/**
    * @brief Класс выбора фигур
    * @param id ID селектора
*/
class ShapeSelector {
    constructor(id) {
        this.id = id;
        this.selectorElem = document.getElementById(this.id);
    }

    isSelectable(element, area) {
        if (!element) return false;
        if (element.isSameNode(area)) return false;
        const tag = element.tagName ? element.tagName.toLowerCase() : '';
        return (tag === 'rect' || tag === 'circle' || tag === 'g' || tag === 'path' || tag === 'ellipse');
    }

    toggleSelectionOverElement(element) {
        let bound = element.getBoundingClientRect();
        const { style } = this.selectorElem;
        style.left = bound.left + 'px';
        style.top = bound.top + 'px';
        style.width = bound.width + 'px';
        style.height = bound.height + 'px';
        style.display = 'block';
    }

    updateSelection(element, area) {
        if (this.isSelectable(element, area)) {
            return this.toggleSelectionOverElement(element);
        }
        return this.hideSelection();
    }

    hideSelection() {
        if (this.selectorElem) this.selectorElem.style.display = 'none';
    }
}

/**
    * @brief Обработчик событий редактора
*/
class EditorEventHandler {
    constructor() {
        this.editor = null;
        this.selector = null;
        this.selected = null;
        this.offset = { x: 0, y: 0 };
    }

    startListening({ editor, selector }) {
        this.editor = editor;
        this.selector = selector;
        this.handleEditorEvents();
    }

    handleEditorEvents() {
        this.handleElementsHover();
        this.handleElementSelect();
        this.handleMoveElement();
        this.handleElementDeselect();
    }

    handleElementsHover() {
        this.editor.addEventListener('mouseover', ({ target }) => {
            SVGElementModifier.toggelHoveredElement({ handler: this, target });
        });
    }

    handleElementSelect() {
        this.editor.addEventListener('mousedown', event => {
            SVGElementModifier.selectElement({ handler: this, event });
        });
    }

    handleElementDeselect() {
        this.editor.addEventListener('mouseup', event => {
            SVGElementModifier.deselectElement({ handler: this });
        });
    }

    handleMoveElement() {
        this.editor.addEventListener('mousemove', event => {
            SVGElementModifier.moveSelectedElement({ handler: this, event });
        });
    }
}

/**
    * @brief Область для рисования
    * @param options Параметры области
*/
class Area extends SVGElement {
    constructor(options = {}) {
        super({ type: 'svg', width: options.width || 800, height: options.height || 400, id: options.id || 'mySVG' });
        this.domNode.style.border = '3px solid black';
    }

    appendElement(element) {
        this.domNode.appendChild(element);
    }

    setDimentions() { }
}

/**
    * @brief Редактор SVG
    * @param targetNode Узел-цель
    * @param playGround Игровая область
    * @param eventHandler Обработчик событий
    * @param selector Селектор фигур
*/
class Editor {
    constructor({ targetNode, playGround, eventHandler, selector }) {
        this.targetNode = targetNode;
        this.playGround = playGround;
        this.domNode = this.createEditor();
        this.selector = selector;
        this.svgElements = [];
        this.EditorEventHandler = eventHandler;
        this.EditorEventHandler.startListening({
            editor: this.domNode,
            selector: this.selector
        });
    }

    setDimentions(node, width, height) {
        node.style.width = '-webkit-fill-available';
        node.style.height = '-webkit-fill-available';
        return node;
    }

    createEditor() {
        let editor = this.playGround.domNode;
        const { width, height } = this.getEditorParams();
        this.setDimentions(editor, width, height);
        return editor;
    }

    getEditorParams() {
        let width = Math.max(this.targetNode.offsetWidth - 10, 0);
        let height = Math.max(this.targetNode.offsetHeight - 10, 0);
        return { width, height };
    }

    addElement(element) {  
        if (!element || !element.domNode) return;
        this.playGround.appendElement(element.domNode);
        this.svgElements.push(element);
    }
}

/* -----------------------------
   Инициализация (выполняется после загрузки DOM)
   ----------------------------- */

window.addEventListener('DOMContentLoaded', () => {
    let main = document.getElementById('main') || document.body;

    let selection = document.getElementById('selector');
    if (!selection) {
        selection = document.createElement('div');
        selection.id = 'selector';
        Object.assign(selection.style, {
            position: 'absolute',
            display: 'none',
            border: '1px dashed #333',
            pointerEvents: 'none',
            zIndex: 9999
        });
        document.body.appendChild(selection);
    }

    const area = new Area({ id: 'mySVG', width: 800, height: 400 });
    main.appendChild(area.domNode);

    const selector = new ShapeSelector('selector');

    const editorEventHandler = new EditorEventHandler();
    const editor = new Editor({
        targetNode: main,
        playGround: area,
        selector,
        eventHandler: editorEventHandler
    });

    const testRect = new Rect({ posX: 20, posY: 20, width: 120, height: 80, id: 'r1' });
    const testRect2 = new Rect({ posX: 200, posY: 150, width: 140, height: 90, id: 'r2' });
    editor.addElement(testRect);
    editor.addElement(testRect2);

    area.domNode.addEventListener('mouseover', (e) => {
        const tgt = e.target;
        selector.updateSelection(tgt, area.domNode);
    });

    window.addEventListener('resize', () => {
        const { width, height } = editor.getEditorParams();
        editor.setDimentions(area.domNode, width, height);
    });

    console.log('SVG Editor initialized', { area, editor, selector });
});

/* -----------------------------
   edit
   ----------------------------- */

/** @brief Селектор основного контейнера */
const MAIN_SEL = "#main";
/** @brief ID элемента outline */
const OUTLINE_ID = "outline";
/** @brief Селектор боковой панели с фигурами */
const SIDEBAR_SHAPES = ".sidebar__shapes";
/** @brief Селектор боковой панели с режимами */
const SIDEBAR_SELECTORS = ".sidebar__selectors";
/** @brief Ключ для сохранения количества изменений */
const saveCountKey = 'SvgEditorM_saveCount';

/** @brief Основной контейнер DOM */
const main = document.querySelector(MAIN_SEL);
if (!main) throw new Error("Не найден #main");

/** @brief Массив svg элементов внутри main */
let svgsInMain = Array.from(main.querySelectorAll("svg"));
/** @brief Рабочий svg элемент */
let svg;
if (svgsInMain.length === 0) {
	svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
	svg.setAttribute("style", "border: 1px solid #ccc; box-sizing: border-box; width: -webkit-fill-available; height: -webkit-fill-available;");
	svg.setAttribute("width", "1000");
	svg.setAttribute("height", "600");
	main.appendChild(svg);
} else {
	// keep first svg, remove extras to avoid duplicates
	svg = svgsInMain[0];
	for (let i = 1; i < svgsInMain.length; i++) svgsInMain[i].remove();
}

/** @brief Создает и добавляет маркер стрелки к SVG */
(function ensureArrowMarker() {
	let defs = svg.querySelector("defs");
	if (!defs) {
		defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
		svg.appendChild(defs);
	}
	if (!svg.querySelector("#arrowhead")) {
    const marker = document.createElementNS("http://www.w3.org/2000/svg", "marker");
    marker.setAttribute("id", "arrowhead");
    marker.setAttribute("markerWidth", "6"); 
    marker.setAttribute("markerHeight", "4"); 
    marker.setAttribute("refX", "4.8"); 
    marker.setAttribute("refY", "2");
    marker.setAttribute("orient", "auto");
    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
    path.setAttribute("d", "M0,0 L6,2 L0,4 z");
    path.setAttribute("fill", "#495057");
    marker.appendChild(path);
    defs.appendChild(marker);
	}
})();

/** @brief Получает элемент outline из DOM */
const outline = document.getElementById(OUTLINE_ID);
/** @brief Счетчик для генерации уникальных ID */
let uid = 1;

/**
    * @brief Генерирует уникальный идентификатор для элемента
    * @param prefix префикс для ID
*/
function makeId(prefix = "el") { return `${prefix}_${Date.now().toString(36)}_${uid++}`; }

/**
    * @brief Преобразует координаты из клиентских в координаты SVG
    * @param clientX координата X в пикселях
    * @param clientY координата Y в пикселях
*/
function clientToSvgPoint(clientX, clientY) {
	const pt = svg.createSVGPoint();
	pt.x = clientX; pt.y = clientY;
	const ctm = svg.getScreenCTM();
	if (!ctm) return { x: clientX, y: clientY };
	const inv = ctm.inverse();
	const p = pt.matrixTransform(inv);
	return { x: p.x, y: p.y };
}

/**
    * @brief Возвращает размеры и позицию элемента в координатах экрана
    * @param el элемент SVG
*/
function screenBBoxOf(el) {
	try {
		const bbox = el.getBBox();
		const p1 = svg.createSVGPoint(); p1.x = bbox.x; p1.y = bbox.y;
		const p2 = svg.createSVGPoint(); p2.x = bbox.x + bbox.width; p2.y = bbox.y + bbox.height;
		const s1 = p1.matrixTransform(svg.getScreenCTM());
		const s2 = p2.matrixTransform(svg.getScreenCTM());
		return {
			left: Math.min(s1.x, s2.x),
			top: Math.min(s1.y, s2.y),
			width: Math.abs(s2.x - s1.x),
			height: Math.abs(s2.y - s1.y)
		};
	} catch (e) {
		const r = el.getBoundingClientRect();
		return { left: r.left, top: r.top, width: r.width, height: r.height };
	}
}

/**
    * @brief Показывает или скрывает outline вокруг элемента
    * @param el элемент SVG или null
*/
function showOutlineFor(el) {
	if (!outline) return;
	if (!el) { outline.style.display = "none"; return; }
	const b = screenBBoxOf(el);
	outline.style.display = "block";
	outline.style.position = "fixed";
	outline.style.left = `${b.left-2}px`;
	outline.style.top = `${b.top-2}px`;
	outline.style.width = `${b.width}px`;
	outline.style.height = `${b.height}px`;
	outline.style.border = "2px solid rgba(0,120,255,0.6)";
	outline.style.pointerEvents = "none";
}

/** @brief Режим работы редактора */
let mode = "Move";
/** @brief Текущий выбранный элемент */
let currentSelected = null;
/** @brief Состояние перетаскивания элемента */
let dragState = null;

document.querySelectorAll(`${SIDEBAR_SHAPES} .sidebar__shape`).forEach(node => {
	node.addEventListener("click", () => {
		const shapeName = node.textContent.trim().toLowerCase();
		createShape(shapeName);
	});
});

document.querySelectorAll(`${SIDEBAR_SELECTORS} .sidebar__selector`).forEach(node => {
	node.addEventListener("click", () => {
		document.querySelectorAll(`${SIDEBAR_SELECTORS} .sidebar__selector`).forEach(n => n.classList.remove("active"));
		node.classList.add("active");
		mode = node.textContent.trim();
	});
});

const defaultSel = document.querySelector(`${SIDEBAR_SELECTORS} .sidebar__selector`);
if (defaultSel) {
	defaultSel.classList.add("active");
	mode = defaultSel.textContent.trim();
}

/**
    * @brief Создает фигуру указанного типа в центре SVG
    * @param kind тип фигуры: rect, circle, line, arrow
*/
function createShape(kind) {
	const center = { x: parseFloat(svg.getAttribute("width"))/2 || 200, y: parseFloat(svg.getAttribute("height"))/2 || 150 };
	const id = makeId(kind);
	let el = null;
	if (kind === "rect") {
		el = document.createElementNS("http://www.w3.org/2000/svg", "rect");
		el.setAttribute("x", center.x - 50);
		el.setAttribute("y", center.y - 25);
		el.setAttribute("width", 100);
		el.setAttribute("height", 50);
		el.setAttribute("fill", "#1aaee5");
	} else if (kind === "circle") {
		el = document.createElementNS("http://www.w3.org/2000/svg", "circle");
		el.setAttribute("cx", center.x);
		el.setAttribute("cy", center.y);
		el.setAttribute("r", 30);
		el.setAttribute("fill", "#ff6600");
	} else if (kind === "line") {
		el = document.createElementNS("http://www.w3.org/2000/svg", "line");
		el.setAttribute("x1", center.x - 60);
		el.setAttribute("y1", center.y);
		el.setAttribute("x2", center.x + 60);
		el.setAttribute("y2", center.y);
		el.setAttribute("stroke", "#495057");
		el.setAttribute("stroke-width", 4);
	} else if (kind === "arrow") {
		el = document.createElementNS("http://www.w3.org/2000/svg", "line");
		el.setAttribute("x1", center.x - 60);
		el.setAttribute("y1", center.y - 10);
		el.setAttribute("x2", center.x + 60);
		el.setAttribute("y2", center.y + 10);
		el.setAttribute("stroke", "#495057");
		el.setAttribute("stroke-width", 4);
		el.setAttribute("marker-end", "url(#arrowhead)");
	} else {
		alert("Unknown shape: " + kind);
		return;
	}
	el.setAttribute("id", id);
	el.classList.add("draggable");
	svg.appendChild(el);
	attachShapeListeners(el);
	selectElement(el);
}

/**
    * @brief Подключает обработчики событий для фигуры
    * @param el элемент SVG
*/
function attachShapeListeners(el) {
	el.addEventListener("mousedown", (ev) => {
		ev.stopPropagation();
		const startClient = { x: ev.clientX, y: ev.clientY };
		const startSvg = clientToSvgPoint(ev.clientX, ev.clientY);
		const startAttrs = readElementAttrs(el);
		const action = mode === "Resize" ? "resize" : "move";
		dragState = { type: action, el, startClient, startSvg, startAttrs };
		selectElement(el);
		window.addEventListener("mousemove", onWindowMouseMove);
		window.addEventListener("mouseup", onWindowMouseUp);
	});
	el.addEventListener("click", (e) => { e.stopPropagation(); selectElement(el); });
}

/**
    * @brief Считывает атрибуты элемента SVG
    * @param el элемент SVG
*/
function readElementAttrs(el) {
	const tag = el.tagName.toLowerCase();
	if (tag === "rect") {
		return {
			x: parseFloat(el.getAttribute("x")||0),
			y: parseFloat(el.getAttribute("y")||0),
			width: parseFloat(el.getAttribute("width")||0),
			height: parseFloat(el.getAttribute("height")||0)
		};
	} else if (tag === "circle") {
		return {
			cx: parseFloat(el.getAttribute("cx")||0),
			cy: parseFloat(el.getAttribute("cy")||0),
			r: parseFloat(el.getAttribute("r")||0)
		};
	} else if (tag === "line") {
		return {
			x1: parseFloat(el.getAttribute("x1")||0),
			y1: parseFloat(el.getAttribute("y1")||0),
			x2: parseFloat(el.getAttribute("x2")||0),
			y2: parseFloat(el.getAttribute("y2")||0)
		};
	}
	return {};
}

/**
    * @brief Обрабатывает движение мыши при перетаскивании/изменении размера
    * @param ev событие мыши
*/
function onWindowMouseMove(ev) {
	if (!dragState) return;
	const { type, el, startSvg, startAttrs } = dragState;
	const curSvg = clientToSvgPoint(ev.clientX, ev.clientY);
	const dx = curSvg.x - startSvg.x;
	const dy = curSvg.y - startSvg.y;
	const tag = el.tagName.toLowerCase();

	if (type === "move") {
		if (tag === "rect") {
			el.setAttribute("x", startAttrs.x + dx);
			el.setAttribute("y", startAttrs.y + dy);
		} else if (tag === "circle") {
			el.setAttribute("cx", startAttrs.cx + dx);
			el.setAttribute("cy", startAttrs.cy + dy);
		} else if (tag === "line") {
			el.setAttribute("x1", startAttrs.x1 + dx);
			el.setAttribute("y1", startAttrs.y1 + dy);
			el.setAttribute("x2", startAttrs.x2 + dx);
			el.setAttribute("y2", startAttrs.y2 + dy);
		}
	} else {
		if (tag === "rect") {
			const newW = Math.max(6, startAttrs.width + dx);
			const newH = Math.max(6, startAttrs.height + dy);
			el.setAttribute("width", newW);
			el.setAttribute("height", newH);
		} else if (tag === "circle") {
			const center = { x: startAttrs.cx, y: startAttrs.cy };
			const newR = Math.max(4, Math.hypot(curSvg.x - center.x, curSvg.y - center.y));
			el.setAttribute("r", newR);
		} else if (tag === "line") {
			el.setAttribute("x2", startAttrs.x2 + dx);
			el.setAttribute("y2", startAttrs.y2 + dy);
		}
	}

	showOutlineFor(el);
}

/**
    * @brief Обрабатывает отпускание кнопки мыши при перетаскивании/изменении размера
*/
function onWindowMouseUp() {
	if (dragState) {
		dragState = null;
		window.removeEventListener("mousemove", onWindowMouseMove);
		window.removeEventListener("mouseup", onWindowMouseUp);
	}
}

svg.addEventListener("mousedown", (ev) => {
	if (ev.target === svg) selectElement(null);
});

/**
    * @brief Выбирает элемент или снимает выбор
    * @param el элемент SVG или null
*/
function selectElement(el) {
	if (currentSelected === el) return;
	if (currentSelected) currentSelected.classList.remove("selected");
	currentSelected = el;
	if (el) {
		el.classList.add("selected");
		showOutlineFor(el);
	} else {
		showOutlineFor(null);
	}
}

Array.from(svg.querySelectorAll(".draggable, rect, circle, line")).forEach(attachShapeListeners);

window.addEventListener("resize", () => showOutlineFor(currentSelected));
window.addEventListener("scroll", () => showOutlineFor(currentSelected));
window.addEventListener("keydown", (ev) => {
	if ((ev.key === "Delete" || ev.key === "Backspace") && currentSelected) {
		currentSelected.remove();
		selectElement(null);
	}
});



/** @brief Кнопки панели сайдбара */
const buttons = Array.from(document.querySelectorAll('.sidebar__button'));
/** @brief Кнопка сохранения */
const saveBtn = buttons.find(b => b.textContent.trim().toLowerCase() === 'save');
/** @brief Кнопка загрузки */
const loadBtn = buttons.find(b => b.textContent.trim().toLowerCase() === 'load');

/** @brief Генерирует следующее имя файла для сохранения */
function nextFilename() {
	localStorage.setItem(saveCountKey, String((parseInt(localStorage.getItem(saveCountKey) || '0', 10) || 0) + 1));
	const n = parseInt(localStorage.getItem(saveCountKey), 10) || 1;
	return n === 1 ? 'SvgEditorM.svg' : `SvgEditorM-${n}.svg`;
}

/** @brief Возвращает SVG внутри main */
function getMainSvg() {
	return main.querySelector('svg');
}

/**
    * @brief Устанавливает атрибуты xmlns для элемента SVG, если их нет
    * @param el элемент SVG
*/
function ensureXmlns(el) {
	if (!el.getAttribute('xmlns')) el.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
	if (!el.getAttribute('xmlns:xlink')) el.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
	return el;
}

/** @brief Сохраняет SVG из main в файл */
function saveSvg() {
	const svg = getMainSvg();
	if (!svg) return;
	const clone = svg.cloneNode(true);
	ensureXmlns(clone);
	const xml = new XMLSerializer().serializeToString(clone);
	const blob = new Blob([xml], { type: 'image/svg+xml;charset=utf-8' });
	const url = URL.createObjectURL(blob);
	const a = document.createElement('a');
	a.href = url;
	a.download = nextFilename();
	document.body.appendChild(a);
	a.click();
	a.remove();
	setTimeout(() => URL.revokeObjectURL(url), 10000);
}

/** @brief Элемент input для загрузки файлов */
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.accept = '.svg,image/svg+xml';
fileInput.style.display = 'none';
document.body.appendChild(fileInput);

/**
    * @brief Делает узел и его потомков интерактивными
    * @param node элемент SVG
*/
function makeInteractiveForNode(node) {
	if (!(node instanceof Element)) return;
	const tag = node.tagName.toLowerCase();
	if (['rect','circle','line','path','polyline','polygon','g'].includes(tag)) {
		if (!node.classList.contains('draggable')) node.classList.add('draggable');
		if (typeof attachShapeListeners === 'function') {
			attachShapeListeners(node);
		}
	}
	Array.from(node.children || []).forEach(ch => makeInteractiveForNode(ch));
}

/**
    * @brief Загружает SVG из файла в main
    * @param file объект File
*/
async function loadSvgFile(file) {
	if (!file) return;
	const text = await file.text();
	const parser = new DOMParser();
	const doc = parser.parseFromString(text, 'image/svg+xml');
	const parsedSvg = doc.querySelector('svg');
	if (!parsedSvg) {
		alert('Выбранный файл не содержит SVG');
		return;
	}
	const targetSvg = getMainSvg();
	if (!targetSvg) {
		const imported = document.importNode(parsedSvg, true);
		ensureXmlns(imported);
		main.appendChild(imported);
		Array.from(imported.querySelectorAll('*')).forEach(n => makeInteractiveForNode(n));
	} else {
		const preservedOutline = document.getElementById('outline');
		while (targetSvg.firstChild) targetSvg.removeChild(targetSvg.firstChild);
		Array.from(parsedSvg.childNodes).forEach(n => {
			const imp = document.importNode(n, true);
			targetSvg.appendChild(imp);
		});
		Array.from(parsedSvg.attributes).forEach(attr => {
			if (attr.name === 'xmlns' || attr.name === 'xmlns:xlink') return;
			targetSvg.setAttribute(attr.name, attr.value);
		});
		ensureXmlns(targetSvg);
		Array.from(targetSvg.querySelectorAll('*')).forEach(n => makeInteractiveForNode(n));
		if (preservedOutline && preservedOutline.parentElement !== document.body) {
		}
	}
	main.dispatchEvent(new CustomEvent('svg-loaded', { detail: { fileName: file.name } }));
}

fileInput.addEventListener('change', () => {
	const f = fileInput.files && fileInput.files[0];
	loadSvgFile(f).finally(() => { fileInput.value = ''; });
});

if (saveBtn) saveBtn.addEventListener('click', (e) => { e.stopPropagation(); saveSvg(); });
if (loadBtn) loadBtn.addEventListener('click', (e) => { e.stopPropagation(); fileInput.click(); });