document.addEventListener('DOMContentLoaded', () => {
    const canvas = document.getElementById('bg');
    if (!canvas) return;

    const ctx = canvas.getContext('2d');
    let width = canvas.width = window.innerWidth;
    let height = canvas.height = window.innerHeight;

    window.addEventListener('resize', () => {
        width = canvas.width = window.innerWidth;
        height = canvas.height = window.innerHeight;
    });

    const orbs = [];
    const orbCount = 25;
    const minRadius = 3;
    const maxRadius = 7;

    class Orb {
        constructor() {
            this.radius = Math.random() * (maxRadius - minRadius) + minRadius;
            this.x = Math.random() * width;
            this.y = Math.random() * height;
            this.vx = (Math.random() - 0.5) * 0.5;
            this.vy = (Math.random() - 0.5) * 0.5;
            this.color = '#23D160';
        }

        draw() {
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
            ctx.fillStyle = this.color;
            ctx.globalAlpha = 0.7;
            ctx.fill();
            ctx.filter = 'blur(2px)';
        }

        update() {
            this.x += this.vx;
            this.y += this.vy;

            if (this.x - this.radius < 0 || this.x + this.radius > width) {
                this.vx *= -1;
            }
            if (this.y - this.radius < 0 || this.y + this.radius > height) {
                this.vy *= -1;
            }
        }
    }

    function init() {
        for (let i = 0; i < orbCount; i++) {
            orbs.push(new Orb());
        }
    }

    function animate() {
        ctx.clearRect(0, 0, width, height);
        orbs.forEach(orb => {
            orb.update();
            orb.draw();
        });
        requestAnimationFrame(animate);
    }

    init();
    animate();

    // -- Pairing Logic --
    const pairButton = document.getElementById('pair-button');
    const qrContainer = document.getElementById('qr-container');
    const pairCodeEl = document.getElementById('pair-code');
    const cardContent = document.getElementById('card-content');
    const spinner = document.getElementById('spinner');
    const qrCodeInstance = new QRCode(qrContainer, {
        width: 200,
        height: 200,
        colorDark: "#dfffe3",
        colorLight: "rgba(0,0,0,0)",
        correctLevel: QRCode.CorrectLevel.H
    });


    if (pairButton) {
        pairButton.addEventListener('click', async () => {
            spinner.style.display = 'block';
            pairButton.style.display = 'none';

            try {
                const response = await fetch('api/sessions/create.php', { method: 'POST' });
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                const data = await response.json();

                if (data.success) {
                    cardContent.style.display = 'block';
                    pairCodeEl.textContent = data.pair_code;
                    qrCodeInstance.makeCode(data.qr_payload);
                } else {
                    throw new Error(data.error || 'Failed to create session.');
                }

            } catch (error) {
                console.error('Pairing error:', error);
                alert('Could not create a new pairing session. Please try again.');
                pairButton.style.display = 'inline-block';
            } finally {
                spinner.style.display = 'none';
            }
        });
    }
});