import p5 from "p5";
import gameOverImageUrl from "../img/img_jobapplication.png";
import startImageUrl from "../img/img_start.png";

let sketch;

export function startParticleSketch(containerElement) {
    if (sketch) {
        sketch.remove();
    }

    sketch = new p5((p) => {
        let particles = [];
        let gameOverImg;
        const imgSize = 50;
        const particleCount = 15;

        p.setup = async function() {
            const width = containerElement.clientWidth || 800;
            const height = containerElement.clientHeight || 600;
            console.log("p5 setup:", { width, height });
            
            const canv = p.createCanvas(width, height);
            canv.parent(containerElement);
            
            // Load image asynchronously
            try {
                gameOverImg = await p.loadImage(gameOverImageUrl);
                console.log("Game over image loaded:", gameOverImg.width, "x", gameOverImg.height);
            } catch (err) {
                console.error("Failed to load particle image:", err);
            }

            // Initialize particles with random starting positions
            for (let i = 0; i < particleCount; i++) {
                particles.push({
                    x: p.random(width),
                    y: p.random(height),
                    vx: p.random(-2, 2),
                    vy: p.random(-2, 2),
                    life: 200,
                    rotation: p.random(p.TWO_PI),
                    rotationSpeed: p.random(-0.08, 0.08),
                    scale: p.random(0.7, 1.3),
                });
            }
            console.log("Particles initialized:", particles.length);
        };

        p.draw = function() {
            // Draw background image full screen
            if (gameOverImg) {
                p.imageMode(p.CORNER);
                p.image(gameOverImg, 0, 0, p.width, p.height);
            }

            // Semi-transparent overlay for visibility
            p.background(0, 0, 0, 20);

            for (let i = 0; i < particles.length; i++) {
                const part = particles[i];

                // Update position
                part.x += part.vx;
                part.y += part.vy;
                part.rotation += part.rotationSpeed;

                // Bounce off walls with friction
                if (part.x < 0 || part.x > p.width) {
                    part.vx *= -0.8;
                    part.x = p.constrain(part.x, 0, p.width);
                }
                if (part.y < 0 || part.y > p.height) {
                    part.vy *= -0.8;
                    part.y = p.constrain(part.y, 0, p.height);
                }

                // Add some gravity
                part.vy += 0.1;
                part.vy = p.constrain(part.vy, -5, 5);

                // Randomly change direction slightly
                if (p.random() < 0.03) {
                    part.vx += p.random(-0.5, 0.5);
                    part.vy += p.random(-0.5, 0.5);
                    part.vx = p.constrain(part.vx, -3, 3);
                    part.vy = p.constrain(part.vy, -3, 3);
                }

                // Draw particle
                p.push();
                p.translate(part.x, part.y);
                p.rotate(part.rotation);
                p.scale(part.scale);
                if (gameOverImg) {
                    p.imageMode(p.CENTER);
                    p.tint(255, 200);
                    p.image(gameOverImg, 0, 0, imgSize, imgSize);
                }
                p.pop();
            }
        };

        p.windowResized = function() {
            if (containerElement && containerElement.offsetParent !== null) {
                const width = containerElement.clientWidth;
                const height = containerElement.clientHeight;
                if (width > 0 && height > 0) {
                    p.resizeCanvas(width, height);
                }
            }
        };
    });
}

export function stopParticleSketch() {
    if (sketch) {
        sketch.remove();
        sketch = null;
    }
}

let startSketch;

export function startStartScreenSketch(containerElement) {
    if (startSketch) {
        startSketch.remove();
    }

    startSketch = new p5((p) => {
        let startImg;

        p.setup = async function() {
            const width = containerElement.clientWidth || 800;
            const height = containerElement.clientHeight || 600;
            console.log("p5 start screen setup:", { width, height });
            
            const canv = p.createCanvas(width, height);
            canv.parent(containerElement);
            
            // Load image asynchronously
            try {
                startImg = await p.loadImage(startImageUrl);
                console.log("Start image loaded:", startImg.width, "x", startImg.height);
            } catch (err) {
                console.error("Failed to load start image:", err);
            }
        };

        p.draw = function() {
            // Draw background image full screen
            if (startImg) {
                p.imageMode(p.CORNER);
                p.image(startImg, 0, 0, p.width, p.height);
            }
        };

        p.windowResized = function() {
            if (containerElement && containerElement.offsetParent !== null) {
                const width = containerElement.clientWidth;
                const height = containerElement.clientHeight;
                if (width > 0 && height > 0) {
                    p.resizeCanvas(width, height);
                }
            }
        };
    });
}

export function stopStartScreenSketch() {
    if (startSketch) {
        startSketch.remove();
        startSketch = null;
    }
}
