import * as Phaser from 'phaser';
import { GAME_HEIGHT, GAME_WIDTH, COLORS } from '../config.js';
import { auth } from '../services/auth.js';
import { Button } from '../ui/Button.js';

export default class VerifyScene extends Phaser.Scene {
  constructor() { super('Verify'); }

  init(data) {
    this.verification = data?.verification ?? { sent: false, devLink: null };
  }

  create() {
    const cx = GAME_WIDTH / 2;

    this.add.text(cx, 220, 'Verify your email', {
      fontFamily: 'Righteous',
      fontSize: '64px',
      color: COLORS.textHex,
    }).setOrigin(0.5);

    const body = this.verification.sent
      ? 'We sent a verification link to your email. Click the link to confirm your account.'
      : 'SMTP is not configured. Use the dev link below to verify your email.';

    this.add.text(cx, 360, body, {
      fontFamily: '"Julius Sans One"',
      fontSize: '26px',
      color: COLORS.mutedHex,
      wordWrap: { width: 1200 },
      align: 'center',
    }).setOrigin(0.5);

    if (this.verification.devLink) {
      this.add.text(cx, 470, this.verification.devLink, {
        fontFamily: 'monospace',
        fontSize: '22px',
        color: COLORS.accentHex,
        wordWrap: { width: 1400 },
        align: 'center',
      }).setOrigin(0.5).setInteractive({ useHandCursor: true })
        .on('pointerup', () => window.open(this.verification.devLink, '_blank'));
    }

    new Button(this, cx, 640, 'I have verified — refresh', async () => {
      await auth.refresh();
      this.scene.start('Landing');
    }, { width: 480 });
    new Button(this, cx, 720, 'Continue without verifying', () => this.scene.start('Landing'), { variant: 'ghost', width: 480 });
  }
}