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;
        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 = 80 * scale * Math.sin(jumpProgress * Math.PI);
        const x = baseX + (jumpProgress - 0.5) * 150 * scale;
        const y = baseY - jumpHeight;

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

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

        ctx.fillStyle = '#546E7A';
        ctx.beginPath();
        ctx.ellipse(0, 0, 30 * scale, 12 * scale, 0, 0, Math.PI * 2);
        ctx.fill();

        ctx.beginPath();
        ctx.moveTo(-5 * scale, -10 * scale);
        ctx.lineTo(5 * scale, -25 * scale);
        ctx.lineTo(12 * scale, -8 * scale);
        ctx.closePath();
        ctx.fill();

        ctx.beginPath();
        ctx.moveTo(-28 * scale, 0);
        ctx.lineTo(-45 * scale, -12 * scale);
        ctx.lineTo(-35 * scale, 0);
        ctx.lineTo(-45 * scale, 12 * scale);
        ctx.closePath();
        ctx.fill();

        ctx.beginPath();
        ctx.ellipse(35 * scale, 0, 12 * scale, 6 * scale, 0, 0, Math.PI * 2);
        ctx.fill();

        ctx.fillStyle = '#1a1a1a';
        ctx.beginPath();
        ctx.arc(28 * scale, -3 * scale, 2 * scale, 0, Math.PI * 2);
        ctx.fill();

        ctx.restore();
    };

    drawDolphin(width * 0.25, height * 0.75, 1.0, 0);
    drawDolphin(width * 0.5, height * 0.78, 0.8, 1);
}

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

    const drawSeagull = (x: number, y: number, scale: number, phase: number) => {
        const wingFlap = Math.sin(time * 3 + phase) * 0.4;

        ctx.save();
        ctx.translate(x + parallax, y);

        ctx.fillStyle = '#FFFFFF';
        ctx.beginPath();
        ctx.ellipse(0, 0, 10 * scale, 5 * scale, 0, 0, Math.PI * 2);
        ctx.fill();

        ctx.strokeStyle = '#FFFFFF';
        ctx.lineWidth = 3 * scale;
        ctx.lineCap = 'round';
        ctx.beginPath();
        ctx.moveTo(-12 * scale, 0);
        ctx.quadraticCurveTo(-18 * scale, -15 * scale * (1 + wingFlap), -25 * scale, -5 * scale);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(12 * scale, 0);
        ctx.quadraticCurveTo(18 * scale, -15 * scale * (1 + wingFlap), 25 * scale, -5 * scale);
        ctx.stroke();

        ctx.fillStyle = '#FFFFFF';
        ctx.beginPath();
        ctx.arc(12 * scale, -2 * scale, 4 * scale, 0, Math.PI * 2);
        ctx.fill();

        ctx.fillStyle = '#FF9800';
        ctx.beginPath();
        ctx.moveTo(16 * scale, -2 * scale);
        ctx.lineTo(22 * scale, 0);
        ctx.lineTo(16 * scale, 2 * scale);
        ctx.closePath();
        ctx.fill();

        ctx.restore();
    };

    drawSeagull(width * 0.15, height * 0.2, 1.0, 0);
    drawSeagull(width * 0.35, height * 0.15, 0.8, 1);
    drawSeagull(width * 0.55, height * 0.22, 1.2, 2);
    drawSeagull(width * 0.8, height * 0.18, 0.9, 3);
}

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