document.addEventListener('DOMContentLoaded', function() {
    console.log("WebSim Loaded! Initializing...");

    // Canvas setup
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas size to window size
    function resizeCanvas() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        centerX = canvas.width / 2;
        centerY = canvas.height / 2;
    }
    
    resizeCanvas();
    window.addEventListener('resize', resizeCanvas);

    // Center coordinates
    let centerX = canvas.width / 2;
    let centerY = canvas.height / 2;

    // Animation controls
    let animationRunning = true;
    let showParticles = true;
    let showConnections = true;

    // Brainwave and field controls
    let brainwaveState = "alpha"; // default
    let frequencyMultiplier = 1.0;
    let amplitudeMultiplier = 1.0;
    let coherenceMultiplier = 1.0;

    // Harmonic patterns
    let activeHarmonics = null; // none, fibonacci, goldenRatio, prime

    // AI response system
    let aiThoughts = [];
    let aiResponseLastUpdate = 0;

    // Configuration object for system behavior
    const config = {
        brainRadius: Math.min(canvas.width, canvas.height) * 0.05,
        brainColor: '#2271ff',
        brainPulseSpeed: 0.005,
        brainPulseRange: 0.3,
        fieldMaxRadius: Math.min(canvas.width, canvas.height) * 0.4,
        fieldWaveSpeed: 0.6,
        particleCount: 150,
        particleRadius: 2,
        particleSpeed: 0.5,
        connectionOpacity: 0.15,
        connectionThreshold: 100,
        maxConnections: 3,
        brainwaves: {
            delta: { pulseSpeed: 0.002, waveSpeed: 0.3, color: '#3a5ad9', aiDescription: "Deep, unconscious processing." },
            theta: { pulseSpeed: 0.004, waveSpeed: 0.5, color: '#4f7ff5', aiDescription: "Meditative state." },
            alpha: { pulseSpeed: 0.006, waveSpeed: 0.7, color: '#2271ff', aiDescription: "Relaxed, creative state." },
            beta: { pulseSpeed: 0.01, waveSpeed: 1.0, color: '#008aff', aiDescription: "Active thinking state." },
            gamma: { pulseSpeed: 0.015, waveSpeed: 1.5, color: '#00c8ff', aiDescription: "Higher consciousness state." }
        }
    };

    let brain = { pulsePhase: 0 };
    let particles = [];

    // Initialize particles
    for (let i = 0; i < config.particleCount; i++) {
        particles.push({
            x: Math.random() * canvas.width,
            y: Math.random() * canvas.height,
            radius: config.particleRadius,
            speed: config.particleSpeed,
            angle: Math.random() * Math.PI * 2,
            color: config.brainColor
        });
    }

    // Setup UI Controls
    function setupControls() {
        console.log("Setting up controls...");

        const brainwaveButtons = document.querySelectorAll('.brainwave-buttons button');
        brainwaveButtons.forEach(button => {
            button.addEventListener('click', function() {
                setBrainwaveState(this.id.replace('Brain', ''));
            });
        });

        // Sliders
        document.getElementById('frequencySlider').addEventListener('input', function() {
            frequencyMultiplier = parseFloat(this.value);
            document.getElementById('frequencyValue').textContent = frequencyMultiplier.toFixed(1);
        });

        document.getElementById('amplitudeSlider').addEventListener('input', function() {
            amplitudeMultiplier = parseFloat(this.value);
            document.getElementById('amplitudeValue').textContent = amplitudeMultiplier.toFixed(1);
        });

        document.getElementById('coherenceSlider').addEventListener('input', function() {
            coherenceMultiplier = parseFloat(this.value);
            document.getElementById('coherenceValue').textContent = coherenceMultiplier.toFixed(1);
        });

        // Play/Pause Button
        document.getElementById('togglePlay').addEventListener('click', function() {
            animationRunning = !animationRunning;
            this.textContent = animationRunning ? 'Pause' : 'Play';
            if (animationRunning) animate();
        });
    }

    // Function to update brainwave state
    function setBrainwaveState(state) {
        console.log("Switching to brainwave state:", state);

        brainwaveState = state;
        const brainwaveConfig = config.brainwaves[state];

        config.brainPulseSpeed = brainwaveConfig.pulseSpeed;
        config.fieldWaveSpeed = brainwaveConfig.waveSpeed;
        config.brainColor = brainwaveConfig.color;

        updateAIResponse();
    }

    // AI Response System
    function updateAIResponse() {
        console.log("Updating AI response...");
        const thought = config.brainwaves[brainwaveState].aiDescription;
        aiThoughts.push(thought);
        if (aiThoughts.length > 3) aiThoughts.shift();
        document.getElementById('aiResponse').textContent = aiThoughts.join("\n\n");
    }

    // Draw Brain
    function drawBrain() {
        ctx.beginPath();
        ctx.arc(centerX, centerY, config.brainRadius, 0, Math.PI * 2);
        ctx.fillStyle = config.brainColor;
        ctx.fill();
    }

    // Draw Particles
    function drawParticles() {
        for (let i = 0; i < particles.length; i++) {
            const p = particles[i];

            // Move particles
            if (animationRunning) {
                p.x += Math.cos(p.angle) * p.speed;
                p.y += Math.sin(p.angle) * p.speed;

                if (p.x < 0) p.x = canvas.width;
                if (p.x > canvas.width) p.x = 0;
                if (p.y < 0) p.y = canvas.height;
                if (p.y > canvas.height) p.y = 0;
            }

            // Draw particles
            ctx.beginPath();
            ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
            ctx.fillStyle = p.color;
            ctx.fill();
        }
    }

    // Animation Loop
    function animate() {
        if (!animationRunning) return;

        ctx.clearRect(0, 0, canvas.width, canvas.height);

        drawBrain();
        drawParticles();

        requestAnimationFrame(animate);
    }

    // Initialize
    setupControls();
    setBrainwaveState('alpha');
    updateAIResponse();

    // Start animation
    console.log("Starting animation...");
    animate();
});