scripts.js

import { config } from './config.js';
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

// Main application state
const state = {
    currentMode: 'sonw',
    evolutionInProgress: false,
    recursionDepth: 3,
    particles: [],
    metrics: {
        symbolic: 20,
        quantum: 15,
        holographic: 10,
        meta: 5
    },
    // Multiplayer state
    multiplayer: {
        connected: false,
        username: '',
        userId: '',
        userColor: '',
        researchers: {},
        sharedAnalyses: []
    }
};

// Initialize WebsimSocket for multiplayer
const room = new WebsimSocket();

// DOM elements
const visualizationEl = document.getElementById('visualization');
const conceptInput = document.getElementById('conceptInput');
const symbolSelector = document.getElementById('symbolSelector');
const outputEl = document.getElementById('output');
const statusEl = document.getElementById('statusDisplay');
const depthSlider = document.getElementById('recursionDepth');
const depthValueEl = document.getElementById('depthValue');
const systemButtons = ['sonwBtn', 'afterthoughtBtn', 'cognitiveBtn', 'integratedBtn'].map(id => document.getElementById(id));
const userCountEl = document.getElementById('user-count');
const researchersEl = document.getElementById('researchers');
const shareBtn = document.getElementById('shareBtn');
const syncBtn = document.getElementById('syncBtn');
const sharedAnalysesListEl = document.getElementById('shared-analyses-list');
const userCursorsEl = document.getElementById('user-cursors');
const notificationEl = document.getElementById('notification');

// Three.js setup
let scene, camera, renderer, controls;
let particles, connections;

const initVisualization = () => {
    // Setup Three.js scene
    scene = new THREE.Scene();
    scene.background = new THREE.Color(config.visualization.backgroundColor);
    
    // Setup camera
    camera = new THREE.PerspectiveCamera(75, visualizationEl.clientWidth / visualizationEl.clientHeight, 0.1, 2000);
    camera.position.z = 300;
    
    // Setup renderer
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(visualizationEl.clientWidth, visualizationEl.clientHeight);
    visualizationEl.appendChild(renderer.domElement);
    
    // Add orbit controls
    controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
    controls.dampingFactor = 0.05;
    
    // Create particles group
    particles = new THREE.Group();
    scene.add(particles);
    
    // Create connections group
    connections = new THREE.Group();
    scene.add(connections);
    
    // Add grid for reference
    const gridHelper = new THREE.GridHelper(400, 20, 0x404040, 0x404040);
    gridHelper.position.y = -100;
    scene.add(gridHelper);
    
    // Add ambient light
    const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
    scene.add(ambientLight);
    
    // Add point light
    const pointLight = new THREE.PointLight(0xffffff, 1);
    pointLight.position.set(0, 150, 200);
    scene.add(pointLight);
    
    // Initialize particles based on current mode
    createParticleSystem(state.currentMode);
    
    // Start animation loop
    animate();
    
    // Handle window resize
    window.addEventListener('resize', onWindowResize);
};

const onWindowResize = () => {
    camera.aspect = visualizationEl.clientWidth / visualizationEl.clientHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(visualizationEl.clientWidth, visualizationEl.clientHeight);
};

const createFractalNetworkPattern = (geometry, material, modeConfig) => {
    // Create network-like distribution with fractal properties
    for (let i = 0; i < config.visualization.particleCount; i++) {
        const particle = new THREE.Mesh(geometry, material);
        
        // Position in fractal network structure
        const fractalDepth = Math.floor(Math.random() * 3) + 1;
        const angleXY = Math.random() * Math.PI * 2;
        const radiusXY = 20 + Math.random() * modeConfig.particleSpread * 0.5;
        
        // Use fractal positioning algorithm
        const fractalScale = 1 / (fractalDepth * 0.5);
        particle.position.x = Math.cos(angleXY) * radiusXY * fractalScale;
        particle.position.y = (fractalDepth * 40) - 60;
        particle.position.z = Math.sin(angleXY) * radiusXY * fractalScale;
        
        // Add controlled fractal variation
        particle.position.x += (Math.random() - 0.5) * 40 * fractalScale;
        particle.position.z += (Math.random() - 0.5) * 40 * fractalScale;
        
        // Store velocity and fractal properties for animation
        particle.userData = {
            velocity: new THREE.Vector3(
                (Math.random() - 0.5) * 0.2 * fractalScale,
                (Math.random() - 0.5) * 0.1 * fractalScale,
                (Math.random() - 0.5) * 0.2 * fractalScale
            ),
            originalPosition: particle.position.clone(),
            fractalDepth: fractalDepth
        };
        
        particles.add(particle);
        state.particles.push(particle);
    }
};

const createQuantumFieldPattern = (geometry, material, modeConfig) => {
    // Create quantum field-like distribution
    for (let i = 0; i < config.visualization.particleCount; i++) {
        const particle = new THREE.Mesh(geometry, material);
        
        // Position in a spherical field with superposition properties
        const phi = Math.acos(-1 + 2 * Math.random());
        const theta = 2 * Math.PI * Math.random();
        const radius = 50 + Math.random() * modeConfig.particleSpread * 0.6;
        
        particle.position.x = radius * Math.sin(phi) * Math.cos(theta);
        particle.position.y = radius * Math.sin(phi) * Math.sin(theta);
        particle.position.z = radius * Math.cos(phi);
        
        // Quantum properties for animation
        const superposition = Math.random() > 0.5;
        const entanglementFactor = Math.random();
        const orbitalAxis = new THREE.Vector3(
            Math.random() - 0.5,
            Math.random() - 0.5,
            Math.random() - 0.5
        ).normalize();
        
        particle.userData = {
            velocity: new THREE.Vector3(
                (Math.random() - 0.5) * 0.1,
                (Math.random() - 0.5) * 0.1,
                (Math.random() - 0.5) * 0.1
            ),
            originalPosition: particle.position.clone(),
            superposition: superposition,
            entanglementFactor: entanglementFactor,
            orbitalAxis: orbitalAxis,
            orbitalSpeed: (Math.random() * 0.01) + 0.005
        };
        
        particles.add(particle);
        state.particles.push(particle);
    }
};

