import type { DrawContext } from '../types';
import { getSceneColors } from '../colors';

// --- Assets / Drawing Helpers ---

function drawDetailedPine(ctx: CanvasRenderingContext2D, x: number, y: number, scale: number, color: string) {
    ctx.save();
    ctx.translate(x, y);
    ctx.scale(scale, scale);

    // Trunk
    ctx.fillStyle = '#3E2723';
    ctx.beginPath();
    ctx.moveTo(-4, 0);
    ctx.lineTo(-1, -120);
    ctx.lineTo(1, -120);
    ctx.lineTo(4, 0);
    ctx.fill();

    // Foliage (Stylized swoops)
    ctx.fillStyle = color;
    const layers = 7;
    for(let i=0; i<layers; i++) {
        const ly = -30 - i * 14;
        const lw = 38 - i * 5;
        ctx.beginPath();
        // Left side curve
        ctx.moveTo(0, ly - 20); 
        ctx.bezierCurveTo(-lw/2, ly - 10, -lw, ly + 10, -lw, ly + 15);
        ctx.lineTo(0, ly + 5);
        // Right side curve
        ctx.lineTo(lw, ly + 15);
        ctx.bezierCurveTo(lw, ly + 10, lw/2, ly - 10, 0, ly - 20);
        ctx.fill();
    }
    ctx.restore();
}

function drawDetailedBroadleaf(ctx: CanvasRenderingContext2D, x: number, y: number, scale: number, color: string) {
    ctx.save();
    ctx.translate(x, y);
    ctx.scale(scale, scale);

    // Trunk with bark texture hints
    ctx.fillStyle = '#5D4037';
    ctx.beginPath();
    ctx.moveTo(-8, 0);
    ctx.bezierCurveTo(-5, -20, -12, -50, -6, -70); // Left main branch
    ctx.lineTo(-4, -72);
    ctx.lineTo(0, -40); // Crotch
    ctx.lineTo(4, -72);
    ctx.lineTo(6, -70);
    ctx.bezierCurveTo(12, -50, 5, -20, 8, 0); // Right side
    ctx.fill();

    // Canopy (Dense cloud clusters)
    ctx.fillStyle = color;
    const blobs = [
        {x: 0, y: -90, r: 35},
        {x: -25, y: -75, r: 28},
        {x: 25, y: -75, r: 28},
        {x: -40, y: -60, r: 22},
        {x: 40, y: -60, r: 22},
        {x: -15, y: -50, r: 25},
        {x: 15, y: -50, r: 25},
    ];
    
    ctx.beginPath();
    blobs.forEach(b => {
        ctx.moveTo(b.x + b.r, b.y);
        ctx.arc(b.x, b.y, b.r, 0, Math.PI*2);
    });
    ctx.fill();
    
    // Highlight leaves (Top lit)
    ctx.fillStyle = 'rgba(255,255,255,0.15)';
    ctx.beginPath();
    blobs.forEach(b => {
        ctx.moveTo(b.x + b.r*0.8, b.y - b.r*0.5);
        ctx.arc(b.x, b.y - b.r*0.2, b.r*0.6, 0, Math.PI*2);
    });
    ctx.fill();

    ctx.restore();
}

