import { UI_IMAGES } from "../../resources/images/uiImages";
import { ResourceInventoryC } from "./ResourceInventoryC";
import { ResourceType } from "./ResourceType";
import { RESOURCE_PLACEHOLDER_COLORS } from "./ResourceConfig";

type ResourceUIEntry = {
  type: ResourceType;
  counter: HTMLElement;
  icon: HTMLElement;
  count: HTMLElement;
};

export class ResourceUIC {
  private static entries = new Map<ResourceType, ResourceUIEntry>();
  private static root: HTMLElement | null = null;

  static init() {
    const uiRoot = document.getElementById("ui");
    if (!uiRoot) return;

    this.createTopRightHud(uiRoot);
    this.createBottomLeftWeapon(uiRoot);
  }

  private static createTopRightHud(uiRoot: HTMLElement) {
    const topRight = document.createElement("div");
    topRight.className = "hud-top-right";

    const avatar = document.createElement("img");
    avatar.className = "hud-avatar";
    avatar.src = UI_IMAGES.avatarTop;
    avatar.alt = "";
    topRight.appendChild(avatar);

    this.root = document.createElement("div");
    this.root.id = "resource-bar";
    this.root.className = "resource-bar";
    topRight.appendChild(this.root);

    uiRoot.appendChild(topRight);
    this.register(ResourceType.Wood);
  }

  private static createBottomLeftWeapon(uiRoot: HTMLElement) {
    const bottomLeft = document.createElement("div");
    bottomLeft.className = "hud-bottom-left";

    const weapon = document.createElement("div");
    weapon.className = "hud-weapon";

    const bg = document.createElement("img");
    bg.className = "hud-weapon__bg";
    bg.src = UI_IMAGES.toolBg;
    bg.alt = "";

    const tool = document.createElement("img");
    tool.className = "hud-weapon__tool";
    tool.src = UI_IMAGES.toolBat;
    tool.alt = "";

    const level = document.createElement("span");
    level.className = "hud-weapon__level";
    level.textContent = "LVL 0";

    weapon.appendChild(bg);
    weapon.appendChild(tool);
    weapon.appendChild(level);
    bottomLeft.appendChild(weapon);
    uiRoot.appendChild(bottomLeft);
  }

  static register(type: ResourceType) {
    if (!this.root || this.entries.has(type)) return;

    const counter = document.createElement("div");
    counter.className = "resource-counter";
    counter.dataset.resource = type;
    counter.style.backgroundImage = `url(${UI_IMAGES.woodCounterBg})`;

    const count = document.createElement("span");
    count.className = "resource-count";
    count.textContent = "0";

    const icon = document.createElement("div");
    icon.className = "resource-icon";
    icon.setAttribute("aria-hidden", "true");

    counter.appendChild(count);
    counter.appendChild(icon);
    this.root.appendChild(counter);

    this.entries.set(type, { type, counter, icon, count });
    this.refresh(type);
  }

  static getIconCenter(type: ResourceType) {
    const entry = this.entries.get(type);
    if (!entry) return null;

    const rect = entry.counter.getBoundingClientRect();
    return {
      x: rect.left + rect.width / 2,
      y: rect.top + rect.height / 2,
    };
  }

  static refresh(type: ResourceType) {
    const entry = this.entries.get(type);
    if (!entry) return;

    entry.count.textContent = String(ResourceInventoryC.get(type));
  }
}
