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

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

    const drawRig = (x: number, baseY: number, scale: number) => {
        const time = Date.now() * 0.005;

        ctx.fillStyle = '#37474F';
        ctx.fillRect(x - 50 * scale + parallax, baseY, 10 * scale, 80 * scale);
        ctx.fillRect(x + 40 * scale + parallax, baseY, 10 * scale, 80 * scale);

        ctx.strokeStyle = '#455A64';
        ctx.lineWidth = 4 * scale;
        ctx.beginPath();
        ctx.moveTo(x - 45 * scale + parallax, baseY + 20 * scale);
        ctx.lineTo(x + 45 * scale + parallax, baseY + 60 * scale);
        ctx.moveTo(x + 45 * scale + parallax, baseY + 20 * scale);
        ctx.lineTo(x - 45 * scale + parallax, baseY + 60 * scale);
        ctx.stroke();

        ctx.fillStyle = '#546E7A';
        ctx.fillRect(x - 70 * scale + parallax, baseY - 25 * scale, 140 * scale, 25 * scale);

        ctx.fillStyle = '#455A64';
        ctx.fillRect(x - 40 * scale + parallax, baseY - 60 * scale, 40 * scale, 35 * scale);

        ctx.fillStyle = 'rgba(255, 200, 100, 0.7)';
        ctx.fillRect(x - 35 * scale + parallax, baseY - 50 * scale, 12 * scale, 10 * scale);
        ctx.fillRect(x - 18 * scale + parallax, baseY - 50 * scale, 12 * scale, 10 * scale);

        ctx.fillStyle = '#37474F';
        ctx.beginPath();
        ctx.moveTo(x + 20 * scale + parallax, baseY - 25 * scale);
        ctx.lineTo(x + 10 * scale + parallax, baseY - 120 * scale);
        ctx.lineTo(x + 50 * scale + parallax, baseY - 120 * scale);
        ctx.lineTo(x + 40 * scale + parallax, baseY - 25 * scale);
        ctx.closePath();
        ctx.fill();

        ctx.fillStyle = '#FF5722';
        ctx.fillRect(x + 20 * scale + parallax, baseY - 100 * scale, 70 * scale, 6 * scale);

        const flameX = x + 90 * scale + parallax;
        const flameY = baseY - 100 * scale;

        ctx.fillStyle = '#263238';
        ctx.fillRect(x + 85 * scale + parallax, baseY - 25 * scale, 10 * scale, -75 * scale);

        ctx.fillStyle = '#FF6F00';
        ctx.beginPath();
        ctx.moveTo(flameX - 5 * scale, flameY);
        ctx.quadraticCurveTo(flameX + Math.sin(time) * 8, flameY - 35 * scale, flameX + 5 * scale, flameY);
        ctx.fill();

        ctx.fillStyle = '#FFEB3B';
        ctx.beginPath();
        ctx.moveTo(flameX - 3 * scale, flameY);
        ctx.quadraticCurveTo(flameX + Math.sin(time * 1.5) * 5, flameY - 25 * scale, flameX + 3 * scale, flameY);
        ctx.fill();
    };

    drawRig(width * 0.25, height * 0.6, 1.0);
    drawRig(width * 0.75, height * 0.55, 1.3);
}

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

    const x = width * 0.5 + parallax;
    const y = height * 0.72 + Math.sin(time) * 3;

    ctx.fillStyle = '#1C313A';
    ctx.beginPath();
    ctx.moveTo(x - 100, y);
    ctx.lineTo(x + 100, y);
    ctx.lineTo(x + 80, y + 25);
    ctx.lineTo(x - 80, y + 25);
    ctx.closePath();
    ctx.fill();

    ctx.fillStyle = '#B71C1C';
    ctx.beginPath();
    ctx.moveTo(x - 90, y + 15);
    ctx.lineTo(x + 90, y + 15);
    ctx.lineTo(x + 80, y + 25);
    ctx.lineTo(x - 80, y + 25);
    ctx.closePath();
    ctx.fill();

    ctx.fillStyle = '#37474F';
    ctx.fillRect(x - 95, y - 8, 190, 8);

    ctx.fillStyle = '#455A64';
    for (let i = 0; i < 5; i++) {
        ctx.beginPath();
        ctx.ellipse(x - 70 + i * 35, y - 15, 15, 20, 0, Math.PI, 0);
        ctx.fill();
    }

    ctx.fillStyle = '#263238';
    ctx.fillRect(x + 60, y - 35, 30, 30);
    ctx.fillStyle = 'rgba(255, 200, 100, 0.6)';
    ctx.fillRect(x + 65, y - 30, 8, 8);
    ctx.fillRect(x + 78, y - 30, 8, 8);

    ctx.fillStyle = '#37474F';
    ctx.fillRect(x + 70, y - 50, 10, 20);

    ctx.fillStyle = 'rgba(60, 60, 60, 0.4)';
    for (let i = 0; i < 3; i++) {
        ctx.beginPath();
        ctx.arc(x + 75 + Math.sin(time + i) * 8, y - 55 - i * 15, 8 + i * 5, 0, Math.PI * 2);
        ctx.fill();
    }
}

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

    ctx.fillStyle = '#1C313A';
    ctx.fillRect(0, height * 0.75, width, height * 0.25);

    const slicks = [
        { x: width * 0.15, y: height * 0.82, rx: 80, ry: 25 },
        { x: width * 0.45, y: height * 0.85, rx: 120, ry: 30 },
        { x: width * 0.75, y: height * 0.8, rx: 90, ry: 28 },
    ];

    slicks.forEach((slick, i) => {
        ctx.fillStyle = 'rgba(20, 20, 20, 0.7)';
        ctx.beginPath();
        ctx.ellipse(slick.x, slick.y, slick.rx, slick.ry, 0, 0, Math.PI * 2);
        ctx.fill();

        const gradient = ctx.createRadialGradient(
            slick.x - slick.rx * 0.3, slick.y,
            0,
            slick.x, slick.y,
            slick.rx
        );
        gradient.addColorStop(0, 'rgba(128, 0, 128, 0.3)');
        gradient.addColorStop(0.3, 'rgba(0, 100, 200, 0.2)');
        gradient.addColorStop(0.6, 'rgba(0, 200, 100, 0.15)');
        gradient.addColorStop(1, 'rgba(200, 200, 0, 0.1)');

        ctx.fillStyle = gradient;
        ctx.beginPath();
        ctx.ellipse(slick.x + Math.sin(time + i) * 5, slick.y, slick.rx * 0.9, slick.ry * 0.9, 0, 0, Math.PI * 2);
        ctx.fill();
    });
}

export function drawOilRigScene(dc: DrawContext): void {
    drawOilSlicks(dc);
    drawOilRigs(dc);
    drawOilTanker(dc);
}