function drawBirchTree(ctx: CanvasRenderingContext2D, x: number, y: number, scale: number, seed: number) {
    ctx.save();
    ctx.translate(x, y);
    ctx.scale(scale, scale);

    let s = seed * 999;
    const rnd = () => { s = (s * 1664525 + 1013904223) % 4294967296; return s / 4294967296; };

    // Trunk (Slender, slightly curved)
    ctx.fillStyle = '#EEE';
    ctx.beginPath();
    ctx.moveTo(-3, 0);
    const curve = (rnd() - 0.5) * 10;
    ctx.quadraticCurveTo(curve, -60, 0, -130);
    ctx.quadraticCurveTo(curve + 2, -60, 3, 0);
    ctx.fill();

    // Black stripes (Horizontal jagged)
    ctx.fillStyle = '#263238';
    for(let i=0; i<12; i++) {
        const yPos = -10 - rnd() * 110;
        const width = 4 + rnd() * 3;
        ctx.beginPath();
        const drift = (yPos / -130) * curve;
        ctx.ellipse(drift, yPos, width, 1.5 + rnd(), 0, 0, Math.PI*2);
        ctx.fill();
    }

    // Leaves (Drooping branches)
    ctx.fillStyle = '#CDDC39'; // Fresh green
    for(let i=0; i<5; i++) {
        const branchY = -50 - rnd() * 70;
        const side = rnd() > 0.5 ? 1 : -1;
        const len = 20 + rnd() * 20;
        
        ctx.save();
        ctx.translate((branchY / -130) * curve, branchY);
        ctx.rotate(side * 0.5);
        
        // Dangle leaves
        for(let j=0; j<8; j++) {
            const lx = side * j * 3;
            const ly = j * (2 + rnd()*2);
            ctx.beginPath();
            ctx.ellipse(lx, ly, 3, 5, 0, 0, Math.PI*2);
            ctx.fill();
        }
        ctx.restore();
    }
    ctx.restore();
}

// --- Environment ---

function getBezierY(t: number, y0: number, y1: number, y2: number, y3: number): number {
    const oneMinusT = 1 - t;
    return (
        Math.pow(oneMinusT, 3) * y0 +
        3 * Math.pow(oneMinusT, 2) * t * y1 +
        3 * oneMinusT * Math.pow(t, 2) * y2 +
        Math.pow(t, 3) * y3
    );
}

const HILL_CONFIG = {
    back:  { y0: 0.70, cp1: 0.65, cp2: 0.75, y3: 0.68 },
    mid:   { y0: 0.78, cp1: 0.82, cp2: 0.76, y3: 0.79 },
    front: { y0: 0.88, cp1: 0.84, cp2: 0.94, y3: 0.86 } // Lowered slightly to ensure screen coverage
};

export function drawForestGround(dc: DrawContext): void {
    const { ctx, width, height } = dc;
    
    // Background Hill
    ctx.fillStyle = '#1B5E20'; // Deepest green
    ctx.beginPath();
    ctx.moveTo(0, height * HILL_CONFIG.back.y0);
    ctx.bezierCurveTo(
        width * 0.3, height * HILL_CONFIG.back.cp1, 
        width * 0.7, height * HILL_CONFIG.back.cp2, 
        width, height * HILL_CONFIG.back.y3
    );
    ctx.lineTo(width, height);
    ctx.lineTo(0, height);
    ctx.fill();

    // Midground Hill
    ctx.fillStyle = '#2E7D32'; // Mid green
    ctx.beginPath();
    ctx.moveTo(0, height * HILL_CONFIG.mid.y0);
    ctx.bezierCurveTo(
        width * 0.25, height * HILL_CONFIG.mid.cp1, 
        width * 0.65, height * HILL_CONFIG.mid.cp2, 
        width, height * HILL_CONFIG.mid.y3
    );
    ctx.lineTo(width, height);
    ctx.lineTo(0, height);
    ctx.fill();

    // Foreground Hill
    ctx.fillStyle = '#388E3C'; // Lighter green
    ctx.beginPath();
    ctx.moveTo(0, height * HILL_CONFIG.front.y0);
    ctx.bezierCurveTo(
        width * 0.2, height * HILL_CONFIG.front.cp1, 
        width * 0.6, height * HILL_CONFIG.front.cp2, 
        width, height * HILL_CONFIG.front.y3
    );
    ctx.lineTo(width, height);
    ctx.lineTo(0, height);
    ctx.fill();
}

