/*
 * Decoding the JavaScript Proxy Mechanism: The Foundation of Interception
 * Objective: Understand the core concept of Proxy and Reflect, and how to create a basic proxy.
 */

// 1. The Target Object: The object we want to wrap and control.
const userProfile = {
    name: 'John Doe',
    age: 30,
    email: 'john.doe@example.com'
};

// 2. The Handler Object: Defines the 'traps' (methods) to intercept operations.
const userProfileHandler = {
    // The 'get' trap intercepts property read operations.
    // Parameters: target (the original object), prop (the property name), receiver (the proxy itself).
    get(target, prop, receiver) {
        console.log(`GET operation detected on property: '${String(prop)}'`);
        // Use Reflect.get to correctly retrieve the property value.
        // Reflect ensures the 'this' context is preserved and handles default behavior.
        return Reflect.get(target, prop, receiver);
    },

    // The 'set' trap intercepts property write operations.
    // Parameters: target, prop, value (the new value), receiver.
    set(target, prop, value, receiver) {
        console.log(`SET operation detected on property: '${String(prop)}' to value: '${value}'`);
        // Perform basic validation (e.g., prevent setting a non-string name).
        if (prop === 'name' && typeof value !== 'string') {
            console.error('Validation Error: Name must be a string.');
            return false; // Indicate failure to set the property.
        }
        // Use Reflect.set to correctly set the property value.
        // Essential for maintaining integrity and triggering default behaviors.
        return Reflect.set(target, prop, value, receiver);
    }
};

// 3. Creating the Proxy: Wrapping the target with the handler.
const proxiedUserProfile = new Proxy(userProfile, userProfileHandler);

// --- Demonstrating Proxy in action ---

console.log('\n--- Reading Properties ---');
console.log('Accessing name:', proxiedUserProfile.name); // Triggers 'get' trap
console.log('Accessing age:', proxiedUserProfile.age);   // Triggers 'get' trap

console.log('\n--- Modifying Properties ---');
proxiedUserProfile.age = 31; // Triggers 'set' trap
console.log('Updated age:', proxiedUserProfile.age);

proxiedUserProfile.email = 'new.john@example.com'; // Triggers 'set' trap
console.log('Updated email:', proxiedUserProfile.email);

console.log('\n--- Attempting Invalid Modification ---');
proxiedUserProfile.name = 123; // Triggers 'set' trap, validation fails
console.log('Name after invalid attempt:', proxiedUserProfile.name); // Name remains 'John Doe'

console.log('\n--- Adding New Property ---');
proxiedUserProfile.location = 'New York'; // Triggers 'set' trap for a new property
console.log('Location:', proxiedUserProfile.location);

// Key takeaways from this example:
// - Proxy acts as an intermediary for all operations on the proxied object.
// - The 'handler' object defines specific 'traps' to intercept operations.
// - 'Reflect' API provides methods mirroring internal operations, crucial for proper default behavior and preserving 'this'.
// - Validation logic can be seamlessly integrated into 'set' traps.

/*
 * Forge Data Validation with Proxies: Ensuring Integrity at the Source
 * Objective: Implement robust data validation using the 'set' trap of a JavaScript Proxy.
 */

// 1. Define the initial data structure and validation rules.
const productSchema = {
    name: { type: 'string', minLength: 3, required: true },
    price: { type: 'number', min: 0.01, required: true },
    stock: { type: 'number', integer: true, min: 0, required: true },
    category: { type: 'string', enum: ['Electronics', 'Books', 'Food'], required: false }
};

// 2. The Target Object: A product instance.
const product = {
    name: 'Laptop',
    price: 1200.50,
    stock: 10,
    category: 'Electronics'
};

// 3. The Handler Object: Contains validation logic in the 'set' trap.
const productValidatorHandler = {
    set(target, prop, value, receiver) {
        const schema = productSchema[prop];

        // If no schema defined for the property, allow assignment by default
        // or throw an error if strict schema enforcement is desired.
        if (!schema) {
            console.warn(`Warning: No validation schema for property '${String(prop)}'.`);
            return Reflect.set(target, prop, value, receiver);
        }

        // --- Basic Type Validation ---
        if (schema.type && typeof value !== schema.type) {
            console.error(`Validation Error for '${String(prop)}': Expected type '${schema.type}', got '${typeof value}'.`);
            return false;
        }

        // --- 'required' Validation ---
        if (schema.required && (value === undefined || value === null || (typeof value === 'string' && value.trim() === ''))) {
            console.error(`Validation Error for '${String(prop)}': This field is required.`);
            return false;
        }

        // --- String Length Validation ---
        if (schema.type === 'string' && schema.minLength && value.length < schema.minLength) {
            console.error(`Validation Error for '${String(prop)}': Minimum length is ${schema.minLength}.`);
            return false;
        }

        // --- Number Range Validation ---
        if (schema.type === 'number') {
            if (schema.min !== undefined && value < schema.min) {
                console.error(`Validation Error for '${String(prop)}': Minimum value is ${schema.min}.`);
                return false;
            }
            if (schema.max !== undefined && value > schema.max) {
                console.error(`Validation Error for '${String(prop)}': Maximum value is ${schema.max}.`);
                return false;
            }
            if (schema.integer && !Number.isInteger(value)) {
                console.error(`Validation Error for '${String(prop)}': Expected an integer.`);
                return false;
            }
        }

        // --- Enum Validation (for categories, etc.) ---
        if (schema.enum && !schema.enum.includes(value)) {
            console.error(`Validation Error for '${String(prop)}': Value '${value}' is not allowed. Must be one of ${schema.enum.join(', ')}.`);
            return false;
        }

        // If all validations pass, set the property using Reflect.
        console.log(`Property '${String(prop)}' successfully set to '${value}'.`);
        return Reflect.set(target, prop, value, receiver);
    },

    // Optional: Add a 'get' trap for custom read behavior (e.g., sanitization or formatting).
    get(target, prop, receiver) {
        // Example: If 'name' is accessed, ensure it's always trimmed.
        if (prop === 'name' && typeof target[prop] === 'string') {
            return target[prop].trim();
        }
        return Reflect.get(target, prop, receiver);
    }
};

