import Phaser from "phaser";
import { OverlayComponent } from "./OverlayComponent";
import { type CombatantActor } from "../../core/types";

export class InventoryOverlay extends OverlayComponent {
  private equipmentSlots: Map<string, Phaser.GameObjects.Container> = new Map();
  private backpackSlots: Phaser.GameObjects.Container[] = [];

  protected setupContent() {
    const panelH = 500;

    const title = this.scene.add.text(0, -panelH / 2 + 25, "INVENTORY", { 
      fontSize: "28px", 
      color: "#d4af37", 
      fontStyle: "bold"
    }).setOrigin(0.5);
    this.container.add(title);

    this.createEquipmentSection();
    this.createBackpackSection();
  }

  private createEquipmentSection() {
    const eqX = -180;
    const eqY = 10;
    
    const createSlot = (x: number, y: number, w: number, h: number, label: string, key: string) => {
      const g = this.scene.add.graphics();
      g.lineStyle(2, 0x444444, 1);
      g.strokeRect(-w / 2, -h / 2, w, h);
      g.fillStyle(0x1a1a1a, 1);
      g.fillRect(-w / 2 + 1, -h / 2 + 1, w - 2, h - 2);

      const txt = this.scene.add.text(0, 0, label, { fontSize: "11px", color: "#666666", fontStyle: "bold" }).setOrigin(0.5);
      const container = this.scene.add.container(x, y, [g, txt]);
      
      this.equipmentSlots.set(key, container);
      this.container.add(container);
    };

    createSlot(eqX, eqY - 140, 70, 70, "Head", "helmet");
    createSlot(eqX, eqY - 20, 90, 130, "Body", "bodyArmour");
    createSlot(eqX, eqY + 80, 100, 36, "Belt", "belt");
    createSlot(eqX - 140, eqY - 50, 90, 160, "Main Hand", "mainHand");
    createSlot(eqX + 140, eqY - 50, 90, 160, "Off Hand", "offHand");
    createSlot(eqX - 80, eqY - 30, 54, 54, "Ring", "ringLeft");
    createSlot(eqX + 80, eqY - 30, 54, 54, "Ring", "ringRight");
    createSlot(eqX - 100, eqY + 70, 70, 70, "Hands", "gloves");
    createSlot(eqX + 100, eqY + 70, 70, 70, "Boots", "boots");
  }

  private createBackpackSection() {
    const bpX = 100;
    const bpY = -150;
    const rows = 8;
    const cols = 5;
    const bpSlotSize = 40;

    const bpTitle = this.scene.add.text(bpX + (cols * 44) / 2 - 20, bpY - 40, "BACKPACK", { 
        fontSize: "18px", 
        color: "#d4af37", 
        fontStyle: "bold" 
    }).setOrigin(0.5);
    this.container.add(bpTitle);

    for (let r = 0; r < rows; r++) {
      for (let c = 0; c < cols; c++) {
        const x = bpX + c * 44;
        const y = bpY + r * 44;
        
        const g = this.scene.add.graphics();
        g.lineStyle(1, 0x333333, 1);
        g.strokeRect(-bpSlotSize / 2, -bpSlotSize / 2, bpSlotSize, bpSlotSize);
        g.fillStyle(0x0c0c0c, 1);
        g.fillRect(-bpSlotSize / 2 + 0.5, -bpSlotSize / 2 + 0.5, bpSlotSize - 1, bpSlotSize - 1);

        const container = this.scene.add.container(x, y, [g]);
        this.container.add(container);
        this.backpackSlots.push(container);
      }
    }
  }

  update(_player: CombatantActor) {
    // Future: update items in slots
  }
}
