import Phaser from 'phaser';

/**
 * Scène d'introduction : lit une vidéo en mode paysage puis passe au menu
 */
export class IntroScene extends Phaser.Scene {
    private video?: Phaser.GameObjects.Video;
    private hasFinished: boolean = false;
    private rotationText?: Phaser.GameObjects.Text;
    private playButton?: Phaser.GameObjects.Container;

    constructor() {
        super({ key: 'IntroScene' });
    }

    create(): void {
        const { width, height } = this.cameras.main;
        this.cameras.main.setBackgroundColor('#000000');

        console.log('[IntroScene] Création de la scène d\'intro');
        console.log('[IntroScene] Dimensions:', width, 'x', height);

        // Vérifier si on est en mode paysage
        const isLandscape = window.innerWidth > window.innerHeight;

        if (!isLandscape) {
            // Mode portrait → demander de tourner en paysage
            console.log('[IntroScene] Mode portrait détecté → demande de rotation paysage');
            this.showRotateToLandscapeScreen();
            return;
        }

        // Mode paysage → afficher le bouton Play
        console.log('[IntroScene] Mode paysage → affichage du bouton Play');
        this.showPlayButton();
    }

    /**
     * Affiche le bouton Play pour démarrer la vidéo
     */
    private showPlayButton(): void {
        const { width, height } = this.cameras.main;

        // Créer un container pour le bouton
        this.playButton = this.add.container(width / 2, height / 2);

        // Cercle du bouton
        const circle = this.add.circle(0, 0, 60, 0x4CAF50, 1);
        circle.setStrokeStyle(4, 0xFFFFFF);

        // Triangle "Play"
        const triangle = this.add.triangle(
            5, // Décalé légèrement à droite pour centrer visuellement
            0,
            -15, -20,  // Point gauche haut
            -15, 20,   // Point gauche bas
            20, 0,     // Point droit
            0xFFFFFF
        );

        // Texte "Cliquez pour démarrer"
        const text = this.add.text(0, 100, 'Cliquez pour démarrer la vidéo', {
            fontSize: '24px',
            color: '#ffffff',
            align: 'center',
            fontFamily: 'Arial',
        });
        text.setOrigin(0.5);

        this.playButton.add([circle, triangle, text]);
        this.playButton.setDepth(1000);

        // Rendre le bouton interactif
        circle.setInteractive({ useHandCursor: true });

        // Animation hover
        circle.on('pointerover', () => {
            circle.setFillStyle(0x66BB6A);
            this.tweens.add({
                targets: this.playButton,
                scale: 1.1,
                duration: 200,
                ease: 'Power2',
            });
        });

        circle.on('pointerout', () => {
            circle.setFillStyle(0x4CAF50);
            this.tweens.add({
                targets: this.playButton,
                scale: 1.0,
                duration: 200,
                ease: 'Power2',
            });
        });

        // Clic sur le bouton
        circle.on('pointerdown', () => {
            console.log('[IntroScene] Bouton Play cliqué → démarrage vidéo');

            // Effet de clic
            circle.setFillStyle(0x2E7D32);
            this.tweens.add({
                targets: this.playButton,
                scale: 0.9,
                duration: 100,
                yoyo: true,
                onComplete: () => {
                    // Détruire le bouton
                    this.playButton?.destroy();
                    this.playButton = undefined;

                    // Lancer la vidéo
                    this.playIntroVideo();
                },
            });
        });

        console.log('[IntroScene] Bouton Play affiché');
    }

    /**
     * Affiche l'écran demandant de tourner en paysage
     */
    private showRotateToLandscapeScreen(): void {
        const { width, height } = this.cameras.main;

        this.rotationText = this.add.text(width / 2, height / 2, '🔄\n\nTournez votre téléphone\nen mode paysage\npour voir la vidéo', {
            fontSize: '32px',
            color: '#ffffff',
            align: 'center',
            fontFamily: 'Arial',
        });
        this.rotationText.setOrigin(0.5);

        // Surveiller l'orientation
        this.listenForLandscapeOrientation();
    }

    /**
     * Écoute les changements d'orientation
     */
    private listenForLandscapeOrientation(): void {
        // Méthode 1: Utiliser l'événement resize
        this.scale.on('resize', this.checkOrientationForVideo, this);

        // Méthode 2: orientationchange event
        window.addEventListener('orientationchange', () => {
            console.log('[IntroScene] orientationchange event détecté');
            setTimeout(() => this.checkOrientationForVideo(), 300);
        });

        // Méthode 3: polling manuel toutes les 500ms
        const checkInterval = setInterval(() => {
            this.checkOrientationForVideo();
            if (this.video || this.hasFinished) {
                clearInterval(checkInterval);
            }
        }, 500);

        // Vérifier immédiatement
        this.checkOrientationForVideo();
    }