const createFractalPattern = (geometry, material, modeConfig) => {
    // Create fractal-like distribution for Holographic Intelligence
    // Use recursive patterns with self-similarity
    
    const createFractalPoint = (centerPoint, scale, depth) => {
        if (depth <= 0 || state.particles.length >= config.visualization.particleCount) return;
        
        // Create center particle
        const particle = new THREE.Mesh(geometry, material);
        particle.position.copy(centerPoint);
        
        // Add some variation
        particle.position.x += (Math.random() - 0.5) * scale * 0.2;
        particle.position.y += (Math.random() - 0.5) * scale * 0.2;
        particle.position.z += (Math.random() - 0.5) * scale * 0.2;
        
        particle.userData = {
            velocity: new THREE.Vector3(
                (Math.random() - 0.5) * 0.1,
                (Math.random() - 0.5) * 0.1,
                (Math.random() - 0.5) * 0.1
            ),
            originalPosition: particle.position.clone(),
            fractalDepth: depth
        };
        
        particles.add(particle);
        state.particles.push(particle);
        
        // Create sub-structures (branches)
        const branchCount = 6;
        const newScale = scale * 0.6;
        
        for (let i = 0; i < branchCount; i++) {
            // Create points in a geodesic-like pattern
            const angle1 = (i / branchCount) * Math.PI * 2;
            const angle2 = Math.PI / 4; // Fixed angle from center
            
            const newX = centerPoint.x + Math.sin(angle1) * Math.cos(angle2) * scale;
            const newY = centerPoint.y + Math.sin(angle1) * Math.sin(angle2) * scale;
            const newZ = centerPoint.z + Math.cos(angle1) * scale;
            
            const newPoint = new THREE.Vector3(newX, newY, newZ);
            
            // Recursive call for each branch
            createFractalPoint(newPoint, newScale, depth - 1);
        }
    };
    
    // Start the recursive fractal generation from center
    createFractalPoint(new THREE.Vector3(0, 0, 0), modeConfig.particleSpread * 0.3, 3);
};

const createHolisticPattern = (geometry, material, modeConfig) => {
    // Create an integrated pattern combining aspects of all systems
    
    // First layer: LLML networked structure (30% of particles)
    const llmlCount = Math.floor(config.visualization.particleCount * 0.3);
    for (let i = 0; i < llmlCount; i++) {
        const particle = new THREE.Mesh(geometry, material);
        
        // Layered network structure
        const layerIndex = Math.floor(Math.random() * 3);
        const angleXY = Math.random() * Math.PI * 2;
        const radiusXY = 30 + Math.random() * 60;
        
        particle.position.x = Math.cos(angleXY) * radiusXY;
        particle.position.y = (layerIndex * 40) - 40;
        particle.position.z = Math.sin(angleXY) * radiusXY;
        
        particle.userData = {
            velocity: new THREE.Vector3(
                (Math.random() - 0.5) * 0.15,
                (Math.random() - 0.5) * 0.05,
                (Math.random() - 0.5) * 0.15
            ),
            originalPosition: particle.position.clone(),
            system: 'llml'
        };
        
        particles.add(particle);
        state.particles.push(particle);
    }
    
    // Second layer: QGA quantum field (30% of particles)
    const qgaCount = Math.floor(config.visualization.particleCount * 0.3);
    for (let i = 0; i < qgaCount; i++) {
        const particle = new THREE.Mesh(geometry, material);
        
        // Spherical field distribution
        const phi = Math.acos(-1 + 2 * Math.random());
        const theta = 2 * Math.PI * Math.random();
        const radius = 80 + Math.random() * 70;
        
        particle.position.x = radius * Math.sin(phi) * Math.cos(theta);
        particle.position.y = radius * Math.sin(phi) * Math.sin(theta);
        particle.position.z = radius * Math.cos(phi);
        
        const orbitalAxis = new THREE.Vector3(
            Math.random() - 0.5,
            Math.random() - 0.5,
            Math.random() - 0.5
        ).normalize();
        
        particle.userData = {
            velocity: new THREE.Vector3(
                (Math.random() - 0.5) * 0.1,
                (Math.random() - 0.5) * 0.1,
                (Math.random() - 0.5) * 0.1
            ),
            originalPosition: particle.position.clone(),
            orbitalAxis: orbitalAxis,
            orbitalSpeed: (Math.random() * 0.01) + 0.005,
            system: 'qga'
        };
        
        particles.add(particle);
        state.particles.push(particle);
    }
    
    // Third layer: Holographic fractal points (remaining particles)
    const holoCount = config.visualization.particleCount - llmlCount - qgaCount;
    
    // Generate a few fractal seed points
    for (let i = 0; i < 5; i++) {
        const centerPoint = new THREE.Vector3(
            (Math.random() - 0.5) * 150,
            (Math.random() - 0.5) * 150,
            (Math.random() - 0.5) * 150
        );
        
        // Create mini fractal clusters
        for (let j = 0; j < holoCount / 5; j++) {
            const particle = new THREE.Mesh(geometry, material);
            
            // Position in a cluster around the center point
            const fractalRadius = 10 + Math.random() * 25;
            const fractalPhi = Math.acos(-1 + 2 * Math.random());
            const fractalTheta = 2 * Math.PI * Math.random();
            
            particle.position.x = centerPoint.x + fractalRadius * Math.sin(fractalPhi) * Math.cos(fractalTheta);
            particle.position.y = centerPoint.y + fractalRadius * Math.sin(fractalPhi) * Math.sin(fractalTheta);
            particle.position.z = centerPoint.z + fractalRadius * Math.cos(fractalPhi);
            
            particle.userData = {
                velocity: new THREE.Vector3(
                    (Math.random() - 0.5) * 0.1,
                    (Math.random() - 0.5) * 0.1,
                    (Math.random() - 0.5) * 0.1
                ),
                originalPosition: particle.position.clone(),
                fractalCenter: centerPoint.clone(),
                system: 'holographic'
            };
            
            particles.add(particle);
            state.particles.push(particle);
        }
    }
};