// 4. Create the proxied product object.
const validatedProduct = new Proxy(product, productValidatorHandler);

// --- Demonstrating Validation in Action ---
console.log('\n--- Valid Updates ---');
validatedProduct.price = 1250.00; // Valid
validatedProduct.stock = 15;     // Valid
validatedProduct.name = 'Super Laptop'; // Valid

console.log('\n--- Invalid Updates (Validation Fails) ---');
validatedProduct.price = -50;     // Invalid: price < min
validatedProduct.stock = 5.5;     // Invalid: stock not an integer
validatedProduct.name = 'L';      // Invalid: name length < minLength
validatedProduct.category = 'Books'; // Valid category
validatedProduct.category = 'Furniture'; // Invalid category (not in enum)
validatedProduct.name = '';       // Invalid: name is required and empty

console.log('\n--- Current Product State ---');
console.log(validatedProduct); // Check the final state of the product.
// Output will show only successful changes applied.

// This example demonstrates how to centralize and enforce validation rules,
// making your data models more robust and self-validating.

/*
 * Activate Reactivity Using Proxy: Dynamic State Management
 * Objective: Demonstrate how to build a simple reactive system using the Proxy's 'set' trap to trigger side effects.
 */

// 1. A simple 'render' function that simulates UI updates.
// In a real-world scenario, this would update DOM elements.
const renderUI = (data) => {
    const appDiv = document.getElementById('app');
    if (appDiv) {
        appDiv.innerHTML = `
            <h2>User Profile</h2>
            <p><strong>Name:</strong> ${data.name}</p>
            <p><strong>Age:</strong> ${data.age}</p>
            <p><strong>Status:</strong> ${data.status}</p>
            <p style="color: ${data.age > 60 ? 'red' : 'green'};"><strong>Senior Citizen Status:</strong> ${data.age > 60 ? 'Yes' : 'No'}</p>
            <p><strong>Message:</strong> ${data.message || 'No message.'}</p>
            <p><strong>Updated At:</strong> ${new Date().toLocaleTimeString()}</p>
        `;
    } else {
        console.log(`[UI Rendered] Name: ${data.name}, Age: ${data.age}, Status: ${data.status}, Message: ${data.message || 'No message.'}`);
    }
};

// 2. The Target Object: The data we want to make reactive.
const reactiveState = {
    name: 'Alice',
    age: 25,
    status: 'active',
    message: ''
};

// 3. The Handler Object: Implements reactivity logic in the 'set' trap.
const reactiveHandler = {
    set(target, prop, value, receiver) {
        const oldValue = Reflect.get(target, prop, receiver);

        // Only trigger update if the value has actually changed
        if (oldValue === value) {
            return true; // No change, no need to trigger side effects
        }

        // Perform the actual property assignment.
        const success = Reflect.set(target, prop, value, receiver);

        if (success) {
            console.log(`[Reactive Update] Property '${String(prop)}' changed from '${oldValue}' to '${value}'.`);
            // Trigger side effect: re-render the UI or notify observers.
            renderUI(target); // 'target' here is the original object, which now holds the updated value.
        }
        return success;
    }
};

// 4. Create the reactive proxy.
const appState = new Proxy(reactiveState, reactiveHandler);

// --- Initial Render ---
console.log('--- Initial State ---');
renderUI(appState); // Render the initial UI based on appState

// --- Simulate Data Changes Over Time ---
console.log('\n--- First Update: Changing Name ---');
appState.name = 'Alicia'; // Triggers 'set' trap -> renderUI

setTimeout(() => {
    console.log('\n--- Second Update: Changing Age ---');
    appState.age = 26; // Triggers 'set' trap -> renderUI
}, 1000);

