// Flat2DTerrainSystem - Complete 2D top-down tile rendering
// Replaces isometric TerrainSystem for Stardew Valley style

class Flat2DTerrainSystem {
    constructor(scene) {
        this.scene = scene;
        this.tileSize = 48;
        this.width = 100;
        this.height = 100;

        // Tile map data
        this.tiles = [];

        // Rendering containers
        this.groundLayer = null;
        this.pathsLayer = null;
        this.decorLayer = null;

        // Textures ready flag
        this.texturesReady = false;

        console.log('🎨 Flat2DTerrainSystem initialized');
    }

    async generate() {
        console.log('🗺️ Generating flat 2D map...');

        // Create textures first
        this.createTileTextures();

        // Load map data
        if (typeof Map2DData !== 'undefined') {
            this.tiles = Map2DData.generateMap();
            console.log('✅ Map data generated:', this.tiles.length, 'rows');
        } else {
            console.error('❌ Map2DData not loaded!');
            this.createFallbackMap();
        }

        // Render the map
        this.renderMap();

        console.log('✅ Flat 2D map ready!');
    }

    createTileTextures() {
        // 🎨 Create SOLID, OPAQUE tiles (no transparency!)

        const graphics = this.scene.make.graphics({ x: 0, y: 0, add: false });
        const size = this.tileSize;

        // Check if PNG tilesets are loaded
        const hasGrass = this.scene.textures.exists('tileset_grass');
        const hasWater = this.scene.textures.exists('tileset_water');
        const hasDirt = this.scene.textures.exists('tileset_dirt');

        if (hasGrass && hasWater && hasDirt) {
            console.log('✅ PNG Tilesets found! Creating beautiful tiles...');

            // GRASS - SUPER VIBRANT GREEN! 🌿 (MORE 2D!)
            graphics.clear();
            graphics.fillStyle(0x3CB371, 1.0); // Medium sea green - vibrant!
            graphics.fillRect(0, 0, size, size);

            // Darker spots for contrast
            for (let i = 0; i < 20; i++) {
                graphics.fillStyle(0x2E8B57, 0.5);
                graphics.fillCircle(Math.random() * size, Math.random() * size, 2 + Math.random() * 4);
            }
            // Lighter highlights
            for (let i = 0; i < 15; i++) {
                graphics.fillStyle(0x90EE90, 0.4);
                graphics.fillCircle(Math.random() * size, Math.random() * size, 1.5);
            }
            graphics.generateTexture('tile2d_grass', size, size);

            // GRASS WITH FLOWERS (VIBRANT!)
            graphics.clear();
            graphics.fillStyle(0x3CB371, 1.0);
            graphics.fillRect(0, 0, size, size);

            for (let i = 0; i < 12; i++) {
                graphics.fillStyle(0x2E8B57, 0.3);
                graphics.fillCircle(Math.random() * size, Math.random() * size, 2);
            }

            // BRIGHT colorful flowers!
            const flowerColors = [0xFF1493, 0xFFD700, 0x00BFFF, 0xFF69B4];
            for (let i = 0; i < 4; i++) {
                graphics.fillStyle(flowerColors[Math.floor(Math.random() * 4)], 1.0);
                graphics.fillCircle(Math.random() * size, Math.random() * size, 3);
            }
            graphics.generateTexture('tile2d_grass_flowers', size, size);

            // DIRT - RICH BROWN! 🟤
            graphics.clear();
            graphics.fillStyle(0x8B4513, 1.0); // Saddle brown
            graphics.fillRect(0, 0, size, size);

            for (let i = 0; i < 25; i++) {
                graphics.fillStyle(0x654321, 0.5);
                graphics.fillCircle(Math.random() * size, Math.random() * size, 3 + Math.random() * 5);
            }
            for (let i = 0; i < 15; i++) {
                graphics.fillStyle(0xA0826D, 0.4);
                graphics.fillCircle(Math.random() * size, Math.random() * size, 2);
            }
            graphics.generateTexture('tile2d_dirt', size, size);

            graphics.clear();
            graphics.fillStyle(0x8b4513, 1.0);
            graphics.fillRect(0, 0, size, size);
            graphics.fillStyle(0x3CB371, 0.3);
            graphics.fillRect(0, 0, size, size);
            graphics.generateTexture('tile2d_dirt_edge', size, size);

            // WATER - BRIGHT TEAL! 💧 (WITH OUTLINE!)
            graphics.clear();
            graphics.fillStyle(0x20B2AA, 1.0); // Light sea green - vibrant teal!
            graphics.fillRect(0, 0, size, size);

            // Dark outline border (2D style!)
            graphics.lineStyle(2, 0x006994, 0.8);
            graphics.strokeRect(1, 1, size - 2, size - 2);

            for (let i = 0; i < 10; i++) {
                graphics.fillStyle(0x008B8B, 0.4);
                graphics.fillCircle(Math.random() * size, Math.random() * size, 5 + Math.random() * 8);
            }
            for (let i = 0; i < 15; i++) {
                graphics.fillStyle(0x48D1CC, 0.5);
                graphics.fillCircle(Math.random() * size, Math.random() * size, 2);
            }
            for (let i = 0; i < 12; i++) {
                graphics.fillStyle(0xFFFFFF, 0.6);
                graphics.fillCircle(Math.random() * size, Math.random() * size, 1);
            }
            graphics.generateTexture('tile2d_water', size, size);

            graphics.clear();
            graphics.fillStyle(0x20B2AA, 1.0);
            graphics.fillRect(0, 0, size, size);
            graphics.fillStyle(0x48D1CC, 0.5);
            graphics.fillRect(0, 0, size, size);
            graphics.generateTexture('tile2d_water_edge', size, size);

        } else {
            console.warn('⚠️ PNG Tilesets not loaded! Using fallback colors');
        }

        // STONE (FULLY OPAQUE!)
        graphics.clear();
        graphics.fillStyle(0x808080, 1.0); // 100% opacity!
        graphics.fillRect(0, 0, size, size);
        for (let i = 0; i < 12; i++) {
            graphics.fillStyle(0x606060, 0.6);
            graphics.fillCircle(Math.random() * size, Math.random() * size, 2 + Math.random() * 3);
        }
        graphics.generateTexture('tile2d_stone', size, size);

        graphics.destroy();
        this.texturesReady = true;
        console.log('✅ Tile textures created - FULLY OPAQUE!');
    }

