import { fontSize } from '../utils/responsive.js';
import { createFullscreenButton } from '../utils/fullscreen.js';

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

    init(data) {
        // No data needed - this is the entry point
    }

    create() {
        // Ocean blue background
        this.add.rectangle(400, 300, 800, 600, 0x1e5a8e);

        // Draw decorative waves
        this.drawWaves();

        // Ship silhouette (decorative element)
        this.drawShip();

        // Game title
        const title = this.add.text(400, 150, 'WHALE HUNTING', {
            fontSize: fontSize(56),
            fill: '#ffffff',
            fontStyle: 'bold'
        }).setOrigin(0.5);
        title.setStroke('#000000', 3);

        // Subtitle
        this.add.text(400, 210, 'A Whaling Adventure on the High Seas', {
            fontSize: fontSize(22),
            fill: '#cccccc',
            fontStyle: 'italic'
        }).setOrigin(0.5);

        // Decorative separator line
        const line = this.add.graphics();
        line.lineStyle(3, 0xcccccc, 0.6);
        line.lineBetween(200, 240, 600, 240);

        // Start button
        const buttonBg = this.add.rectangle(400, 400, 200, 60, 0x2d5f8e);
        buttonBg.setStrokeStyle(3, 0xffffff);
        buttonBg.setInteractive({ useHandCursor: true });

        const buttonText = this.add.text(400, 400, 'SET SAIL', {
            fontSize: fontSize(28),
            fill: '#ffffff',
            fontStyle: 'bold'
        }).setOrigin(0.5);

        // Button hover effects (desktop)
        buttonBg.on('pointerover', () => {
            buttonBg.setFillStyle(0x4a90c4);
        });

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

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

        buttonBg.on('pointerup', () => {
            buttonBg.setFillStyle(0x2d5f8e);
            buttonBg.setScale(1.0);
            buttonText.setScale(1.0);
            this.startGame();
        });

        // Instructions text
        this.add.text(400, 530, 'Click to cast off and seek yer fortune!', {
            fontSize: fontSize(16),
            fill: '#ffff99'
        }).setOrigin(0.5);

        // Fullscreen button
        createFullscreenButton(this);

        // Version display
        this.add.text(790, 590, 'v1.2.0', {
            fontSize: fontSize(12),
            fill: '#ffffff',
            alpha: 0.5
        }).setOrigin(1, 1);
    }

    drawWaves() {
        const waves = this.add.graphics();
        waves.lineStyle(2, 0x4a90c4, 0.5);

        // Draw 8 wavy horizontal lines
        for (let i = 0; i < 8; i++) {
            const y = 80 + (i * 60);
            waves.beginPath();
            waves.moveTo(0, y);

            // Create wave pattern
            for (let x = 0; x <= 800; x += 20) {
                const waveY = y + Math.sin((x + i * 50) * 0.02) * 8;
                waves.lineTo(x, waveY);
            }

            waves.strokePath();
        }
    }

    drawShip() {
        const ship = this.add.graphics();

        // Hull
        ship.fillStyle(0x654321);
        ship.fillRect(655, 427, 90, 45);

        // Sail (triangle)
        ship.fillStyle(0x8B4513);
        ship.beginPath();
        ship.moveTo(700, 380);  // Top of sail
        ship.lineTo(680, 430);  // Bottom left
        ship.lineTo(720, 430);  // Bottom right
        ship.closePath();
        ship.fillPath();
    }

    startGame() {
        // Initialize inventory with starting values
        const inventory = {
            whaleOil: 0,
            fuel: 100,
            penguins: 0
        };

        // Transition to ship deck
        this.scene.start('ShipDeckScene', { inventory: inventory });
    }
}