export function drawVegetation(dc: DrawContext): void {
    const { ctx, width, height, state } = dc;
    const parallax = state.mouseX * 1.2; 
    
    // Place vegetation on the front hill primarily
    const plants = [0.05, 0.25, 0.5, 0.75, 0.9];
    
    plants.forEach(tx => {
        // Calculate ground y at this x position on the front hill
        // Approximate t as x for simplicity in this case (rendering purposes)
        const ty = getBezierY(tx, HILL_CONFIG.front.y0, HILL_CONFIG.front.cp1, HILL_CONFIG.front.cp2, HILL_CONFIG.front.y3);
        const y = height * ty;
        const x = width * tx;

        ctx.save();
        ctx.translate(x + parallax, y);
        ctx.fillStyle = '#1B5E20';
        for(let i=-2; i<=2; i++) {
            ctx.save();
            ctx.rotate(i * 0.3);
            ctx.beginPath();
            ctx.ellipse(0, -15, 4, 18, 0, 0, Math.PI*2);
            ctx.fill();
            ctx.restore();
        }
        ctx.restore();
    });
}

export function drawMushrooms(dc: DrawContext): void {
    const { ctx, width, height, state } = dc;
    const parallax = state.mouseX * 1.0; 
    
    const drawShroom = (tx: number, scale: number) => {
        // Snap to front hill
        const ty = getBezierY(tx, HILL_CONFIG.front.y0, HILL_CONFIG.front.cp1, HILL_CONFIG.front.cp2, HILL_CONFIG.front.y3);
        const y = height * ty;
        const x = width * tx;

        ctx.save();
        ctx.translate(x + parallax, y);
        ctx.scale(scale, scale);
        
        ctx.fillStyle = '#F5F5DC';
        ctx.fillRect(-3, -15, 6, 15); // Stem growing UP
        
        ctx.fillStyle = '#D32F2F'; // Red Cap
        ctx.beginPath();
        ctx.arc(0, -15, 10, Math.PI, 0); 
        ctx.fill();
        
        ctx.fillStyle = 'white'; // Dots
        ctx.beginPath(); ctx.arc(-4, -19, 2, 0, Math.PI*2); ctx.fill();
        ctx.beginPath(); ctx.arc(4, -20, 1.5, 0, Math.PI*2); ctx.fill();
        
        ctx.restore();
    };

    drawShroom(0.15, 1.0);
    drawShroom(0.35, 0.8);
    drawShroom(0.8, 1.1);
}