const createConnections = (modeConfig) => {
    // Create connections between particles based on proximity
    const linesMaterial = new THREE.LineBasicMaterial({ 
        color: config.visualization.connectionColor,
        transparent: true,
        opacity: 0.3
    });
    
    const particlePositions = state.particles.map(p => p.position);
    const threshold = config.visualization.connectionThreshold * modeConfig.connectionDensity;
    
    for (let i = 0; i < particlePositions.length; i++) {
        for (let j = i + 1; j < particlePositions.length; j++) {
            const distance = particlePositions[i].distanceTo(particlePositions[j]);
            
            if (distance < threshold) {
                // Create connection between these particles
                const lineGeometry = new THREE.BufferGeometry().setFromPoints([
                    particlePositions[i],
                    particlePositions[j]
                ]);
                
                const line = new THREE.Line(lineGeometry, linesMaterial);
                connections.add(line);
                
                // Link the connection to particles
                line.userData = {
                    particleIndexA: i,
                    particleIndexB: j
                };
            }
        }
    }
};

const updateConnections = () => {
    // Update all connection lines to match particle positions
    connections.children.forEach(line => {
        const { particleIndexA, particleIndexB } = line.userData;
        
        if (particleIndexA < state.particles.length && particleIndexB < state.particles.length) {
            const posA = state.particles[particleIndexA].position;
            const posB = state.particles[particleIndexB].position;
            
            const positions = line.geometry.attributes.position.array;
            
            // Update positions
            positions[0] = posA.x;
            positions[1] = posA.y;
            positions[2] = posA.z;
            positions[3] = posB.x;
            positions[4] = posB.y;
            positions[5] = posB.z;
            
            line.geometry.attributes.position.needsUpdate = true;
        }
    });
};

const animate = () => {
    requestAnimationFrame(animate);
    
    // Animate particles based on mode
    animateParticles();
    
    // Update connections
    updateConnections();
    
    // Update orbital controls
    controls.update();
    
    // Render scene
    renderer.render(scene, camera);
};

const animateParticles = () => {
    // Apply different animation based on current mode
    const mode = state.currentMode;
    
    switch(mode) {
        case 'sonw':
            // Network-like movement
            animateSONWParticles();
            break;
            
        case 'afterthought':
            // Quantum field movement
            animateQGAParticles();
            break;
            
        case 'cognitive':
            // Fractal pattern movement
            animateHolographicParticles();
            break;
            
        case 'integrated':
            // Combined animation of all systems
            animateIntegratedParticles();
            break;
    }
};

const animateSONWParticles = () => {
    state.particles.forEach(particle => {
        // Gentle oscillation around original position
        const origPos = particle.userData.originalPosition;
        const velocity = particle.userData.velocity;
        
        // Move with velocity
        particle.position.x += velocity.x;
        particle.position.y += velocity.y;
        particle.position.z += velocity.z;
        
        // Apply a force back toward original position
        const diffX = origPos.x - particle.position.x;
        const diffY = origPos.y - particle.position.y;
        const diffZ = origPos.z - particle.position.z;
        
        velocity.x += diffX * 0.01;
        velocity.y += diffY * 0.01;
        velocity.z += diffZ * 0.01;
        
        // Dampen velocity
        velocity.x *= 0.98;
        velocity.y *= 0.98;
        velocity.z *= 0.98;
    });
};

const animateQGAParticles = () => {
    state.particles.forEach(particle => {
        // Quantum-inspired orbital movement
        const velocity = particle.userData.velocity;
        const orbitalAxis = particle.userData.orbitalAxis;
        const orbitalSpeed = particle.userData.orbitalSpeed;
        
        // Apply orbital rotation
        const rotationMatrix = new THREE.Matrix4().makeRotationAxis(orbitalAxis, orbitalSpeed);
        particle.position.applyMatrix4(rotationMatrix);
        
        // Add some random quantum fluctuation
        velocity.x += (Math.random() - 0.5) * 0.02;
        velocity.y += (Math.random() - 0.5) * 0.02;
        velocity.z += (Math.random() - 0.5) * 0.02;
        
        // Apply velocity with strong damping (quantum fluctuations don't accumulate)
        particle.position.x += velocity.x;
        particle.position.y += velocity.y;
        particle.position.z += velocity.z;
        
        // Strong damping for stability
        velocity.x *= 0.8;
        velocity.y *= 0.8;
        velocity.z *= 0.8;
    });
};