setTimeout(() => {
    console.log('\n--- Third Update: Changing Status and Message ---');
    appState.status = 'inactive'; // Triggers 'set' trap -> renderUI
    appState.message = 'User account suspended.'; // Triggers 'set' trap -> renderUI (again)
}, 2500);

setTimeout(() => {
    console.log('\n--- Fourth Update: Age makes user senior citizen ---');
    appState.age = 65; // Triggers 'set' trap -> renderUI (notice color change in status)
}, 4000);

setTimeout(() => {
    console.log('\n--- Attempting to set same value (no render) ---');
    appState.age = 65; // No actual change, 'renderUI' should not be called again if logic is robust.
}, 5500);

// To see this example in action in a browser, create an index.html with:
// <div id="app"></div>
// <script src="your_script_file.js"></script>

/*
 * Optimize Performance & Master Advanced Proxy Use Cases: Beyond Basics
 * Objective: Explore advanced Proxy capabilities, the role of Reflect, and best practices for performance and specific scenarios.
 */

// 1. Read-Only Proxy: Prevent modification of an object.
const immutableData = {
    id: 1,
    name: 'Configuration A',
    version: '1.0.0'
};

const readOnlyHandler = {
    set(target, prop, value, receiver) {
        console.error(`Attempted to modify read-only property '${String(prop)}'. Operation denied.`);
        return false; // Prevent modification
    },
    deleteProperty(target, prop) {
        console.error(`Attempted to delete read-only property '${String(prop)}'. Operation denied.`);
        return false; // Prevent deletion
    },
    // Allow reading properties normally
    get(target, prop, receiver) {
        return Reflect.get(target, prop, receiver);
    }
};

const readOnlyConfig = new Proxy(immutableData, readOnlyHandler);

console.log('\n--- Read-Only Proxy Demonstration ---');
console.log('Reading name:', readOnlyConfig.name);
readOnlyConfig.version = '1.0.1'; // Error logged, value unchanged
delete readOnlyConfig.id;          // Error logged, property not deleted
console.log('Version after attempt:', readOnlyConfig.version);
console.log('ID after attempt:', readOnlyConfig.id);

// 2. Negative Array Indexing Proxy: Access elements from the end of an array.
const numbers = [10, 20, 30, 40, 50];

const negativeIndexHandler = {
    get(target, prop, receiver) {
        // Convert property to number if it's a string representation of an integer
        const index = Number(prop);

        // If it's a negative integer, calculate the correct index from the end.
        if (Number.isInteger(index) && index < 0) {
            return Reflect.get(target, target.length + index, receiver);
        }

        // For non-negative or non-integer properties, use default behavior.
        return Reflect.get(target, prop, receiver);
    },
    // For 'set' on negative indices, you might want to disallow or map to positive.
    // Here, we'll disallow for simplicity.
    set(target, prop, value, receiver) {
        const index = Number(prop);
        if (Number.isInteger(index) && index < 0) {
            console.error(`Attempted to set property using negative index '${prop}'. Operation denied.`);
            return false;
        }
        return Reflect.set(target, prop, value, receiver);
    }
};

const proxiedNumbers = new Proxy(numbers, negativeIndexHandler);

console.log('\n--- Negative Array Indexing Proxy Demonstration ---');
console.log('Last element (proxiedNumbers[-1]):', proxiedNumbers[-1]);  // Accesses 50
console.log('Second to last (proxiedNumbers[-2]):', proxiedNumbers[-2]); // Accesses 40
console.log('First element (proxiedNumbers[0]):', proxiedNumbers[0]);
console.log('Length (proxiedNumbers.length):', proxiedNumbers.length);

proxiedNumbers[-1] = 99; // Error logged, value unchanged
console.log('Last element after attempt:', proxiedNumbers[-1]);

// 3. Simple Caching/Memoization Proxy (Illustrative, not a full solution)
const expensiveFunction = (n) => {
    console.log(`Calculating expensive function for ${n}...`);
    return n * 2;
};

const cache = new Map();
const memoizationHandler = {
    apply(target, thisArg, argumentsList) {
        const key = JSON.stringify(argumentsList); // Simple key for memoization
        if (cache.has(key)) {
            console.log(`Cache hit for ${key}!`);
            return cache.get(key);
        }
        console.log(`Cache miss for ${key}. Calculating...`);
        const result = Reflect.apply(target, thisArg, argumentsList);
        cache.set(key, result);
        return result;
    }
};

const memoizedExpensiveFunction = new Proxy(expensiveFunction, memoizationHandler);

console.log('\n--- Memoization Proxy Demonstration ---');
console.log('Result 1:', memoizedExpensiveFunction(5));
console.log('Result 2:', memoizedExpensiveFunction(10));
console.log('Result 3:', memoizedExpensiveFunction(5)); // Cache hit
console.log('Result 4:', memoizedExpensiveFunction(10)); // Cache hit

// Key learnings from these advanced examples:
// - Proxies can implement diverse architectural patterns (immutability, custom data structures).
// - The 'Reflect' API is crucial for safe and correct forwarding of operations.
// - Consider performance implications, especially with deep proxies or complex trap logic.