// Synapse Visualization System
class SynapseSystem {
    constructor() {
        this.canvas = document.getElementById('synapse-canvas');
        this.ctx = this.canvas.getContext('2d');
        this.pathways = [];
        this.particles = [];
        this.nodes = new Map();

        this.init();
    }

    init() {
        this.setupCanvas();
        this.initializeNodes();
        this.startAnimationLoop();
        this.setupActivitySimulation();

        console.log('⚡ Synapse system initialized');
    }

    setupCanvas() {
        const resizeCanvas = () => {
            this.canvas.width = window.innerWidth;
            this.canvas.height = window.innerHeight;
        };

        resizeCanvas();
        window.addEventListener('resize', resizeCanvas);
    }

    initializeNodes() {
        // Map UI elements to neural nodes
        this.nodes.set('status-panel', {
            element: document.getElementById('status-panel'),
                       type: 'input',
                       position: null,
                       active: false
        });

        this.nodes.set('thoughts-panel', {
            element: document.getElementById('thoughts-panel'),
                       type: 'processing',
                       position: null,
                       active: false
        });

        this.nodes.set('actions-panel', {
            element: document.getElementById('actions-panel'),
                       type: 'output',
                       position: null,
                       active: false
        });

        this.nodes.set('cognitive-core', {
            element: document.getElementById('cognitive-core'),
                       type: 'core',
                       position: null,
                       active: false
        });

        this.updateNodePositions();
        window.addEventListener('resize', () => this.updateNodePositions());
    }

    updateNodePositions() {
        this.nodes.forEach((node, key) => {
            if (node.element) {
                const rect = node.element.getBoundingClientRect();
                node.position = {
                    x: rect.left + rect.width / 2,
                    y: rect.top + rect.height / 2
                };
            }
        });
    }

    startAnimationLoop() {
        const animate = () => {
            this.update();
            this.render();
            requestAnimationFrame(animate);
        };
        animate();
    }

    update() {
        // Update particles
        this.particles = this.particles.filter(particle => {
            particle.update();
            return particle.life > 0;
        });

        // Update pathways
        this.pathways.forEach(pathway => {
            pathway.update();
        });
    }

    render() {
        // Clear canvas
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

        // Render pathways
        this.pathways.forEach(pathway => {
            this.renderPathway(pathway);
        });

        // Render particles
        this.particles.forEach(particle => {
            this.renderParticle(particle);
        });

        // Render node connections
        this.renderNodeConnections();
    }

    renderPathway(pathway) {
        if (!pathway.active) return;

        const { from, to, progress, intensity } = pathway;

        if (!from.position || !to.position) return;

        // Calculate current position along path
        const currentX = from.position.x + (to.position.x - from.position.x) * progress;
        const currentY = from.position.y + (to.position.y - from.position.y) * progress;

        // Draw pathway
        this.ctx.save();

        // Glow effect
        this.ctx.shadowColor = '#e53e3e';
        this.ctx.shadowBlur = 20;

        // Main pathway
        this.ctx.strokeStyle = `rgba(229, 62, 62, ${intensity})`;
        this.ctx.lineWidth = 3;
        this.ctx.beginPath();
        this.ctx.moveTo(from.position.x, from.position.y);
        this.ctx.lineTo(currentX, currentY);
        this.ctx.stroke();

        // Pulse effect at current position
        this.ctx.fillStyle = `rgba(229, 62, 62, ${intensity})`;
        this.ctx.beginPath();
        this.ctx.arc(currentX, currentY, 8 * intensity, 0, Math.PI * 2);
        this.ctx.fill();

        this.ctx.restore();
    }

    renderParticle(particle) {
        this.ctx.save();

        const alpha = particle.life / particle.maxLife;
        this.ctx.fillStyle = `rgba(${particle.color.r}, ${particle.color.g}, ${particle.color.b}, ${alpha})`;
        this.ctx.shadowColor = `rgba(${particle.color.r}, ${particle.color.g}, ${particle.color.b}, ${alpha * 0.5})`;
        this.ctx.shadowBlur = 10;

        this.ctx.beginPath();
        this.ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
        this.ctx.fill();

        this.ctx.restore();
    }

    renderNodeConnections() {
        const coreNode = this.nodes.get('cognitive-core');
        if (!coreNode || !coreNode.position) return;

        this.nodes.forEach((node, key) => {
            if (key === 'cognitive-core' || !node.position) return;

            if (node.active) {
                this.ctx.save();

                // Draw connection line
                this.ctx.strokeStyle = 'rgba(229, 62, 62, 0.3)';
                this.ctx.lineWidth = 2;
                this.ctx.setLineDash([5, 10]);

                this.ctx.beginPath();
                this.ctx.moveTo(node.position.x, node.position.y);
                this.ctx.lineTo(coreNode.position.x, coreNode.position.y);
                this.ctx.stroke();

                this.ctx.restore();
            }
        });
    }

    // Public methods for triggering activities
    simulateActivity(activities) {
        activities.forEach((activity, index) => {
            setTimeout(() => {
                this.triggerNeuralActivity(activity);
            }, index * 800);
        });
    }

