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

export function drawOceanWaves(dc: DrawContext): void {
    const { ctx, width, height, state } = dc;
    const colors = getSceneColors(state);
    const time = Date.now() * 0.001;

    for (let layer = 0; layer < 3; layer++) {
        const alpha = 0.3 + layer * 0.25;
        const yBase = height * (0.55 + layer * 0.12);
        const waveHeight = 15 - layer * 3;
        const speed = 40 + layer * 20;

        ctx.fillStyle = layer === 2 ? colors.water : `rgba(0, 150, 200, ${alpha})`;
        ctx.beginPath();
        ctx.moveTo(-100, height);

        for (let x = -100; x <= width + 100; x += 10) {
            const y = yBase + Math.sin((x + time * speed) * 0.02) * waveHeight;
            ctx.lineTo(x, y);
        }

        ctx.lineTo(width + 100, height);
        ctx.closePath();
        ctx.fill();
    }

    ctx.fillStyle = 'rgba(255, 255, 255, 0.6)';
    for (let i = 0; i < 8; i++) {
        const x = (width / 8) * i + Math.sin(time + i * 2) * 30;
        const y = height * 0.58 + Math.sin(time * 1.5 + i) * 8;
        ctx.beginPath();
        ctx.ellipse(x, y, 20 + i * 3, 5, 0, 0, Math.PI * 2);
        ctx.fill();
    }
}

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

    const drawSailboat = (x: number, baseY: number, scale: number, phase: number) => {
        const bob = Math.sin(time * 2 + phase) * 5;
        const y = baseY + bob;

        ctx.fillStyle = '#5D4037';
        ctx.beginPath();
        ctx.moveTo(x + parallax - 30 * scale, y);
        ctx.lineTo(x + parallax + 30 * scale, y);
        ctx.lineTo(x + parallax + 20 * scale, y + 15 * scale);
        ctx.lineTo(x + parallax - 20 * scale, y + 15 * scale);
        ctx.closePath();
        ctx.fill();

        ctx.fillStyle = '#8D6E63';
        ctx.fillRect(x + parallax - 2 * scale, y - 60 * scale, 4 * scale, 60 * scale);

        ctx.fillStyle = '#FFFFFF';
        ctx.beginPath();
        ctx.moveTo(x + parallax, y - 55 * scale);
        ctx.lineTo(x + parallax + 25 * scale, y - 10 * scale);
        ctx.lineTo(x + parallax, y - 10 * scale);
        ctx.closePath();
        ctx.fill();

        ctx.fillStyle = '#E91E63';
        ctx.beginPath();
        ctx.moveTo(x + parallax, y - 60 * scale);
        ctx.lineTo(x + parallax + 12 * scale, y - 55 * scale);
        ctx.lineTo(x + parallax, y - 50 * scale);
        ctx.closePath();
        ctx.fill();
    };

    drawSailboat(width * 0.2, height * 0.58, 1.0, 0);
    drawSailboat(width * 0.7, height * 0.62, 1.3, 1.5);
    drawSailboat(width * 0.9, height * 0.56, 0.8, 3);
}


export function drawDolphins(dc: DrawContext): void {
    const { ctx, width, height } = dc;
    const time = Date.now() * 0.001;

    const drawDolphin = (baseX: number, baseY: number, scale: number, phase: number) => {
        const cycleLength = 3.5;
        const cycleProgress = ((time + phase) % cycleLength) / cycleLength;

        let jumpProgress = 0;
        if (cycleProgress > 0.2 && cycleProgress < 0.8) {
            jumpProgress = (cycleProgress - 0.2) / 0.6;
        } else {
            return;
        }

        const jumpHeight = 90 * scale * Math.sin(jumpProgress * Math.PI);
        const x = baseX + (jumpProgress - 0.5) * 180 * scale;
        const y = baseY - jumpHeight;

        const rotation = Math.cos(jumpProgress * Math.PI) * -0.9;

        ctx.save();
        ctx.translate(x, y);
        ctx.rotate(rotation);

        // Body - Sleeker, curved
        ctx.fillStyle = '#607D8B';
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.bezierCurveTo(20 * scale, -15 * scale, 40 * scale, -5 * scale, 45 * scale, 0); // Upper back
        ctx.bezierCurveTo(40 * scale, 10 * scale, 10 * scale, 10 * scale, 0, 0); // Belly
        ctx.fill();

        // Fin
        ctx.beginPath();
        ctx.moveTo(25 * scale, -10 * scale);
        ctx.quadraticCurveTo(30 * scale, -25 * scale, 20 * scale, -20 * scale);
        ctx.lineTo(22 * scale, -10 * scale);
        ctx.fill();

        // Tail
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(-10 * scale, -8 * scale);
        ctx.lineTo(-5 * scale, 0);
        ctx.lineTo(-10 * scale, 8 * scale);
        ctx.closePath();
        ctx.fill();

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

        // Beak (Bottlenose)
        ctx.fillStyle = '#607D8B';
        ctx.beginPath();
        ctx.moveTo(44 * scale, 0);
        ctx.quadraticCurveTo(48 * scale, -2 * scale, 50 * scale, 2 * scale);
        ctx.lineTo(44 * scale, 4 * scale);
        ctx.fill();

        ctx.restore();
    };

    drawDolphin(width * 0.2, height * 0.75, 1.0, 0);
    drawDolphin(width * 0.4, height * 0.78, 0.9, 1);
    drawDolphin(width * 0.65, height * 0.72, 0.85, 2.2); // New dolphin
}

