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

    preload() {
        // 1. GLASBA
        this.load.audio('main_theme', 'assets/audio/music/main_theme.mp3');

        // 2. OZADJE (Placeholder logic incase image is missing)
        // If you have the specific file: 'assets/slike/main_menu/menu_bg_noir.png'
        this.load.image('menu_bg_noir', 'assets/slike/gui/menu_bg_noir.png');
    }

    create() {
        // 1. GLASBA: Takojšen začetek (Loop)
        if (!this.sound.get('main_theme')) {
            this.sound.play('main_theme', { loop: true, volume: 0.5 });
        }

        // 2. OZADJE: Kai na spalni vreči, Noir stil
        // Add image centered
        const bg = this.add.image(this.cameras.main.centerX, this.cameras.main.centerY, 'menu_bg_noir');
        // Fit to screen (cover)
        const scaleX = this.cameras.main.width / bg.width;
        const scaleY = this.cameras.main.height / bg.height;
        const scale = Math.max(scaleX, scaleY);
        bg.setScale(scale).setTint(0x888888); // Slight dark tint base

        // VIGNETTE EFFECT (Temni robovi) - Noir Stil
        // Create a radial gradient texture on the fly or use an overlay
        const vignette = this.add.graphics();
        vignette.fillStyle(0x000000, 1);
        // Draw separate rects or use a texture, simplest is a big circle cut out or just overlay image
        // For pure code vignette:
        // We will simple darken edges using a radial gradient Sprite if possible, 
        // but Phaser Graphics doesn't support radial gradients easily in WebGL without texture.
        // Alternative: Add a dark border overlay.

        // Simulating vignette with dark overlay and lower alpha in center (hacky but works without assets)
        // Ideally we load a 'vignette.png'

        // Let's use a Title Text for Flair
        this.add.text(this.cameras.main.centerX, 100, "MRTVA DOLINA", {
            fontFamily: 'Access', // Or your game font
            fontSize: '84px',
            color: '#FFFFFF',
            stroke: '#000000',
            strokeThickness: 8
        }).setOrigin(0.5);


        // 3. GUMB ZA ZAČETEK: Style 32 (5px rob)
        this.createStyle32Button(this.cameras.main.centerX, 400, "ZAČNI POT", () => {
            // Stop music if you want fresh start or keep it
            this.sound.stopAll();

            // Ko klikneš, ugasnemo meni in zaženemo INTRO
            this.scene.start('IntroScene');
        });
    }

    /**
     * Helper to create Style 32 Button
     * 5px Black Border, White Text, Hover Effect
     */
    createStyle32Button(x, y, text, onClick) {
        // Container
        const button = this.add.container(x, y);

        // Background (White inside)
        const bg = this.add.rectangle(0, 0, 300, 60, 0xFFFFFF);
        // Border (Black 5px) - simulated by a larger black rectangle behind or stroke
        // Actually Phaser Rectangle allows stroke
        bg.setStrokeStyle(5, 0x000000); // 5px Black Border
        bg.setInteractive({ useHandCursor: true });

        // Text
        const label = this.add.text(0, 0, text, {
            fontFamily: 'Arial', // Replace with game font
            fontSize: '28px',
            color: '#000000',
            fontStyle: 'bold'
        }).setOrigin(0.5);

        button.add([bg, label]);

        // Interactions
        bg.on('pointerdown', () => {
            bg.setFillStyle(0xDDDDDD); // Press effect
        });

        bg.on('pointerup', () => {
            bg.setFillStyle(0xFFFFFF);
            onClick();
        });

        bg.on('pointerover', () => {
            bg.setFillStyle(0xEEEEEE); // Hover light gray
            label.setScale(1.1); // Pop effect
        });

        bg.on('pointerout', () => {
            bg.setFillStyle(0xFFFFFF);
            label.setScale(1.0);
        });
    }
}

// Export for node/webpack env (if needed) or global
if (typeof module !== 'undefined' && module.exports) {
    module.exports = MainMenuScene;
}