    triggerNeuralActivity(type) {
        console.log(`🧠 Neural activity: ${type}`);

        // Activate relevant nodes
        switch(type) {
            case 'reading':
                this.activateNode('status-panel');
                this.createPathway('status-panel', 'cognitive-core');
                break;
            case 'processing':
            case 'reasoning':
                this.activateNode('thoughts-panel');
                this.activateNode('cognitive-core');
                this.createParticleBurst('thoughts-panel');
                break;
            case 'writing':
            case 'speaking':
                this.activateNode('actions-panel');
                this.createPathway('cognitive-core', 'actions-panel');
                break;
            case 'fetching':
            case 'remembering':
                // Could connect to memory panel when available
                this.activateNode('cognitive-core');
                this.createSpiralEffect('cognitive-core');
                break;
        }
    }

    activateNode(nodeKey) {
        const node = this.nodes.get(nodeKey);
        if (!node) return;

        node.active = true;

        // Add visual activation to DOM element
        if (node.element) {
            node.element.classList.add('neural-active');
            setTimeout(() => {
                node.element.classList.remove('neural-active');
                node.active = false;
            }, 2000);
        }
    }

    createPathway(fromKey, toKey) {
        const fromNode = this.nodes.get(fromKey);
        const toNode = this.nodes.get(toKey);

        if (!fromNode || !toNode) return;

        const pathway = {
            from: fromNode,
            to: toNode,
            progress: 0,
            intensity: 1,
            active: true,
            speed: 0.02 + Math.random() * 0.01,

            update() {
                this.progress += this.speed;
                this.intensity = Math.max(0, 1 - this.progress);

                if (this.progress >= 1) {
                    this.active = false;
                }
            }
        };

        this.pathways.push(pathway);

        // Clean up old pathways
        this.pathways = this.pathways.filter(p => p.active || p.progress < 1.5);
    }

    createParticleBurst(nodeKey) {
        const node = this.nodes.get(nodeKey);
        if (!node || !node.position) return;

        const particleCount = 12;
        const colors = [
            { r: 229, g: 62, b: 62 },   // Red
            { r: 59, g: 130, b: 246 },  // Blue
            { r: 16, g: 185, b: 129 }   // Green
        ];

        for (let i = 0; i < particleCount; i++) {
            const angle = (i / particleCount) * Math.PI * 2;
            const speed = 2 + Math.random() * 3;
            const color = colors[Math.floor(Math.random() * colors.length)];

            const particle = {
                x: node.position.x,
                y: node.position.y,
                vx: Math.cos(angle) * speed,
                vy: Math.sin(angle) * speed,
                size: 3 + Math.random() * 4,
                life: 60 + Math.random() * 40,
                maxLife: 60 + Math.random() * 40,
                color: color,

                update() {
                    this.x += this.vx;
                    this.y += this.vy;
                    this.vx *= 0.98;
                    this.vy *= 0.98;
                    this.life--;
                }
            };

            this.particles.push(particle);
        }
    }

    createSpiralEffect(nodeKey) {
        const node = this.nodes.get(nodeKey);
        if (!node || !node.position) return;

        const particleCount = 20;

        for (let i = 0; i < particleCount; i++) {
            const angle = (i / particleCount) * Math.PI * 4; // Two full spirals
            const radius = 20 + (i / particleCount) * 60;

            const particle = {
                x: node.position.x + Math.cos(angle) * radius,
                y: node.position.y + Math.sin(angle) * radius,
                vx: 0,
                vy: 0,
                size: 2 + Math.random() * 2,
                life: 80 + Math.random() * 40,
                maxLife: 80 + Math.random() * 40,
                color: { r: 139, g: 92, b: 246 }, // Purple for memory

                update() {
                    // Spiral inward
                    const dx = node.position.x - this.x;
                    const dy = node.position.y - this.y;
                    this.vx += dx * 0.01;
                    this.vy += dy * 0.01;
                    this.x += this.vx;
                    this.y += this.vy;
                    this.life--;
                }
            };

            setTimeout(() => {
                this.particles.push(particle);
            }, i * 50);
        }
    }

    setupActivitySimulation() {
        // Simulate random neural activity
        const simulateRandomActivity = () => {
            const activities = ['reading', 'processing', 'remembering', 'writing'];
            const activity = activities[Math.floor(Math.random() * activities.length)];
            this.triggerNeuralActivity(activity);
        };

        // Random activity every 5-15 seconds
        const scheduleNext = () => {
            const delay = 5000 + Math.random() * 10000;
            setTimeout(() => {
                simulateRandomActivity();
                scheduleNext();
            }, delay);
        };

        scheduleNext();
    }

    onTabChange(tabId) {
        // Trigger specific activities based on tab changes
        const tabActivities = {
            'overview': ['reading', 'processing'],
            'memory': ['fetching', 'remembering'],
            'analytics': ['processing', 'reasoning'],
            'archives': ['fetching', 'reading'],
            'profile': ['reading', 'processing']
        };

        const activities = tabActivities[tabId] || ['reading'];
        this.simulateActivity(activities);
    }
}

// Add neural activity CSS class
const style = document.createElement('style');
style.textContent = `
.neural-active {
    animation: neuralPulse 2s ease-out !important;
    border-color: var(--teto-red) !important;
    box-shadow: 0 0 30px var(--teto-red-glow) !important;
}

@keyframes neuralPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}
`;
document.head.appendChild(style);

// Initialize synapse system when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
    window.synapseSystem = new SynapseSystem();
});