/*
 * Direct DOM Manipulation Example:
 * Demonstrates the synchronous and often costly nature of updating the real DOM directly.
 * Each modification can trigger immediate reflows and repaints.
 */

// 1. Initial Render: Create a list of items
const appContainer = document.getElementById('app');
const ulElement = document.createElement('ul');
ulElement.id = 'item-list';
appContainer.appendChild(ulElement);

function renderInitialList(items) {
    items.forEach(itemText => {
        const li = document.createElement('li');
        li.textContent = itemText;
        ulElement.appendChild(li);
    });
    console.log('Initial list rendered with direct DOM manipulation.');
}

// 2. Update Function: Add a new item directly to the DOM
function addItemDirectly(newItemText) {
    console.log(`Adding '${newItemText}' directly to the DOM...`);
    const li = document.createElement('li');
    li.textContent = newItemText;
    ulElement.appendChild(li);
    console.log('DOM updated directly.');
}

// 3. Remove Function: Remove an item directly
function removeItemDirectly(itemTextToRemove) {
    console.log(`Removing '${itemTextToRemove}' directly from the DOM...`);
    const items = ulElement.querySelectorAll('li');
    for (let i = 0; i < items.length; i++) {
        if (items[i].textContent === itemTextToRemove) {
            ulElement.removeChild(items[i]);
            console.log('Item removed directly.');
            return;
        }
    }
    console.log('Item not found for removal.');
}

// --- Execution --- 
document.addEventListener('DOMContentLoaded', () => {
    if (appContainer) {
        renderInitialList(['Item 1', 'Item 2']);

        // Simulate an update after a short delay
        setTimeout(() => {
            addItemDirectly('Item 3');
        }, 1000);

        // Simulate another update
        setTimeout(() => {
            removeItemDirectly('Item 1');
        }, 2000);

        // Simulate a further update
        setTimeout(() => {
            addItemDirectly('Item 4');
        }, 3000);
    } else {
        console.error('Element with ID "app" not found.');
    }
});

/* 
HTML Structure for testing:
<div id="app"></div>
*/

/*
 * Conceptual Virtual DOM Representation:
 * This is a simplified JavaScript object structure representing a 'virtual' element.
 * Frameworks like React build entire trees of these objects in memory.
 */

// A basic representation of a Virtual DOM node
class VNode {
    constructor(type, props = {}, children = []) {
        this.type = type; // e.g., 'div', 'p', 'h1', 'VComponent'
        this.props = props; // Attributes and event handlers (e.g., { id: 'my-div', className: 'container' })
        this.children = children.map(child => 
            typeof child === 'string' ? new VTextNode(child) : child
        ); // Nested VNodes or VTextNodes
    }
}

// A specific Virtual DOM node for text content
class VTextNode {
    constructor(text) {
        this.text = text;
    }
}

// Example of building a Virtual DOM tree (manually for illustration)
const virtualDomTree = new VNode('div', { id: 'app' }, [
    new VNode('h1', {}, [new VTextNode('Welcome to Virtual DOM!')]),
    new VNode('p', { className: 'intro' }, [new VTextNode('This is a conceptual representation.')]),
    new VNode('ul', { id: 'item-list' }, [
        new VNode('li', {}, [new VTextNode('Virtual Item 1')]),
        new VNode('li', {}, [new VTextNode('Virtual Item 2')])
    ])
]);

console.log('Conceptual Virtual DOM Tree:', JSON.stringify(virtualDomTree, null, 2));

/*
 * Key takeaway: The Virtual DOM is a lightweight, declarative description of the UI,
 * not the actual UI elements themselves. It lives in JavaScript memory.
 */

/*
 * Conceptual Reconciliation (Diffing) Algorithm:
 * This simplified example illustrates the core idea of comparing two virtual DOM trees
 * and identifying the minimal changes required for the real DOM.
 * In reality, this algorithm is highly optimized and complex within frameworks.
 */

// Helper to create a simple virtual node (similar to JSX structure conceptually)
const h = (type, props, ...children) => ({ type, props, children });

// A very basic 'render' function that applies virtual DOM to real DOM
function renderVNode(vNode) {
    if (typeof vNode === 'string') {
        return document.createTextNode(vNode);
    }
    const el = document.createElement(vNode.type);
    for (const prop in vNode.props) {
        el.setAttribute(prop, vNode.props[prop]);
    }
    vNode.children.forEach(child => {
        el.appendChild(renderVNode(child));
    });
    return el;
}

