import type { CSSProperties } from 'react';
import type { HeroState, LootDrop } from '../game/types';

interface InventoryStripProps {
  /** Kept for call sites; gold is shown on HUD and in the inventory tab. */
  hero: HeroState;
  /** Most recent victory loot (gold + optional item); persists after popup fades */
  lastLoot?: LootDrop | null;
}

function formatLastLootLine(loot: LootDrop): string {
  const parts: string[] = [];
  if (loot.goldAmount > 0) {
    parts.push(`+${loot.goldAmount.toLocaleString()} gold`);
  }
  if (loot.bonusItem?.itemName) {
    parts.push(loot.bonusItem.itemName);
  } else if (loot.itemName && !loot.bonusItem) {
    parts.push(loot.itemName);
  }
  return parts.join(' \u00B7 ') || 'Victory';
}

const stripStyle: CSSProperties = {
  marginTop: 4,
  display: 'flex',
  alignItems: 'center',
  gap: 8,
  padding: '4px 8px',
  borderRadius: 8,
  background: 'rgba(10, 16, 24, 0.72)',
  border: '1px solid rgba(255, 255, 255, 0.14)',
  fontSize: 12,
  minHeight: 28,
};

const lastLootStyle: CSSProperties = {
  fontSize: 10,
  color: 'rgba(220, 230, 255, 0.7)',
  whiteSpace: 'nowrap',
  textOverflow: 'ellipsis',
  overflow: 'hidden',
  maxWidth: '100%',
};

export function InventoryStrip({ lastLoot }: InventoryStripProps) {
  if (!lastLoot) return null;
  return (
    <div style={stripStyle}>
      <div style={lastLootStyle} title={formatLastLootLine(lastLoot)}>
        {formatLastLootLine(lastLoot)}
      </div>
    </div>
  );
}