export class MenuScene extends Phaser.Scene {
    constructor() {
        super('MenuScene');
    }

    preload() {
        this.load.image('menu-logo','assets/logo.png');
        this.load.image('menu-ship','assets/menu-ship.png');
        this.load.image('menu-hunter','assets/menu-hunter.png');
        this.load.image('menu-alien','assets/menu-alien.png');
        this.load.image('reticle', 'assets/reticle.png');
        this.load.audio('menu-bgMusic', 'assets/music/NeonVelocity.mp3');

        // Load custom font
        this.load.font('Space', 'assets/space-age.otf');
        this.load.font('coder', 'assets/ClassCoder.ttf');
    }

    create() {
        // Create menu background and title
        this.add.rectangle(300, 400, 600, 800, 0x111111);

        // Create starfield effect
        this.createStarfield();

        const logo = this.add.image(300, 250, 'menu-logo').setOrigin(0.5).setScale(0.5).setAlpha(0.7);
        const menuHunter = this.add.image(450, 700, 'menu-hunter').setScale(0.6).setOrigin(0.5).setAlpha(0);
        const menuShip = this.add.image(900, -300, 'menu-ship').setOrigin(0.5).setScale(.6);
        const menuAlien = this.add.image(150, 700, 'menu-alien').setScale(0.6).setOrigin(0.5).setAlpha(0);

        this.tweens.add({
            targets: menuShip,
            x: 500,
            y: 100,
            duration: 2000,
            ease: 'Cubic',
            delay: 3000            
        });

        this.tweens.add({
            targets: logo,
            alpha: 1,
            scale: 1,
            duration: 5000,
            ease: 'Bounce',
        });

        this.tweens.add({
            targets: [menuHunter, menuAlien],
            alpha: 1,
            duration: 3000,
            delay: 4000,
            ease: 'Bounce'
        })

        // Controls display with typing animation
        const controlsText = 'Controls: W,A,S,D to Move. Mouse to Aim and Fire';
        this.controlsText = this.add.text(300, 500, '', {
            fontFamily: 'Coder, Arial',
            fontSize: '16px',
            fill: '#00ff00'
        }).setOrigin(0.5);
        
        // Typing animation
        this.time.delayedCall(1000, () => {
            let i = 0;
            const typingTimer = this.time.addEvent({
                delay: 50, // Characters per second
                callback: () => {
                    if (i < controlsText.length) {
                        this.controlsText.text += controlsText.charAt(i);
                        i++;
                    } else {
                        typingTimer.remove();
                    }
                },
                callbackScope: this,
                loop: true
            });
        });

        // Menu button
        this.startButton = this.add.text(300, 550, ' START GAME ', {
            fontFamily: 'Space, Arial',
            fontSize: '48px',
            fill: '#fff'
        }).setOrigin(0.5);
        
        // Add color cycling effect for synthwave colors
        const synthwaveColors = ['#ffffff', '#ff00ff', '#00ffff', '#ffff00', '#ff00cc'];
        let colorIndex = 0;
        
        this.time.addEvent({
            delay: 1500,
            callback: () => {
                colorIndex = (colorIndex + 1) % synthwaveColors.length;
                this.startButton.setFill(synthwaveColors[colorIndex]);
            },
            loop: true
        });

        this.tweens.add({
            targets: this.startButton,
            scale: 1.2,
            duration: 1500,
            repeat: -1,
            ease: 'Sine',
            yoyo: true,
        });
        
        this.startButton.setInteractive();
        this.startButton.on('pointerdown', () => {
            // Start the actual game scene
            this.bgMusic.stop();
            this.scene.start('GameScene');
        });

        // Play background music
        this.bgMusic = this.sound.add('menu-bgMusic', { loop: true });
        this.bgMusic.play();

        // Setup mouse input for shooting and reticle
        this.setupMouseInput();

        // Add scanline effect (narrow and moving)
        this.scanlines = this.add.graphics({ x: 0, y: 0 });
        this.scanlines.fillStyle(0x00ff00, 0.15); // Green scanlines with moderate opacity
        // Create narrow horizontal lines that move vertically
        for (let i = 0; i < 20; i++) {
            const y = (i * 40) % 800;
            this.scanlines.fillRect(0, y, 600, 2); // Narrow lines (2px height)
        }
        
        // Add VHS artifacts
        this.vhsArtifacts = this.add.graphics({ x: 0, y: 0 });
        this.vhsArtifacts.fillStyle(0xff00ff, 0.1); // Magenta artifacts
        this.vhsArtifacts.fillRect(0, 0, 600, 800);

        // Add VHS artifacts 2
        this.vhsArtifacts2 = this.add.graphics({ x: 0, y: 0 });
        this.vhsArtifacts2.fillStyle(0xff00ff, 0.1); // Magenta artifacts
        this.vhsArtifacts2.fillRect(0, 0, 600, 800);

        this.tweens.add({
            targets: this.vhsArtifacts2,
            alpha: 0.1,
            duration: 10000,
            yoyo: true,
            repeat: -1
        });
        
        // Start artifact effects
        this.artifactTimer = this.time.addEvent({
            delay: 200,
            callback: this.updateVHSArtifacts,
            callbackScope: this,
            loop: true
        });
    }

