// Preload Scene - Nalaganje assetov
class PreloadScene extends Phaser.Scene {
    constructor() {
        super({ key: 'PreloadScene' });
    }

    preload() {
        console.log('⏳ PreloadScene: Loading assets...');

        this.createLoadingBar();

        // Load ALL custom sprites
        this.load.image('player_sprite', 'assets/player_sprite.png');
        this.load.image('zombie_sprite', 'assets/zombie_sprite.png');
        this.load.image('merchant_sprite', 'assets/merchant_sprite.png');
        this.load.image('house_sprite', 'assets/house_sprite.png');
        this.load.image('stone_sprite', 'assets/stone_sprite.png');
        this.load.image('tree_sprite', 'assets/tree_sprite.png');
        this.load.image('grass_sprite', 'assets/grass_sprite.png');
        this.load.image('grass_tile', 'assets/grass_tile.png');
        this.load.image('leaf_sprite', 'assets/leaf_sprite.png');
        this.load.image('wheat_sprite', 'assets/wheat_sprite.png');
        this.load.image('stone_texture', 'assets/stone_texture.png');

        // New asset packs
        this.load.image('objects_pack', 'assets/objects_pack.png');
        this.load.image('walls_pack', 'assets/walls_pack.png');
        this.load.image('ground_tiles', 'assets/ground_tiles.png');
        this.load.image('objects_pack2', 'assets/objects_pack2.png');
        this.load.image('trees_vegetation', 'assets/trees_vegetation.png');

        // User-uploaded pixel art assets (original)
        this.load.image('flowers', 'assets/flowers.png');
        this.load.image('tree_green', 'assets/tree_green.png');
        this.load.image('tree_blue', 'assets/tree_blue.png');
        this.load.image('tree_dead', 'assets/tree_dead.png');
        this.load.image('rock_asset', 'assets/rock_asset.png');

        // FINAL TREES (User Uploaded)
        this.load.image('tree_green_final', 'assets/tree_green_final.png');
        this.load.image('tree_blue_final', 'assets/tree_blue_final.png');
        this.load.image('tree_dead_final', 'assets/tree_dead_final.png');

        // NEW transparent tree/rock assets
        this.load.image('tree_blue_new', 'assets/tree_blue_new.png'); // Keep for backup

        this.load.image('tree_green_new', 'assets/tree_green_new.png');
        this.load.image('rock_1', 'assets/rock_1.png');
        this.load.image('rock_2', 'assets/rock_2.png');
        this.load.image('rock_small', 'assets/rock_small.png');
        this.load.image('tree_dead_new', 'assets/tree_dead_new.png');
        this.load.image('flowers_new', 'assets/flowers_new.png');
        this.load.image('merchant_new', 'assets/merchant_new.png');
        this.load.image('elite_zombie', 'assets/elite_zombie.png');
        this.load.image('hill_sprite', 'assets/hill_sprite.png');
        this.load.image('fence', 'assets/fence.png');
        this.load.image('gravestone', 'assets/gravestone.png');

        // Voxel stil asset-i (2.5D)
        this.load.image('tree_voxel_green', 'assets/tree_voxel_green.png');
        this.load.image('tree_voxel_blue', 'assets/tree_voxel_blue.png');
        this.load.image('tree_voxel_dead', 'assets/tree_voxel_dead.png');
        this.load.image('rock_voxel', 'assets/rock_voxel.png');

        // Wait for load completion then process transparency
        this.load.once('complete', () => {
            this.processAllTransparency();
            this.createAnimations();
        });

        // New Processed Animations (Standardized 64x64 strips)
        this.load.spritesheet('player_walk', 'assets/sprites/player_walk_strip.png', { frameWidth: 64, frameHeight: 64 });
        this.load.spritesheet('zombie_walk', 'assets/sprites/zombie_walk_strip.png', { frameWidth: 64, frameHeight: 64 });
    }

    createAnimations() {
        if (this.anims.exists('player_walk_anim')) return;

        this.anims.create({
            key: 'player_walk_anim',
            frames: this.anims.generateFrameNumbers('player_walk', { start: 0, end: 5 }),
            frameRate: 12,
            repeat: -1
        });

        this.anims.create({
            key: 'zombie_walk_anim',
            frames: this.anims.generateFrameNumbers('zombie_walk', { start: 0, end: 5 }),
            frameRate: 8,
            repeat: -1
        });
        console.log('🎞️ Animations created!');
    }

    processAllTransparency() {
        // Process ALL sprites to remove backgrounds
        const spritesToProcess = [
            'player_sprite',
            'zombie_sprite',
            'merchant_sprite',
            'house_sprite',
            'stone_sprite',
            'tree_sprite',
            'grass_sprite',
            'leaf_sprite',
            'wheat_sprite',
            'stone_texture',
            // New pixel art assets
            'flowers',
            'tree_green',
            'tree_blue',
            'tree_dead',
            'rock_asset',

            // FINAL TREES
            'tree_green_final',
            'tree_blue_final',
            'tree_dead_final',

            // NEW transparent assets
            'tree_blue_new',
            'tree_green_new',
            'rock_1',
            'rock_2',
            'rock_small',
            'merchant_new',
            'elite_zombie',
            'tree_dead_new',
            'flowers_new',
            'hill_sprite',
            'fence',
            'gravestone',
            // Voxel stil
            'tree_voxel_green',
            'tree_voxel_blue',
            'tree_voxel_dead',
            'rock_voxel'
        ];

        spritesToProcess.forEach(spriteKey => {
            this.processSpriteTransparency(spriteKey);
        });

        console.log('✅ All sprites transparency processed!');
    }