    extractTilesFromTileset(sourceKey, targetKey, tileX, tileY, tileSize) {
        // Extract a single tile from tileset PNG and create new texture
        if (!this.scene.textures.exists(sourceKey)) {
            console.warn(`⚠️ Tileset ${sourceKey} not found, using fallback`);
            return;
        }

        const source = this.scene.textures.get(sourceKey).getSourceImage();
        const canvas = document.createElement('canvas');
        canvas.width = tileSize;
        canvas.height = tileSize;
        const ctx = canvas.getContext('2d');

        // Draw specific tile from tileset
        ctx.drawImage(
            source,
            tileX * tileSize, tileY * tileSize,  // Source position
            tileSize, tileSize,                   // Source size
            0, 0,                                 // Dest position
            tileSize, tileSize                    // Dest size
        );

        // Create new texture from extracted tile
        this.scene.textures.addCanvas(targetKey, canvas);
    }

    renderMap() {
        // 🎨 SIMPLE & CLEAN: Use TileSprite for seamless background!
        const size = this.tileSize;
        const mapWidth = this.width * size;
        const mapHeight = this.height * size;

        console.log('🎨 Rendering seamless 2D map...');

        // Create solid grass background (NO TRANSPARENCY!)
        const grassBG = this.scene.add.tileSprite(0, 0, mapWidth, mapHeight, 'tile2d_grass');
        grassBG.setOrigin(0, 0);
        grassBG.setDepth(1);

        // Create containers for paths and decorations
        this.pathsLayer = this.scene.add.container(0, 0);
        this.pathsLayer.setDepth(2);

        this.decorLayer = this.scene.add.container(0, 0);
        this.decorLayer.setDepth(3);

        const graphics = this.scene.make.graphics({ x: 0, y: 0, add: false });

        // Array to store water sprites for animation
        this.waterSprites = [];

        // Render all tiles on top of grass background
        for (let y = 0; y < this.height; y++) {
            for (let x = 0; x < this.width; x++) {
                const tile = this.tiles[y][x];
                const worldX = x * size;
                const worldY = y * size;

                // WATER tiles - back to Image, animate with tint!
                if (tile.base === 4 || tile.base === 5) {
                    const waterSprite = this.scene.add.image(worldX, worldY, 'tile2d_water');
                    waterSprite.setOrigin(0, 0);
                    waterSprite.setDisplaySize(size, size);
                    this.pathsLayer.add(waterSprite);
                    this.waterSprites.push(waterSprite); // Store for animation!
                }

                // DIRT PATH tiles
                else if (tile.base === 2 || tile.base === 3) {
                    const dirtSprite = this.scene.add.image(worldX, worldY, 'tile2d_dirt');
                    dirtSprite.setOrigin(0, 0);
                    dirtSprite.setDisplaySize(size, size);

                    // Edge blending
                    if (tile.base === 3) {
                        dirtSprite.setAlpha(0.8); // Blend with grass
                    }

                    this.pathsLayer.add(dirtSprite);
                }

                // DECORATIONS
                if (tile.decoration) {
                    this.addDecoration(x, y, tile.decoration);
                }
            }
        }

        graphics.destroy();

        // Store reference
        this.groundLayer = grassBG;

        console.log('✅ Seamless map rendered (NO GRID!)');
        console.log(`🌊 Water tiles animated: ${this.waterSprites.length}`);
    }