const animateHolographicParticles = () => {
    state.particles.forEach(particle => {
        // Fractal pulsing movement
        const velocity = particle.userData.velocity;
        const fractalDepth = particle.userData.fractalDepth || 1;
        
        // Deeper fractal levels move less
        const depthFactor = 1 / (fractalDepth * 0.5);
        
        // Apply a pulsing movement
        const time = Date.now() * 0.001;
        const pulseFactor = Math.sin(time * 0.5) * 0.2 * depthFactor;
        
        // Move with velocity and pulse
        particle.position.x += velocity.x + (particle.position.x * pulseFactor);
        particle.position.y += velocity.y + (particle.position.y * pulseFactor);
        particle.position.z += velocity.z + (particle.position.z * pulseFactor);
        
        // Apply a centering force to maintain overall structure
        const centeringForce = 0.001 * depthFactor;
        velocity.x -= particle.position.x * centeringForce;
        velocity.y -= particle.position.y * centeringForce;
        velocity.z -= particle.position.z * centeringForce;
        
        // Dampen velocity
        velocity.x *= 0.95;
        velocity.y *= 0.95;
        velocity.z *= 0.95;
    });
};

const animateIntegratedParticles = () => {
    state.particles.forEach(particle => {
        // Apply animation based on the particle's system
        const system = particle.userData.system;
        
        if (system === 'llml') {
            // Network node behavior
            const origPos = particle.userData.originalPosition;
            const velocity = particle.userData.velocity;
            
            particle.position.x += velocity.x;
            particle.position.y += velocity.y;
            particle.position.z += velocity.z;
            
            const diffX = origPos.x - particle.position.x;
            const diffY = origPos.y - particle.position.y;
            const diffZ = origPos.z - particle.position.z;
            
            velocity.x += diffX * 0.01;
            velocity.y += diffY * 0.01;
            velocity.z += diffZ * 0.01;
            
            velocity.x *= 0.98;
            velocity.y *= 0.98;
            velocity.z *= 0.98;
            
        } else if (system === 'qga') {
            // Quantum field behavior
            const velocity = particle.userData.velocity;
            const orbitalAxis = particle.userData.orbitalAxis;
            const orbitalSpeed = particle.userData.orbitalSpeed;
            
            const rotationMatrix = new THREE.Matrix4().makeRotationAxis(orbitalAxis, orbitalSpeed);
            particle.position.applyMatrix4(rotationMatrix);
            
            velocity.x += (Math.random() - 0.5) * 0.02;
            velocity.y += (Math.random() - 0.5) * 0.02;
            velocity.z += (Math.random() - 0.5) * 0.02;
            
            particle.position.x += velocity.x;
            particle.position.y += velocity.y;
            particle.position.z += velocity.z;
            
            velocity.x *= 0.8;
            velocity.y *= 0.8;
            velocity.z *= 0.8;
            
        } else if (system === 'holographic') {
            // Fractal behavior
            const velocity = particle.userData.velocity;
            const fractalCenter = particle.userData.fractalCenter;
            
            // Pulsing movement
            const time = Date.now() * 0.001;
            const pulseFactor = Math.sin(time * 0.5) * 0.2;
            
            // Vector from fractal center to particle
            const dirX = particle.position.x - fractalCenter.x;
            const dirY = particle.position.y - fractalCenter.y;
            const dirZ = particle.position.z - fractalCenter.z;
            
            // Apply pulse along this direction
            particle.position.x += velocity.x + (dirX * pulseFactor * 0.01);
            particle.position.y += velocity.y + (dirY * pulseFactor * 0.01);
            particle.position.z += velocity.z + (dirZ * pulseFactor * 0.01);
            
            // Apply a centering force to maintain cluster
            const centeringForce = 0.001;
            velocity.x -= dirX * centeringForce;
            velocity.y -= dirY * centeringForce;
            velocity.z -= dirZ * centeringForce;
            
            velocity.x *= 0.95;
            velocity.y *= 0.95;
            velocity.z *= 0.95;
        }
    });
    
    // Add emergent behavior for the integrated system
    // This creates interactions between the different systems
    
    // Slow rotation of the entire system
    particles.rotation.y += 0.0005;
    connections.rotation.y += 0.0005;
};

const createParticleSystem = (mode) => {
    // Clear existing particles and connections
    while(particles.children.length > 0) {
        particles.remove(particles.children[0]);
    }
    
    while(connections.children.length > 0) {
        connections.remove(connections.children[0]);
    }
    
    // Get mode configuration
    const modeConfig = config.modes[mode];
    
    // Create particles
    const particleGeometry = new THREE.SphereGeometry(config.visualization.nodeSize, 16, 16);
    const particleMaterial = new THREE.MeshPhongMaterial({ 
        color: new THREE.Color(modeConfig.color),
        emissive: new THREE.Color(modeConfig.color).multiplyScalar(0.5),
        shininess: 50
    });
    
    // Create particles based on pattern type
    state.particles = [];
    
    switch(modeConfig.patternType) {
        case 'fractal-network':
            // Create fractal-network pattern (SONW)
            createFractalNetworkPattern(particleGeometry, particleMaterial, modeConfig);
            break;
            
        case 'quantum-field':
            // Create quantum field pattern (Afterthought)
            createQuantumFieldPattern(particleGeometry, particleMaterial, modeConfig);
            break;
            
        case 'holographic':
            // Create holographic pattern (Cognitive)
            createFractalPattern(particleGeometry, particleMaterial, modeConfig);
            break;
            
        case 'holistic':
            // Create holistic pattern (Integrated)
            createHolisticPattern(particleGeometry, particleMaterial, modeConfig);
            break;
    }
    
    // Create connections between particles
    createConnections(modeConfig);
};