// Simplified diffing function (concept only, not robust)
function diff(oldVNode, newVNode) {
    const patches = [];

    // Case 1: Different types (e.g., div to p) - replace entire node
    if (oldVNode.type !== newVNode.type) {
        patches.push({ type: 'REPLACE', oldVNode, newVNode });
        return patches;
    }

    // Case 2: Same type, check props
    for (const prop in { ...oldVNode.props, ...newVNode.props }) {
        if (oldVNode.props[prop] !== newVNode.props[prop]) {
            patches.push({ type: 'SET_PROP', key: prop, value: newVNode.props[prop] });
        }
    }

    // Case 3: Same type, check children (simplified: assumes children order is stable)
    const maxChildren = Math.max(oldVNode.children.length, newVNode.children.length);
    for (let i = 0; i < maxChildren; i++) {
        const oldChild = oldVNode.children[i];
        const newChild = newVNode.children[i];

        if (!oldChild) {
            patches.push({ type: 'ADD_CHILD', child: newChild });
        } else if (!newChild) {
            patches.push({ type: 'REMOVE_CHILD', child: oldChild });
        } else {
            // Recursively diff children
            patches.push(...diff(oldChild, newChild)); 
        }
    }

    return patches;
}

// Simulate rendering and updating with a simple state
let currentState = ['Alpha', 'Beta'];
let currentVTree = h('ul', {}, currentState.map(item => h('li', {}, item)));

const rootElement = document.getElementById('app');
if (rootElement) {
    rootElement.appendChild(renderVNode(currentVTree));
    console.log('Initial virtual tree rendered to real DOM.');

    // Simulate an update: add a new item and change an existing one
    setTimeout(() => {
        const newState = ['Alpha Updated', 'Beta', 'Gamma']; // Added Gamma, changed Alpha
        const newVTree = h('ul', {}, newState.map(item => h('li', {}, item)));

        console.log('--- Simulating Update ---');
        console.log('Old VTree:', JSON.stringify(currentVTree, null, 2));
        console.log('New VTree:', JSON.stringify(newVTree, null, 2));

        const patches = diff(currentVTree, newVTree);
        console.log('Calculated Patches:', patches);
        
        // In a real framework, these patches would be applied efficiently to the real DOM.
        // For this concept, we'll just replace the whole thing for simplicity to show the *result*.
        rootElement.innerHTML = ''; // Clear old
        rootElement.appendChild(renderVNode(newVTree)); // Render new
        currentVTree = newVTree; // Update current VTree
        console.log('Real DOM conceptually updated based on diff.');

    }, 2000);
} else {
    console.error('Root element #app not found.');
}

/* 
HTML Structure for testing:
<div id="app"></div>
*/

/*
 * Conceptual Component-Based Approach (Illustrates benefits of Virtual DOM)
 * While this isn't direct Virtual DOM code, it shows how frameworks enable
 * declarative UI development, which the Virtual DOM facilitates for performance.
 */

// A simple 'component' function (conceptually similar to React functional components)
function ItemList(props) {
    const items = props.items;
    return (
        h('ul', { className: 'item-list' },
            items.map(item => h('li', { key: item.id }, item.text))
        )
    );
}

// A 'main' app component that manages state and re-renders
function App(state) {
    return (
        h('div', { id: 'app' },
            h('h1', {}, 'My Dynamic App'),
            ItemList({ items: state.items }),
            h('button', { onclick: 'console.log("Add Item clicked - would update state")' }, 'Add Item')
        )
    );
}

// Initial application state
let appState = {
    items: [
        { id: 1, text: 'Initial Item A' },
        { id: 2, text: 'Initial Item B' }
    ]
};

// Simulate initial render (in a real framework, this would be handled)
let currentRootVNode = App(appState);
const rootContainer = document.getElementById('app-root');
if (rootContainer) {
    rootContainer.appendChild(renderVNode(currentRootVNode)); // Uses renderVNode from previous example
    console.log('Initial app rendered with component structure.');
}

// Simulate a state update, leading to a new VDOM tree and diff
setTimeout(() => {
    console.log('\n--- Simulating State Update ---');
    appState = {
        items: [
            { id: 1, text: 'Updated Item A' },
            { id: 2, text: 'Initial Item B' }, // B is unchanged
            { id: 3, text: 'New Item C' }    // C is added
        ]
    };
    const newRootVNode = App(appState);

    // In a real framework, the diff(currentRootVNode, newRootVNode) would happen here,
    // and only the necessary real DOM updates would occur.
    console.log('Framework would now diff old and new VDOM, then apply minimal changes.');

    // For this conceptual example, we simulate the *result* by re-rendering
    if (rootContainer) {
        rootContainer.innerHTML = '';
        rootContainer.appendChild(renderVNode(newRootVNode));
        currentRootVNode = newRootVNode; // Update the current VTree
        console.log('App conceptually re-rendered after state update.');
    }

}, 3000);

/* 
HTML Structure for testing:
<div id="app-root"></div>
*/