import Phaser from 'phaser';

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

    init(data) {
        // Receive data about the destination
        this.inventory = data.inventory || { whaleOil: 0, fuel: 100, penguins: 0 };
        this.destination = data.destination || 'unknown';
        this.fuelCost = data.fuelCost || 0;
        this.returnScene = data.returnScene || 'MapScene';
        this.nextScene = data.nextScene || 'MapScene';
    }

    create() {
        // Get destination-specific content
        const content = this.getDestinationContent(this.destination);

        // Background based on destination
        this.add.rectangle(400, 300, 800, 600, content.backgroundColor);

        // Add destination-specific visual elements
        this.createDestinationVisuals(this.destination, content);

        // Journey text container
        const textBox = this.add.rectangle(400, 450, 700, 200, 0x000000, 0.85);
        textBox.setStrokeStyle(3, 0xffffff);

        // Destination title
        this.add.text(400, 360, content.title, {
            fontSize: '32px',
            fill: '#ffffff',
            fontStyle: 'bold',
            stroke: '#000000',
            strokeThickness: 4
        }).setOrigin(0.5);

        // Journey description
        this.add.text(400, 430, content.description, {
            fontSize: '18px',
            fill: '#ffffff',
            align: 'center',
            wordWrap: { width: 660 }
        }).setOrigin(0.5);

        // Fuel cost display (only if there's a cost)
        if (this.fuelCost > 0) {
            this.add.text(400, 500, `Fuel consumed: ${this.fuelCost} units`, {
                fontSize: '16px',
                fill: '#ffff00'
            }).setOrigin(0.5);
        } else {
            this.add.text(400, 500, 'The wind carries your sails...', {
                fontSize: '16px',
                fill: '#cccccc',
                fontStyle: 'italic'
            }).setOrigin(0.5);
        }

        // Continue button
        const continueBtn = this.add.rectangle(400, 540, 200, 50, 0x2d5f8e);
        continueBtn.setInteractive({ useHandCursor: true });
        continueBtn.setStrokeStyle(3, 0xffffff);

        const btnText = this.add.text(400, 540, 'CONTINUE', {
            fontSize: '20px',
            fill: '#fff',
            fontStyle: 'bold'
        }).setOrigin(0.5);

        // Hover effect (desktop)
        continueBtn.on('pointerover', () => {
            continueBtn.setFillStyle(0x4a90c4);
        });

        continueBtn.on('pointerout', () => {
            continueBtn.setFillStyle(0x2d5f8e);
        });

        // Touch feedback (works on both touch and mouse)
        continueBtn.on('pointerdown', () => {
            continueBtn.setFillStyle(0x4a90c4);
            continueBtn.setScale(0.95);
            btnText.setScale(0.95);
        });

        continueBtn.on('pointerup', () => {
            continueBtn.setFillStyle(0x2d5f8e);
            continueBtn.setScale(1.0);
            btnText.setScale(1.0);

            // Deduct fuel (if any cost)
            if (this.fuelCost > 0) {
                this.inventory.fuel -= this.fuelCost;
            }

            // Proceed to next scene
            this.scene.start(this.nextScene, { inventory: this.inventory });
        });
    }

    getDestinationContent(destination) {
        const destinations = {
            'hunting': {
                title: 'Approaching the Hunting Grounds',
                description: 'Your vessel cuts through the icy waters. The crew prepares the harpoons.\nIn the distance, spouts of water mark the presence of whales.\nThe hunt is about to begin...',
                backgroundColor: 0x1e3a5f,
                visualType: 'ocean_whales'
            },
            'antarctic': {
                title: 'Arriving at Antarctic Island',
                description: 'The ship navigates through floating ice. A desolate, frozen island emerges.\nThousands of penguins waddle along the rocky shores.\nYour crew exchanges uneasy glances. They know why you\'re here...',
                backgroundColor: 0x4a5f7f,
                visualType: 'ice_penguins'
            },
            'port': {
                title: 'Returning to Port',
                description: 'The familiar harbor comes into view. Seagulls circle overhead.\nYou can already smell the taverns and hear the merchants haggling.\nTime to resupply and sell your cargo.',
                backgroundColor: 0x654321,
                visualType: 'harbor'
            }
        };

        return destinations[destination] || {
            title: 'Traveling...',
            description: 'Your journey continues across the vast ocean.',
            backgroundColor: 0x2d5f8e,
            visualType: 'ocean'
        };
    }

    createDestinationVisuals(destination, content) {
        switch (content.visualType) {
            case 'ocean_whales':
                this.createOceanWithWhales();
                break;
            case 'ice_penguins':
                this.createIceWithPenguins();
                break;
            case 'harbor':
                this.createHarbor();
                break;
            default:
                this.createOcean();
                break;
        }
    }

    createOceanWithWhales() {
        // Ocean waves
        this.createOcean();

        // Whale spouts in the distance
        for (let i = 0; i < 3; i++) {
            const x = 150 + i * 250;
            const y = 150 + Math.random() * 100;

            // Whale body (barely visible)
            this.add.ellipse(x, y + 20, 60, 30, 0x2a2a2a, 0.6);

            // Water spout
            const spout = this.add.triangle(
                x, y,
                0, 0,
                -8, -30,
                8, -30,
                0x87CEEB, 0.7
            );

            // Animate spout
            this.tweens.add({
                targets: spout,
                alpha: { from: 0.7, to: 0.2 },
                y: y - 10,
                duration: 1000,
                yoyo: true,
                repeat: -1,
                ease: 'Sine.inOut'
            });
        }

        // Ship silhouette
        this.add.rectangle(700, 280, 80, 40, 0x654321);
        this.add.polygon(700, 260, [0, 0, -40, 40, 40, 40], 0x8B4513);
    }

    createIceWithPenguins() {
        // Icy background effects
        for (let i = 0; i < 20; i++) {
            const x = Math.random() * 800;
            const y = Math.random() * 300;
            const size = 5 + Math.random() * 10;
            this.add.circle(x, y, size, 0xE0E0E0, 0.3);
        }

        // Ice floes
        this.add.ellipse(200, 250, 150, 80, 0xF0F0F0);
        this.add.ellipse(500, 200, 120, 70, 0xE8E8E8);
        this.add.ellipse(650, 270, 100, 60, 0xF5F5F5);

        // Penguins on ice floes
        const penguinPositions = [
            {x: 180, y: 240}, {x: 200, y: 245}, {x: 220, y: 238},
            {x: 490, y: 195}, {x: 510, y: 200},
            {x: 645, y: 265}
        ];

        penguinPositions.forEach(pos => {
            // Penguin body
            this.add.ellipse(pos.x, pos.y, 12, 18, 0x000000);
            this.add.ellipse(pos.x, pos.y + 2, 8, 12, 0xFFFFFF);
            // Penguin eyes
            this.add.circle(pos.x - 2, pos.y - 4, 1.5, 0xFFFFFF);
            this.add.circle(pos.x + 2, pos.y - 4, 1.5, 0xFFFFFF);
        });

        // Ship in the background
        this.add.rectangle(100, 100, 60, 30, 0x654321, 0.7);
        this.add.polygon(100, 85, [0, 0, -30, 30, 30, 30], 0x8B4513, 0.7);
    }

    createHarbor() {
        // Harbor water
        this.add.rectangle(400, 400, 800, 400, 0x2d5f8e);

        // Dock
        this.add.rectangle(400, 320, 700, 60, 0x654321);
        for (let i = 0; i < 10; i++) {
            this.add.rectangle(100 + i * 70, 320, 50, 55, 0x4a3621);
        }

        // Buildings in background
        const buildings = [
            {x: 100, y: 180, w: 80, h: 120, color: 0x8B4513},
            {x: 220, y: 200, w: 100, h: 100, color: 0x654321},
            {x: 360, y: 170, w: 90, h: 130, color: 0x8B6914},
            {x: 490, y: 190, w: 110, h: 110, color: 0x654321},
            {x: 640, y: 180, w: 95, h: 120, color: 0x8B4513}
        ];

        buildings.forEach(b => {
            this.add.rectangle(b.x, b.y, b.w, b.h, b.color);
            this.add.rectangle(b.x, b.y, b.w, b.h).setStrokeStyle(2, 0x000000);
            // Windows
            for (let i = 0; i < 3; i++) {
                for (let j = 0; j < 2; j++) {
                    this.add.rectangle(
                        b.x - b.w/4 + j * b.w/2,
                        b.y - b.h/3 + i * b.h/3,
                        10, 12, 0xFFDD44
                    );
                }
            }
        });

        // Barrels on dock
        for (let i = 0; i < 5; i++) {
            this.add.circle(150 + i * 120, 310, 15, 0x8B0000);
        }

        // Seagulls
        for (let i = 0; i < 3; i++) {
            const x = 200 + i * 200;
            const y = 80 + Math.random() * 40;
            const bird = this.add.text(x, y, 'v', {
                fontSize: '20px',
                fill: '#ffffff'
            });

            this.tweens.add({
                targets: bird,
                x: x + 50,
                y: y - 20,
                duration: 2000 + Math.random() * 1000,
                yoyo: true,
                repeat: -1,
                ease: 'Sine.inOut'
            });
        }
    }

    createOcean() {
        // Simple ocean waves
        const graphics = this.add.graphics();
        graphics.lineStyle(3, 0x4a90c4, 0.7);

        for (let i = 0; i < 8; i++) {
            const y = 100 + i * 40;
            graphics.beginPath();
            for (let x = 0; x < 800; x += 20) {
                const waveY = y + Math.sin((x + i * 30) * 0.03) * 15;
                if (x === 0) {
                    graphics.moveTo(x, waveY);
                } else {
                    graphics.lineTo(x, waveY);
                }
            }
            graphics.strokePath();
        }
    }
}