export function drawForestTrees(dc: DrawContext): void {
    const { ctx, width, height, state } = dc;
    const parallax = state.mouseX * 0.8;

    // Helper to draw a layer grounded on a specific hill config
    const drawLayer = (trees: any[], config: any, parallaxFactor: number) => {
        trees.forEach((t, i) => {
            // Apply parallax to X
            const px = (t.x * width + parallax * parallaxFactor + i * 20) % (width + 200) - 100;
            
            // Calculate normalized X (0 to 1) for curve sampling based on screen position
            // This ensures the tree rides the curve even as it moves with parallax
            // We clamp it 0-1 for the bezier calculation effectively
            let normX = px / width;
            if (normX < 0) normX = 0; 
            if (normX > 1) normX = 1;

            const ty = getBezierY(normX, config.y0, config.cp1, config.cp2, config.y3);
            
            // Plant the tree slightly deeper (+0.02) to ensure no hovering on steep sections
            const py = height * (ty + 0.02);

            if (t.type === 'pine') drawDetailedPine(ctx, px, py, t.scale, t.color || '#1B5E20');
            else if (t.type === 'broad') drawDetailedBroadleaf(ctx, px, py, t.scale, t.color || '#2E7D32');
            else drawBirchTree(ctx, px, py, t.scale, i * 50);
        });
    };

    // Layer 1: Deep Background -> Back Hill
    const layer1 = [
        {x: 0.02, type: 'pine', scale: 0.4, color: '#1B5E20'},
        {x: 0.08, type: 'broad', scale: 0.42, color: '#1B5E20'},
        {x: 0.15, type: 'pine', scale: 0.38, color: '#1B5E20'},
        {x: 0.22, type: 'broad', scale: 0.4, color: '#1B5E20'},
        {x: 0.30, type: 'pine', scale: 0.45, color: '#1B5E20'},
        {x: 0.38, type: 'pine', scale: 0.35, color: '#1B5E20'},
        {x: 0.45, type: 'broad', scale: 0.4, color: '#1B5E20'},
        {x: 0.52, type: 'pine', scale: 0.48, color: '#1B5E20'},
        {x: 0.60, type: 'broad', scale: 0.42, color: '#1B5E20'},
        {x: 0.68, type: 'pine', scale: 0.4, color: '#1B5E20'},
        {x: 0.75, type: 'pine', scale: 0.37, color: '#1B5E20'},
        {x: 0.82, type: 'broad', scale: 0.4, color: '#1B5E20'},
        {x: 0.90, type: 'pine', scale: 0.45, color: '#1B5E20'},
        {x: 0.98, type: 'broad', scale: 0.41, color: '#1B5E20'}
    ];
    drawLayer(layer1, HILL_CONFIG.back, 0.3);

    // Layer 2: Midground -> Mid Hill
    const layer2 = [
        {x: 0.05, type: 'pine', scale: 0.6, color: '#2E7D32'},
        {x: 0.15, type: 'broad', scale: 0.65, color: '#388E3C'},
        {x: 0.25, type: 'birch', scale: 0.55},
        {x: 0.35, type: 'pine', scale: 0.7, color: '#2E7D32'},
        {x: 0.45, type: 'broad', scale: 0.6, color: '#388E3C'},
        {x: 0.55, type: 'birch', scale: 0.6},
        {x: 0.65, type: 'pine', scale: 0.58, color: '#2E7D32'},
        {x: 0.75, type: 'broad', scale: 0.75, color: '#388E3C'},
        {x: 0.85, type: 'pine', scale: 0.65, color: '#2E7D32'},
        {x: 0.95, type: 'birch', scale: 0.58},
    ];
    drawLayer(layer2, HILL_CONFIG.mid, 0.5);

    // Layer 3: Foreground -> Front Hill
    const layer3 = [
        {x: 0.02, type: 'broad', scale: 1.1, color: '#43A047'},
        {x: 0.12, type: 'pine', scale: 1.3, color: '#4CAF50'},
        {x: 0.22, type: 'birch', scale: 0.9},
        {x: 0.35, type: 'broad', scale: 1.0, color: '#43A047'},
        {x: 0.50, type: 'pine', scale: 1.2, color: '#4CAF50'},
        {x: 0.62, type: 'birch', scale: 1.0},
        {x: 0.75, type: 'pine', scale: 1.4, color: '#4CAF50'},
        {x: 0.88, type: 'broad', scale: 1.1, color: '#43A047'},
        {x: 0.98, type: 'birch', scale: 0.95},
    ];
    drawLayer(layer3, HILL_CONFIG.front, 1.0);
}

// --- Wildlife ---

