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

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

    this.add.rectangle(width / 2, height / 2, width, height, 0x0d1b2a);
    this.add.text(width / 2, 45, 'Campaign — Chapter 1', {
      fontSize: '42px', color: '#d4af37'
    }).setOrigin(0.5);

    const completed = save.campaignProgress.completedMissions;

    missions.forEach((mission, i) => {
      const isUnlocked = !mission.unlockCondition || completed.includes(mission.unlockCondition);
      const isDone = completed.includes(mission.id);
      const x = 300 + (i % 4) * 375;
      const y = 380 + Math.floor(i / 4) * 260;

      const color = isDone ? 0x228822 : isUnlocked ? 0x1a3a5c : 0x333333;
      const borderColor = isDone ? 0x44ff44 : isUnlocked ? 0x4488ff : 0x666666;

      const node = this.add.rectangle(x, y, 300, 220, color)
        .setStrokeStyle(2, borderColor);

      if (isUnlocked) {
        node.setInteractive({ useHandCursor: true });
        node.on('pointerover', () => node.setFillStyle(isDone ? 0x33aa33 : 0x2a5a8c));
        node.on('pointerout', () => node.setFillStyle(color));
        node.on('pointerdown', () => this._startMission(mission));
      }

      this.add.text(x, y - 70, mission.name, {
        fontSize: '20px', color: isUnlocked ? '#ffffff' : '#666666',
        wordWrap: { width: 270 }, align: 'center'
      }).setOrigin(0.5);

      this.add.text(x, y - 35, `Chapter ${mission.chapter}`, {
        fontSize: '16px', color: '#888888'
      }).setOrigin(0.5);

      this.add.text(x, y, isDone ? 'Complete' : isUnlocked ? 'Click to battle' : 'Locked', {
        fontSize: '16px', color: isDone ? '#44ff44' : isUnlocked ? '#aaffaa' : '#666666'
      }).setOrigin(0.5);

      // Rewards
      this.add.text(x, y + 30, `+${mission.rewards.gold} gold`, {
        fontSize: '14px', color: '#ffd700'
      }).setOrigin(0.5);

      if (mission.rewards.cards && mission.rewards.cards.length > 0) {
        this.add.text(x, y + 55, `Card reward available`, {
          fontSize: '14px', color: '#aaffaa'
        }).setOrigin(0.5);
      }
    });

    // Mission lore panel
    this.loreText = this.add.text(width / 2, height - 70, 'Hover over a mission to learn more.', {
      fontSize: '18px', color: '#888888', align: 'center', wordWrap: { width: width - 100 }
    }).setOrigin(0.5);

    // Back button
    this._makeBackButton();
  }

  _startMission(mission) {
    const save = this.registry.get('save');
    if (!save.decks || save.decks.length === 0) {
      this.add.text(960, 940, 'No deck! Create a deck in Deck Builder first.', {
        fontSize: '22px', color: '#ff4444'
      }).setOrigin(0.5);
      return;
    }
    this.scene.start('BattleScene', { mission, deck: save.decks[0] });
  }

  _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' }).setOrigin(0.5);
    bg.on('pointerdown', () => this.scene.start('MainMenuScene'));
  }
}
