/* показ окна древа */
let idCounter = 0;
siteTreeGeneration();

/* генерация html древа */
function siteTreeGeneration() {
    handleJsonRpcRequest('scanDirTree', {}, 1).then(data => {
        if (data && Array.isArray(data.items)) {
            let treeContainer = document.getElementById('treeTableDiv');
            treeContainer.innerHTML = generateTreeHtml(data.items, "");

            let firstSpan = treeContainer.querySelector('span');
            if (!treeContainer.innerHTML.includes('background-color: #e5f0ff;')) {
                firstSpan.style.backgroundColor = '#e5f0ff';
            }
        }
    }).catch(err => {
        console.error(err);
    });
    idCounter = 0;
}
window.siteTreeGeneration = siteTreeGeneration;

let selectedTreeItem = "";
let selectedTreeItemAdd = "";
let firstLi = true;
function generateTreeHtml(items, checkChildren) {
    let html = '<ul style="margin-top: 10px; margin-bottom: 10px; list-style-type: none;">';
    items.forEach(item => {
        if (!item.name && item.tag == "sitename" && checkChildren == "") { 
            html += generateTreeHtmlSitename(item, "treeHtmlSitename");
            return;
        }
        if (!item.name && item.tag == "slogan" && checkChildren == "") { 
            html += generateTreeHtmlSitename(item, "treeHtmlSlogan");
            return;
        }
        
        let hasChildren = item.children && item.children.length;
        let isOpen = (item.isOpen || item.tag === 'index') ? 'block' : 'none';
        let markerText = hasChildren ? (isOpen === 'block' ? '▼' : '►') : '■';
        let style = item.isOpen ? 'background-color: #e5f0ff;' : '';
        id = "";
        if (firstLi == true) {
            id = 'id="treeHtmlIndex"';
            firstLi = false;
        } 

        html += `<li ${id} style="position: relative; margin: 0px 0px 8px -20px;">`;
        html += `<span class="tree-item" style="cursor: pointer; ${style} padding: 3px 6px 3px 3px;" onclick="toggleChildren(this)">`;
        html += `<span class="tree-marker">${markerText}</span> <span class="tree-text">${item.tag} <span class="tree-text-name">&nbsp;(${item.title})</span></span>`;
        html += `<div class="tree-data" style="display: none;">`;
        html += `url: ${item.url}<br>`;
        html += `title: ${item.title}<br>`;
        html += `name: ${item.name}<br>`;
        html += `template: ${item.template}<br>`;
        html += `PageMenu: ${item.PageMenu}<br>`;
        html += `users: ${item.users}<br>`;
        html += `group: ${item.group}`;
        html += `</div>`;
        html += `</span>`;
        if (hasChildren) {
            html += `<div class="details" style="display: ${isOpen};">` + generateTreeHtml(item.children, "children") + `</div>`;
        }
        html += `</li>`;

        if (style) {
            selectedTreeItemAdd = `url: ${item.url}<br>title: ${item.title}<br>name: ${item.name}<br>template: ${item.template}<br>PageMenu: ${item.PageMenu}<br>users: ${item.users}<br>group: ${item.group}`;
        }        
        
    });
    html += `</ul>`;
    if (checkChildren == "") {
        firstLi = true;
    }
    moveTreePage();
    return html;
}
function generateTreeHtmlSitename(item, id) {
    let html = `<li style="position: relative; margin: 0px 0px 8px -20px;">`;
    html += `<span id="${id}" class="tree-item" style="cursor: pointer; padding: 3px 6px 3px 3px;" onclick="toggleChildren(this)">`;
    html += `<span class="tree-marker">${item.tag}:</span> <span class="tree-text">${item.content}</span>`;
    html += `</span>`;
    html += `</li>`;
    return html;
}