    /**
     * Vérifie l'orientation pour afficher le bouton Play
     */
    private checkOrientationForVideo(): void {
        const isNowLandscape = window.innerWidth > window.innerHeight;

        console.log('[IntroScene] Vérification orientation - Paysage?', isNowLandscape, 'Dimensions:', window.innerWidth, 'x', window.innerHeight);

        if (isNowLandscape && !this.playButton && !this.video) {
            console.log('[IntroScene] Paysage détecté → affichage bouton Play');

            // Effacer le message
            if (this.rotationText) {
                this.rotationText.destroy();
                this.rotationText = undefined;
            }

            this.scale.off('resize', this.checkOrientationForVideo, this);
            this.showPlayButton();
        }
    }

    /**
     * Lit la vidéo d'intro
     */
    private playIntroVideo(): void {
        const { width, height } = this.cameras.main;

        console.log('[IntroScene] Vidéo dans cache?', this.cache.video.exists('intro'));

        if (!this.cache.video.exists('intro')) {
            console.warn('[IntroScene] Vidéo intro non trouvée → passage au menu.');
            this.gotoMenu();
            return;
        }

        console.log('[IntroScene] Création de l\'objet vidéo');
        this.video = this.add.video(width / 2, height / 2, 'intro');
        this.video.setOrigin(0.5);
        this.video.setDepth(1000);

        // Attendre que les métadonnées soient chargées
        this.video.on('metadata', () => {
            if (!this.video) return;

            const videoWidth = this.video.video?.videoWidth || 324;
            const videoHeight = this.video.video?.videoHeight || 720;

            console.log('[IntroScene] Métadonnées vidéo chargées:', videoWidth, 'x', videoHeight);

            this.video.setSize(videoWidth, videoHeight);
            this.updateVideoSize();
        });

        // Forcer mute pour éviter les blocages autoplay
        this.video.setMute(true);
        this.video.setLoop(false);

        console.log('[IntroScene] Démarrage de la lecture');
        const started = this.video.play(false);
        console.log('[IntroScene] Lecture démarrée?', started);

        if (!started) {
            console.warn('[IntroScene] Lecture vidéo bloquée → passage au menu.');
            this.gotoMenu();
            return;
        }

        this.video.once('complete', () => {
            console.log('[IntroScene] Vidéo terminée → passage au menu');
            this.gotoMenu();
        });

        this.video.once('error', (err: any) => {
            console.error('[IntroScene] Erreur lecture vidéo:', err);
            this.gotoMenu();
        });

        // Ajuster si resize
        this.scale.on('resize', (gameSize: Phaser.Structs.Size) => {
            if (this.video && this.video.isPlaying()) {
                this.updateVideoSize(gameSize.width, gameSize.height);
            }
        });
    }

    /**
     * Ajuste la vidéo à l'écran en mode paysage en respectant le ratio
     * Vidéo 324×720 (portrait) affichée en paysage → mode "contain" pour tout voir
     */
    private updateVideoSize(targetW?: number, targetH?: number): void {
        if (!this.video) return;
        const w = targetW ?? this.cameras.main.width;
        const h = targetH ?? this.cameras.main.height;

        // Dimensions natives de la vidéo (324×720 portrait)
        const nativeW = this.video.video?.videoWidth || 324;
        const nativeH = this.video.video?.videoHeight || 720;

        console.log('[IntroScene] updateVideoSize - Écran:', w, 'x', h);
        console.log('[IntroScene] updateVideoSize - Vidéo native:', nativeW, 'x', nativeH);

        // Ratio vidéo = 324/720 = 0.45 (portrait étroit)
        // Ratio écran paysage = 1280/720 = 1.78 (paysage large)
        const videoRatio = nativeW / nativeH;
        const screenRatio = w / h;

        let scale: number;

        // Mode "contain" : adapter pour que toute la vidéo soit visible
        if (screenRatio > videoRatio) {
            // L'écran est plus large que la vidéo → adapter à la HAUTEUR
            scale = h / nativeH;
            console.log('[IntroScene] Adaptation à la hauteur');
        } else {
            // L'écran est plus étroit que la vidéo → adapter à la LARGEUR
            scale = w / nativeW;
            console.log('[IntroScene] Adaptation à la largeur');
        }

        const finalWidth = nativeW * scale;
        const finalHeight = nativeH * scale;

        console.log('[IntroScene] updateVideoSize - Ratio vidéo:', videoRatio.toFixed(2), '- Ratio écran:', screenRatio.toFixed(2));
        console.log('[IntroScene] updateVideoSize - Scale:', scale.toFixed(2));
        console.log('[IntroScene] updateVideoSize - Taille finale:', Math.round(finalWidth), 'x', Math.round(finalHeight));

        this.video.setScale(scale);
        this.video.setPosition(w / 2, h / 2);
    }

    /**
     * Passe au menu
     */
    private gotoMenu(): void {
        if (this.hasFinished) return;
        this.hasFinished = true;
        this.video?.stop();
        this.video?.destroy();
        this.scene.start('MenuScene');
    }
}