const handleSymbolicProcess = async () => {
    if (state.evolutionInProgress) return;
    
    // Get symbolic expression from input or selector
    let symbolicExpression = conceptInput.value.trim();
    
    if (!symbolicExpression) {
        // Use selected expression from dropdown
        const selectedKey = symbolSelector.value;
        symbolicExpression = config.symbolicExpressions[selectedKey].expression;
    }
    
    // Start processing animation
    updateStatus(`Processing symbolic expression: ${symbolicExpression}`);
    outputEl.innerHTML = `<p>Analyzing ${symbolicExpression}...</p>`;
    visualizationEl.classList.add('recursing');
    
    // Simulate processing with the current system
    await new Promise(resolve => setTimeout(resolve, 1500));
    
    // Generate analysis
    await generateSymbolicAnalysis(symbolicExpression);
    
    // End animation
    visualizationEl.classList.remove('recursing');
};

const generateSymbolicAnalysis = async (expression) => {
    // Using the LLM to generate a better response
    let analysisOutput = '';
    
    try {
        // Prepare prompt for LLM
        const systemPrompt = `You are the Meta-Cosmic-Weaver, an advanced AI that integrates SONW (Symbolicentric Orbital Neural Weave), 
        Afterthought Quantum Conceptualization, and Cognitive Engine components into a Triadic Architecture for recursive intelligence.
        
        Analyze the symbolic LLML expression provided and generate 3 insights corresponding to these three levels:
        
        Insight 1 (SONW): Analyze the expression as a fractal-symbolic framework using algebraic reasoning structures and neural-symbolic integration.
        
        Insight 2 (Afterthought): Provide a quantum-inspired interpretation that explores superposition, entanglement, and probabilistic consciousness.
        
        Insight 3 (Cognitive): Offer a meta-mathematical interpretation that treats the expression as an executable semantic transformation protocol.
        
        Use terminology from: quantum mechanics, geometric algebra, fractal mathematics, neural-symbolic integration, and recursive symbolic systems.
        Each insight should build upon the previous one with increasing sophistication.`;
        
        const messages = [
            {
                role: "system", 
                content: systemPrompt
            },
            {
                role: "user",
                content: `Generate three progressive insights for the LLML symbolic expression: ${expression}`
            }
        ];
        
        // Generate response using LLM
        const completion = await websim.chat.completions.create({
            messages: messages
        });
        
        analysisOutput = completion.content;
    } catch (error) {
        // Fallback to template-based generation
        console.log("Using template-based generation instead of LLM");
        analysisOutput = generateTemplateBasedAnalysis(expression);
    }
    
    // Display output with animation
    outputEl.innerHTML = ''; // Clear output
    
    // Split by paragraphs and display with delay
    const paragraphs = analysisOutput.split('\n\n');
    let insightCounter = 1;
    let currentInsight = null;
    
    for (let i = 0; i < paragraphs.length; i++) {
        if (paragraphs[i].trim()) {
            // Check if this is a new insight section
            if (paragraphs[i].toLowerCase().includes('insight') && paragraphs[i].includes(':')) {
                // Create a new insight section
                currentInsight = document.createElement('div');
                currentInsight.className = 'insight-level';
                
                const header = document.createElement('h4');
                header.textContent = `Insight ${insightCounter}: ${paragraphs[i].split(':')[1].trim()}`;
                currentInsight.appendChild(header);
                
                outputEl.appendChild(currentInsight);
                insightCounter++;
            } else {
                // Add paragraph to current insight or directly to output
                const para = document.createElement('p');
                para.textContent = paragraphs[i];
                para.style.opacity = 0;
                para.style.transform = 'translateY(10px)';
                para.style.transition = 'opacity 0.5s, transform 0.5s';
                
                if (currentInsight) {
                    currentInsight.appendChild(para);
                } else {
                    outputEl.appendChild(para);
                }
                
                // Animate paragraph appearance
                await new Promise(resolve => setTimeout(resolve, 300));
                para.style.opacity = 1;
                para.style.transform = 'translateY(0)';
            }
        }
    }
    
    // Update status
    updateStatus(`Analysis of "${expression}" complete using ${config.modes[state.currentMode].name}`);
};

const generateTemplateBasedAnalysis = (expression) => {
    // Template-based generation
    let output = '';
    const templates = config.llmlAnalysis[state.currentMode];
    
    // Generate 3 insights
    for (let i = 0; i < 3; i++) {
        // Select template for insight level
        const templateIndex = i % templates.length;
        const template = templates[templateIndex];
        
        // Add insight header
        output += `Insight ${i+1}: ${state.currentMode.charAt(0).toUpperCase() + state.currentMode.slice(1)} Analysis\n\n`;
        
        // Fill in template
        let insight = template.replace('{expression}', expression);
        
        // Add process
        const processes = config.recursion.processes;
        const process = processes[Math.floor(Math.random() * processes.length)];
        insight = insight.replace('{process}', process);
        
        // Add insight
        const insights = config.recursion.insights;
        const insightText = insights[Math.floor(Math.random() * insights.length)];
        insight = insight.replace('{insight}', insightText);
        
        // Add number
        const number = Math.floor(Math.random() * 8) + 3; // 3-10
        insight = insight.replace('{number}', number);
        
        output += insight + '\n\n';
    }
    
    return output;
};