    getTileTexture(tileType) {
        const types = Map2DData.tileTypes;

        switch (tileType) {
            case types.GRASS: return 'tile2d_grass';
            case types.GRASS_FLOWERS: return 'tile2d_grass_flowers';
            case types.DIRT: return 'tile2d_dirt';
            case types.DIRT_EDGE: return 'tile2d_dirt_edge';
            case types.WATER: return 'tile2d_water';
            case types.WATER_EDGE: return 'tile2d_water_edge';
            case types.STONE: return 'tile2d_stone';
            default: return 'tile2d_grass';
        }
    }

    addDecoration(gridX, gridY, decorType) {
        const size = this.tileSize;
        const worldX = gridX * size + size / 2;
        const worldY = gridY * size + size / 2;

        const types = Map2DData.tileTypes;

        let sprite;

        switch (decorType) {
            case types.TREE:
                sprite = this.createTree(worldX, worldY);
                break;
            case types.FLOWER_RED:
                sprite = this.createFlower(worldX, worldY, 0xff6b6b);
                break;
            case types.FLOWER_YELLOW:
                sprite = this.createFlower(worldX, worldY, 0xffd93d);
                break;
            case types.FLOWER_BLUE:
                sprite = this.createFlower(worldX, worldY, 0x6bcbff);
                break;
            case types.LILY_PAD:
                sprite = this.createLilyPad(worldX, worldY);
                break;
            case types.BUSH:
                sprite = this.createBush(worldX, worldY);
                break;
            case 'puddle':
                sprite = this.createPuddle(worldX, worldY);
                break;
        }

        if (sprite) {
            this.decorLayer.add(sprite);
        }
    }

    createTree(x, y) {
        const graphics = this.scene.add.graphics();

        // DROP SHADOW (2D depth!) 🎨
        graphics.fillStyle(0x000000, 0.15);
        graphics.fillEllipse(x + 1, y + 24, 20, 6);

        // TRUNK - simple rectangle
        graphics.fillStyle(0x8B4513);
        graphics.fillRect(x - 4, y + 6, 8, 18);

        // Trunk outline
        graphics.lineStyle(1, 0x654321);
        graphics.strokeRect(x - 4, y + 6, 8, 18);

        // CHERRY BLOSSOM CROWN - FLAT 2D TRIANGLE! 🌸
        // Base pink triangle
        graphics.fillStyle(0xFF69B4);
        graphics.fillTriangle(
            x, y - 18,        // Top point
            x - 16, y + 8,    // Bottom left
            x + 16, y + 8     // Bottom right
        );

        // Dark outline (2D cartoon style!)
        graphics.lineStyle(2, 0xDB7093, 1.0);
        graphics.strokeTriangle(
            x, y - 18,
            x - 16, y + 8,
            x + 16, y + 8
        );

        // Inner lighter triangle (highlight)
        graphics.fillStyle(0xFFB6C1);
        graphics.fillTriangle(
            x, y - 14,
            x - 10, y + 4,
            x + 10, y + 4
        );

        // Top highlight (blossom peak!)
        graphics.fillStyle(0xFFFFFF, 0.7);
        graphics.fillTriangle(
            x, y - 14,
            x - 6, y - 4,
            x + 6, y - 4
        );

        return graphics;
    }

