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

export function drawSky(dc: DrawContext): void {
    const { ctx, width, height, state } = dc;
    const colors = getSceneColors(state);

    const gradient = ctx.createLinearGradient(0, 0, 0, height);
    gradient.addColorStop(0, colors.skyTop);
    gradient.addColorStop(1, colors.skyBottom);

    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, width, height);
}

export function drawSun(dc: DrawContext): void {
    const { ctx, width, height, state } = dc;
    const colors = getSceneColors(state);

    const sunX = width * 0.85 + state.mouseX * 0.3 + state.scrollY * 0.02;
    const sunY = height * 0.2 + state.mouseY * 0.3 + state.scrollY * 0.05;
    const sunRadius = Math.min(width, height) * 0.08;

    for (let i = 4; i >= 0; i--) {
        ctx.beginPath();
        ctx.arc(sunX, sunY, sunRadius * (1 + i * 0.4), 0, Math.PI * 2);
        ctx.fillStyle = colors.sunGlow;
        ctx.globalAlpha = 0.2 - i * 0.03;
        ctx.fill();
    }

    ctx.globalAlpha = 1;

    ctx.beginPath();
    ctx.arc(sunX, sunY, sunRadius, 0, Math.PI * 2);
    ctx.fillStyle = "#FDB813";
    ctx.fill();
}

export function drawClouds(dc: DrawContext): void {
    const { ctx, width, height, state } = dc;
    const colors = getSceneColors(state);

    const drawCloud = (x: number, y: number, scale: number) => {
        ctx.fillStyle = colors.cloud;
        ctx.beginPath();
        ctx.ellipse(x, y, 60 * scale, 35 * scale, 0, 0, Math.PI * 2);
        ctx.fill();
        ctx.beginPath();
        ctx.ellipse(x + 50 * scale, y + 10 * scale, 50 * scale, 30 * scale, 0, 0, Math.PI * 2);
        ctx.fill();
        ctx.beginPath();
        ctx.ellipse(x - 40 * scale, y + 5 * scale, 45 * scale, 25 * scale, 0, 0, Math.PI * 2);
        ctx.fill();
        ctx.beginPath();
        ctx.ellipse(x + 20 * scale, y - 15 * scale, 40 * scale, 25 * scale, 0, 0, Math.PI * 2);
        ctx.fill();
    };

    const cloudOffsetX = state.mouseX * 0.5 - state.scrollY * 0.03;
    const cloudOffsetY = state.scrollY * 0.1;

    drawCloud(width * 0.15 + cloudOffsetX, height * 0.15 + cloudOffsetY, 1.2);
    drawCloud(width * 0.55 + cloudOffsetX * 0.7, height * 0.12 + cloudOffsetY * 0.8, 0.9);
    drawCloud(width * 0.85 + cloudOffsetX * 0.5, height * 0.2 + cloudOffsetY * 0.6, 1.0);
}

export function drawMountains(dc: DrawContext): void {
    const { ctx, width, height, state } = dc;
    const colors = getSceneColors(state);
    const parallaxFar = state.mouseX * 0.2 + state.scrollY * 0.15;
    const parallaxMid = state.mouseX * 0.35 + state.scrollY * 0.25;

    ctx.fillStyle = colors.mountainFar;
    ctx.beginPath();
    ctx.moveTo(-100 + parallaxFar, height);
    ctx.lineTo(width * 0.2 + parallaxFar, height * 0.45);
    ctx.lineTo(width * 0.35 + parallaxFar, height * 0.55);
    ctx.lineTo(width * 0.5 + parallaxFar, height * 0.4);
    ctx.lineTo(width * 0.7 + parallaxFar, height * 0.5);
    ctx.lineTo(width * 0.85 + parallaxFar, height * 0.35);
    ctx.lineTo(width + 100 + parallaxFar, height * 0.5);
    ctx.lineTo(width + 100, height);
    ctx.closePath();
    ctx.fill();

    ctx.fillStyle = colors.mountainMid;
    ctx.beginPath();
    ctx.moveTo(-100 + parallaxMid, height);
    ctx.lineTo(width * 0.1 + parallaxMid, height * 0.55);
    ctx.lineTo(width * 0.25 + parallaxMid, height * 0.62);
    ctx.lineTo(width * 0.4 + parallaxMid, height * 0.5);
    ctx.lineTo(width * 0.6 + parallaxMid, height * 0.58);
    ctx.lineTo(width * 0.75 + parallaxMid, height * 0.48);
    ctx.lineTo(width * 0.9 + parallaxMid, height * 0.55);
    ctx.lineTo(width + 100, height);
    ctx.closePath();
    ctx.fill();
}

export function drawHills(dc: DrawContext): void {
    const { ctx, width, height, state } = dc;
    const colors = getSceneColors(state);
    const parallax = state.mouseX * 0.5 + state.scrollY * 0.35;

    ctx.fillStyle = colors.hillFront;
    ctx.beginPath();
    ctx.moveTo(-100, height);

    for (let x = -100; x <= width + 100; x += 100) {
        const y = height * 0.65 + Math.sin((x + parallax) * 0.01) * 40;
        ctx.lineTo(x, y);
    }

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

    ctx.fillStyle = colors.ground;
    ctx.fillRect(-100, height * 0.8, width + 200, height * 0.2);
}

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

    ctx.fillStyle = colors.water;
    ctx.beginPath();
    ctx.moveTo(-100, height);

    for (let x = -100; x <= width + 100; x += 20) {
        const y = height * 0.88 + Math.sin((x + time * 50 + waveOffset) * 0.02) * 5;
        ctx.lineTo(x, y);
    }

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

    ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';
    ctx.lineWidth = 2;
    for (let i = 0; i < 5; i++) {
        ctx.beginPath();
        const startX = (width / 5) * i + Math.sin(time + i) * 20;
        ctx.moveTo(startX, height * 0.9 + i * 5);
        ctx.lineTo(startX + 40, height * 0.9 + i * 5);
        ctx.stroke();
    }
}