export function drawFish(dc: DrawContext): void {
    const { ctx, width, height } = dc;
    const time = Date.now() * 0.001;
    const S = 0.6; // Scale

    const drawSingleFish = (seed: number, baseX: number, baseY: number, color: string, speedBase: number) => {
         // "Completely Random" Path (Approximated via Perlin-like noise summation)
         const t = time * speedBase;
         
         // Horizontal: Variable speed drift
         const dx = baseX + t * 40 + Math.sin(t * 0.3 + seed) * 40;
         const moveX = ((dx % (width + 100)) + (width + 100)) % (width + 100) - 50;
         
         // Vertical: Complex combination of waves to simulate randomness
         const moveY = baseY + 
                       Math.sin(t * 0.7 + seed * 3) * 12 + 
                       Math.cos(t * 1.9 + seed * 7) * 8 +
                       Math.sin(t * 3.1 + seed) * 4;
         
         // Rotation: Follow the chaotic derivative
         const dy = (
             Math.cos(t * 0.7 + seed * 3) * 8.4 - 
             Math.sin(t * 1.9 + seed * 7) * 15.2 +
             Math.cos(t * 3.1 + seed) * 12.4
         ) * 0.01;
         
         ctx.save();
         ctx.translate(moveX, moveY);
         ctx.rotate(dy); // Point in direction of chaotic curve

         ctx.fillStyle = color;
         ctx.beginPath();
         // Body
         ctx.ellipse(0, 0, 10 * S, 5 * S, 0, 0, Math.PI*2);
         ctx.fill();
         // Tail
         ctx.beginPath();
         // Flickering tail animation
         const tailFlick = Math.sin(time * 15 + seed) * 2;
         ctx.moveTo(-8 * S, 0);
         ctx.lineTo(-14 * S, -5 * S + tailFlick);
         ctx.lineTo(-14 * S, 5 * S + tailFlick);
         ctx.fill();
         
         ctx.restore();
    };

    // Organized Schools
    // School 1: Bright Orange (Mid-depth)
    for(let i=0; i<10; i++) drawSingleFish(i*0.5, width * 0.1 - i*25, height * 0.82, '#FF7043', 0.8);
    
    // School 2: Yellow (Deeper)
    for(let i=0; i<8; i++) drawSingleFish(i*0.8 + 10, width * 0.5 - i*30, height * 0.9, '#FFCA28', 0.6);
    
    // School 3: Pink (Upper)
    for(let i=0; i<12; i++) drawSingleFish(i*0.3 + 20, width * 0.8 - i*20, height * 0.75, '#FF69B4', 1.0);
    
    // School 4: Purple (Scattered)
    for(let i=0; i<7; i++) drawSingleFish(i*1.2 + 30, width * 0.3 - i*50, height * 0.88, '#AB47BC', 0.7); 
    
    // School 5: Green (Fast)
    for(let i=0; i<9; i++) drawSingleFish(i*0.4 + 40, width * 0.05 - i*35, height * 0.85, '#66BB6A', 1.2); 
}

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

    const drawSeagull = (x: number, y: number, scale: number, phase: number) => {
        const flap = Math.sin(time * 4 + phase) * 5;
        
        ctx.save();
        ctx.translate(x + parallax, y);
        ctx.scale(scale, scale);
        
        ctx.strokeStyle = '#ECEFF1'; // Off-white, not pure white for depth
        ctx.lineWidth = 2.5;
        ctx.lineCap = 'round';
        ctx.lineJoin = 'round';

        ctx.beginPath();
        // Left wing
        ctx.moveTo(-15, -5 + flap); 
        ctx.quadraticCurveTo(-8, -15 + flap, 0, 0);
        // Right wing
        ctx.quadraticCurveTo(8, -15 + flap, 15, -5 + flap);
        ctx.stroke();

        ctx.restore();
    };

    // Repositioned seagulls
    drawSeagull(width * 0.1, height * 0.1, 0.9, 0);
    drawSeagull(width * 0.25, height * 0.18, 0.7, 1);
    drawSeagull(width * 0.45, height * 0.08, 0.8, 2.5);
    drawSeagull(width * 0.7, height * 0.15, 1.0, 1.2);
    drawSeagull(width * 0.85, height * 0.22, 0.85, 3.5);
}

export function drawOceanScene(dc: DrawContext): void {
    drawOceanWaves(dc);
    drawSeagulls(dc);
    drawBoats(dc);
    drawDolphins(dc);
    drawFish(dc);
}