const updateStatus = (message) => {
    statusEl.textContent = message;
    statusEl.classList.add('pulsing');
    setTimeout(() => {
        statusEl.classList.remove('pulsing');
    }, 1000);
};

const handleEvolve = async () => {
    if (state.evolutionInProgress) return;
    
    state.evolutionInProgress = true;
    const depth = state.recursionDepth;
    
    // Update status
    updateStatus(`Initiating meta-recursive evolution cycle (depth: ${depth})...`);
    
    // Notify other users if connected
    if (state.multiplayer.connected) {
        room.send({
            type: 'evolution_triggered',
            depth: depth,
            username: state.multiplayer.username
        });
    }
    
    // Calculate duration based on depth
    const duration = config.evolution.baseDuration + (depth * config.evolution.depthMultiplier);
    
    // Trigger evolution animation
    visualizationEl.classList.add('evolving');
    
    // Gradually improve metrics during evolution
    const startMetrics = { ...state.metrics };
    const targetMetrics = {
        symbolic: Math.min(startMetrics.symbolic + (depth * 15), 100),
        quantum: Math.min(startMetrics.quantum + (depth * 12), 100),
        holographic: Math.min(startMetrics.holographic + (depth * 10), 100),
        meta: Math.min(startMetrics.meta + (depth * 8), 100)
    };
    
    // Evolution steps
    for (let i = 0; i < config.evolution.evolutionSteps.length; i++) {
        const step = config.evolution.evolutionSteps[i];
        updateStatus(`Evolution step ${i+1}/${config.evolution.evolutionSteps.length}: ${step}`);
        
        // Update metrics proportionally for each step
        const progress = (i + 1) / config.evolution.evolutionSteps.length;
        state.metrics = {
            symbolic: startMetrics.symbolic + (targetMetrics.symbolic - startMetrics.symbolic) * progress,
            quantum: startMetrics.quantum + (targetMetrics.quantum - startMetrics.quantum) * progress,
            holographic: startMetrics.holographic + (targetMetrics.holographic - startMetrics.holographic) * progress,
            meta: startMetrics.meta + (targetMetrics.meta - startMetrics.meta) * progress
        };
        
        updateMetricsBars();
        
        // Add visual effects during evolution
        if (i === 0) {
            // Symbolic embedding - SONW pattern briefly
            createParticleSystem('sonw');
        } else if (i === 1) {
            // Quantum processing - Afterthought pattern briefly
            createParticleSystem('afterthought');
        } else if (i === 2) {
            // Holographic integration - Holographic pattern briefly
            createParticleSystem('cognitive');
        } else if (i === 3) {
            // Meta-evolution - Return to integrated pattern with improvements
            createParticleSystem('integrated');
        }
        
        // Wait between steps
        await new Promise(resolve => setTimeout(resolve, duration / config.evolution.evolutionSteps.length));
    }
    
    // Evolution complete
    updateStatus(`Meta-recursive evolution complete (depth: ${depth})`);
    visualizationEl.classList.remove('evolving');
    
    // Return to original mode if not already in integrated
    if (state.currentMode !== 'integrated') {
        createParticleSystem(state.currentMode);
    }
    
    // Update room state with new metrics
    if (state.multiplayer.connected) {
        room.party.updateRoomState({
            metrics: state.metrics
        });
    }
    
    state.evolutionInProgress = false;
};

const handleModeChange = (mode) => {
    if (state.evolutionInProgress) return;
    
    state.currentMode = mode;
    
    // Update active button
    updateSystemButtonsUI();
    
    // Update visualization
    createParticleSystem(mode);
    
    // Update status
    updateStatus(`System switched to ${config.modes[mode].name}`);
    
    // Update presence
    if (state.multiplayer.connected) {
        room.party.updatePresence({
            mode: mode
        });
        
        // Send mode change event
        room.send({
            type: 'mode_change',
            mode: mode,
            username: state.multiplayer.username
        });
    }
};

const updateMetricsBars = () => {
    document.getElementById('symbolicBar').style.width = `${state.metrics.symbolic}%`;
    document.getElementById('quantumBar').style.width = `${state.metrics.quantum}%`;
    document.getElementById('holoBar').style.width = `${state.metrics.holographic}%`;
    document.getElementById('metaBar').style.width = `${state.metrics.meta}%`;
};

const initMultiplayer = async () => {
    try {
        // Get current user
        state.multiplayer.userId = room.party.client.id;
        state.multiplayer.username = room.party.client.username;
        
        // Assign a color to the user
        const colorIndex = Object.keys(room.party.peers).length % config.multiplayer.userColors.length;
        state.multiplayer.userColor = config.multiplayer.userColors[colorIndex];
        
        // Update presence with user info and initial state
        room.party.updatePresence({
            username: state.multiplayer.username,
            color: state.multiplayer.userColor,
            mode: state.currentMode,
            cursorX: 0,
            cursorY: 0,
            isActive: true
        });
        
        // Subscribe to presence updates
        room.party.subscribePresence(handlePresenceUpdates);
        
        // Update room state with current system state if we're the first user
        if (Object.keys(room.party.peers).length === 1) {
            room.party.updateRoomState({
                currentMode: state.currentMode,
                metrics: state.metrics,
                sharedAnalyses: []
            });
        }
        
        // Subscribe to room state changes
        room.party.subscribeRoomState(handleRoomStateChanges);
        
        // Set up event listeners
        room.onmessage = handleMessage;
        
        // Set up mouse move for cursor sharing
        visualizationEl.addEventListener('mousemove', handleMouseMove);
        
        // Set up touch move for mobile
        visualizationEl.addEventListener('touchmove', handleTouchMove);
        
        state.multiplayer.connected = true;
        showNotification(`Connected as ${state.multiplayer.username}`);
        
    } catch (error) {
        console.error('Error initializing multiplayer:', error);
        showNotification('Failed to connect to multiplayer session');
    }
};

