<?php
$jsonImg = '../img/animation/wall_info.json';
$jsonFx = '../img/animation/wall_fx.json';

$imgData = file_exists($jsonImg) ? json_decode(file_get_contents($jsonImg), true)[0] : ["ImageName" => "#000", "Upload_type" => "by_color"];
$fx = file_exists($jsonFx) ? json_decode(file_get_contents($jsonFx), true) : ["snow"=>"0","fire"=>"0","rain"=>"0","halloween"=>"0","pascoa"=>"0"];

$bgStyle = ($imgData['Upload_type'] == "by_color") ? "background:".$imgData['ImageName'] : "background-image:url('".($imgData['Upload_type']=="by_file"?substr($imgData['ImageName'],1):$imgData['ImageName'])."');background-size:cover;background-position:center;";
?>
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <style>
        * { margin:0; padding:0; overflow:hidden; }
        body, html { width:100%; height:100%; <?= $bgStyle ?> background-attachment: fixed; }
        canvas { position:absolute; top:0; left:0; pointer-events:none; z-index:1; }
        #event-layer { position:absolute; top:0; left:0; width:100%; height:100%; z-index:2; pointer-events:none; }
        
        .e-item { 
            position:absolute; 
            width:85px; 
            height:85px; 
            background-size: contain;
            background-repeat: no-repeat;
            will-change: transform;
            filter: drop-shadow(2px 5px 8px rgba(0,0,0,0.3));
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <div id="event-layer"></div>

    <script>
        const canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d');
        const eLayer = document.getElementById('event-layer'), fx = <?= json_encode($fx) ?>;
        let w, h, particles = [];

        // Ativos dos Eventos
        const assets = {
            natal: [
                'https://i.postimg.cc/pXr6p0BS/image-from-rawpixel-id-16218326-png.png',
                'https://i.postimg.cc/bJRB2WWP/image-from-rawpixel-id-12736862-png.png',
                'https://i.postimg.cc/LsL7mnV8/image-from-rawpixel-id-15634483-png.png'
            ],
            halloween: [
                'https://i.postimg.cc/5tgdWXgN/image-from-rawpixel-id-12411161-png.png',
                'https://i.postimg.cc/gcTp06Wy/image-from-rawpixel-id-12152734-original.png'
            ],
            pascoa: [
                'https://i.postimg.cc/L5m6tJTw/Coelhos-de-Pascoa-com-Inteligencia-Artificial-41-768x768.png',
                'https://i.postimg.cc/MpLTCK6R/Pngtree-chocolate-bar-with-splash-on-18138025.png'
            ]
        };

        function init() {
            w = canvas.width = window.innerWidth;
            h = canvas.height = window.innerHeight;
            particles = [];
            eLayer.innerHTML = '';

            // Partículas de Clima (Canvas)
            let pCount = (fx.rain=='1') ? 140 : (fx.fire=='1' ? 80 : (fx.snow=='1' ? 110 : 0));
            for(let i=0; i<pCount; i++) particles.push(new Particle());
            
            // Lógica de Renderização de Ícones
            if(fx.pascoa === '1') {
                for(let i=0; i < 10; i++) new FloatItem(assets.pascoa[i % 2], i);
            }

            if(fx.snow === '1') {
                for(let i=0; i < 9; i++) new FloatItem(assets.natal[i % 3], i);
            }

            if(fx.halloween === '1') {
                for(let i=0; i < 8; i++) new FloatItem(assets.halloween[i % 2], i);
            }
        }

        class Particle {
            constructor() { this.reset(); }
            reset() {
                this.x = Math.random() * w;
                this.y = Math.random() * h;
                if(fx.rain=='1') { this.vy = 18 + Math.random() * 6; this.vx = -1; }
                else if(fx.fire=='1') { this.y = h + 10; this.vy = -(1.5 + Math.random() * 2); this.vx = (Math.random() - 0.5) * 2; this.sz = Math.random() * 3 + 1; }
                else if(fx.snow=='1') { this.vy = 0.8 + Math.random() * 1.5; this.sz = Math.random() * 4 + 1; }
            }
            update() {
                this.y += this.vy || 0; this.x += this.vx || 0;
                if(this.y > h + 50 || this.y < -50) this.reset();
            }
            draw() {
                ctx.beginPath();
                if(fx.rain=='1') { ctx.strokeStyle = 'rgba(255,255,255,0.3)'; ctx.moveTo(this.x, this.y); ctx.lineTo(this.x, this.y + 25); ctx.stroke(); }
                else if(fx.fire=='1') { ctx.fillStyle = '#ff4500'; ctx.shadowBlur = 10; ctx.shadowColor = '#ffcc00'; ctx.arc(this.x, this.y, this.sz, 0, Math.PI*2); ctx.fill(); ctx.shadowBlur = 0; }
                else if(fx.snow=='1') { ctx.fillStyle = '#fff'; ctx.arc(this.x, this.y, this.sz, 0, Math.PI*2); ctx.fill(); }
            }
        }

        class FloatItem {
            constructor(src, index) {
                this.el = document.createElement('div');
                this.el.className = 'e-item';
                this.el.style.backgroundImage = `url('${src}')`;
                eLayer.appendChild(this.el);
                
                // Spawn espalhado para evitar amontoados
                this.x = (index * (w / 5)) % (w - 85);
                this.y = Math.random() * (h - 85);
                
                // Velocidade Rápida e Direcionada
                const speed = 1.8 + Math.random() * 1.2;
                this.vx = (Math.random() > 0.5 ? 1 : -1) * speed; 
                this.vy = (Math.random() - 0.5) * 2.2;
                
                this.angle = Math.random() * Math.PI * 2;
                this.update();
            }
            update() {
                this.x += this.vx; this.y += this.vy;
                this.angle += 0.05; 
                
                if(this.x < 0 || this.x > w - 85) this.vx *= -1;
                if(this.y < 0 || this.y > h - 85) this.vy *= -1;
                
                const drift = Math.sin(this.angle) * 5;
                this.el.style.transform = `translate(${this.x}px, ${this.y + drift}px) rotate(${drift * 2}deg)`;
                requestAnimationFrame(() => this.update());
            }
        }

        function loop() {
            ctx.clearRect(0,0,w,h);
            particles.forEach(p => { p.update(); p.draw(); });
            requestAnimationFrame(loop);
        }

        window.onresize = init;
        init(); loop();
    </script>
</body>
</html>