/* перемещение страниц */
function moveTreePage() {
    let treeTableDiv = document.getElementById('treeTableDiv');
    let draggedItem = null;
    let offsetY = 0;
    let startX = 0;

    function isDescendant(parent, child) {
        while (child) {
            if (child === parent) return true;
            child = child.parentNode;
        }
        return false;
    }

    treeTableDiv.addEventListener('pointerdown', function(event) {
        if (window.treeSettingsMode != '') return;
        let li = event.target.closest('li');
        if (li && event.button === 0) {
            if (li.id === 'treeHtmlIndex') return;
            let treeItem = event.target.closest('.tree-item');
            if (!treeItem) return;
            draggedItem = li;
            offsetY = event.clientY - treeItem.getBoundingClientRect().top;
            li.style.opacity = '0.5';
            event.preventDefault();
        }
    });

    document.addEventListener('pointermove', function(event) {
        if (window.treeSettingsMode != '') return;
        if (draggedItem && event.target.tagName !== "LI" && event.target.tagName !== "UL") {
            let elemBelow = document.elementFromPoint(event.clientX, event.clientY);
            let liBelow = elemBelow ? elemBelow.closest('li') : null;
            if (liBelow && liBelow !== draggedItem && !isDescendant(draggedItem, liBelow)) {
                let rect = liBelow.getBoundingClientRect();
                let isTargetIndex = liBelow.parentElement?.closest('#treeHtmlIndex') !== null && liBelow.parentElement?.closest('#treeTableDiv')?.querySelector('#treeHtmlIndex')?.contains(liBelow.parentElement);
                if (isTargetIndex) {
                    let parentDetails = draggedItem.parentElement.closest('.details');
                    if (event.clientY < rect.top + rect.height / 2) {
                        liBelow.parentNode.insertBefore(draggedItem, liBelow);
                    } else {
                        liBelow.parentNode.insertBefore(draggedItem, liBelow.nextSibling);
                    }
                    if (parentDetails) {
                        let parentUl = parentDetails.querySelector('ul');
                        if (parentUl && parentUl.children.length === 0) {
                            let parentLi = parentDetails.closest('li');
                            parentDetails.remove();
                            if (parentLi) {
                                let marker = parentLi.querySelector('.tree-marker');
                                if (marker) marker.textContent = '■';
                            }
                        }
                    }
                }
            }
        }
    });

    document.addEventListener('pointerup', function() {
        if (window.treeSettingsMode != '') return;
        if (draggedItem) {
            draggedItem.style.opacity = '';
            draggedItem = null;
        }
    });

    treeTableDiv.addEventListener('pointermove', function(event) {
        if (window.treeSettingsMode != '') return;
        let li = event.target.closest('li');
        if (li && event.button === 0 && draggedItem) {
            let treeItem = event.target.closest('.tree-item');
            if (!treeItem) return;
            startX = event.clientX - treeItem.getBoundingClientRect().left;
            let upperLi = draggedItem.previousElementSibling;
            if (upperLi) {
                if (startX > 60) {
                    let details = upperLi.querySelector('.details');
                    if (!details) {
                        details = document.createElement('div');
                        details.className = 'details';
                        let ul = document.createElement('ul');
                        ul.setAttribute('style', 'margin-top: 10px; margin-bottom: 10px; list-style-type: none;');
                        details.appendChild(ul);
                        upperLi.appendChild(details);
                    } else {
                        if (details.style.display === 'none') {
                            details.style.display = 'block';
                        }
                    }
                    let marker = upperLi.querySelector('.tree-marker');
                    if (marker) {
                        marker.textContent = '▼';
                    }
                    draggedItem._attachedTo = upperLi;
                    let detailsUl = details.querySelector('ul');
                    if (detailsUl && draggedItem.parentNode !== detailsUl) {
                        detailsUl.appendChild(draggedItem);
                    }
                } else if (startX < 20) {
                    let details = upperLi.querySelector('.details');
                    if (details && details.contains(draggedItem)) {
                        let parentUl = upperLi.parentNode;
                        parentUl.insertBefore(draggedItem, upperLi.nextSibling);
                        delete draggedItem._attachedTo;
                        let detailsUl = details.querySelector('ul');
                        if (detailsUl && detailsUl.children.length === 0) {
                            details.style.display = 'none';
                            let marker = upperLi.querySelector('.tree-marker');
                            if (marker) {
                                marker.textContent = '►';
                            }
                        }
                    }
                }
            }
        }
    });
}