    createFlower(x, y, color) {
        const graphics = this.scene.add.graphics();

        // Petals
        graphics.fillStyle(color);
        for (let i = 0; i < 5; i++) {
            const angle = (Math.PI * 2 * i) / 5;
            const px = x + Math.cos(angle) * 3;
            const py = y + Math.sin(angle) * 3;
            graphics.fillCircle(px, py, 2);
        }

        // Center
        graphics.fillStyle(0xFFEB3B);
        graphics.fillCircle(x, y, 2);

        return graphics;
    }

    createLilyPad(x, y) {
        const graphics = this.scene.add.graphics();

        // Lily pad (green circle)
        graphics.fillStyle(0x4a8d2f);
        graphics.fillCircle(x, y, 8);

        // Pink flower
        graphics.fillStyle(0xFF69B4);
        for (let i = 0; i < 5; i++) {
            const angle = (Math.PI * 2 * i) / 5;
            const px = x + Math.cos(angle) * 3;
            const py = y + Math.sin(angle) * 3;
            graphics.fillCircle(px, py, 2);
        }
        graphics.fillStyle(0xFFD700);
        graphics.fillCircle(x, y, 1.5);

        return graphics;
    }

    createBush(x, y) {
        const graphics = this.scene.add.graphics();

        graphics.fillStyle(0x3a6b1f, 0.9);
        graphics.fillCircle(x, y, 10);
        graphics.fillCircle(x - 6, y + 2, 8);
        graphics.fillCircle(x + 6, y + 2, 8);

        graphics.fillStyle(0x4a8d2f, 0.7);
        graphics.fillCircle(x, y - 3, 6);

        return graphics;
    }

    createPuddle(x, y) {
        // Use existing puddle sprite if available
        if (this.scene.textures.exists('luza_sprite')) {
            const sprite = this.scene.add.image(x, y, 'luza_sprite');
            sprite.setScale(0.3); // SMALL puddles!
            sprite.setAlpha(0.3); // More transparent
            return sprite;
        }

        // Fallback - small ellipse
        const graphics = this.scene.add.graphics();
        graphics.fillStyle(0x4488bb, 0.4);
        graphics.fillEllipse(x, y, 8, 5); // Smaller!
        return graphics;
    }

    createFallbackMap() {
        // Create simple fallback if Map2DData fails
        for (let y = 0; y < this.height; y++) {
            this.tiles[y] = [];
            for (let x = 0; x < this.width; x++) {
                this.tiles[y][x] = {
                    base: 0, // Grass
                    decoration: null,
                    walkable: true
                };
            }
        }
    }

    getTile(x, y) {
        if (x < 0 || x >= this.width || y < 0 || y >= this.height) {
            return null;
        }
        // Safety check: ensure tiles array is initialized
        if (!this.tiles || !this.tiles[y]) {
            return null;
        }
        return this.tiles[y][x];
    }

    isWalkable(x, y) {
        const tile = this.getTile(x, y);
        return tile ? tile.walkable : false;
    }

    update(time, delta) {
        // 🌊 ANIMATED WATER - shimmer effect with tint!
        if (this.waterSprites && this.waterSprites.length > 0) {
            this.waterSprites.forEach(sprite => {
                if (sprite && sprite.active) {
                    // Wave shimmer using tint color
                    const wave = Math.sin(time * 0.002) * 0.15 + 0.85;
                    const tintValue = Math.floor(wave * 255);
                    sprite.setTint(
                        0x2A7FBC | (tintValue << 16) | (tintValue << 8) | tintValue
                    );

                    // Subtle alpha pulsing
                    sprite.setAlpha(0.95 + Math.sin(time * 0.001) * 0.05);
                }
            });
        }
    }

    destroy() {
        if (this.groundLayer) this.groundLayer.destroy();
        if (this.pathsLayer) this.pathsLayer.destroy();
        if (this.decorLayer) this.decorLayer.destroy();
    }
}