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

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

    // Helper: Draw varied clean building shapes
    const drawBuildingShape = (
        bx: number, by: number, bw: number, bh: number, 
        color: string, windowColor: string, type: number,
        stableSeedX: number
    ) => {
        ctx.fillStyle = color;
        // Base
        ctx.fillRect(bx, by - bh, bw, bh + height * 0.5);

        // Roof variations
        if (type === 1) { // Slanted
            ctx.beginPath();
            ctx.moveTo(bx, by - bh);
            ctx.lineTo(bx + bw, by - bh);
            ctx.lineTo(bx + bw, by - bh - 20);
            ctx.fill();
        } else if (type === 2) { // Spire
            ctx.beginPath();
            ctx.moveTo(bx + bw/2 - 5, by - bh);
            ctx.lineTo(bx + bw/2, by - bh - 40);
            ctx.lineTo(bx + bw/2 + 5, by - bh);
            ctx.fill();
            // Flag or light on tip?
            ctx.fillStyle = '#CFD8DC';
            ctx.fillRect(bx + bw/2 - 1, by - bh - 40, 2, 40);
            ctx.fillStyle = color;
        } else if (type === 3) { // Tri-peak
             ctx.beginPath();
             ctx.moveTo(bx, by - bh);
             ctx.lineTo(bx + bw * 0.25, by - bh - 15);
             ctx.lineTo(bx + bw * 0.5, by - bh);
             ctx.lineTo(bx + bw * 0.75, by - bh - 15);
             ctx.lineTo(bx + bw, by - bh);
             ctx.fill();
        }

        // Windows (Glassy/Office style)
        const cols = Math.floor(bw / 12);
        const rows = Math.floor(bh / 18);
        const padding = 4;
        
        ctx.fillStyle = windowColor;
        for(let r=0; r<rows; r++) {
             for(let c=0; c<cols; c++) {
                 // Deterministic pattern
                 const seed = stableSeedX + c * 23 + r * 17;
                 // Office buildings usually have uniform glass, maybe some variation
                 // Checkboard-ish or full glass lines
                 if (Math.abs(Math.sin(seed)) > 0.8) continue; // Some gaps
                 
                 // Reflection flicker
                 if (Math.abs(Math.cos(seed)) > 0.9) {
                     ctx.fillStyle = 'rgba(224, 247, 250, 0.6)'; // Bright reflection
                     ctx.fillRect(bx + c*12 + padding, by - bh + r*18 + padding, 8, 12);
                     ctx.fillStyle = windowColor;
                 } else {
                     ctx.fillRect(bx + c*12 + padding, by - bh + r*18 + padding, 8, 12);
                 }
             }
        }
    };

    // -- Background Layer -- (Far, light blue/grey)
    const bgParallax = state.mouseX * 0.15;
    const bgBaseY = height * 0.78;
    let currentBgX = -100;
    while(currentBgX < width + 100) {
        const seed = currentBgX * 0.1;
        const bW = 60 + (Math.abs(Math.sin(seed)) * 40); 
        const bH = height * 0.25 + (Math.abs(Math.cos(seed)) * height * 0.25);
        const gap = 10 + Math.abs(Math.sin(seed * 2)) * 20; 
        
        // Color: Cool Greys/Blues
        const hue = 200 + Math.floor(Math.abs(Math.sin(seed)*20));
        const color = `hsl(${hue}, 15%, 75%)`;

        drawBuildingShape(
            currentBgX + bgParallax, bgBaseY, bW, bH, 
            color, 'rgba(225, 245, 254, 0.3)', 
            Math.floor(Math.abs(Math.sin(seed * 5)) * 4),
            currentBgX
        );
        currentBgX += bW + gap;
    }

    // -- Middle Layer -- (Mid distance, slightly darker/vibrant)
    const midParallax = state.mouseX * 0.25;
    const midBaseY = height * 0.8;
    let currentMidX = -50;
    while(currentMidX < width + 50) {
        const seed = currentMidX * 0.17;
        const bW = 70 + (Math.abs(Math.sin(seed)) * 50); 
        const bH = height * 0.2 + (Math.abs(Math.cos(seed)) * height * 0.2);
        const gap = 30 + Math.abs(Math.sin(seed * 4)) * 40; 
        
        const hue = 210 + Math.floor(Math.abs(Math.cos(seed)*20));
        const color = `hsl(${hue}, 25%, 65%)`;

        drawBuildingShape(
            currentMidX + midParallax, midBaseY, bW, bH,
            color, 'rgba(225, 245, 254, 0.5)',
            Math.floor(Math.abs(Math.cos(seed * 7)) * 4),
            currentMidX
        );
        currentMidX += bW + gap;
    }

    // -- Foreground Layer -- (Close, detailed)
    const fgBaseY = height * 0.82; 
    let currentFgX = 20;
    while(currentFgX < width - 20) {
        const seed = currentFgX * 0.33;
        const bW = 90 + (Math.abs(Math.sin(seed)) * 60); 
        const bH = height * 0.15 + (Math.abs(Math.cos(seed)) * height * 0.2);
        const gap = 80 + Math.abs(Math.sin(seed * 1.5)) * 80; 
        
        const hue = 220 + Math.floor(Math.abs(Math.sin(seed)*20));
        const color = `hsl(${hue}, 30%, 55%)`;

        ctx.save();
        drawBuildingShape(
            currentFgX + parallax, fgBaseY, bW, bH, 
            color, 'rgba(255, 255, 255, 0.7)',
            Math.floor(Math.abs(Math.sin(seed * 9)) * 4),
            currentFgX
        );
        ctx.restore();

        currentFgX += bW + gap;
    }
}

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

    // Road styling: Clean asphalt
    ctx.fillStyle = '#455A64';
    ctx.fillRect(0, height * 0.82, width, height * 0.08);

    // Markings: Clean white/yellow
    ctx.strokeStyle = '#FFEB3B';
    ctx.lineWidth = 3;
    ctx.setLineDash([30, 20]);
    ctx.beginPath();
    ctx.moveTo(0, height * 0.86);
    ctx.lineTo(width, height * 0.86);
    ctx.stroke();
    ctx.setLineDash([]);

    // Sidewalk (Clean)
    ctx.fillStyle = '#90A4AE';
    ctx.fillRect(0, height * 0.90, width, height * 0.1);
    // Curb
    ctx.fillStyle = '#78909C';
    ctx.fillRect(0, height * 0.90, width, height * 0.01);

    // Cars - Clean, modern, electric?
    const drawCar = (baseX: number, y: number, color: string, direction: number) => {
        const x = ((baseX + time * 60 * direction) % (width + 200)) - 100;

        // Body
        ctx.fillStyle = color;
        ctx.beginPath();
        ctx.roundRect(x, y, 40, 14, 4);
        ctx.fill();

        // Cabin/Window
        ctx.fillStyle = '#81D4FA';
        ctx.beginPath();
        ctx.roundRect(x + 10, y - 8, 20, 10, 2);
        ctx.fill();

        // Wheels
        ctx.fillStyle = '#263238';
        ctx.beginPath();
        ctx.arc(x + 10, y + 14, 5, 0, Math.PI * 2);
        ctx.arc(x + 30, y + 14, 5, 0, Math.PI * 2);
        ctx.fill();
        
        // Headlights
        if(direction > 0) {
            ctx.fillStyle = '#FFF59D';
            ctx.beginPath();
            ctx.arc(x + 40, y + 5, 2, 0, Math.PI * 2);
            ctx.fill();
        } else {
            ctx.fillStyle = '#FFF59D';
            ctx.beginPath();
            ctx.arc(x, y + 5, 2, 0, Math.PI * 2);
            ctx.fill();
        }
    };

    drawCar(width * 0.1, height * 0.83, '#4FC3F7', 1);
    drawCar(width * 0.5, height * 0.83, '#E1BEE7', 1);
    drawCar(width * 0.3, height * 0.87, '#81C784', -1);
    drawCar(width * 0.8, height * 0.87, '#FFF176', -1);
}

export function drawCityClouds(dc: DrawContext): void {
    const { ctx, width, height, state } = dc;
    
    // Copy logic from drawBase but customized
    const drawCloud = (x: number, y: number, scale: number) => {
        ctx.fillStyle = 'rgba(255, 255, 255, 0.9)'; // Clean white clouds
        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;

    // Placed higher to avoid intersecting with tall skyscrapers
    drawCloud(width * 0.1 + cloudOffsetX, height * 0.1 + cloudOffsetY, 1.1); 
    drawCloud(width * 0.4 + cloudOffsetX * 0.8, height * 0.08 + cloudOffsetY * 0.8, 0.8);
    drawCloud(width * 0.8 + cloudOffsetX * 0.6, height * 0.12 + cloudOffsetY * 0.7, 1.2);
}

export function drawCityScene(dc: DrawContext): void {
    drawCityClouds(dc);
    drawCleanCityBuildings(dc);
    drawStreet(dc);
}