addEventListener("load", function() {
movementMenu("treeDiv");
movementMenu("treeProperties");
  
/* сохронения древа */
let treeSettingsSaveId = document.getElementById("treeSettingsSave");
treeSettingsSaveId.addEventListener('click', saveTree);

function saveTree() {
    let treeTableDiv = document.getElementById('treeTableDiv');
    let ul = treeTableDiv.querySelector('ul');
    let treeData = ul ? parseUl(ul) : [];

    let siteNameElement = document.getElementById("treeHtmlSitename");
    let siteName = siteNameElement ? siteNameElement.querySelector('.tree-text').textContent.trim() : '';
    let sloganElement = document.getElementById("treeHtmlSlogan");
    let slogan = sloganElement ? sloganElement.querySelector('.tree-text').textContent.trim() : '';

    let fullData = { sitename: siteName, slogan: slogan, children: treeData };

    handleJsonRpcRequest('saveTree', fullData, 1).then(response => {
        console.log(response);
    });    
}

function parseUl(ul) {
    let result = [];
    let items = ul.children;

    for (let item of items) {
        let span = item.querySelector('.tree-item .tree-text');
        let textName = item.querySelector('.tree-text-name');
        let dataDiv = item.querySelector('.tree-data');
        let childrenUl = item.querySelector('.details > ul');

        if (span && dataDiv) {
            let data = parseDataDiv(dataDiv);
            let mainText = span.childNodes[0].textContent.trim();
            let extraText = textName ? textName.textContent.trim() : "";
            data['tag'] = mainText;
            data['name'] = mainText + (extraText ? " " + extraText : "");
            if (childrenUl) data['children'] = parseUl(childrenUl);
            result.push(data);
        }
    }

    return result;
}

function parseDataDiv(div) {
    let data = {};
    let lines = div.innerHTML.split(/<br\s*\/?>/i);

    for (let line of lines) {
        let parts = line.split(': ');
        if (parts.length === 2) data[parts[0].trim()] = parts[1].trim();
    }

    return data;
}

/* окно настроек древа */
let targetTreeItem = "";
let treeSettingsDiv = document.getElementById('treeSettings');

function treeSettings() {
	const treeDivDiv = document.getElementById('treeDiv');
	if (!treeDivDiv) return;

	if (window.treeSettingsMode == 'linkFromPage') {
		document.getElementById('treeTopTitle').innerHTML = "{{select_page_for_link}}";
		document.getElementById('treeSettingsSave').style.display = "none";
	} else {
		document.getElementById('treeTopTitle').innerHTML = "{{tree_site_title}}";
		document.getElementById('treeSettingsSave').style.display = "block";
	}

	function showTreeSettings(event) {
		event.preventDefault();
		let treeItem = event.target.closest('.tree-item');
		targetTreeItem = treeItem ? treeItem : "";
		treeSettingsDiv.style.left = `${touchX}px`;
		treeSettingsDiv.style.top = `${touchY}px`;
		document.getElementById('treeSettingsAdd').style.display = '';
		document.getElementById('treeSettingsPaste').style.display = '';
		document.getElementById('treeSettingsCopy').style.display = '';
		document.getElementById('treeSettingsRename').style.display = '';
		document.getElementById('treeSettingsProperties').style.display = '';
		document.getElementById('treeSettingsDelete').style.display = '';
		document.getElementById('treeSettingsChoose').style.display = '';
		treeSettingsDiv.style.visibility = targetTreeItem ? "visible" : "hidden";
		let tag = targetTreeItem instanceof Element
			? targetTreeItem.querySelector('.tree-text')?.textContent.trim()
			: null;
		if (tag == "index" && !targetTreeItem.closest('li li')) {
			document.getElementById('treeSettingsRename').style.display = 'none';
			document.getElementById('treeSettingsDelete').style.display = 'none';
		}
		if (targetTreeItem) {
			let firstId = targetTreeItem.closest('li')?.firstElementChild?.id;
			if (firstId == "treeHtmlSitename" || firstId == "treeHtmlSlogan") {
				['Add','Copy','Paste','Delete','Properties','Choose'].forEach(id=>{
					document.getElementById('treeSettings'+id).style.display = 'none';
				});
			}
		}
		if (selectedTreeItem == "") {
			document.getElementById('treeSettingsPaste').style.display = 'none';
		}
		document.addEventListener('pointerdown', function hideMenu(e) {
			if (!treeSettingsDiv.contains(e.target)) {
				treeSettingsDiv.style.visibility = "hidden";
				document.removeEventListener('pointerdown', hideMenu);
			}
		});
		if (window.treeSettingsMode == 'linkFromPage') {
			['Add','Copy','Paste','Delete','Rename','Properties'].forEach(id=>{
				document.getElementById('treeSettings'+id).style.display = 'none';
			});
		} else {
			document.getElementById('treeSettingsChoose').style.display = 'none';
		}
		if ([].slice.call(document.getElementById('treeSettingsDiv').children).every(el=>
			getComputedStyle(el).display === 'none'
		)) {
			treeSettingsDiv.style.visibility = 'hidden';
		}
	}

    function setupTreeSettingsHandler(){
        const treeDiv=document.getElementById('treeDiv')
        if(!treeDiv) return
        treeDiv.removeEventListener('click',showTreeSettings)
        treeDiv.oncontextmenu=null
        if(isPhone){
            touchLong(treeDiv,showTreeSettings)
        }else{
            treeDiv.oncontextmenu=showTreeSettings
        }
    }    

	setupTreeSettingsHandler();
	window.addEventListener('resize', setupTreeSettingsHandler);
}
window.treeSettings = treeSettings;

/* кнопки окна настроек древа */
/* кнопки добовление страниц / начало */
let treeSettingsAddId = document.getElementById('treeSettingsAdd');
treeSettingsAddId.addEventListener('click', treeSettingsAddFun);
function treeSettingsAddFun() { 
    if (window.newPageFunValue == "newPage") {
        document.getElementById("saveHow").click();
        messageFunction("{{save_new_page}}");
        return;
    }
    
    let container = getContainer();
    let pageUrl = selectedTreeItemAdd;
    let treeText = prompt("{{enter_tag_for_new_page}}");
    treeText = treeText ? treeText.trim() : "";
    if (!/^[A-Za-z]+$/.test(treeText)) {
        messageFunction("{{tag_only_english_letters}}");
        return;
    }
    if (treeText !== "") {
        let exists = false;
        let lis = container.querySelectorAll('li');
        lis.forEach(function(li) {
            let txt = li.querySelector('.tree-text');
            if (txt && txt.textContent.trim() === treeText) {
                exists = true;
            }
        });
        if (exists) {
            alert("{{tag_already_exists}}");
            return;
        }
        let newItem = createNewTreeItem(pageUrl, treeText);
        let newLi = document.createElement('li');
        newLi.style.position = 'relative';
        newLi.style.margin = '0px 0px 8px -20px';
        newLi.appendChild(newItem);
        container.appendChild(newLi);
        if (targetTreeItem) {
            targetTreeItem.querySelector('.tree-marker').textContent = '▼';
        }
    }
    treeSettingsDiv.style.visibility = "hidden";
}

let treeSettingsPasteId = document.getElementById('treeSettingsPaste');
treeSettingsPasteId.addEventListener('click', treeSettingsPasteFun);
function treeSettingsPasteFun() {
    let container = getContainer();
    let clonedItem = selectedTreeItem.cloneNode(true);
    let treeText = prompt("{{enter_tag_for_new_page}}");
    treeText = treeText ? treeText.trim() : "";
    if (!/^[A-Za-z]+$/.test(treeText)) {
        messageFunction("{{tag_only_english_letters}}");
        return;
    }
    if (treeText !== "") {
        let exists = false;
        let lis = container.querySelectorAll('li');
        lis.forEach(function(li) {
            let txt = li.querySelector('.tree-text');
            if (txt && txt.textContent.trim() === treeText) {
                exists = true;
            }
        });
        if (exists) {
            messageFunction("{{tag_already_exists}}");
            return;
        }
        let textSpan = clonedItem.querySelector('.tree-text');
        let extractedTitle = selectedTreeItem.querySelector('.tree-data').innerHTML.match(/title:\s*([^<]+)/)?.[1].trim();
        textSpan.innerHTML = `${treeText} <span class="tree-text-name">&nbsp;(${extractedTitle})</span>`;
        let newLi = document.createElement('li');
        newLi.style.position = 'relative';
        newLi.style.margin = '0px 0px 8px -20px';
        newLi.appendChild(clonedItem);
        container.appendChild(newLi);
        if (targetTreeItem) {
            targetTreeItem.querySelector('.tree-marker').textContent = '▼';
        }
    }
    treeSettingsDiv.style.visibility = "hidden";
}

function createNewTreeItem(pageUrl, treeText) {
    let newItem = document.createElement('span');
    newItem.className = 'tree-item';
    newItem.style.cursor = 'pointer';
    newItem.style.padding = '3px 6px 3px 3px';
    
    let marker = document.createElement('span');
    marker.className = 'tree-marker';
    marker.textContent = '■';
    
    let textSpan = document.createElement('span');
    textSpan.className = 'tree-text';
    let extractedTitle = selectedTreeItemAdd.match(/title:\s*([^<]+)/)?.[1].trim() || "";
    textSpan.innerHTML = `${treeText} <span class="tree-text-name">&nbsp;(${extractedTitle})</span>`;
    
    let dataDiv = document.createElement('div');
    dataDiv.className = 'tree-data';
    dataDiv.style.display = 'none';
    dataDiv.innerHTML = `${pageUrl}`;
    
    newItem.appendChild(marker);
    newItem.insertAdjacentText('beforeend', ' ');
    newItem.appendChild(textSpan);
    newItem.appendChild(dataDiv);
    
    newItem.setAttribute('onclick', 'toggleChildren(this)');
    
    return newItem;
}

function getContainer() {
    let container;
    if (targetTreeItem) {
        let li = targetTreeItem.closest('li');
        let details = li.querySelector('.details');
        if (!details) {
            details = document.createElement('div');
            details.className = 'details';
            details.style.display = 'block';
            li.appendChild(details);
        }
        let detailsUl = details.querySelector('ul');
        if (!detailsUl) {
            detailsUl = document.createElement('ul');
            detailsUl.style.marginTop = '10px';
            detailsUl.style.marginBottom = '10px';
            detailsUl.style.listStyleType = 'none';
            details.appendChild(detailsUl);
        }
        container = detailsUl;
    } else {
        let treeTableDiv = document.getElementById('treeTableDiv');
        let mainUl = treeTableDiv.querySelector('ul');
        if (!mainUl) {
            mainUl = document.createElement('ul');
            mainUl.style.marginTop = '10px';
            mainUl.style.marginBottom = '10px';
            mainUl.style.listStyleType = 'none';
            treeTableDiv.appendChild(mainUl);
        }
        container = mainUl;
    }
    return container;
}
/* кнопки добовление страниц / конец */

let treeSettingsCopyId = document.getElementById('treeSettingsCopy');
treeSettingsCopyId.addEventListener('click', treeSettingsCopyFun);
function treeSettingsCopyFun() {
    selectedTreeItem = targetTreeItem.cloneNode(true);
    selectedTreeItem.querySelector('.tree-marker').textContent = '■';
    if (selectedTreeItem.classList.contains('tree-item')) {
        selectedTreeItem.style.backgroundColor = '';
    } else {
        let treeItem = selectedTreeItem.querySelector('.tree-item');
        if (treeItem) treeItem.style.backgroundColor = '';
    }

    treeSettingsDiv.style.visibility = "hidden";
}

let treeSettingsRenameId = document.getElementById('treeSettingsRename');
treeSettingsRenameId.addEventListener('click', treeSettingsRenameFun);
function treeSettingsRenameFun() {
    if (targetTreeItem) {
        let li = targetTreeItem.closest('li');
        if (li) {
            let treeText = li.querySelector('.tree-text');
            if (treeText) {
                let firstTextNode = treeText.firstChild;
                let currentName = firstTextNode.nodeValue.trim();
                let newText = prompt("{{enter_new_name}}", currentName);
                if (newText !== null) {
                    newText = newText.trim();
                    if (!/^[A-Za-z]+$/.test(newText)) {
                        messageFunction("{{name_only_english_letters}}");
                        return;
                    }
                    firstTextNode.nodeValue = newText + ' ';
                }                
            }
        }
    } else {
        messageFunction("{{no_item_selected}}");
    }

    treeSettingsDiv.style.visibility = "hidden";
}

let treeSettingsDeleteId = document.getElementById('treeSettingsDelete');
treeSettingsDeleteId.addEventListener('click', treeSettingsDeleteFun);
async function treeSettingsDeleteFun() {
    if (targetTreeItem) {
        let li = targetTreeItem.closest('li');
        if (li) {
            let parentUl = li.parentElement;
            if (li.querySelector('li')) {
                messageQueue.push(`{{delete_all_subpages}} ${targetTreeItem.querySelector('.tree-text').textContent}?`);
                const userConfirmed = await messageCreateQuestion();
                if (userConfirmed) {
                    li.remove();
                }
            } else {
                li.remove();
            }
            if (parentUl && parentUl.children.length === 0) {
                let detailsDiv = parentUl.parentElement;
                if (detailsDiv && detailsDiv.classList.contains('details')) {
                    let parentLi = detailsDiv.closest('li');
                    if (parentLi) {
                        let marker = parentLi.querySelector('.tree-marker');
                        if (marker) marker.textContent = '■';
                    }
                    detailsDiv.remove();
                }
            }
        }
    } else {
        messageFunction("{{no_item_selected}}");
    }
    
    let treeSettingsDiv = document.getElementById('treeSettings');
    treeSettingsDiv.style.visibility = "hidden";
}

/* свойтсва страниц */
let treeSettingsPropertiesId = document.getElementById('treeSettingsProperties');;
treeSettingsPropertiesId.onclick = function() {
    let treePropertiesId = document.getElementById('treeProperties');
    let treePropertiesDivId = document.getElementById('treePropertiesDiv');
    let treePropertiesTopNameId = document.getElementById('treePropertiesTopName');
    let treePropertiesWindowPropertiesId = document.getElementById('treePropertiesWindowProperties');
    let treePropertiesWindowRightsId = document.getElementById('treePropertiesWindowRights');

    let tableProperties = document.createElement('table');
    tableProperties.style.width = "100%";
    tableProperties.innerHTML= treePropertiesDiv();
 
    let tableRights = document.createElement('div');
    tableRights.innerHTML = `{{no_rights}}`;

    treePropertiesTopNameId.textContent = `{{properties}}`;
    treePropertiesDivId.innerHTML = '';
 
    treePropertiesWindowPropertiesId.onclick = function() {
       treePropertiesDivId.innerHTML = '';
       treePropertiesDivId.appendChild(tableProperties);
       treePropertiesWindowPropertiesId.style.backgroundColor = "#f3f3f3";
       treePropertiesWindowRightsId.style.backgroundColor = "";
    };
    treePropertiesWindowRightsId.onclick = function() {
       treePropertiesDivId.innerHTML = '';
       treePropertiesDivId.appendChild(tableRights);
       treePropertiesWindowPropertiesId.style.backgroundColor = "";
       treePropertiesWindowRightsId.style.backgroundColor = "#f3f3f3";
    };         
    treePropertiesWindowPropertiesId.click();

    if (treePropertiesId.style.visibility == 'hidden') {
       treePropertiesId.style.visibility = 'visible';
    }
 
    let treePropertiesTopCloseId = document.getElementById('treePropertiesTopClose');
    let treePropertiesDivButtonOkId = document.getElementById('treePropertiesDivButtonOk');
    let treePropertiesDivButtonCancelId = document.getElementById('treePropertiesDivButtonCancel');
    treePropertiesTopCloseId.onclick = function() {
       treePropertiesId.style.visibility = 'hidden';
       if (window.managerDataAction == "propertiesUrl") {
        window.managerDataAction = "";
        managerDiv.style.visibility = "hidden";
       }
    };
    treePropertiesDivButtonOkId.onclick = function() {
        saveTreePropertiesDiv();
       treePropertiesId.style.visibility = 'hidden';
       if (window.managerDataAction == "propertiesUrl") {
        window.managerDataAction = "";
        managerDiv.style.visibility = "hidden";
       }
    };
    treePropertiesDivButtonCancelId.onclick = function() {
       treePropertiesId.style.visibility = 'hidden';
       if (window.managerDataAction == "propertiesUrl") {
        window.managerDataAction = "";
        managerDiv.style.visibility = "hidden";
       }
    };   
};

function saveTreePropertiesDiv() {
    let treeDataDiv = lastRightClickedItem.querySelector('.tree-data');
    let rows = document.querySelectorAll('#treePropertiesDiv table tr');
    let newData = [];
    
    rows.forEach(row => {
        let key = row.querySelector('td:first-child').textContent.trim();
        let valueCell = row.querySelector('td:last-child');
        let value = '';

        if (key.toLowerCase() === 'pagemenu') {
            let inputs = valueCell.querySelectorAll('input');
            value = Array.from(inputs)
                .map(input => input.value.trim())
                .filter(v => v)
                .join(',');
        } 
        else if (key.toLowerCase() === 'template') {
            value = valueCell.querySelector('select').value;
        }
        else if (key.toLowerCase() === 'url') {
            value = document.getElementById('treePropertiesDivUrlValue').textContent;
        }
        else {
            let input = valueCell.querySelector('input');
            value = input ? input.value : valueCell.textContent.trim();
        }

        newData.push(`${key}: ${value}`);
    });

    if (treeDataDiv) {
        treeDataDiv.innerHTML = newData.join('<br>');
        let name = newData.find(d => d.startsWith('name: '))?.split(': ')[1] || '';
        let title = newData.find(d => d.startsWith('title: '))?.split(': ')[1] || '';
        
        let textSpan = lastRightClickedItem.querySelector('.tree-text');
        if (textSpan) {
            textSpan.childNodes[0].textContent = name + ' ';
            let nameSpan = textSpan.querySelector('.tree-text-name');
            if (nameSpan) nameSpan.innerHTML = `&nbsp;(${title})`;
        }
    }
}

/* Выбор страницы для ссылки */
let treeSettingsChooseId = document.getElementById('treeSettingsChoose');
treeSettingsChooseId.addEventListener('click', treeSettingsChooseFun);
function treeSettingsChooseFun() {
    var parts = [];
    var span = targetTreeItem;
    var li = span.closest('li');
    while (li) {
        var itemSpan = li.querySelector(':scope > span.tree-item');
        var text = itemSpan.querySelector('.tree-text').firstChild.textContent.trim();
        parts.unshift(text);
        li = li.parentElement.closest('li');
    }
    if (parts[0] === 'index') {
        parts.shift();
    }
    var url;
    if (parts.length) {
        url = 'http://slava.home/' + parts.join('/') + '.html';
    } else {
        url = 'http://slava.home';
    }
    document.getElementById('link2').value = url;
    document.getElementById("treeDiv").style.visibility = "hidden";
    document.getElementById("treeProperties").style.visibility = "hidden";
    document.getElementById("treeSettings").style.visibility = "hidden";
}

function treePropertiesDiv() {
    if (!treePropertiesDivElement) return "";
    let dataHTML = treePropertiesDivElement.querySelector('.tree-data')?.innerHTML || "";
    let lines = dataHTML.split('<br>');
    let rows = [];
    for (let line of lines) {
        if (!line.trim()) continue;
        let parts = line.split(':');
        let key = parts[0].trim();
        let value = parts.slice(1).join(':').trim();
        let inputHtml = value;

        if (key.toLowerCase() === "url") {
            inputHtml = `<span id="treePropertiesDivUrlValue" style="font-size: inherit;">${value}</span> <button id="treePropertiesDivUrl" type="button">{{select}}</button>`;
        } else if (key.toLowerCase() === "title") {
            inputHtml = `<input type="text" value="${value}" style="font-size: inherit;">`;
        } else if (key.toLowerCase() === "name") {
            inputHtml = `<input type="text" value="${value}" style="font-size: inherit;" pattern="[A-Za-z]+" oninput="this.value = this.value.replace(/[^A-Za-z]/g, '')">`;
        } else if (key.toLowerCase() === "template") {
            let defaultTemplate = value;
            inputHtml = `<select id="templateSelect" style="font-size: inherit;"><option selected>${defaultTemplate}</option></select>`;
            setTimeout(function() {
                handleJsonRpcRequest('getFolderNames', { folder: '/template' }, 1).then(data => {
                    let select = document.getElementById('templateSelect');
                    if (select && data && data.folders) {
                        select.innerHTML = '';
                        data.folders.forEach(folder => {
                            select.innerHTML += `<option${folder === defaultTemplate ? ' selected' : ''}>${folder}</option>`;
                        });
                    }
                });
            }, 0);
        } else if (key.toLowerCase() === "pagemenu") {
            let values = value.split(",");
            while (values.length < 3) {
                values.push("");
            }
            inputHtml = values.map((val, index) => 
                `<input type="text" value="${val}" style="width: 30px; font-size: inherit; text-align: center;" 
                oninput="this.value = this.value.replace(/[^0-9]/g, '');">`
            ).join(" , ");
        } else if (key.toLowerCase() === "users") {
            inputHtml = `<input type="text" value="${value}" style="font-size: inherit;" readonly disabled>`;
        } else if (key.toLowerCase() === "group") {
            inputHtml = `<input type="text" value="${value}" style="font-size: inherit;" readonly disabled>`;
        }


        rows.push(`<tr><td class="managerPropertiesDivDivs">${key}</td><td class="managerPropertiesDivDivs">${inputHtml}</td></tr>`);
    }
    setTimeout(treePropertiesDivFunc, 0);
    return `<table style="width: 100%;">${rows.join('')}</table>`;
}
function treePropertiesDivFunc() {
    document.getElementById('treePropertiesDivUrl').onclick = function() {
        window.managerDataAction = "propertiesUrl";
        managerData("/content");
        managerDiv.style.visibility = "visible";
        document.getElementById("settingsMain_d").style.visibility="hidden";
    };
}

let lastRightClickedItem = null;
let treePropertiesDivElement = null;
function treeContext(event){
    let treeItem=event.target.closest('.tree-item')
    if(treeItem){
        lastRightClickedItem=treeItem
        treePropertiesDivElement=treeItem
    }
}
document.addEventListener('contextmenu',treeContext)
touchLong(document,treeContext)

}); /* начало */