export function InventoryScreen() {
  const { active } = useDataSource();
  return (
    <div className="flex flex-col gap-6 p-5 md:flex-row md:p-8">
      <aside className="md:w-72 md:shrink-0">
        <Band title="Guardians" />
        <Panel tone="raised" className="mt-3 p-3">
          <RosterRail />
        </Panel>
      </aside>
      <section className="min-w-0 flex-1">
        <Band
          title="Equipped"
          count={active ? `${active.className} · ${active.power}` : undefined}
        />
        <Panel tone="raised" className="mt-3 p-4">
          {active && active.items.length > 0 ? (
            <ItemTileGrid items={active.items} size={64} />
          ) : (
            <p className="text-engram-muted text-sm">Select a Guardian.</p>
          )}
        </Panel>
        <p className="mt-4 max-w-xl text-engram-faint text-sm leading-relaxed">
          Hover a tile to inspect it — the popup follows the cursor; click to
          pin it and reach the perks (perk/mod inspect included). Every tile +
          popup is resolved from the profile via <code>@engram/core</code>.
        </p>
      </section>
    </div>
  );
}

export function ItemTileGrid({
  items,
  size = 72,
}: {
  items: ShowcaseItem[];
  size?: number;
}) {
  return (
    <div className="flex flex-wrap gap-2.5">
      {items.map((it) => (
        <ItemHoverCard key={it.instanceId} popup={itemPopup(it)}>
          <ItemTile size={size} {...it.tile} />
        </ItemHoverCard>
      ))}
    </div>
  );
}

export function itemPopup(item: ShowcaseItem, footer?: ReactNode): ReactNode {
  return (
    <ItemPopup
      header={item.popup.header}
      seasonIcon={item.popup.seasonIcon ?? undefined}
      archetype={item.popup.archetype ?? undefined}
      stats={item.popup.stats}
      frame={item.popup.frame ?? undefined}
      footer={footer}
    >
      {item.popup.sockets && item.popup.sockets.length > 0 ? (
        <SocketGrid
          sockets={item.popup.sockets}
          // Hover a plug → its inspect opens beside this panel (data by hash):
          // a PerkPopup for weapon perks, a ModPopup for armor mods. Live-fetched
          // items carry their own resolved perk inspect (item.popup.perkInspect);
          // the static fixtures back the recorded demo.
          plugPopup={(plug) => {
            const perk =
              item.popup.perkInspect?.[plug.hash] ??
              PERK_INSPECT_BY_HASH[plug.hash];
            if (perk) return <PerkPopup {...perk} />;
            const mod =
              item.popup.modInspect?.[plug.hash] ??
              MOD_INSPECT_BY_HASH[plug.hash];
            return mod ? <ModPopup {...mod} /> : null;
          }}
        />
      ) : null}
    </ItemPopup>
  );
}

function RosterRail() {
  const { data, selected, setSelected } = useDataSource();
  return (
    <div className="flex flex-col gap-2">
      {data.characters.map((c) => (
        <button
          key={c.id}
          type="button"
          onClick={() => setSelected(c.id)}
          aria-pressed={c.id === selected}
          className={cn(
            "block w-full cursor-pointer text-left outline-2 outline-offset-2 transition-[outline-color]",
            c.id === selected
              ? "outline-engram-accent"
              : "outline-transparent hover:outline-engram-border-strong",
          )}
        >
          <Nameplate
            name={c.className}
            emblem={{
              icon: { path: c.emblemIcon },
              banner: { path: c.emblemBanner },
            }}
            subtitle={c.race}
            title={c.title}
            power={c.power}
          />
        </button>
      ))}
    </div>
  );
}