export function drawDeer(dc: DrawContext): void {
    const { ctx, width, height, state } = dc;
    const time = Date.now() * 0.001;
    const parallax = state.mouseX * 0.7;

    const x = width * 0.6 + parallax;
    const y = height * 0.86; 
    const scale = 0.9;
    
    // Grazing animation
    const grazing = Math.sin(time * 0.5) > 0.5; 
    const headY = grazing ? 25 : -40;
    const headRot = grazing ? 0.5 : 0;

    ctx.save();
    ctx.translate(x, y);
    ctx.scale(scale, scale);

    const gradient = ctx.createLinearGradient(0, -20, 0, 20);
    gradient.addColorStop(0, '#8D6E63');
    gradient.addColorStop(1, '#5D4037');

    const legColor = '#4E342E';

    // Rear Leg L (Behind)
    ctx.fillStyle = legColor;
    ctx.beginPath();
    ctx.moveTo(-18, 0); ctx.lineTo(-20, 20); ctx.lineTo(-22, 40); ctx.lineTo(-15, 40); ctx.lineTo(-12, 10);
    ctx.fill();
    // Front Leg L (Behind)
    ctx.beginPath();
    ctx.moveTo(12, 0); ctx.lineTo(10, 25); ctx.lineTo(8, 40); ctx.lineTo(14, 40); ctx.lineTo(18, 10);
    ctx.fill();

    // Body
    ctx.fillStyle = gradient;
    ctx.beginPath();
    ctx.moveTo(-25, 0);
    ctx.bezierCurveTo(-30, -10, -30, -30, 0, -25); // Back hump
    ctx.lineTo(20, -20);
    ctx.bezierCurveTo(35, -20, 35, 0, 20, 10); // Chest
    ctx.lineTo(0, 12); // Belly
    ctx.bezierCurveTo(-20, 15, -25, 10, -25, 0); 
    ctx.fill();

    // Rear Leg R (Front)
    ctx.fillStyle = '#6D4C41';
    ctx.beginPath();
    ctx.moveTo(-12, 5); ctx.lineTo(-10, 25); ctx.lineTo(-12, 42); ctx.lineTo(-5, 42); ctx.lineTo(-2, 10);
    ctx.fill();
    // Front Leg R (Front)
    ctx.beginPath();
    ctx.moveTo(18, 5); ctx.lineTo(20, 25); ctx.lineTo(22, 42); ctx.lineTo(28, 42); ctx.lineTo(24, 10);
    ctx.fill();

    // White Tail
    ctx.fillStyle = '#FFF';
    ctx.beginPath();
    ctx.moveTo(-28, -5); ctx.lineTo(-32, -15); ctx.lineTo(-25, -10);
    ctx.fill();

    // Neck
    ctx.fillStyle = gradient;
    ctx.beginPath();
    ctx.moveTo(20, -15);
    ctx.lineTo(25 + (grazing ? 20 : 0), headY + 5);
    ctx.lineTo(15 + (grazing ? 20 : 0), headY + 5);
    ctx.lineTo(12, 5);
    ctx.fill();

    // Head Group
    ctx.save();
    ctx.translate(22 + (grazing ? 20 : 0), headY);
    ctx.rotate(headRot);
    
    // Head shape
    ctx.fillStyle = '#8D6E63';
    ctx.beginPath();
    ctx.ellipse(0, 0, 10, 6, 0.2, 0, Math.PI*2);
    ctx.fill();
    // Nose
    ctx.fillStyle = '#3E2723';
    ctx.beginPath(); ctx.arc(9, 2, 1.5, 0, Math.PI*2); ctx.fill();
    
    // Ears
    ctx.fillStyle = '#6D4C41';
    ctx.beginPath();
    ctx.ellipse(-8, -5, 3, 7, -0.3, 0, Math.PI*2);
    ctx.fill();

    // Antlers (Detailed)
    ctx.strokeStyle = '#3E2723';
    ctx.lineWidth = 1.5;
    ctx.lineCap = 'round';
    ctx.beginPath();
    ctx.moveTo(-4, -6); 
    ctx.bezierCurveTo(-5, -20, 0, -25, 5, -35); // Main beam
    ctx.moveTo(0, -18); ctx.lineTo(5, -25); // Tine 1
    ctx.moveTo(2, -28); ctx.lineTo(-2, -32); // Tine 2
    ctx.stroke();

    // Eye
    ctx.fillStyle = '#1a1a1a';
    ctx.beginPath();
    ctx.arc(0, -2, 1.2, 0, Math.PI * 2);
    ctx.fill();

    ctx.restore();
    ctx.restore();
}

