import {
  IInformationCenterNPC,
  MovementSpeed,
  RangeTypes,
} from '@rpg-engine/shared';
import React from 'react';
import styled from 'styled-components';
import { uiColors } from '../../../../constants/uiColors';
import BaseTooltip, {
  Section,
  SectionTitle,
  StatItem,
  StatsContainer,
  TooltipTitle,
} from '../../../shared/BaseTooltip';
import { SpriteFromAtlas } from '../../../shared/SpriteFromAtlas';
import { formatItemName } from './InformationCenterNPCDetails';

interface INPCTooltipProps {
  npc: IInformationCenterNPC;
  itemsAtlasJSON: any;
  itemsAtlasIMG: string;
}

const EffectsList = styled.div`
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
`;

const EffectItem = styled.span`
  font-size: 0.5rem;
  color: ${uiColors.white};
  background: rgba(255, 255, 255, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
`;

const SpellList = styled.div`
  display: flex;
  flex-direction: column;
  gap: 2px;
`;

const SpellItem = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.5rem;
  color: ${uiColors.white};
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 6px;
  border-radius: 4px;
`;

const SpellInfo = styled.span`
  color: ${uiColors.yellow};
  margin-left: 8px;
  opacity: 0.8;
`;

const LootList = styled.div`
  display: flex;
  flex-direction: column;
  gap: 2px;
`;

const LootItem = styled.div`
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  padding: 4px 6px;
  border-radius: 4px;

  .sprite-from-atlas-img {
    top: 0px;
    left: 0px;
  }
`;

const LootName = styled.span`
  color: ${uiColors.white};
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-left: 4px;
`;

const LootChance = styled.span`
  color: ${uiColors.yellow};
  font-size: 0.45rem;
  text-transform: lowercase;
  opacity: 0.8;
`;

const MoreIndicator = styled.div`
  color: ${uiColors.yellow};
  font-size: 0.45rem;
  text-align: center;
  margin-top: 2px;
  opacity: 0.7;
`;

const formatText = (text: string | RangeTypes | MovementSpeed): string => {
  if (typeof text === 'number') {
    return text.toString();
  }
  return text
    .toString()
    .replace(/([A-Z])/g, ' $1')
    .trim()
    .replace(/([A-Z]+)([A-Z][a-z])/g, '$1 $2')
    .replace(/\s+/g, ' ');
};

const formatRarity = (rarity: number): string => {
  switch (rarity) {
    case 0.5:
      return 'Very Rare';
    case 1:
      return 'Rare';
    case 10:
      return 'Uncommon';
    case 15:
      return 'Semi Common';
    case 20:
      return 'Common';
    case 35:
      return 'Very Common';
    default:
      return 'Unknown';
  }
};

export const InformationCenterNPCTooltip: React.FC<INPCTooltipProps> = ({
  npc,
  itemsAtlasJSON,
  itemsAtlasIMG,
}) => {
  return (
    <BaseTooltip>
      <TooltipTitle>{npc.name}</TooltipTitle>

      <StatsContainer>
        <StatItem>HP: {npc.baseHealth}</StatItem>
        <StatItem>LVL: {npc.skills.level}</StatItem>
        <StatItem>STR: {npc.skills.strength?.level || '-'}</StatItem>
        <StatItem>DEX: {npc.skills.dexterity?.level || '-'}</StatItem>
        <StatItem>RES: {npc.skills.resistance?.level || '-'}</StatItem>
        <StatItem>SPD: {formatText(npc.speed)}</StatItem>
      </StatsContainer>

      {npc.entityEffects && npc.entityEffects.length > 0 && (
        <Section>
          <SectionTitle>Effects</SectionTitle>
          <EffectsList>
            {npc.entityEffects.map(effect => (
              <EffectItem key={effect}>{formatText(effect)}</EffectItem>
            ))}
          </EffectsList>
        </Section>
      )}

      {npc.areaSpells && npc.areaSpells.length > 0 && (
        <Section>
          <SectionTitle>Spells</SectionTitle>
          <SpellList>
            {npc.areaSpells.map(spell => (
              <SpellItem key={spell.spellKey}>
                {formatText(spell.spellKey)}
                <SpellInfo>
                  {formatText(spell.power)}, {spell.probability}%
                </SpellInfo>
              </SpellItem>
            ))}
          </SpellList>
        </Section>
      )}

      {npc.loots && npc.loots.length > 0 && (
        <Section>
          <SectionTitle>Possible Loot</SectionTitle>
          <LootList>
            {npc.loots.slice(0, 4).map(loot => (
              <LootItem key={loot.itemBlueprintKey}>
                <SpriteFromAtlas
                  atlasIMG={itemsAtlasIMG}
                  atlasJSON={itemsAtlasJSON}
                  spriteKey={loot.itemBlueprintKey}
                  imgScale={1}
                />
                <LootName>{formatItemName(loot.itemBlueprintKey)}</LootName>
                <LootChance>{formatRarity(loot.chance)}</LootChance>
              </LootItem>
            ))}
            {npc.loots.length > 4 && <MoreIndicator>...</MoreIndicator>}
          </LootList>
        </Section>
      )}
    </BaseTooltip>
  );
};
