script.js

let currentData = null;
let currentFileName = 'edited.json';

document.addEventListener('DOMContentLoaded', () => {
    const fileInput = document.getElementById('file-input');
    const saveBtn = document.getElementById('save-btn');

    fileInput.addEventListener('change', (event) => {
        const file = event.target.files[0];
        if (!file) return;

        currentFileName = file.name;

        const reader = new FileReader();
        reader.onload = (e) => {
            try {
                currentData = JSON.parse(e.target.result);
                saveBtn.disabled = false;
                renderEditor();
            } catch (error) {
                alert('Invalid JSON file.');
                console.error(error);
            }
        };
        reader.readAsText(file);
    });

    saveBtn.addEventListener('click', () => {
        if (!currentData) return;

        const jsonString = JSON.stringify(currentData, null, 2);
        const blob = new Blob([jsonString], { type: 'application/json' });
        const url = URL.createObjectURL(blob);

        const a = document.createElement('a');
        a.href = url;
        a.download = currentFileName;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
    });
});

function renderEditor() {
    const editorContainer = document.getElementById('editor-container');
    editorContainer.innerHTML = '';

    if (currentData === null) {
        editorContainer.innerHTML = '<p class="placeholder">Please open a JSON file to begin.</p>';
        return;
    }

    // Pass a dummy object as parent of root to allow root replacement if needed
    const rootContainer = { root: currentData };
    const tree = createNode(currentData, 'root', rootContainer, 'root');
    editorContainer.appendChild(tree);

    // Update global data in case root was changed
    currentData = rootContainer.root;
}

function getType(value) {
    if (value === null) return 'null';
    if (Array.isArray(value)) return 'array';
    return typeof value;
}

