const canvas = document.getElementById('bgCanvas');
const ctx = canvas.getContext('2d');

let width, height;

function resize() {
    width = canvas.width = window.innerWidth;
    height = canvas.height = window.innerHeight;
}

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

const camera = {
    x: 0,
    y: 0,
    z: -150,
    fov: 400
};

class Point3D {
    constructor(x, y, z) {
        this.x = x;
        this.y = y;
        this.z = z;
    }

    project() {
        const scale = camera.fov / (camera.fov + this.z - camera.z);
        const x2d = this.x * scale + width / 2;
        const y2d = this.y * scale + height / 2;
        return { x: x2d, y: y2d, scale: scale };
    }
}

class Airplane {
    constructor() {
        this.x = 0;
        this.y = -50;
        this.z = 50;
        this.vx = 0.8;
        this.vy = 0.3;
        this.vz = 0;
        this.roll = 0;
        this.pitch = 0;
        this.wireframe = [];
        this.init();
    }

    init() {
        const w = 12, h = 4, d = 20;
        const vertices = [
            { x: 0, y: -h, z: 0 },
            { x: w, y: 0, z: d / 2 },
            { x: -w, y: 0, z: d / 2 },
            { x: 0, y: 0, z: -d / 2 },
            { x: w, y: 0, z: -d / 4 },
            { x: -w, y: 0, z: -d / 4 },
            { x: 0, y: h, z: 0 }
        ];

        const edges = [
            [0, 1], [0, 2], [0, 6],
            [1, 2],
            [1, 4], [2, 5],
            [3, 4], [3, 5],
            [4, 5],
            [6, 1], [6, 2], [6, 3]
        ];

        this.wireframe = { vertices, edges };
    }

    update() {
        this.x += this.vx;
        this.y += this.vy * Math.sin(this.x / 50);
        this.roll = Math.sin(this.x / 60) * 0.3;
        this.pitch = Math.cos(this.x / 60) * 0.2;

        if (this.x > width / 2 + 100) {
            this.x = -width / 2 - 100;
        }
    }

    draw() {
        ctx.strokeStyle = '#00ff88';
        ctx.lineWidth = 1.5;
        ctx.shadowBlur = 10;
        ctx.shadowColor = '#00ff88';

        const rotated = this.wireframe.vertices.map(v => {
            let x = v.x, y = v.y, z = v.z;

            const cosR = Math.cos(this.roll), sinR = Math.sin(this.roll);
            const x1 = x * cosR - z * sinR;
            const z1 = x * sinR + z * cosR;

            const cosP = Math.cos(this.pitch), sinP = Math.sin(this.pitch);
            const y1 = y * cosP - z1 * sinP;
            const z2 = y * sinP + z1 * cosP;

            return new Point3D(this.x + x1, this.y + y1, this.z + z2);
        });

        ctx.beginPath();
        this.wireframe.edges.forEach(([a, b]) => {
            const p1 = rotated[a].project();
            const p2 = rotated[b].project();
            ctx.moveTo(p1.x, p1.y);
            ctx.lineTo(p2.x, p2.y);
        });
        ctx.stroke();

        ctx.shadowBlur = 0;
    }
}

class Landscape {
    constructor() {
        this.points = [];
        this.init();
    }

    init() {
        const spacing = 40;
        for (let x = -200; x <= 200; x += spacing) {
            for (let z = -200; z <= 200; z += spacing) {
                const y = Math.sin(x / 30) * 20 + Math.cos(z / 30) * 20 + Math.random() * 10;
                this.points.push(new Point3D(x, y, z));
            }
        }
    }

    draw() {
        ctx.strokeStyle = '#0088ff';
        ctx.lineWidth = 0.8;
        ctx.globalAlpha = 0.4;

        const spacing = 40;
        const size = 200;

        for (let x = -size; x <= size; x += spacing) {
            for (let z = -size; z <= size; z += spacing) {
                const idx = this.points.findIndex(p => Math.round(p.x) === x && Math.round(p.z) === z);
                if (idx === -1) continue;

                const p = this.points[idx];
                const pProj = p.project();

                const right = this.points.find(p2 => Math.round(p2.x) === x + spacing && Math.round(p2.z) === z);
                const down = this.points.find(p2 => Math.round(p2.x) === x && Math.round(p2.z) === z + spacing);

                if (right) {
                    ctx.beginPath();
                    ctx.moveTo(pProj.x, pProj.y);
                    ctx.lineTo(right.project().x, right.project().y);
                    ctx.stroke();
                }

                if (down) {
                    ctx.beginPath();
                    ctx.moveTo(pProj.x, pProj.y);
                    ctx.lineTo(down.project().x, down.project().y);
                    ctx.stroke();
                }
            }
        }

        ctx.globalAlpha = 1;
    }
}

const airplane = new Airplane();
const landscape = new Landscape();

function animate() {
    ctx.fillStyle = '#000';
    ctx.fillRect(0, 0, width, height);

    landscape.draw();
    airplane.update();
    airplane.draw();

    requestAnimationFrame(animate);
}

animate();