export class SkirmishSetupScene extends Phaser.Scene {
  constructor() { super('SkirmishSetupScene'); }

  create() {
    const save = this.registry.get('save');
    const { width, height } = this.scale;

    // Resume main menu music if it was stopped by a battle
    const menuMusic = this.registry.get('music_main_menu');
    if (menuMusic && !menuMusic.isPlaying) menuMusic.play();

    this.add.rectangle(width / 2, height / 2, width, height, 0x0d1b2a);

    this.add.text(width / 2, 60, 'Skirmish Setup', {
      fontSize: '42px', color: '#d4af37', fontFamily: 'RaiderCrusader'
    }).setOrigin(0.5);

    this.selectedLevel = save.level || 1;
    this.selectedDifficulty = 'Medium';

    // ── Level selector ────────────────────────────────────────────────
    this.add.text(width / 2, 180, 'Card Level', {
      fontSize: '24px', color: '#ffffff', fontFamily: 'Audiowide'
    }).setOrigin(0.5);

    this.add.text(width / 2, 215, 'Both player and enemy cards will use this level', {
      fontSize: '14px', color: '#888888', fontFamily: 'Audiowide'
    }).setOrigin(0.5);

    this.levelButtons = [];
    const maxLevel = save.level || 1;
    for (let lv = 1; lv <= 5; lv++) {
      const bx = width / 2 + (lv - 3) * 120;
      const by = 280;
      const available = lv <= maxLevel;
      const isSelected = lv === this.selectedLevel;

      const bg = this.add.rectangle(bx, by, 90, 55, isSelected ? 0x2a5a8c : (available ? 0x1a3a5c : 0x222222))
        .setStrokeStyle(2, isSelected ? 0x88ccff : (available ? 0x4488ff : 0x555555));

      const text = this.add.text(bx, by, `Lv ${lv}`, {
        fontSize: '20px', color: available ? '#ffffff' : '#555555', fontFamily: 'Audiowide'
      }).setOrigin(0.5);

      if (available) {
        bg.setInteractive({ useHandCursor: true });
        bg.on('pointerdown', () => {
          this.sound.play('sfx_menu_select', { volume: 0.7 });
          this.selectedLevel = lv;
          this._refreshSelectors();
        });
      }

      this.levelButtons.push({ bg, text, level: lv, available });
    }

    // ── Difficulty selector ───────────────────────────────────────────
    this.add.text(width / 2, 380, 'Deck Strength', {
      fontSize: '24px', color: '#ffffff', fontFamily: 'Audiowide'
    }).setOrigin(0.5);

    this.add.text(width / 2, 415, 'Affects draft budget and premade deck options', {
      fontSize: '14px', color: '#888888', fontFamily: 'Audiowide'
    }).setOrigin(0.5);

    const difficulties = ['Easy', 'Medium', 'Hard', 'Legendary'];
    const diffLabels = {
      Easy: 'Beginner', Medium: 'Medium', Hard: 'Advanced', Legendary: 'Legendary'
    };
    const diffColors = {
      Easy: 0x226622, Medium: 0x1a3a5c, Hard: 0x663322, Legendary: 0x664400
    };
    const diffBorderColors = {
      Easy: 0x44aa44, Medium: 0x4488ff, Hard: 0xff6644, Legendary: 0xffaa00
    };

    this.diffButtons = [];
    difficulties.forEach((diff, i) => {
      const bx = width / 2 + (i - 1.5) * 200;
      const by = 480;
      const isSelected = diff === this.selectedDifficulty;

      const bg = this.add.rectangle(bx, by, 170, 55, isSelected ? diffColors[diff] : 0x1a2a3a)
        .setInteractive({ useHandCursor: true })
        .setStrokeStyle(2, isSelected ? diffBorderColors[diff] : 0x444444);

      const text = this.add.text(bx, by, diffLabels[diff], {
        fontSize: '20px', color: isSelected ? '#ffffff' : '#aaaaaa', fontFamily: 'Audiowide'
      }).setOrigin(0.5);

      bg.on('pointerdown', () => {
        this.sound.play('sfx_menu_select', { volume: 0.7 });
        this.selectedDifficulty = diff;
        this._refreshSelectors();
      });

      this.diffButtons.push({ bg, text, diff });
    });

    // ── Select Decks button ─────────────────────────────────────────
    const startBg = this.add.rectangle(width / 2, 620, 300, 70, 0x224488)
      .setInteractive({ useHandCursor: true })
      .setStrokeStyle(2, 0x4488ff);
    this.add.text(width / 2, 620, 'Select Decks', {
      fontSize: '28px', color: '#ffffff', fontStyle: 'bold', fontFamily: 'Audiowide'
    }).setOrigin(0.5);

    startBg.on('pointerover', () => startBg.setFillStyle(0x3366aa));
    startBg.on('pointerout', () => startBg.setFillStyle(0x224488));
    startBg.on('pointerdown', () => {
      this.sound.play('sfx_menu_select', { volume: 0.7 });
      this.scene.start('SkirmishDeckSelectScene', {
        selectedLevel: this.selectedLevel,
        selectedDifficulty: this.selectedDifficulty
      });
    });

    this._makeBackButton();
  }

  _refreshSelectors() {
    const maxLevel = (this.registry.get('save')?.level) || 1;
    const diffColors = {
      Easy: 0x226622, Medium: 0x1a3a5c, Hard: 0x663322, Legendary: 0x664400
    };
    const diffBorderColors = {
      Easy: 0x44aa44, Medium: 0x4488ff, Hard: 0xff6644, Legendary: 0xffaa00
    };

    for (const btn of this.levelButtons) {
      const isSelected = btn.level === this.selectedLevel;
      btn.bg.setFillStyle(isSelected ? 0x2a5a8c : (btn.available ? 0x1a3a5c : 0x222222));
      btn.bg.setStrokeStyle(2, isSelected ? 0x88ccff : (btn.available ? 0x4488ff : 0x555555));
      btn.text.setColor(btn.available ? '#ffffff' : '#555555');
    }

    for (const btn of this.diffButtons) {
      const isSelected = btn.diff === this.selectedDifficulty;
      btn.bg.setFillStyle(isSelected ? diffColors[btn.diff] : 0x1a2a3a);
      btn.bg.setStrokeStyle(2, isSelected ? diffBorderColors[btn.diff] : 0x444444);
      btn.text.setColor(isSelected ? '#ffffff' : '#aaaaaa');
    }
  }

  _showError(msg) {
    const { width } = this.scale;
    this.add.text(width / 2, 720, msg, {
      fontSize: '20px', color: '#ff4444', fontFamily: 'Audiowide'
    }).setOrigin(0.5);
  }

  _makeBackButton() {
    const bg = this.add.rectangle(80, 45, 160, 50, 0x333333)
      .setInteractive({ useHandCursor: true })
      .setStrokeStyle(1, 0x888888);
    this.add.text(80, 45, 'Back', { fontSize: '18px', color: '#ffffff', fontFamily: 'Audiowide' }).setOrigin(0.5);
    bg.on('pointerdown', () => {
      this.sound.play('sfx_menu_select', { volume: 0.7 });
      this.scene.start('MainMenuScene');
    });
  }
}