class AssetTestScene extends Phaser.Scene {
    constructor() {
        super({ key: 'AssetTestScene' });
    }

    create() {
        console.log('🖼️ Asset Test Scene - Gallery Mode');
        this.cameras.main.setBackgroundColor('#222222');

        const title = this.add.text(20, 20, 'ASSET GALLERY CHECK', {
            fontSize: '32px',
            fill: '#ffffff',
            fontFamily: 'Courier New'
        });

        const categories = [
            { name: 'PHASE 1 (FARM)', items: (window.AssetManifest && window.AssetManifest.phases) ? window.AssetManifest.phases.farm : [] },
            { name: 'PHASE 2 (BASEMENT/MINE)', items: (window.AssetManifest && window.AssetManifest.phases) ? window.AssetManifest.phases.basement_mine : [] },
            { name: 'COMMON (CHARACTERS/INTRO)', items: (window.AssetManifest && window.AssetManifest.phases) ? window.AssetManifest.phases.common : [] }
        ];

        let startY = 80;
        let startX = 20;

        categories.forEach(cat => {
            // Category Header
            this.add.text(startX, startY, cat.name.toUpperCase(), {
                fontSize: '24px',
                fill: '#ffff00',
                fontstyle: 'bold'
            });
            startY += 40;

            // Display Assets
            let x = startX;
            let count = 0;

            // Use items from manifest
            const items = cat.items || [];

            if (items.length === 0) {
                this.add.text(x, startY, '(No assets in manifest phase)', { color: '#666' });
                startY += 40;
            } else {
                items.forEach(item => {
                    const key = item.key;

                    // Check if actually loaded
                    if (!this.textures.exists(key)) {
                        this.add.text(x, startY, `[FAIL] ${key}`, { color: '#ff0000', fontSize: '10px' });
                        x += 80;
                        return;
                    }

                    const img = this.add.image(x, startY, key);

                    // Scale down if too big
                    if (img.width > 64) {
                        const scale = 64 / Math.max(img.width, img.height);
                        img.setScale(scale);
                    }
                    img.setOrigin(0, 0);

                    // Detailed Info Text
                    const w = img.width;
                    const h = img.height;
                    let infoColor = '#bbbbbb';

                    // Scaling Check (Greenhouse limit example: 1024px)
                    if (w > 1024 || h > 1024) {
                        infoColor = '#ff5555'; // Red Alert
                    }

                    // Label: Name + Size
                    const labelText = `${key}\n${w}x${h}px`;
                    this.add.text(x, startY + 70, labelText, {
                        fontSize: '9px',
                        fill: infoColor,
                        wordWrap: { width: 75 }
                    });


                    // NOIR CHECK (Simulation: Check if alpha at borders is correct? Too expensive.
                    // Visual check: Red border fallback)
                    const border = this.add.rectangle(x + 32, startY + 32, 64, 64);
                    border.setStrokeStyle(1, 0x444444);

                    // Add click to log
                    img.setInteractive();
                    img.on('pointerdown', () => {
                        console.log(`Asset: ${key}, Size: ${img.width}x${img.height}`);
                        this.tweens.add({ targets: img, scale: img.scale * 1.2, duration: 100, yoyo: true });
                    });

                    x += 80;
                    count++;
                    if (count > 10) { // New row
                        count = 0;
                        x = startX;
                        startY += 100;
                    }
                });
                startY += 100; // Next category gap
            }
        });

        // Navigation
        const backBtn = this.add.text(this.cameras.main.width - 150, 20, 'BACK TO INTRO', {
            fontSize: '20px',
            backgroundColor: '#ff0000',
            padding: { x: 10, y: 5 }
        })
            .setInteractive({ useHandCursor: true })
            .on('pointerdown', () => this.scene.start('IntroScene'));

        // Scroll
        this.input.on('wheel', (pointer, gameObjects, deltaX, deltaY, deltaZ) => {
            this.cameras.main.scrollY += deltaY * 0.5;
        });
    }
}