export function drawFox(dc: DrawContext): void {
    const { ctx, width, height, state } = dc;
    const parallax = state.mouseX * 0.9;
    const time = Date.now() * 0.001;
    
    const x = width * 0.4 + parallax;
    const y = height * 0.9; // Sitting on ground

    ctx.save();
    ctx.translate(x, y);
    ctx.scale(0.85, 0.85);

    // Tail Wag (Smoother)
    const tailAngle = Math.sin(time * 3) * 0.15;

    // Tail
    ctx.save();
    ctx.rotate(tailAngle);
    ctx.fillStyle = '#E65100'; // Orange
    ctx.beginPath();
    ctx.moveTo(-15, -5);
    ctx.bezierCurveTo(-35, -25, -50, -5, -45, 0); // Fluffy curve top
    ctx.bezierCurveTo(-35, 5, -20, 5, -15, 0); // Fluffy bottom
    ctx.fill();
    // White Tip
    ctx.fillStyle = '#FFF';
    ctx.beginPath();
    ctx.moveTo(-45, 0);
    ctx.bezierCurveTo(-48, -2, -50, -5, -46, -8);
    ctx.fill();
    ctx.restore();

    // Body Sitting
    const furGradient = ctx.createLinearGradient(0, -20, 0, 0);
    furGradient.addColorStop(0, '#EF6C00');
    furGradient.addColorStop(1, '#FFF3E0'); // White belly fade

    ctx.fillStyle = furGradient;
    ctx.beginPath();
    ctx.ellipse(0, -12, 14, 18, 0, 0, Math.PI*2);
    ctx.fill();

    // White Chest Patch
    ctx.fillStyle = '#FFF';
    ctx.beginPath();
    ctx.ellipse(2, -10, 6, 10, 0.2, 0, Math.PI*2);
    ctx.fill();

    // Head
    ctx.save();
    ctx.translate(4, -32);
    
    // Face shape
    ctx.fillStyle = '#EF6C00';
    ctx.beginPath();
    ctx.moveTo(-8, -5); // Top left
    ctx.lineTo(8, -5); // Top right
    ctx.lineTo(12, 2); // Cheek right
    ctx.lineTo(0, 10); // Snout tip
    ctx.lineTo(-12, 2); // Cheek left
    ctx.fill();

    // White cheeks
    ctx.fillStyle = '#FEFBE9';
    ctx.beginPath();
    ctx.moveTo(-12, 2); ctx.lineTo(-5, 5); ctx.lineTo(0, 10); // Left cheek
    ctx.moveTo(12, 2); ctx.lineTo(5, 5); ctx.lineTo(0, 10); // Right cheek
    ctx.fill();

    // Nose
    ctx.fillStyle = '#111';
    ctx.beginPath(); ctx.arc(0, 9, 1.5, 0, Math.PI*2); ctx.fill();

    // Ears
    ctx.fillStyle = '#E65100';
    ctx.beginPath();
    ctx.moveTo(-8, -5); ctx.lineTo(-10, -15); ctx.lineTo(-3, -5);
    ctx.moveTo(8, -5); ctx.lineTo(10, -15); ctx.lineTo(3, -5);
    ctx.fill();
    // Inner Ear
    ctx.fillStyle = '#3E2723';
    ctx.beginPath();
    ctx.moveTo(-7, -6); ctx.lineTo(-9, -12); ctx.lineTo(-4, -6);
    ctx.moveTo(7, -6); ctx.lineTo(9, -12); ctx.lineTo(4, -6);
    ctx.fill();

    // Eyes
    ctx.fillStyle = '#111';
    ctx.beginPath();
    ctx.ellipse(-4, 0, 1.5, 2, 0, 0, Math.PI*2);
    ctx.ellipse(4, 0, 1.5, 2, 0, 0, Math.PI*2);
    ctx.fill();
    
    ctx.restore();

    // Paws (Dark)
    ctx.fillStyle = '#3E2723';
    ctx.beginPath(); ctx.ellipse(-8, 5, 3, 5, 0, 0, Math.PI*2); ctx.fill();
    ctx.beginPath(); ctx.ellipse(8, 5, 3, 5, 0, 0, Math.PI*2); ctx.fill();

    ctx.restore();
}

