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

interface InventoryStripProps {
  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 goldStyle: CSSProperties = {
  display: 'flex',
  alignItems: 'center',
  gap: 5,
  color: '#ffd700',
  fontWeight: 700,
  flexShrink: 0,
  whiteSpace: 'nowrap',
};

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

export function InventoryStrip({ hero, lastLoot }: InventoryStripProps) {
  return (
    <div style={stripStyle}>
      <div style={goldStyle}>
        <span style={{ fontSize: 14 }}>{'\uD83E\uDE99'}</span>
        <span>{hero.gold.toLocaleString()}</span>
      </div>
      {lastLoot && (
        <div style={lastLootStyle} title={formatLastLootLine(lastLoot)}>
          {formatLastLootLine(lastLoot)}
        </div>
      )}
    </div>
  );
}
