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

    preload() {
        this.load.font('neuropol', 'assets/NEUROPOL.ttf');
        this.load.video('menuBackground', 'assets/menuBackground.mp4');
        
        this.load.audio('main-bg', 'assets/music/main-bg.mp3');

        this.load.image('menuLogo', 'assets/menuLogo.png');
        this.load.image('menuInterface', 'assets/menuInterface.png');
    }

    create() {
        // Create video sprite that fills the screen
        const video = this.add.video(0, 0, 'menuBackground');
        
        // Set video to fill the entire screen
        video.setOrigin(0);
        video.setScale(this.game.config.width / 1280, this.game.config.height / 720);
        
        // Make sure it's at the back layer
        video.setDepth(-1);
        
        // Play the video in a loop
        video.play(true);
        
        // Create audio and play in a loop
        this.bgMusic = this.sound.add('main-bg');
        this.bgMusic.loop = true;
        this.bgMusic.play();

        const menuInterface = this.add.image(-450, 600, 'menuInterface').setOrigin(0.5);
        const menuLogo = this.add.image(475, 325, 'menuLogo').setOrigin(0.5).setAlpha(.3).setRotation(-5).setVisible(false);
        const newGameText = this.add.text(475, 550, 'New Game', {
            fontFamily: 'neuropol, arial',
            fontSize: '48px',
            fill: '#ffd900ff',
            stroke: '#c48f00ff',
            strokeThickness: 2,
            shadow: {
                offsetX: 5,
                offsetY: 5,
                color: '#000000',
                blur: 5,
                stroke: false,
                fill: true
            }
        }).setOrigin(0.5).setRotation(-5).setAlpha(0);
        newGameText.setInteractive();

        // Add Fullscreen text below New Game
        const fullscreenText = this.add.text(475, 625, 'Toggle Fullscreen', {
            fontFamily: 'neuropol, arial',
            fontSize: '32px',
            fill: '#ffffff',
            stroke: '#888888',
            strokeThickness: 1,
            shadow: {
                offsetX: 3,
                offsetY: 3,
                color: '#000000',
                blur: 3,
                stroke: false,
                fill: true
            }
        }).setOrigin(0.5).setRotation(-5).setAlpha(0);
        fullscreenText.setInteractive();

        // Create player name input field below fullscreen text
        const playerNameInput = this.add.text(475, 680, 'Player1', {
            fontFamily: 'neuropol, arial',
            fontSize: '24px',
            fill: '#ffffff',
            stroke: '#000000',
            strokeThickness: 1,
            backgroundColor: '#333333',
            padding: {
                left: 10,
                right: 10,
                top: 5,
                bottom: 5
            }
        }).setOrigin(0.5).setRotation(-5).setAlpha(0);
        playerNameInput.setInteractive();

        // Make it look like an input field
        playerNameInput.on('pointerdown', () => {
            this.input.keyboard.enabled = true;
            const name = prompt('Enter your player name:', playerNameInput.text);
            if (name) {
                playerNameInput.setText(name);
            }
        });

        // Fade in camera at the beginning of the scene
        this.cameras.main.fadeIn(1000, 0, 0, 0);

        newGameText.on('pointerdown', () => {
            // Fade out camera
            this.cameras.main.fadeOut(1000, 0, 0, 0);
            
            // Fade out music
            this.bgMusic.stop();
            
            // Start Level scene after fade completes
            this.cameras.main.on('camerafadeoutcomplete', () => {
                this.scene.start('Level', {
                    level: this.selectedLevel,
                    playerName: playerNameInput.text
                });
            });
        });

        // Add fullscreen functionality
        fullscreenText.on('pointerdown', () => {
            if (this.scale.isFullscreen) {
                this.scale.stopFullscreen();
            } else {
                this.scale.startFullscreen();
            }
        });

        this.tweens.add({
            targets: menuInterface,
            x: 450,
            duration: 2000,
            onComplete: () => {
                menuLogo.setVisible(true);
                this.tweens.add({
                    targets: menuLogo,
                    scale: .4,
                    alpha: 1,
                    rotation: 0.02,
                    duration: 2000,
                    onComplete: () => {
                        this.tweens.add({
                            targets: menuLogo,
                            scale: .5,
                            duration: 5000,
                            yoyo: true,
                            repeat: -1
                        });
                    }
                });
                this.tweens.add({
                    targets: [newGameText, fullscreenText, playerNameInput],
                    alpha: 1,
                    rotation: 0.02,
                    delay: 1500,
                    duration: 500
                })
            }
        });

        // Create level selection area on the right side of the screen
        const levelSelectWidth = this.game.config.width / 4;
        const levelSelectHeight = this.game.config.height * 2 / 3 - 50;
        const levelSelectX = this.game.config.width - levelSelectWidth -50;
        const levelSelectY = this.game.config.height / 3;

        // Semi-transparent cyan rectangle
        const levelSelectRect = this.add.rectangle(
            levelSelectX, 
            levelSelectY, 
            levelSelectWidth, 
            levelSelectHeight, 
            0x00ffff,
            0.3
        ).setOrigin(0);

        // "Choose A Level" text above the selection area
        const chooseLevelText = this.add.text(
            levelSelectX + levelSelectWidth / 2,
            levelSelectY - 40,
            'Choose A Level',
            {
                fontFamily: 'neuropol, arial',
                fontSize: '32px',
                fill: '#ffffff',
                stroke: '#000000',
                strokeThickness: 2
            }
        ).setOrigin(0.5);

        // Create level buttons (1-10)
        this.levelButtons = [];
        const buttonWidth = levelSelectWidth - 40;
        const buttonHeight = 40;
        const spacing = 15;
        
        // Calculate starting Y position to center the buttons
        const totalButtonArea = (buttonHeight + spacing) * 10 - spacing; // Total height for all buttons
        const startY = levelSelectY + (levelSelectHeight - totalButtonArea) / 2;

        for (let i = 1; i <= 4; i++) {
            const buttonX = levelSelectX + 20;
            const buttonY = startY + (buttonHeight + spacing) * (i - 1);
            
            // Create rectangle for button
            const buttonRect = this.add.rectangle(
                buttonX,
                buttonY,
                buttonWidth,
                buttonHeight,
                i === 1 ? 0x00ff00 : 0x888888, // Green for selected (level 1), gray otherwise
                i === 1 ? 0.7 : 0.3 // Higher opacity for selected
            ).setOrigin(0).setInteractive();
            
            // Add text to button
            const buttonText = this.add.text(
                buttonX + buttonWidth / 2,
                buttonY + buttonHeight / 2,
                `Level ${i}`,
                {
                    fontFamily: 'neuropol, arial',
                    fontSize: '18px',
                    fill: i === 1 ? '#000000' : '#ffffff',
                    stroke: '#000000',
                    strokeThickness: 1
                }
            ).setOrigin(0.5);
            
            // Store button reference
            this.levelButtons.push({
                rect: buttonRect,
                text: buttonText,
                level: i,
                selected: i === 1
            });
            
            // Add pointer events to button
            buttonRect.on('pointerdown', () => {
                // Deselect all buttons first
                this.levelButtons.forEach(btn => {
                    btn.rect.setFillStyle(0x888888, 0.3);
                    btn.text.setFill('#ffffff');
                    btn.selected = false;
                });

                // Select new level
                buttonRect.setFillStyle(0x00ff00, 0.7);
                buttonText.setFill('#000000');
                this.selectedLevel = i; // Set the selected level
            
                console.log('Switching to LEVEL ',this.selectedLevel);
            });
        }

        // Set initial current level
        this.selectedLevel = 1;
    }

    update(time, delta) {

    }
}