import { useEffect, useState, type CSSProperties } from 'react';
import { Rarity, type LootDrop } from '../game/types';
import { RARITY_COLORS, RARITY_GLOW, LOOT_POPUP_DURATION_MS } from '../shared/constants';

// ---- Types ----

interface LootPopupProps {
  loot: LootDrop | null;
}

// ---- Helpers ----

function rarityLabel(rarity: Rarity): string {
  switch (rarity) {
    case Rarity.Common:    return 'Common';
    case Rarity.Uncommon:  return 'Uncommon';
    case Rarity.Rare:      return 'Rare';
    case Rarity.Epic:      return 'Epic';
    case Rarity.Legendary: return 'Legendary';
    default:               return 'Common';
  }
}

// ---- Component ----

export function LootPopup({ loot }: LootPopupProps) {
  const [visible, setVisible] = useState(false);
  const [currentLoot, setCurrentLoot] = useState<LootDrop | null>(null);

  useEffect(() => {
    if (!loot) return;

    setCurrentLoot(loot);
    setVisible(true);

    const timer = setTimeout(() => {
      setVisible(false);
    }, LOOT_POPUP_DURATION_MS);

    return () => clearTimeout(timer);
    // Re-show when a new drop object arrives (reference + payload may repeat).
  }, [loot, loot?.goldAmount, loot?.rarity, loot?.itemName, loot?.bonusItem?.itemType]);

  if (!visible || !currentLoot) return null;

  const color = RARITY_COLORS[currentLoot.rarity] ?? RARITY_COLORS.common;
  const bonusColor = currentLoot.bonusItem
    ? (RARITY_COLORS[currentLoot.bonusItem.rarity] ?? color)
    : color;
  const isLegendary =
    currentLoot.rarity === Rarity.Legendary ||
    currentLoot.bonusItem?.rarity === Rarity.Legendary;

  const containerStyle: CSSProperties = {
    position: 'absolute',
    bottom: 100,
    left: '50%',
    transform: 'translateX(-50%)',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    gap: 6,
    padding: '12px 24px',
    borderRadius: 12,
    backgroundColor: 'rgba(0, 0, 0, 0.75)',
    border: `2px solid ${color}`,
    boxShadow: RARITY_GLOW[currentLoot.rarity] ?? `0 0 20px ${color}66`,
    zIndex: 400,
    pointerEvents: 'none',
    animation: 'loot-slide-in 0.4s ease-out',
    overflow: 'hidden',
  };

  const nameStyle: CSSProperties = {
    fontSize: 16,
    fontWeight: 700,
    color,
    textShadow: `0 0 8px ${color}88`,
    textAlign: 'center',
  };

  const rarityTagStyle: CSSProperties = {
    fontSize: 11,
    fontWeight: 600,
    color,
    opacity: 0.8,
    textTransform: 'uppercase',
    letterSpacing: 1,
  };

  const goldStyle: CSSProperties = {
    fontSize: 14,
    fontWeight: 700,
    color: '#ffd700',
    textShadow: '0 0 6px rgba(255, 215, 0, 0.5)',
  };

  return (
    <>
      <style>{`
        @keyframes loot-slide-in {
          0%   { transform: translateX(-50%) translateY(40px); opacity: 0; }
          100% { transform: translateX(-50%) translateY(0);    opacity: 1; }
        }
        @keyframes legendary-rays {
          0%   { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
        }
      `}</style>
      <div style={containerStyle}>
        {/* Legendary golden ray background effect */}
        {isLegendary && (
          <div style={{
            position: 'absolute',
            top: '50%',
            left: '50%',
            width: 200,
            height: 200,
            marginTop: -100,
            marginLeft: -100,
            background: 'conic-gradient(from 0deg, transparent, #ffd70044, transparent, #ffd70044, transparent)',
            borderRadius: '50%',
            animation: 'legendary-rays 3s linear infinite',
            pointerEvents: 'none',
          }} />
        )}

        <span style={rarityTagStyle}>{rarityLabel(currentLoot.rarity)}</span>

        {currentLoot.itemName && !currentLoot.bonusItem && (
          <span style={nameStyle}>{currentLoot.itemName}</span>
        )}

        {currentLoot.goldAmount > 0 && (
          <span style={goldStyle}>+{currentLoot.goldAmount} gold</span>
        )}

        {currentLoot.bonusItem && (
          <span
            style={{
              ...nameStyle,
              color: bonusColor,
              textShadow: `0 0 8px ${bonusColor}88`,
            }}
          >
            {currentLoot.bonusItem.itemName ??
              (currentLoot.bonusItem.itemType === 'weapon' ? 'Weapon drop' : 'Armor drop')}
          </span>
        )}
      </div>
    </>
  );
}