export function drawRabbit(dc: DrawContext): void {
    const { ctx, width, height, state } = dc;
    const time = Date.now() * 0.003;
    const parallax = state.mouseX * 1.0; 
    
    const x = width * 0.2 + parallax;
    const y = height * 0.92; 
    // Small hop
    const hop = Math.abs(Math.sin(time)) * 6;
    
    ctx.save();
    ctx.translate(x, y - hop);
    ctx.scale(0.7, 0.7); 
    
    // Body (Rounder)
    ctx.fillStyle = '#D7CCC8';
    ctx.beginPath();
    ctx.ellipse(0, 0, 14, 10, 0, 0, Math.PI*2);
    ctx.fill();

    // Cotton Tail
    ctx.fillStyle = '#FFF';
    ctx.beginPath();
    ctx.arc(-14, 0, 4, 0, Math.PI*2);
    ctx.fill();

    // Head
    ctx.fillStyle = '#D7CCC8';
    ctx.beginPath();
    ctx.arc(10, -5, 8, 0, Math.PI*2);
    ctx.fill();

    // Ears (Longer)
    ctx.fillStyle = '#A1887F';
    ctx.beginPath();
    ctx.ellipse(8, -15, 2.5, 10, -0.2, 0, Math.PI*2);
    ctx.fill();
    ctx.beginPath();
    ctx.ellipse(12, -15, 2.5, 10, 0.2, 0, Math.PI*2);
    ctx.fill();

    // Inner Ear Pink
    ctx.fillStyle = '#FFCCBC';
    ctx.beginPath();
    ctx.ellipse(8, -15, 1, 8, -0.2, 0, Math.PI*2);
    ctx.fill();

    // Eye
    ctx.fillStyle = '#111';
    ctx.beginPath();
    ctx.arc(12, -7, 1.2, 0, Math.PI*2);
    ctx.fill();
    
    ctx.restore();
}

export function drawForestBirds(dc: DrawContext): void {
    const { ctx, width, height, state } = dc;
    const time = Date.now() * 0.001;
    const parallax = state.mouseX * 0.3;

    const birds = [
        {x: 0.2, y: 0.3, offset: 0, s: 1},
        {x: 0.25, y: 0.28, offset: 1, s: 0.8},
        {x: 0.18, y: 0.32, offset: 2, s: 0.9},
    ];

    ctx.fillStyle = '#263238';
    
    birds.forEach(b => {
        const bx = (width * b.x + time * 30 + parallax) % (width + 50) - 25;
        const by = height * b.y + Math.sin(time * 2 + b.offset) * 10;
        const s = b.s;

        ctx.save();
        ctx.translate(bx, by);
        ctx.scale(s, s);

        // Body
        ctx.beginPath();
        ctx.ellipse(0, 0, 3, 1.5, 0, 0, Math.PI*2);
        ctx.fill();

        // Wings (Flapping triangles)
        const flap = Math.sin(time * 15 + b.offset); 
        ctx.beginPath();
        // Left Wing
        ctx.moveTo(0, 0);
        ctx.lineTo(-8, flap * 5 - 5);
        ctx.lineTo(-2, 0);
        // Right Wing
        ctx.moveTo(0, 0);
        ctx.lineTo(8, flap * 5 - 5);
        ctx.lineTo(2, 0);
        ctx.fill();

        ctx.restore();
    });
}

export function drawForestScene(dc: DrawContext): void {
    drawForestGround(dc);
    drawForestTrees(dc);
    drawVegetation(dc);
    drawMushrooms(dc);
    drawForestBirds(dc);
    drawDeer(dc);
    drawFox(dc);
    drawRabbit(dc);
}
