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

  init(data) {
    this.selectedLevel = data.selectedLevel || 1;
    this.selectedDifficulty = data.selectedDifficulty || 'Medium';
  }

  create() {
    const { width, height } = this.scale;

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

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

    this.add.text(width / 2, 90, `${this.selectedDifficulty} Difficulty  •  Card Level ${this.selectedLevel}`, {
      fontSize: '18px', color: '#888888', fontFamily: 'Audiowide'
    }).setOrigin(0.5);

    const cardManager = this.registry.get('cardManager');
    const allDecks = this.registry.get('skirmishDecks') || [];
    this.availableDecks = allDecks.filter(d => d.difficulty === this.selectedDifficulty);
    this.cardManager = cardManager;

    this.playerChoice = 'draft';  // 'draft' or deck id
    this.opponentChoice = 'draft';

    // ── Left panel: Your Deck ──
    this._buildPanel(160, 'Your Deck', 'player');

    // ── Right panel: Opponent Deck ──
    this._buildPanel(1040, 'Opponent Deck', 'opponent');

    // ── Divider ──
    this.add.rectangle(width / 2, height / 2, 3, height - 200, 0x334466, 0.5);

    // ── Action button ──
    this.actionBtnBg = null;
    this.actionBtnTxt = null;
    this._updateActionButton();

    this._makeBackButton();
  }

  _buildPanel(startX, title, side) {
    const panelW = 720;
    const panelCX = startX + panelW / 2;
    const { height } = this.scale;

    this.add.text(panelCX, 130, title, {
      fontSize: '28px', color: '#d4af37', fontFamily: 'Audiowide'
    }).setOrigin(0.5);

    // Draft Deck option
    const draftY = 200;
    const draftBg = this.add.rectangle(panelCX, draftY, panelW - 60, 65, 0x1a3a5c)
      .setInteractive({ useHandCursor: true })
      .setStrokeStyle(2, 0x4488ff);
    const draftTxt = this.add.text(panelCX, draftY - 8, 'Draft Deck', {
      fontSize: '22px', color: '#ffffff', fontFamily: 'Audiowide'
    }).setOrigin(0.5);
    const draftSub = this.add.text(panelCX, draftY + 16, 'Build a custom deck from a random card pool', {
      fontSize: '13px', color: '#88aacc', fontFamily: 'Audiowide'
    }).setOrigin(0.5);

    draftBg.on('pointerdown', () => {
      this.sound.play('sfx_menu_select', { volume: 0.7 });
      if (side === 'player') this.playerChoice = 'draft';
      else this.opponentChoice = 'draft';
      this._refreshPanelHighlights();
      this._updateActionButton();
    });

    const panelKey = `${side}Panel`;
    this[panelKey] = { draftBg, draftTxt, draftSub, deckEntries: [] };

    // ── Premade deck list ──
    const listTop = 260;
    const entryH = 140;

    this.availableDecks.forEach((deck, i) => {
      const y = listTop + i * (entryH + 12) + entryH / 2;
      if (y + entryH / 2 > height - 100) return; // safety clamp

      const commander = this.cardManager.getCard(deck.commander);
      const cmdName = commander ? commander.name : deck.commander;

      const bg = this.add.rectangle(panelCX, y, panelW - 60, entryH, 0x112233)
        .setInteractive({ useHandCursor: true })
        .setStrokeStyle(2, 0x334466);

      const titleTxt = this.add.text(startX + 50, y - 42, deck.title, {
        fontSize: '20px', color: '#ffffff', fontFamily: 'Audiowide'
      });

      const cmdTxt = this.add.text(startX + 50, y - 16, `Commander: ${cmdName}`, {
        fontSize: '14px', color: '#88aaff', fontFamily: 'Audiowide'
      });

      const summaryTxt = this.add.text(startX + 50, y + 8, deck.summary, {
        fontSize: '12px', color: '#999999', fontFamily: 'Audiowide',
        wordWrap: { width: panelW - 100 }
      });

      const countTxt = this.add.text(startX + panelW - 80, y - 42, `${deck.cards.length} cards`, {
        fontSize: '13px', color: '#aaaaaa', fontFamily: 'Audiowide'
      }).setOrigin(1, 0);

      bg.on('pointerover', () => {
        const choice = side === 'player' ? this.playerChoice : this.opponentChoice;
        if (choice !== deck.id) bg.setFillStyle(0x1a3344);
      });
      bg.on('pointerout', () => {
        const choice = side === 'player' ? this.playerChoice : this.opponentChoice;
        if (choice !== deck.id) bg.setFillStyle(0x112233);
      });
      bg.on('pointerdown', () => {
        this.sound.play('sfx_menu_select', { volume: 0.7 });
        if (side === 'player') this.playerChoice = deck.id;
        else this.opponentChoice = deck.id;
        this._refreshPanelHighlights();
        this._updateActionButton();
      });

      this[panelKey].deckEntries.push({ bg, titleTxt, cmdTxt, summaryTxt, countTxt, deckId: deck.id });
    });

    this._refreshPanelHighlights();
  }

  _refreshPanelHighlights() {
    for (const side of ['player', 'opponent']) {
      const panel = this[`${side}Panel`];
      const choice = side === 'player' ? this.playerChoice : this.opponentChoice;

      // Draft button highlight
      const isDraft = choice === 'draft';
      panel.draftBg.setFillStyle(isDraft ? 0x2a5a8c : 0x1a2a3a);
      panel.draftBg.setStrokeStyle(2, isDraft ? 0x88ccff : 0x444444);
      panel.draftTxt.setColor(isDraft ? '#ffffff' : '#888888');
      panel.draftSub.setColor(isDraft ? '#88aacc' : '#555555');

      // Premade deck highlights
      for (const entry of panel.deckEntries) {
        const isSelected = choice === entry.deckId;
        entry.bg.setFillStyle(isSelected ? 0x1a3a5c : 0x112233);
        entry.bg.setStrokeStyle(2, isSelected ? 0x88ccff : 0x334466);
        entry.titleTxt.setColor(isSelected ? '#ffffff' : '#aaaaaa');
      }
    }
  }

  _updateActionButton() {
    const { width, height } = this.scale;
    const btnY = height - 60;

    // Destroy existing button
    if (this.actionBtnBg) { this.actionBtnBg.destroy(); this.actionBtnBg = null; }
    if (this.actionBtnTxt) { this.actionBtnTxt.destroy(); this.actionBtnTxt = null; }

    const bothPremade = this.playerChoice !== 'draft' && this.opponentChoice !== 'draft';

    if (bothPremade) {
      // Start Battle
      this.actionBtnBg = this.add.rectangle(width / 2, btnY, 300, 60, 0x226622)
        .setInteractive({ useHandCursor: true })
        .setStrokeStyle(2, 0x44aa44);
      this.actionBtnTxt = this.add.text(width / 2, btnY, 'Start Battle', {
        fontSize: '26px', color: '#ffffff', fontStyle: 'bold', fontFamily: 'Audiowide'
      }).setOrigin(0.5);

      this.actionBtnBg.on('pointerover', () => this.actionBtnBg.setFillStyle(0x338833));
      this.actionBtnBg.on('pointerout', () => this.actionBtnBg.setFillStyle(0x226622));
      this.actionBtnBg.on('pointerdown', () => {
        this.sound.play('sfx_menu_select', { volume: 0.7 });
        const playerDeck = this._getDeckById(this.playerChoice);
        const opponentDeck = this._getDeckById(this.opponentChoice);
        this.scene.start('BattleScene', {
          skirmish: true,
          deck: { commander: playerDeck.commander, cards: [...playerDeck.cards] },
          opponentDeck: { commander: opponentDeck.commander, cards: [...opponentDeck.cards] },
          playerLevel: this.selectedLevel,
          enemyLevel: this.selectedLevel,
          difficulty: this.selectedDifficulty
        });
      });
    } else {
      // Draft Cards
      this.actionBtnBg = this.add.rectangle(width / 2, btnY, 300, 60, 0x224488)
        .setInteractive({ useHandCursor: true })
        .setStrokeStyle(2, 0x4488ff);
      this.actionBtnTxt = this.add.text(width / 2, btnY, 'Draft Cards', {
        fontSize: '26px', color: '#ffffff', fontStyle: 'bold', fontFamily: 'Audiowide'
      }).setOrigin(0.5);

      this.actionBtnBg.on('pointerover', () => this.actionBtnBg.setFillStyle(0x3366aa));
      this.actionBtnBg.on('pointerout', () => this.actionBtnBg.setFillStyle(0x224488));
      this.actionBtnBg.on('pointerdown', () => {
        this.sound.play('sfx_menu_select', { volume: 0.7 });
        this.scene.start('SkirmishDraftScene', {
          selectedLevel: this.selectedLevel,
          selectedDifficulty: this.selectedDifficulty,
          playerChoice: this.playerChoice,
          opponentChoice: this.opponentChoice,
          playerPremadeDeck: this.playerChoice !== 'draft' ? this._getDeckById(this.playerChoice) : null,
          opponentPremadeDeck: this.opponentChoice !== 'draft' ? this._getDeckById(this.opponentChoice) : null
        });
      });
    }
  }

  _getDeckById(id) {
    return this.availableDecks.find(d => d.id === id) || null;
  }

  _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('SkirmishSetupScene');
    });
  }
}