document.addEventListener('DOMContentLoaded', () => {
    const canvas = document.querySelector('.animation-canvas');
    const addShapeBtn = document.getElementById('addShapeBtn');
    const pauseBtn = document.getElementById('pauseBtn');
    const resetBtn = document.getElementById('resetBtn');
    const shapeTypeSelect = document.getElementById('shapeType');
    const shapeColorSelect = document.getElementById('shapeColor');
    const shapeSizeInput = document.getElementById('shapeSize');

    let shapes = [];
    let isPaused = false;
    let animationId;

    // Initialize with some shapes
    for (let i = 0; i < 5; i++) {
        addRandomShape();
    }

    function addRandomShape() {
        const types = ['circle', 'square', 'triangle'];
        const colors = ['primary', 'secondary', 'pink-500', 'yellow-500'];
        const size = Math.floor(Math.random() * 60) + 30;
        
        const shape = {
            type: types[Math.floor(Math.random() * types.length)],
            color: colors[Math.floor(Math.random() * colors.length)],
            size: size,
            x: Math.random() * (canvas.offsetWidth - size),
            y: Math.random() * (canvas.offsetHeight - size),
            xSpeed: (Math.random() - 0.5) * 4,
            ySpeed: (Math.random() - 0.5) * 4,
            rotation: 0,
            rotationSpeed: (Math.random() - 0.5) * 5,
            element: null
        };

        shapes.push(shape);
        createShapeElement(shape);
    }

    function createShapeElement(shape) {
        const element = document.createElement('div');
        element.className = `shape ${shape.type}`;
        element.style.width = `${shape.size}px`;
        element.style.height = `${shape.size}px`;
        element.style.left = `${shape.x}px`;
        element.style.top = `${shape.y}px`;
        element.style.backgroundColor = `var(--tw-${shape.color})`;
        element.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)';
        
        // Add animation based on shape type
        if (shape.type === 'circle') {
            element.style.animation = 'float 3s ease-in-out infinite';
        } else if (shape.type === 'square') {
            element.style.animation = 'rotate 8s linear infinite';
        } else {
            element.style.animation = 'pulse 2s ease-in-out infinite';
        }

        element.addEventListener('click', () => {
            shapes = shapes.filter(s => s !== shape);
            element.remove();
        });

        canvas.appendChild(element);
        shape.element = element;
    }

    function updateShapes() {
        shapes.forEach(shape => {
            if (isPaused) return;

            // Update position
            shape.x += shape.xSpeed;
            shape.y += shape.ySpeed;
            shape.rotation += shape.rotationSpeed;

            // Bounce off walls
            if (shape.x <= 0 || shape.x >= canvas.offsetWidth - shape.size) {
                shape.xSpeed *= -1;
            }
            if (shape.y <= 0 || shape.y >= canvas.offsetHeight - shape.size) {
                shape.ySpeed *= -1;
            }

            // Update DOM
            shape.element.style.left = `${shape.x}px`;
            shape.element.style.top = `${shape.y}px`;
            shape.element.style.transform = `rotate(${shape.rotation}deg)`;
        });

        animationId = requestAnimationFrame(updateShapes);
    }

    // Event listeners
    addShapeBtn.addEventListener('click', () => {
        const shape = {
            type: shapeTypeSelect.value,
            color: shapeColorSelect.value,
            size: parseInt(shapeSizeInput.value),
            x: Math.random() * (canvas.offsetWidth - parseInt(shapeSizeInput.value)),
            y: Math.random() * (canvas.offsetHeight - parseInt(shapeSizeInput.value)),
            xSpeed: (Math.random() - 0.5) * 4,
            ySpeed: (Math.random() - 0.5) * 4,
            rotation: 0,
            rotationSpeed: (Math.random() - 0.5) * 5,
            element: null
        };

        shapes.push(shape);
        createShapeElement(shape);
    });

    pauseBtn.addEventListener('click', () => {
        isPaused = !isPaused;
        if (isPaused) {
            pauseBtn.innerHTML = '<i data-feather="play"></i>';
            cancelAnimationFrame(animationId);
        } else {
            pauseBtn.innerHTML = '<i data-feather="pause"></i>';
            updateShapes();
        }
        feather.replace();
    });

    resetBtn.addEventListener('click', () => {
        shapes.forEach(shape => {
            shape.element.remove();
        });
        shapes = [];
        for (let i = 0; i < 5; i++) {
            addRandomShape();
        }
    });

    // Start animation
    updateShapes();
});