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

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

    const drawFactory = (x: number, baseY: number, factoryWidth: number, factoryHeight: number) => {
        ctx.fillStyle = '#424242';
        ctx.fillRect(x + parallax, baseY - factoryHeight, factoryWidth, factoryHeight);

        ctx.fillStyle = '#2E2E2E';
        ctx.fillRect(x + parallax, baseY - factoryHeight, factoryWidth * 0.1, factoryHeight);

        ctx.fillStyle = 'rgba(255, 200, 100, 0.6)';
        const windowRows = 3;
        const windowCols = 4;
        const windowW = factoryWidth * 0.12;
        const windowH = factoryHeight * 0.08;
        const spacingX = (factoryWidth - windowCols * windowW) / (windowCols + 1);
        const spacingY = (factoryHeight * 0.6 - windowRows * windowH) / (windowRows + 1);

        for (let row = 0; row < windowRows; row++) {
            for (let col = 0; col < windowCols; col++) {
                const wx = x + parallax + spacingX * (col + 1) + windowW * col;
                const wy = baseY - factoryHeight + spacingY * (row + 1) + windowH * row + factoryHeight * 0.3;
                ctx.fillRect(wx, wy, windowW, windowH);
            }
        }

        const chimneyWidth = factoryWidth * 0.15;
        const chimneyHeight = factoryHeight * 0.6;
        ctx.fillStyle = '#263238';
        ctx.fillRect(x + parallax + factoryWidth * 0.7, baseY - factoryHeight - chimneyHeight, chimneyWidth, chimneyHeight);

        ctx.fillStyle = '#D32F2F';
        ctx.fillRect(x + parallax + factoryWidth * 0.7, baseY - factoryHeight - chimneyHeight, chimneyWidth, 10);
        ctx.fillRect(x + parallax + factoryWidth * 0.7, baseY - factoryHeight - chimneyHeight * 0.5, chimneyWidth, 10);

        drawSmoke(ctx, x + parallax + factoryWidth * 0.7 + chimneyWidth / 2, baseY - factoryHeight - chimneyHeight);
    };

    drawFactory(width * 0.08, height * 0.8, width * 0.18, height * 0.28);
    drawFactory(width * 0.35, height * 0.8, width * 0.22, height * 0.38);
    drawFactory(width * 0.7, height * 0.8, width * 0.15, height * 0.3);
}

function drawSmoke(ctx: CanvasRenderingContext2D, x: number, baseY: number): void {
    const time = Date.now() * 0.001;

    ctx.fillStyle = 'rgba(100, 100, 100, 0.5)';
    for (let i = 0; i < 6; i++) {
        const smokeY = baseY - i * 22 - Math.sin(time + i) * 8;
        const smokeRadius = 12 + i * 10 + Math.sin(time * 2 + i) * 4;
        const offsetX = Math.sin(time + i * 0.5) * 20;
        const alpha = 0.5 - i * 0.07;

        ctx.globalAlpha = alpha;
        ctx.beginPath();
        ctx.arc(x + offsetX, smokeY, smokeRadius, 0, Math.PI * 2);
        ctx.fill();
    }
    ctx.globalAlpha = 1;
}

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

    ctx.fillStyle = '#37474F';
    const polePositions = [width * 0.25, width * 0.6, width * 0.95];

    polePositions.forEach(px => {
        ctx.fillRect(px + parallax - 4, height * 0.5, 8, height * 0.35);
        ctx.fillRect(px + parallax - 25, height * 0.52, 50, 6);
    });

    ctx.strokeStyle = '#1a1a1a';
    ctx.lineWidth = 2;

    for (let wire = 0; wire < 3; wire++) {
        ctx.beginPath();
        const yOffset = wire * 8;
        ctx.moveTo(polePositions[0] + parallax - 20, height * 0.52 + yOffset);

        const midX = (polePositions[0] + polePositions[1]) / 2 + parallax;
        ctx.quadraticCurveTo(midX, height * 0.58 + yOffset, polePositions[1] + parallax + 20, height * 0.52 + yOffset);
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(polePositions[1] + parallax - 20, height * 0.52 + yOffset);
        const midX2 = (polePositions[1] + polePositions[2]) / 2 + parallax;
        ctx.quadraticCurveTo(midX2, height * 0.58 + yOffset, polePositions[2] + parallax + 20, height * 0.52 + yOffset);
        ctx.stroke();
    }
}

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

    const drawDeadTree = (x: number, y: number, scale: number) => {
        ctx.strokeStyle = '#4E342E';
        ctx.lineWidth = 8 * scale;
        ctx.lineCap = 'round';

        ctx.beginPath();
        ctx.moveTo(x + parallax, y + 40 * scale);
        ctx.lineTo(x + parallax, y - 30 * scale);
        ctx.stroke();

        ctx.lineWidth = 4 * scale;
        ctx.beginPath();
        ctx.moveTo(x + parallax, y - 10 * scale);
        ctx.lineTo(x + parallax - 25 * scale, y - 40 * scale);
        ctx.moveTo(x + parallax, y - 20 * scale);
        ctx.lineTo(x + parallax + 30 * scale, y - 45 * scale);
        ctx.moveTo(x + parallax, y - 30 * scale);
        ctx.lineTo(x + parallax - 15 * scale, y - 55 * scale);
        ctx.stroke();
    };

    drawDeadTree(width * 0.02, height * 0.78, 1.0);
    drawDeadTree(width * 0.88, height * 0.76, 1.2);
}

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

    // Drifting fog banks
    const drawFogLayer = (y: number, speed: number, opacity: number) => {
        const drift = (time * speed) % width;
        const xOffset = drift > 0 ? drift - width : drift;

        const gradient = ctx.createLinearGradient(0, y, 0, y + 150);
        gradient.addColorStop(0, 'rgba(120, 120, 120, 0)');
        gradient.addColorStop(0.5, `rgba(120, 120, 120, ${opacity})`);
        gradient.addColorStop(1, 'rgba(120, 120, 120, 0)');

        ctx.fillStyle = gradient;
        ctx.fillRect(xOffset, y, width * 2, 150); // Draw wide to handle looping
    };

    drawFogLayer(height * 0.65, 20, 0.15);
    drawFogLayer(height * 0.75, -15, 0.2);
    drawFogLayer(height * 0.55, 10, 0.1);
}

export function drawIndustrialScene(dc: DrawContext): void {
    drawPowerLines(dc);
    drawFactories(dc);
    drawDeadTrees(dc);
    drawFog(dc);
}
