import Phaser from '../vendor/phaser.js';
import { config } from '../config/Config.js';
import { toColor } from '../utils/Color.js';
import { Ship } from '../entities/Ship.js';
import { Starfield } from '../visuals/Starfield.js';

const FONT_FALLBACK = "'Segoe UI', 'Helvetica Neue', Arial, sans-serif";

/**
 * The game world (v0.1: one ship in open space).
 * Click anywhere to fly there.
 */
export class GameScene extends Phaser.Scene {
  constructor() {
    super({ key: 'GameScene' });
  }

  create() {
    // Background
    this.starfield = new Starfield(this);
    this.starfield.create();

    // The ship
    this.ship = new Ship(this, this.scale.width / 2, this.scale.height / 2);
    this.ship.setDepth(10);

    // Hint
    this.hint = this.add
      .text(this.scale.width / 2, this.scale.height - 26, config.get('game.hintText', ''), {
        fontFamily: FONT_FALLBACK,
        fontSize: '14px',
        color: '#54608a',
      })
      .setOrigin(0.5);

    // Input: click = fly there
    this.input.on('pointerdown', (pointer) => {
      this.showTargetMarker(pointer.worldX, pointer.worldY);
      this.ship.setTarget(pointer.worldX, pointer.worldY);
      this.hideHint();
    });
  }

  update(_time, delta) {
    this.starfield.update(delta);
    this.ship.update(_time, delta);
  }

  showTargetMarker(x, y) {
    const color = toColor(config.get('game.markerColor', '#41c7ff'));
    const marker = this.add.circle(x, y, 10, color, 0.8).setDepth(5);
    this.tweens.add({
      targets: marker,
      scale: 2.4,
      alpha: 0,
      duration: 450,
      ease: 'Sine.easeOut',
      onComplete: () => marker.destroy(),
    });
  }

  hideHint() {
    if (!this.hint || !this.hint.active) return;
    this.tweens.add({
      targets: this.hint,
      alpha: 0,
      duration: 400,
      onComplete: () => {
        this.hint.destroy();
        this.hint = null;
      },
    });
  }

  shutdown() {
    this.starfield?.destroy();
  }
}