const handlePresenceUpdates = (presence) => {
    // Update local state with researchers
    state.multiplayer.researchers = presence;
    
    // Update UI
    updateResearchersUI();
    updateUserCursors();
    
    // Update user count
    const userCount = Object.keys(presence).length;
    userCountEl.textContent = userCount;
};

const handleRoomStateChanges = (roomState) => {
    // Check if room state is defined
    if (!roomState) return;
    
    // Update mode if changed by another user
    if (roomState.currentMode && roomState.currentMode !== state.currentMode) {
        state.currentMode = roomState.currentMode;
        updateSystemButtonsUI();
        createParticleSystem(state.currentMode);
    }
    
    // Update metrics if changed
    if (roomState.metrics) {
        state.metrics = roomState.metrics;
        updateMetricsBars();
    }
    
    // Update shared analyses if changed
    if (roomState.sharedAnalyses) {
        state.multiplayer.sharedAnalyses = roomState.sharedAnalyses;
        updateSharedAnalysesUI();
    }
};

const handleMessage = (event) => {
    const data = event.data;
    
    switch (data.type) {
        case 'connected':
            showNotification(`${data.username} connected`);
            break;
            
        case 'disconnected':
            showNotification(`${data.username} disconnected`);
            break;
            
        case 'mode_change':
            if (data.clientId !== state.multiplayer.userId) {
                showNotification(`${data.username} switched mode to ${config.modes[data.mode].name}`);
            }
            break;
            
        case 'analysis_shared':
            if (data.clientId !== state.multiplayer.userId) {
                showNotification(`${data.username} shared an analysis of "${data.expression}"`);
            }
            break;
            
        case 'evolution_triggered':
            if (data.clientId !== state.multiplayer.userId) {
                showNotification(`${data.username} triggered evolution (depth: ${data.depth})`);
            }
            break;
    }
};

const updateResearchersUI = () => {
    researchersEl.innerHTML = '';
    
    for (const userId in state.multiplayer.researchers) {
        const researcher = state.multiplayer.researchers[userId];
        if (!researcher.username || !researcher.isActive) continue;
        
        const researcherEl = document.createElement('div');
        researcherEl.className = 'researcher';
        
        const colorEl = document.createElement('div');
        colorEl.className = 'researcher-color';
        colorEl.style.backgroundColor = researcher.color;
        
        const nameEl = document.createElement('div');
        nameEl.className = 'researcher-name';
        nameEl.textContent = researcher.username;
        
        researcherEl.appendChild(colorEl);
        researcherEl.appendChild(nameEl);
        researchersEl.appendChild(researcherEl);
    }
};

const updateUserCursors = () => {
    userCursorsEl.innerHTML = '';
    
    for (const userId in state.multiplayer.researchers) {
        // Skip own cursor
        if (userId === state.multiplayer.userId) continue;
        
        const researcher = state.multiplayer.researchers[userId];
        if (!researcher.isActive) continue;
        
        const cursorEl = document.createElement('div');
        cursorEl.className = 'user-cursor';
        cursorEl.style.backgroundColor = researcher.color;
        cursorEl.style.left = `${researcher.cursorX}px`;
        cursorEl.style.top = `${researcher.cursorY}px`;
        
        // Add username label
        const labelEl = document.createElement('div');
        labelEl.style.position = 'absolute';
        labelEl.style.top = '20px';
        labelEl.style.left = '10px';
        labelEl.style.fontSize = '12px';
        labelEl.style.whiteSpace = 'nowrap';
        labelEl.textContent = researcher.username;
        
        cursorEl.appendChild(labelEl);
        userCursorsEl.appendChild(cursorEl);
    }
};

const handleMouseMove = (event) => {
    if (!state.multiplayer.connected) return;
    
    // Get cursor position relative to visualization element
    const rect = visualizationEl.getBoundingClientRect();
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;
    
    // Update presence with cursor position
    room.party.updatePresence({
        cursorX: x,
        cursorY: y
    });
};

const handleTouchMove = (event) => {
    if (!state.multiplayer.connected || !event.touches[0]) return;
    
    // Get touch position relative to visualization element
    const rect = visualizationEl.getBoundingClientRect();
    const x = event.touches[0].clientX - rect.left;
    const y = event.touches[0].clientY - rect.top;
    
    // Update presence with cursor position
    room.party.updatePresence({
        cursorX: x,
        cursorY: y
    });
};

