import { Scene } from 'phaser';
import { sound } from '../managers/SoundManager.js';
import { AchievementsManager } from '../managers/AchievementsManager.js';
import { createButton } from '../utils/ui.js';

export class MenuScene extends Scene {
  constructor() {
    super({ key: 'MenuScene' });
  }

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

    this.add.tileSprite(width / 2, height / 2, width, height, 'gridBg');

    this.add.text(width / 2, height * 0.16, 'NADDIE JUMP', {
      fontFamily: '"Press Start 2P", monospace',
      fontSize: '38px',
      color: '#d8b4fe',
      align: 'center',
    }).setOrigin(0.5).setShadow(4, 4, '#581c87', 0, false, true);

    this.add.text(width / 2, height * 0.25, 'MONAD EDITION', {
      fontFamily: '"Press Start 2P", monospace',
      fontSize: '14px',
      color: '#a855f7',
      align: 'center',
    }).setOrigin(0.5);

    const preview = this.add.image(width / 2, height * 0.44, 'player_idle').setScale(0.55);
    this.tweens.add({ targets: preview, y: height * 0.44 - 15, duration: 1400, yoyo: true, repeat: -1, ease: 'Sine.easeInOut' });
    this.tweens.add({ targets: preview, angle: 5, duration: 2000, yoyo: true, repeat: -1, ease: 'Sine.easeInOut' });

    createButton(this, width / 2, height * 0.62, 'START GAME', () => this.startGame(), {
      width: 280, height: 56, fontSize: '15px',
    });

    this.add.text(width / 2, height * 0.68, 'ENTER / SPACE / TAP', {
      fontFamily: '"Press Start 2P", monospace',
      fontSize: '10px',
      color: '#888',
      align: 'center',
    }).setOrigin(0.5);

    this.input.keyboard.on('keydown-ENTER', () => this.startGame());
    this.input.keyboard.on('keydown-SPACE', () => this.startGame());

    createButton(this, width / 2 - 75, height * 0.78, 'BOARD', () => this.showLeaderboard(), {
      width: 140, height: 44, fontSize: '11px',
    });
    createButton(this, width / 2 + 75, height * 0.78, 'BADGES', () => this.showAchievements(), {
      width: 140, height: 44, fontSize: '11px',
    });

    this.createMuteButton();

    this.add.text(width / 2, height * 0.94, 'Web3 integration coming soon', {
      fontFamily: '"Press Start 2P", monospace',
      fontSize: '9px',
      color: '#444',
      align: 'center',
    }).setOrigin(0.5);

    this.createAmbientParticles();

