import Phaser from "phaser";

export class PersistentButtonsComponent {
  private scene: Phaser.Scene;
  private container!: Phaser.GameObjects.Container;

  constructor(scene: Phaser.Scene) {
    this.scene = scene;
  }

  create() {
    const { height } = this.scene.scale;
    this.container = this.scene.add.container(20, height - 20);

    this.container.setScrollFactor(0).setDepth(1500);

    const btnStyle = { 
      fontSize: "14px", 
      color: "#ffffff", 
      backgroundColor: "#1a1a1a", 
      padding: { x: 10, y: 6 },
      fontStyle: "bold"
    };
    
    const createBtn = (x: number, text: string, event: string) => {
        const btn = this.scene.add.text(x, 0, text, btnStyle)
            .setOrigin(0, 1)
            .setInteractive({ useHandCursor: true });
        
        btn.on("pointerover", () => btn.setBackgroundColor("#333333"));
        btn.on("pointerout", () => btn.setBackgroundColor("#1a1a1a"));
        btn.on("pointerdown", () => {
            btn.setBackgroundColor("#444444");
            const gameScene = this.scene.scene.get("GameScene");
            gameScene.events.emit(event);
        });
        btn.on("pointerup", () => btn.setBackgroundColor("#333333"));
        
        this.container.add(btn);
        return btn;
    };

    createBtn(0, "MENU (ESC)", "toggle-menu");
    createBtn(105, "STATS (C)", "toggle-character");
    createBtn(200, "BACKPACK (I)", "toggle-inventory");
    createBtn(320, "MAP (M)", "toggle-minimap");

    // Right-aligned buttons
    const rightContainer = this.scene.add.container(this.scene.scale.width - 20, height - 20);
    rightContainer.setScrollFactor(0).setDepth(1500);

    const waitBtn = this.scene.add.text(0, 0, "🕒", {
        fontSize: "24px",
        color: "#ffffff",
        backgroundColor: "#1a1a1a",
        padding: { x: 10, y: 6 },
        fontStyle: "bold"
    })
    .setOrigin(1, 1)
    .setInteractive({ useHandCursor: true });

    const searchBtn = this.scene.add.text(-40, 0, "🔍", { // Offset to the left of wait button
        fontSize: "24px",
        color: "#ffffff",
        backgroundColor: "#1a1a1a",
        padding: { x: 10, y: 6 },
        fontStyle: "bold"
    })
    .setOrigin(1, 1)
    .setInteractive({ useHandCursor: true });

    waitBtn.on("pointerover", () => waitBtn.setBackgroundColor("#333333"));
    waitBtn.on("pointerout", () => waitBtn.setBackgroundColor("#1a1a1a"));
    waitBtn.on("pointerdown", () => {
        waitBtn.setBackgroundColor("#444444");
        const gameScene = this.scene.scene.get("GameScene");
        gameScene.events.emit("player-wait");
    });
    waitBtn.on("pointerup", () => waitBtn.setBackgroundColor("#333333"));

    searchBtn.on("pointerover", () => searchBtn.setBackgroundColor("#333333"));
    searchBtn.on("pointerout", () => searchBtn.setBackgroundColor("#1a1a1a"));
    searchBtn.on("pointerdown", () => {
        searchBtn.setBackgroundColor("#444444");
        // Implementing search visual logic later, for now just log
        console.log("Searching..."); 
        const gameScene = this.scene.scene.get("GameScene");
        gameScene.events.emit("player-search");
    });
    searchBtn.on("pointerup", () => searchBtn.setBackgroundColor("#333333"));

    rightContainer.add(waitBtn);
    rightContainer.add(searchBtn);
  }
}