import Phaser from 'phaser';

/**
 * Scène de fin : lit une vidéo de victoire en mode paysage puis retourne au menu
 */
export class EndScene extends Phaser.Scene {
    private video?: Phaser.GameObjects.Video;
    private hasFinished: boolean = false;

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

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

        console.log('[EndScene] Création de la scène de fin');
        console.log('[EndScene] Dimensions:', width, 'x', height);

        // Afficher le bouton de lecture au lieu de lancer automatiquement
        this.showPlayButton();
    }

    /**
     * Affiche le bouton de lecture
     */
    private showPlayButton(): void {
        const { width, height } = this.cameras.main;

        // Message "Appuyez sur l'écran pour visualiser la vidéo"
        const message = this.add.text(
            width / 2,
            height / 2 - 80,
            'Appuyez sur l\'écran\npour visualiser la vidéo',
            {
                fontSize: '32px',
                color: '#ffffff',
                align: 'center',
                fontFamily: 'Arial',
                stroke: '#000000',
                strokeThickness: 4,
            }
        );
        message.setOrigin(0.5);

        // Bouton play (cercle avec triangle)
        const playButton = this.add.container(width / 2, height / 2 + 60);

        const circle = this.add.circle(0, 0, 60, 0x4CAF50, 1);
        circle.setStrokeStyle(4, 0xffffff);
        const triangle = this.add.triangle(5, 0, -15, -20, -15, 20, 20, 0, 0xffffff);

        playButton.add([circle, triangle]);
        circle.setInteractive({ useHandCursor: true });

        // Clic sur le bouton ou n'importe où sur l'écran
        const startVideo = () => {
            message.destroy();
            playButton.destroy();
            this.playEndVideo();
        };

        circle.on('pointerdown', startVideo);
        this.input.once('pointerdown', startVideo);
    }

    /**
     * Lit la vidéo de fin
     */
    private playEndVideo(): void {
        const { width, height } = this.cameras.main;

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

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

        console.log('[EndScene] Création de l\'objet vidéo');
        this.video = this.add.video(width / 2, height / 2, 'end');
        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('[EndScene] Métadonnées vidéo chargées:', videoWidth, 'x', videoHeight);

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

        // Activer l'audio
        this.video.setMute(false);
        this.video.setLoop(false);

        // IMPORTANT: Forcer explicitement loop=false sur l'élément HTML5 natif
        // pour éviter que la vidéo se lise en boucle
        if (this.video.video) {
            this.video.video.loop = false;
            console.log('[EndScene] Attribut loop forcé à false sur l\'élément vidéo natif');
        }

        console.log('[EndScene] Démarrage de la lecture');
        // IMPORTANT: Utiliser play(true) pour l'autoplay après interaction utilisateur (requis pour iOS)
        const started = this.video.play(true);
        console.log('[EndScene] Lecture démarrée?', started);

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

        // Événement de fin de vidéo
        this.video.once('complete', () => {
            console.log('[EndScene] Vidéo terminée (événement complete) → passage au menu');
            this.gotoMenu();
        });

        // Événement alternatif 'stop' au cas où 'complete' ne se déclenche pas
        this.video.once('stop', () => {
            console.log('[EndScene] Vidéo arrêtée (événement stop) → passage au menu');
            this.gotoMenu();
        });

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

        // IMPORTANT: Écouter aussi l'événement natif 'ended' de l'élément HTML5
        // C'est la méthode la plus fiable pour détecter la fin d'une vidéo
        if (this.video.video) {
            this.video.video.addEventListener('ended', () => {
                console.log('[EndScene] Vidéo terminée (événement HTML5 ended) → passage au menu');
                this.gotoMenu();
            }, { once: true });
        }

        // Sécurité : timer basé sur la durée de la vidéo + 1 seconde
        // Si la vidéo n'est pas finie après sa durée, forcer le passage au menu
        this.video.on('metadata', () => {
            if (!this.video || !this.video.video) return;
            const duration = this.video.getDuration();
            console.log('[EndScene] Durée de la vidéo:', duration, 'secondes');

            // Timer de sécurité : durée vidéo + 1 seconde
            this.time.delayedCall((duration + 1) * 1000, () => {
                if (!this.hasFinished) {
                    console.warn('[EndScene] Timer de sécurité (metadata) déclenché → passage au menu');
                    this.gotoMenu();
                }
            });
        });

        // Timer de sécurité fixe basé sur la durée connue (36 secondes exactement)
        // Au cas où les métadonnées ne se chargent pas correctement
        this.time.delayedCall(36000, () => {
            if (!this.hasFinished) {
                console.warn('[EndScene] Timer de sécurité fixe (36s) déclenché → passage au menu');
                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
     */
    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
        const nativeW = this.video.video?.videoWidth || 324;
        const nativeH = this.video.video?.videoHeight || 720;

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

        // Ratio vidéo et écran
        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;
        } else {
            // L'écran est plus étroit que la vidéo → adapter à la LARGEUR
            scale = w / nativeW;
        }

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

        console.log('[EndScene] updateVideoSize - Scale:', scale.toFixed(2));
        console.log('[EndScene] updateVideoSize - Taille finale:', Math.round(finalWidth), 'x', Math.round(finalHeight));

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

    /**
     * Affiche l'image finale après la vidéo
     */
    private gotoMenu(): void {
        if (this.hasFinished) return;
        this.hasFinished = true;

        // Détruire la vidéo
        this.video?.stop();
        this.video?.destroy();

        // Afficher l'image finale
        this.showFinalImage();
    }

    /**
     * Affiche l'image finale du joueur puis le message de réussite
     */
    private showFinalImage(): void {
        // Récupérer le joueur sélectionné
        const selectedPlayer = this.registry.get('selectedPlayer') as string | undefined;
        const imageKey = selectedPlayer === 'user2' ? 'finale_user2' : 'finale_user1';

        console.log('[EndScene] Affichage image finale:', imageKey);

        // Afficher l'image en grand (centrée et mise à l'échelle)
        const finalImage = this.add.image(
            this.cameras.main.width / 2,
            this.cameras.main.height / 2,
            imageKey
        );

        // Mettre à l'échelle pour s'adapter à l'écran sans dépasser (mode "contain")
        // Limiter à 85% de la hauteur/largeur pour laisser de l'espace pour le message
        const maxWidth = this.cameras.main.width * 0.85;
        const maxHeight = this.cameras.main.height * 0.85;
        const scaleX = maxWidth / finalImage.width;
        const scaleY = maxHeight / finalImage.height;
        const scale = Math.min(scaleX, scaleY); // Min pour contenir sans déborder
        finalImage.setScale(scale);
        finalImage.setDepth(0);

        // Après 2 secondes, afficher le message et le bouton
        this.time.delayedCall(2000, () => {
            this.showSuccessMessage();
        });
    }

    /**
     * Affiche le message "Niveau 1 réussi!" et le bouton
     */
    private showSuccessMessage(): void {
        // Message "Niveau 1 réussi!"
        const successText = this.add.text(
            this.cameras.main.width / 2,
            this.cameras.main.height / 2 - 100,
            'Niveau 1 réussi!',
            {
                fontSize: '64px',
                color: '#FFD700',
                stroke: '#000000',
                strokeThickness: 8,
                fontStyle: 'bold',
            }
        );
        successText.setOrigin(0.5);
        successText.setDepth(1000);
        successText.setAlpha(0);

        // Animation d'apparition du texte
        this.tweens.add({
            targets: successText,
            alpha: 1,
            scale: { from: 0.5, to: 1.2 },
            duration: 800,
            ease: 'Back.easeOut',
        });

        // Bouton "Passer au niveau 2"
        const buttonY = this.cameras.main.height / 2 + 100;

        // Fond du bouton
        const buttonBg = this.add.rectangle(
            this.cameras.main.width / 2,
            buttonY,
            400,
            80,
            0x4CAF50
        );
        buttonBg.setOrigin(0.5);
        buttonBg.setDepth(999);
        buttonBg.setInteractive({ useHandCursor: true });
        buttonBg.setAlpha(0);

        // Texte du bouton
        const buttonText = this.add.text(
            this.cameras.main.width / 2,
            buttonY,
            'Passer au niveau 2',
            {
                fontSize: '32px',
                color: '#FFFFFF',
                fontStyle: 'bold',
            }
        );
        buttonText.setOrigin(0.5);
        buttonText.setDepth(1000);
        buttonText.setAlpha(0);

        // Animation d'apparition du bouton (un peu après le texte)
        this.tweens.add({
            targets: [buttonBg, buttonText],
            alpha: 1,
            duration: 600,
            delay: 400,
            ease: 'Power2',
        });

        // Effet hover sur le bouton
        buttonBg.on('pointerover', () => {
            buttonBg.setFillStyle(0x66BB6A);
            this.tweens.add({
                targets: buttonBg,
                scaleX: 1.05,
                scaleY: 1.05,
                duration: 200,
            });
        });

        buttonBg.on('pointerout', () => {
            buttonBg.setFillStyle(0x4CAF50);
            this.tweens.add({
                targets: buttonBg,
                scaleX: 1,
                scaleY: 1,
                duration: 200,
            });
        });

        // Clic sur le bouton → Fin du jeu (retour au menu)
        buttonBg.on('pointerdown', () => {
            console.log('[EndScene] Bouton "Passer au niveau 2" cliqué → retour au menu');

            // Flash blanc
            this.cameras.main.flash(300, 255, 255, 255, true);

            // Retour au menu
            this.time.delayedCall(300, () => {
                this.scene.start('MenuScene');
            });
        });
    }
}