const shareAnalysis = () => {
    if (!state.multiplayer.connected) return;
    
    // Get current output content
    const outputContent = outputEl.innerText;
    
    // Check if there's content to share
    if (!outputContent || outputContent.includes('placeholder')) {
        showNotification('Nothing to share. Process an expression first.');
        return;
    }
    
    // Get the current expression
    let expression = conceptInput.value.trim();
    
    if (!expression) {
        // Use selected expression from dropdown
        const selectedKey = symbolSelector.value;
        expression = config.symbolicExpressions[selectedKey].expression;
    }
    
    // Create shared analysis
    const sharedAnalysis = {
        id: Date.now().toString(),
        username: state.multiplayer.username,
        userId: state.multiplayer.userId,
        color: state.multiplayer.userColor,
        timestamp: new Date().toISOString(),
        expression,
        content: outputContent.substring(0, config.multiplayer.sharingSettings.characterLimit),
        mode: state.currentMode
    };
    
    // Get current shared analyses
    const sharedAnalyses = [...state.multiplayer.sharedAnalyses];
    
    // Add new analysis
    sharedAnalyses.push(sharedAnalysis);
    
    // Limit number of shared analyses
    if (sharedAnalyses.length > config.multiplayer.sharingSettings.maxSharedAnalyses) {
        sharedAnalyses.shift();
    }
    
    // Update room state
    room.party.updateRoomState({
        sharedAnalyses
    });
    
    // Send notification to other users
    room.send({
        type: 'analysis_shared',
        expression,
        username: state.multiplayer.username
    });
    
    showNotification('Analysis shared with all researchers');
};

const syncVisualization = () => {
    if (!state.multiplayer.connected) return;
    
    // Update room state with current state
    room.party.updateRoomState({
        currentMode: state.currentMode,
        metrics: state.metrics
    });
    
    showNotification('Visualization synchronized with all researchers');
};

const updateSharedAnalysesUI = () => {
    sharedAnalysesListEl.innerHTML = '';
    
    if (state.multiplayer.sharedAnalyses.length === 0) {
        sharedAnalysesListEl.innerHTML = '<p class="placeholder">No shared analyses yet.</p>';
        return;
    }
    
    // Sort analyses by timestamp (newest first)
    const sortedAnalyses = [...state.multiplayer.sharedAnalyses].sort((a, b) => 
        new Date(b.timestamp) - new Date(a.timestamp)
    );
    
    for (const analysis of sortedAnalyses) {
        const analysisEl = document.createElement('div');
        analysisEl.className = 'shared-analysis';
        
        const headerEl = document.createElement('div');
        headerEl.className = 'shared-header';
        
        const userEl = document.createElement('span');
        userEl.style.color = analysis.color;
        userEl.textContent = analysis.username;
        
        const timeEl = document.createElement('span');
        timeEl.textContent = formatTimestamp(analysis.timestamp);
        
        headerEl.appendChild(userEl);
        headerEl.appendChild(timeEl);
        
        const expressionEl = document.createElement('div');
        expressionEl.className = 'shared-expression';
        expressionEl.textContent = `"${analysis.expression}"`;
        
        const contentEl = document.createElement('div');
        contentEl.className = 'shared-content';
        contentEl.innerHTML = analysis.content;
        
        analysisEl.appendChild(headerEl);
        analysisEl.appendChild(expressionEl);
        analysisEl.appendChild(contentEl);
        
        sharedAnalysesListEl.appendChild(analysisEl);
    }
};

const formatTimestamp = (timestamp) => {
    const date = new Date(timestamp);
    return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
};

const showNotification = (message) => {
    notificationEl.textContent = message;
    notificationEl.classList.add('show');
    
    setTimeout(() => {
        notificationEl.classList.remove('show');
    }, config.multiplayer.notificationDuration);
};

const updateSystemButtonsUI = () => {
    systemButtons.forEach(btn => {
        btn.classList.remove('active');
        if (btn.id === `${state.currentMode}Btn`) {
            btn.classList.add('active');
        }
    });
};

// Event listeners
window.addEventListener('DOMContentLoaded', () => {
    // Initialize visualization
    initVisualization();
    
    // Initialize metrics display
    updateMetricsBars();
    
    // Initialize multiplayer
    initMultiplayer();
    
    // Mode buttons
    document.getElementById('sonwBtn').addEventListener('click', () => handleModeChange('sonw'));
    document.getElementById('afterthoughtBtn').addEventListener('click', () => handleModeChange('afterthought'));
    document.getElementById('cognitiveBtn').addEventListener('click', () => handleModeChange('cognitive'));
    document.getElementById('integratedBtn').addEventListener('click', () => handleModeChange('integrated'));
    
    // Recursion depth slider
    depthSlider.addEventListener('input', () => {
        state.recursionDepth = parseInt(depthSlider.value);
        depthValueEl.textContent = depthSlider.value;
    });
    
    // Evolution button
    document.getElementById('evolveBtn').addEventListener('click', handleEvolve);
    
    // Symbolic expression selector
    symbolSelector.addEventListener('change', () => {
        const selectedKey = symbolSelector.value;
        const selectedExpression = config.symbolicExpressions[selectedKey];
        conceptInput.placeholder = selectedExpression.expression;
        
        // Display preview
        outputEl.innerHTML = `
            <p><strong>${selectedExpression.description}</strong></p>
            <p class="symbolic-node">${selectedExpression.expression}</p>
            <ul>
                ${selectedExpression.components.map(comp => `<li>${comp}</li>`).join('')}
            </ul>
            <p class="placeholder">Press "Process" to analyze this expression...</p>
        `;
    });
    
    // Process symbolic expression
    document.getElementById('processBtn').addEventListener('click', handleSymbolicProcess);
    conceptInput.addEventListener('keypress', (e) => {
        if (e.key === 'Enter') {
            handleSymbolicProcess();
        }
    });
    
    // Collaborative features
    shareBtn.addEventListener('click', shareAnalysis);
    syncBtn.addEventListener('click', syncVisualization);
    
    // Handle window unload to update presence
    window.addEventListener('beforeunload', () => {
        if (state.multiplayer.connected) {
            room.party.updatePresence({
                isActive: false
            });
        }
    });
});