    this.input.once('pointerdown', () => { sound.init(); sound.resume(); });
    this.input.keyboard.once('keydown', () => { sound.init(); sound.resume(); });
  }

  startGame() {
    sound.init();
    sound.resume();
    sound.click();
    this.scene.start('GameScene');
  }

  createMuteButton() {
    const { width } = this.scale;
    const icon = this.add.text(width - 30, 30, sound.isMuted() ? '🔇' : '🔊', {
      fontSize: '24px',
    }).setOrigin(0.5).setInteractive({ useHandCursor: true });

    icon.on('pointerdown', () => {
      sound.init();
      const next = !sound.isMuted();
      sound.setMuted(next);
      icon.setText(next ? '🔇' : '🔊');
      if (!next) sound.click();
    });
  }

  showLeaderboard() {
    const { width, height } = this.scale;
    const overlay = this.add.rectangle(width / 2, height / 2, width, height, 0x000000, 0.7).setDepth(100);
    const panel = this.add.rectangle(width / 2, height / 2, 400, 440, 0x1a0533).setStrokeStyle(3, 0xa855f7).setDepth(101);

    const title = this.add.text(width / 2, height * 0.22, 'LEADERBOARD', {
      fontFamily: '"Press Start 2P", monospace',
      fontSize: '18px',
      color: '#d8b4fe',
    }).setOrigin(0.5).setDepth(102);

    const close = this.add.text(width / 2 + 170, height * 0.22 - 80, 'X', {
      fontFamily: '"Press Start 2P", monospace',
      fontSize: '18px',
      color: '#fff',
    }).setOrigin(0.5).setDepth(102).setInteractive({ useHandCursor: true });

    const rows = [];
    const mock = [
      { rank: 1, addr: '0xMonad...Dev', score: 99999 },
      { rank: 2, addr: '0xAlice...xyz', score: 87500 },
      { rank: 3, addr: '0xBob...abc', score: 74200 },
      { rank: 4, addr: '0xYou', score: parseInt(localStorage.getItem('naddie_best_score') || '0', 10) },
    ];
    mock.forEach((entry, i) => {
      const y = height * 0.32 + i * 55;
      rows.push({
        rank: this.add.text(width / 2 - 160, y, `#${entry.rank}`, { fontFamily: '"Press Start 2P", monospace', fontSize: '12px', color: '#a855f7' }).setOrigin(0.5).setDepth(102),
        addr: this.add.text(width / 2, y, entry.addr, { fontFamily: '"Press Start 2P", monospace', fontSize: '10px', color: '#fff' }).setOrigin(0.5).setDepth(102),
        score: this.add.text(width / 2 + 150, y, String(entry.score), { fontFamily: '"Press Start 2P", monospace', fontSize: '12px', color: '#d8b4fe' }).setOrigin(0.5).setDepth(102),
      });
    });

    close.on('pointerdown', () => {
      sound.click();
      overlay.destroy(); panel.destroy(); title.destroy(); close.destroy();
      rows.forEach(r => { r.rank.destroy(); r.addr.destroy(); r.score.destroy(); });
    });
  }

  showAchievements() {
    const { width, height } = this.scale;
    const all = AchievementsManager.getAll();
    const unlocked = JSON.parse(localStorage.getItem('naddie_achievements_v1') || '{}');

    const elements = [];
    const overlay = this.add.rectangle(width / 2, height / 2, width, height, 0x000000, 0.75).setDepth(100);
    const panel = this.add.rectangle(width / 2, height / 2, 420, 700, 0x1a0533).setStrokeStyle(3, 0xa855f7).setDepth(101);

    const total = all.length;
    const got = Object.keys(unlocked).length;
    const title = this.add.text(width / 2, height * 0.12, `ACHIEVEMENTS  ${got}/${total}`, {
      fontFamily: '"Press Start 2P", monospace',
      fontSize: '14px',
      color: '#d8b4fe',
    }).setOrigin(0.5).setDepth(102);
    elements.push(title);

    const close = this.add.text(width / 2 + 190, height * 0.12 - 5, 'X', {
      fontFamily: '"Press Start 2P", monospace',
      fontSize: '18px',
      color: '#fff',
    }).setOrigin(0.5).setDepth(102).setInteractive({ useHandCursor: true });
    elements.push(close);

    all.forEach((def, i) => {
      const y = height * 0.18 + i * 55;
      const isGot = !!unlocked[def.id];
      const icon = this.add.text(width / 2 - 180, y, isGot ? '★' : '☆', {
        fontFamily: '"Press Start 2P", monospace',
        fontSize: '18px',
        color: isGot ? '#ffd700' : '#555',
      }).setOrigin(0.5).setDepth(102);
      const nameText = this.add.text(width / 2 - 150, y - 8, def.title, {
        fontFamily: '"Press Start 2P", monospace',
        fontSize: '10px',
        color: isGot ? '#ffd700' : '#888',
      }).setOrigin(0, 0.5).setDepth(102);
      const descText = this.add.text(width / 2 - 150, y + 10, def.desc, {
        fontFamily: '"Press Start 2P", monospace',
        fontSize: '8px',
        color: '#d8b4fe',
      }).setOrigin(0, 0.5).setDepth(102);
      elements.push(icon, nameText, descText);
    });

    close.on('pointerdown', () => {
      sound.click();
      overlay.destroy(); panel.destroy();
      elements.forEach((e) => e.destroy());
    });
  }

  createAmbientParticles() {
    const { width, height } = this.scale;
    for (let i = 0; i < 40; i++) {
      const s = this.add.image(Phaser.Math.Between(0, width), Phaser.Math.Between(0, height), 'star');
      s.setAlpha(Phaser.Math.FloatBetween(0.15, 0.7));
      this.tweens.add({
        targets: s,
        y: s.y - Phaser.Math.Between(50, 250),
        alpha: 0,
        duration: Phaser.Math.Between(2000, 6000),
        repeat: -1,
        delay: Phaser.Math.Between(0, 3000),
      });
    }
  }
}
