import { createSignal, For, Show } from "solid-js";
import type { HudItem } from "../engine/Game.js";

export interface InventoryPanelProps {
  items: HudItem[];
  capacity: number;
  usedSlots: number;
  onCombine(itemA: string, itemB: string): string;
  onClose(): void;
}

const hex = (color: number) => `#${color.toString(16).padStart(6, "0")}`;

/**
 * Classic list-style inventory (GDD §6.3).
 *
 * Combining is two clicks: select a first item, then a second. That mirrors the
 * original games' flow and avoids drag-and-drop, which never reads correctly at
 * this UI scale.
 */
export function InventoryPanel(props: InventoryPanelProps) {
  const [selected, setSelected] = createSignal<HudItem | null>(null);
  const [combining, setCombining] = createSignal<HudItem | null>(null);
  const [result, setResult] = createSignal<string | null>(null);

  const handleClick = (item: HudItem) => {
    const pending = combining();
    if (pending) {
      setResult(pending.id === item.id ? "Pick a different item." : props.onCombine(pending.id, item.id));
      setCombining(null);
      setSelected(null);
      return;
    }
    setSelected(item);
    setResult(null);
  };

  return (
    <div class="panel panel--inventory">
      <header class="panel__header">
        <h2>Inventory</h2>
        <span class="panel__count">
          {props.usedSlots} / {props.capacity}
        </span>
        <button type="button" class="panel__close" onClick={() => props.onClose()}>
          ESC
        </button>
      </header>

      <div class="inventory__body">
        <ul class="inventory__list">
          <For each={props.items} fallback={<li class="inventory__empty">Empty</li>}>
            {(item) => (
              <li>
                <button
                  type="button"
                  classList={{
                    inventory__item: true,
                    "inventory__item--selected": selected()?.id === item.id,
                    "inventory__item--combining": combining()?.id === item.id,
                  }}
                  onClick={() => handleClick(item)}
                >
                  <span class="inventory__icon" style={{ background: hex(item.color) }} />
                  <span class="inventory__name">{item.name}</span>
                  <Show when={item.quantity > 1}>
                    <span class="inventory__qty">x{item.quantity}</span>
                  </Show>
                  <Show when={item.isKeyItem}>
                    <span class="inventory__key">KEY</span>
                  </Show>
                </button>
              </li>
            )}
          </For>
        </ul>

        <aside class="inventory__detail">
          <Show
            when={selected()}
            fallback={<p class="inventory__hint">Select an item to examine it.</p>}
          >
            {(item) => (
              <>
                <h3>{item().name}</h3>
                <p>{item().description}</p>
                <button
                  type="button"
                  class="inventory__combine"
                  onClick={() => {
                    setCombining(item());
                    setResult("Choose an item to combine with.");
                  }}
                >
                  Combine
                </button>
              </>
            )}
          </Show>
          <Show when={result()}>{(text) => <p class="inventory__result">{text()}</p>}</Show>
        </aside>
      </div>
    </div>
  );
}
