import { Component, OnInit, computed, inject } from '@angular/core';
import type { EquipmentSlot } from '../../core/api/game-api.models';
import { ItemCardComponent } from '../../shared/item-card/item-card.component';
import { WorldStore } from '../world/world.store';
import { InventoryDetailPanelComponent } from './inventory-detail-panel.component';
import { InventoryStore } from './inventory.store';

const SLOT_ORDER: readonly EquipmentSlot[] = [
  'WEAPON',
  'HEAD',
  'CHEST',
  'HANDS',
  'LEGS',
  'FEET',
  'AMULET',
];

const SLOT_LABELS: Readonly<Record<EquipmentSlot, string>> = {
  WEAPON: 'Waffe',
  HEAD: 'Kopf',
  CHEST: 'Brust',
  HANDS: 'Handschuhe',
  LEGS: 'Beine',
  FEET: 'Stiefel',
  AMULET: 'Amulett',
};

@Component({
  selector: 'app-inventory-page',
  imports: [ItemCardComponent, InventoryDetailPanelComponent],
  templateUrl: './inventory-page.component.html',
  styleUrl: './inventory-page.component.scss',
})
export class InventoryPageComponent implements OnInit {
  protected readonly inventoryStore = inject(InventoryStore);
  private readonly worldStore = inject(WorldStore);
  protected readonly slotOrder = SLOT_ORDER;
  protected readonly slotLabels = SLOT_LABELS;

  protected readonly characterLevel = computed(() => this.worldStore.character()?.level ?? 1);

  protected readonly equippedItemInSelectedSlot = computed(() => {
    const selected = this.inventoryStore.selectedItem();
    if (!selected?.item.equipmentSlot) {
      return null;
    }
    return (
      this.inventoryStore.inventory()?.items.find(
        (item) => item.equipped && item.item.equipmentSlot === selected.item.equipmentSlot,
      ) ?? null
    );
  });

  ngOnInit(): void {
    void this.inventoryStore.load();
  }

  protected selectItem(itemId: string): void {
    this.inventoryStore.selectItem(itemId);
  }

  protected async equipSelected(characterItemId: string): Promise<void> {
    await this.inventoryStore.equip(characterItemId);
  }

  protected retry(): void {
    void this.inventoryStore.load();
  }
}