    processSpriteTransparency(spriteKey) {
        if (!this.textures.exists(spriteKey)) return;

        const texture = this.textures.get(spriteKey);
        const source = texture.getSourceImage();

        // Create canvas to process image
        const canvas = document.createElement('canvas');
        canvas.width = source.width;
        canvas.height = source.height;
        const ctx = canvas.getContext('2d', { willReadFrequently: true });

        // Draw original image
        ctx.drawImage(source, 0, 0);

        // Get image data
        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        const data = imageData.data;

        // Remove backgrounds
        for (let i = 0; i < data.length; i += 4) {
            const r = data[i];
            const g = data[i + 1];
            const b = data[i + 2];

            // Remove white/light gray backgrounds (Checkerboard & White)
            // Target grays: R,G,B should be similar and high value.
            if (r > 150 && g > 150 && b > 150) {
                // Check if it's grayscale (checkerboard is usually perfect gray)
                if (Math.abs(r - g) < 30 && Math.abs(g - b) < 30) {
                    data[i + 3] = 0;
                }
            }

            // Special: Remove brown/tan backgrounds (merchant sprite)
            if (spriteKey === 'merchant_sprite') {
                // Brown detection: R > G > B, warm tones
                const isBrown = r > 100 && r > g && g > b && (r - b) > 40;
                if (isBrown) {
                    data[i + 3] = 0;
                }
            }
        }

        // Put processed data back
        ctx.putImageData(imageData, 0, 0);

        // Create new texture from processed canvas
        this.textures.remove(spriteKey);
        this.textures.addCanvas(spriteKey, canvas);
    }

    createLoadingBar() {
        const width = this.cameras.main.width;
        const height = this.cameras.main.height;

        const progressBar = this.add.graphics();
        const progressBox = this.add.graphics();
        progressBox.fillStyle(0x222222, 0.8);
        progressBox.fillRect(width / 2 - 160, height / 2 - 25, 320, 50);

        const loadingText = this.add.text(width / 2, height / 2 - 50, 'Loading NovaFarma...', {
            font: '20px Courier New',
            fill: '#ffffff'
        });
        loadingText.setOrigin(0.5, 0.5);

        const percentText = this.add.text(width / 2, height / 2, '0%', {
            font: '18px Courier New',
            fill: '#ffffff'
        });
        percentText.setOrigin(0.5, 0.5);

        this.load.on('progress', (value) => {
            percentText.setText(parseInt(value * 100) + '%');
            progressBar.clear();
            progressBar.fillStyle(0x00ff00, 1); // Matrix Green
            progressBar.fillRect(width / 2 - 150, height / 2 - 15, 300 * value, 30);
        });

        this.load.on('complete', () => {
            progressBar.destroy();
            progressBox.destroy();
            loadingText.destroy();
            percentText.destroy();
        });
    }

    create() {
        console.log('✅ PreloadScene: Assets loaded!');
        window.gameState.currentScene = 'PreloadScene';

        const width = this.cameras.main.width;
        const height = this.cameras.main.height;

        const title = this.add.text(width / 2, height / 2 - 50, 'KRVAVA ŽETEV', {
            fontFamily: 'Courier New',
            fontSize: '48px',
            fill: '#ff0000',
            fontStyle: 'bold',
            stroke: '#000000',
            strokeThickness: 6
        });
        title.setOrigin(0.5);

        const subtitle = this.add.text(width / 2, height / 2 + 10, 'Zombie Roots', {
            fontFamily: 'Courier New',
            fontSize: '24px',
            fill: '#00ff41'
        });
        subtitle.setOrigin(0.5);

        const instruction = this.add.text(width / 2, height / 2 + 60, 'Press SPACE to start', {
            fontFamily: 'Courier New',
            fontSize: '16px',
            fill: '#888888'
        });
        instruction.setOrigin(0.5);

        this.tweens.add({
            targets: instruction,
            alpha: 0.3,
            duration: 800,
            yoyo: true,
            repeat: -1
        });

        const startGame = () => {
            console.log('🎮 Starting StoryScene...');
            this.input.keyboard.off('keydown');
            this.input.off('pointerdown');
            this.scene.start('StoryScene');
        };

        this.time.delayedCall(3000, () => {
            startGame();
        });

        this.input.keyboard.on('keydown', (event) => {
            if (event.code === 'Space' || event.code === 'Enter') {
                startGame();
            }
        });

        this.input.on('pointerdown', () => {
            startGame();
        });
    }
}