    createStarfield() {
        // Create a graphics object for the starfield
        this.starfield = this.add.graphics({ x: 0, y: 0 });
        
        // Star configuration
        this.stars = [];
        const starCount = 200;
        
        // Initialize stars with random positions and z-depths
        for (let i = 0; i < starCount; i++) {
            const star = {
                x: Math.random() * 600,
                y: Math.random() * 800,
                z: Math.random() * 10 + 1, // Depth from 1 to 11
                size: Math.random() * 2 + 1,
                speed: Math.random() * 0.5 + 0.2 // Significantly reduced speed
            };
            
            // Set color based on depth (closer stars are brighter)
            const brightness = Math.max(0.5, 1 - star.z / 15); // Closer stars brighter
            const grayValue = Math.floor(150 + brightness * 105);
            star.color = (grayValue << 16) | (grayValue << 8) | grayValue;
            
            this.stars.push(star);
        }
        
        // Change direction timer - increased to make it more subtle
        this.directionChangeTimer = this.time.addEvent({
            delay: 5000, // Increase delay to 5 seconds
            callback: this.changeStarDirection,
            callbackScope: this,
            loop: true
        });
    }

    update() {
        // Update star positions
        if (this.starfield && this.stars) {
            this.starfield.clear();
            
            for (let i = 0; i < this.stars.length; i++) {
                const star = this.stars[i];
                
                // Move stars toward camera (decrease z) - greatly reduced speed
                star.z -= star.speed * 0.02;
                
                // Reset stars that move too close to camera
                if (star.z <= 0) {
                    star.z = Math.random() * 10 + 1; // Reset with new depth
                    star.x = Math.random() * 600;   // Random x position
                    star.y = Math.random() * 800;   // Random y position
                    
                    // Recalculate color based on new depth
                    const brightness = Math.max(0.5, 1 - star.z / 15);
                    const grayValue = Math.floor(150 + brightness * 105);
                    star.color = (grayValue << 16) | (grayValue << 8) | grayValue;
                }
                
                // Apply perspective projection to create parallax effect
                const scale = 20 / (star.z + 20); // Scale based on depth
                const screenX = star.x * scale;
                const screenY = star.y * scale;
                
                // Draw the star with its color and scaled size
                this.starfield.fillStyle(star.color);
                this.starfield.fillCircle(screenX, screenY, star.size * scale);
            }
        }

        // Update scanline position
        if (this.scanlines) {
            this.scanlines.y = (this.scanlines.y + 0.5) % 800;
        }
    }

    updateVHSArtifacts() {
        // Randomly update VHS artifacts
        if (this.vhsArtifacts && Math.random() > 0.7) {
            // Clear previous artifacts but keep some for flickering effect
            this.vhsArtifacts.clear();
            
            // Add random color shifts and distortions
            for (let i = 0; i < 5; i++) {
                const x = Math.random() * 600;
                const y = Math.random() * 800;
                const width = Math.random() * 10 + 1;
                const height = Math.random() * 20 + 5;
                
                // Random color (neon colors for synthwave)
                const colors = [0xff00ff, 0x00ffff, 0xffff00];
                const color = Phaser.Display.Color.GetColor32(
                    ...colors[Math.floor(Math.random() * colors.length)].toString(16).split('').map(c => parseInt(c, 16) * 17)
                );
                
                // Use higher opacity for flickering effect (instead of very low opacity)
                this.vhsArtifacts.fillStyle(color, Math.random() * 0.3 + 0.1); // Increased from 0.05 to 0.3-0.1 range
                this.vhsArtifacts.fillRect(x, y, width, height);
            }
        }
    }

    changeStarDirection() {
        // Change direction of all stars (they'll move toward camera)
        for (let i = 0; i < this.stars.length; i++) {
            const star = this.stars[i];
            
            // Randomly adjust speed and depth - much slower changes
            star.speed = Math.random() * 1 + 0.5; // Reduced speed range
            star.z += (Math.random() * 0.5 - 0.25); // Very subtle z position change
            
            // Keep stars within reasonable bounds
            if (star.z < 0.5) {
                star.z = 0.5;
            } else if (star.z > 15) {
                star.z = 15;
            }
            
            // Recalculate color based on new depth and speed
            const brightness = Math.max(0.5, 1 - star.z / 15);
            const grayValue = Math.floor(150 + brightness * 105);
            star.color = (grayValue << 16) | (grayValue << 8) | grayValue;
        }
    }

    setupMouseInput() {
        // Create mouse reticle as sprite (replacing the circle)
        this.reticle = this.add.sprite(0, 0, 'reticle');
        this.reticle.setOrigin(0.5);
        this.reticle.preFX.addGlow(0x00ffcc, .7);
        
        // Update reticle position with mouse
        this.input.on('pointermove', (pointer) => {
            if (this.gameOver) return;
            
            this.reticle.x = pointer.x;
            this.reticle.y = pointer.y;
        });
    }
}