function createNode(value, key, parent, parentKey) {
    const nodeDiv = document.createElement('div');
    nodeDiv.className = 'tree-node';

    const currentType = getType(value);
    const isObject = currentType === 'object';
    const isArray = currentType === 'array';

    // Key/Label rendering
    const headerDiv = document.createElement('div');
    headerDiv.className = 'node-header';

    if (isObject || isArray) {
        const toggleBtn = document.createElement('span');
        toggleBtn.className = 'toggle-btn expanded';
        toggleBtn.textContent = '▼';
        toggleBtn.onclick = (e) => toggleNode(e.target, childrenContainer);
        headerDiv.appendChild(toggleBtn);
    } else {
        const spacer = document.createElement('span');
        spacer.className = 'spacer';
        headerDiv.appendChild(spacer);
    }

    const keyInput = document.createElement('input');
    keyInput.type = 'text';
    keyInput.className = 'node-key-input';
    keyInput.value = key;

    // Disable key editing for root or array indices
    if (key === 'root' || Array.isArray(parent)) {
        keyInput.disabled = true;
        keyInput.className += ' disabled-key';
        if (Array.isArray(parent)) {
            keyInput.value = `[${key}]`;
        }
    } else {
        keyInput.onchange = (e) => {
            const newKey = e.target.value;
            if (newKey && newKey !== key) {
                if (parent.hasOwnProperty(newKey)) {
                    alert('Key already exists!');
                    e.target.value = key; // Revert
                } else {
                    parent[newKey] = parent[key];
                    delete parent[key];
                    renderEditor(); // Re-render to reflect key change and reorder
                }
            } else if (!newKey) {
                e.target.value = key; // Revert if empty
            }
        };
    }
    headerDiv.appendChild(keyInput);

    // Type Selector
    const typeSelect = document.createElement('select');
    typeSelect.className = 'node-type-select';
    const types = ['string', 'number', 'boolean', 'object', 'array', 'null'];
    types.forEach(t => {
        const option = document.createElement('option');
        option.value = t;
        option.textContent = t;
        if (t === currentType) option.selected = true;
        typeSelect.appendChild(option);
    });

    typeSelect.onchange = (e) => {
        const newType = e.target.value;
        let newValue;
        switch (newType) {
            case 'string': newValue = ""; break;
            case 'number': newValue = 0; break;
            case 'boolean': newValue = false; break;
            case 'object': newValue = {}; break;
            case 'array': newValue = []; break;
            case 'null': newValue = null; break;
        }
        parent[key] = newValue;
        renderEditor();
    };

    headerDiv.appendChild(typeSelect);

    if (isObject || isArray) {
        const typeSpan = document.createElement('span');
        typeSpan.className = 'node-type';
        typeSpan.textContent = isArray ? `[${value.length}]` : `{${Object.keys(value).length}}`;
        headerDiv.appendChild(typeSpan);
    } else {
        const separator = document.createElement('span');
        separator.textContent = ': ';
        headerDiv.appendChild(separator);

        const valueInput = document.createElement('input');
        valueInput.className = 'node-value';

        if (currentType === 'boolean') {
            valueInput.type = 'checkbox';
            valueInput.checked = value;
            valueInput.onchange = (e) => updateValue(parent, key, e.target.checked);
        } else if (currentType !== 'null') {
            valueInput.type = 'text';
            valueInput.value = value;
            valueInput.onchange = (e) => {
                let val = e.target.value;
                if (currentType === 'number') {
                    if (!isNaN(val) && val.trim() !== '') {
                        val = Number(val);
                    } else {
                        val = 0; // fallback if invalid number
                    }
                }
                updateValue(parent, key, val);
            };
        }

        if (currentType === 'null') {
            valueInput.type = 'text';
            valueInput.value = 'null';
            valueInput.disabled = true;
        }

        headerDiv.appendChild(valueInput);
    }

    // Add / Delete Buttons
    const controlsDiv = document.createElement('div');
    controlsDiv.className = 'node-controls';

    if (isObject || isArray) {
        const addBtn = document.createElement('button');
        addBtn.textContent = '+';
        addBtn.className = 'icon-btn add-btn';
        addBtn.title = 'Add Item';
        addBtn.onclick = () => {
            if (isArray) {
                value.push("");
            } else {
                let newKey = "newKey";
                let counter = 1;
                while (value.hasOwnProperty(newKey)) {
                    newKey = `newKey${counter++}`;
                }
                value[newKey] = "";
            }
            renderEditor();
        };
        controlsDiv.appendChild(addBtn);
    }

    if (key !== 'root') {
        const delBtn = document.createElement('button');
        delBtn.innerHTML = '&times;';
        delBtn.className = 'icon-btn del-btn';
        delBtn.title = 'Delete Item';
        delBtn.onclick = () => {
            if (Array.isArray(parent)) {
                parent.splice(key, 1);
            } else {
                delete parent[key];
            }
            renderEditor();
        };
        controlsDiv.appendChild(delBtn);
    }

    headerDiv.appendChild(controlsDiv);
    nodeDiv.appendChild(headerDiv);

    // Children rendering
    let childrenContainer = null;
    if (isObject || isArray) {
        childrenContainer = document.createElement('div');
        childrenContainer.className = 'node-children';

        if (isArray) {
            value.forEach((item, idx) => {
                childrenContainer.appendChild(createNode(item, idx, value, idx));
            });
        } else {
            Object.keys(value).forEach((k) => {
                childrenContainer.appendChild(createNode(value[k], k, value, k));
            });
        }
        nodeDiv.appendChild(childrenContainer);
    }

    return nodeDiv;
}

function toggleNode(btn, container) {
    if (container) {
        if (container.style.display === 'none') {
            container.style.display = 'block';
            btn.textContent = '▼';
            btn.classList.add('expanded');
        } else {
            container.style.display = 'none';
            btn.textContent = '▶';
            btn.classList.remove('expanded');
        }
    }
}

function updateValue(parent, key, newValue) {
    if (parent && key !== null) {
        parent[key] = newValue;
    }
}