import { Application, Container, Graphics, Text } from "pixi.js";

async function setup(app: Application) {
  await app.init({ background: "#111111", resizeTo: window, antialias: true });
  document.getElementById("pixi-container")!.appendChild(app.canvas);
}

function addBoxes(app: Application) {
  const world = new Container({ label: "world" });
  world.x = app.screen.width / 2;
  world.y = app.screen.height / 2;

  const width = 100;

  // Red box - no individual handler
  const redBox = new Graphics({ label: "red-box" });
  redBox.rect(-width / 2, -width / 2, width, width).fill(0xff0000);
  redBox.x = -150;
  redBox.y = 0;
  redBox.eventMode = "static";
  redBox.cursor = "pointer";
  world.addChild(redBox);

  // Green box - no individual handler
  const greenBox = new Graphics({ label: "green-box" });
  greenBox.rect(-width / 2, -width / 2, width, width).fill(0x00ff00);
  greenBox.x = 150;
  greenBox.y = 0;
  greenBox.eventMode = "static";
  greenBox.cursor = "pointer";
  world.addChild(greenBox);

  app.stage.addChild(world);

  // Status text
  const statusText = new Text({
    text: "Click a box or the background",
    style: { fill: 0xffffff, fontSize: 20 },
  });
  statusText.x = 20;
  statusText.y = 20;
  app.stage.addChild(statusText);

  const hoverText = new Text({
    text: "Hover: none",
    style: { fill: 0xaaaaaa, fontSize: 16 },
  });
  hoverText.x = 20;
  hoverText.y = 50;
  app.stage.addChild(hoverText);

  // Single click handler on the world container
  world.eventMode = "static";
  world.on("pointerdown", (event) => {
    const target = event.target as Container;
    const label = target?.label || "unknown";

    console.log("pointerdown on world container");
    console.log("  event.target:", target);
    console.log("  event.target.label:", label);
    console.log("  event.currentTarget:", event.currentTarget);
    console.log("  composedPath:", event.composedPath());

    if (target === world) {
      statusText.text = "Clicked: world container (empty space within world)";
    } else {
      statusText.text = `Clicked: ${label}`;
    }
  });

  // Test hover events bubbling
  world.on("pointerover", (event) => {
    const target = event.target as Container;
    const label = target?.label || "unknown";
    console.log("pointerover - target:", label);
    hoverText.text = `Hover (pointerover): ${label}`;
  });

  world.on("pointerout", (event) => {
    const target = event.target as Container;
    const label = target?.label || "unknown";
    console.log("pointerout - target:", label);
    hoverText.text = `Hover (pointerout from): ${label}`;
  });

  // Also test on stage for background clicks
  app.stage.hitArea = app.screen;
  app.stage.eventMode = "static";
  app.stage.on("pointerdown", (event) => {
    const target = event.target as Container;
    if (target === app.stage) {
      statusText.text = "Clicked: stage background";
      console.log("pointerdown on stage background");
    }
  });
}

(async () => {
  const app = new Application();
  await setup(app);
  addBoxes(app);
})();