import {
  IInformationCenterItem,
  IInformationCenterNPC,
  isMobileOrTablet,
} from '@rpg-engine/shared';
import React from 'react';
import styled from 'styled-components';
import { uiColors } from '../../../../constants/uiColors';
import { Collapsible } from '../../../shared/Collapsible/Collapsible';
import { BaseInformationDetails } from '../../shared/BaseInformationDetails';

interface IInformationCenterItemDetailsProps {
  item: IInformationCenterItem;
  itemsAtlasJSON: Record<string, any>;
  itemsAtlasIMG: string;
  droppedBy: IInformationCenterNPC[];
  onBack: () => void;
}

export const InformationCenterItemDetails: React.FC<IInformationCenterItemDetailsProps> = ({
  item,
  itemsAtlasJSON,
  itemsAtlasIMG,
  droppedBy,
  onBack,
}) => {
  const isMobile = isMobileOrTablet();

  const renderAllowedSlots = () => {
    if (!item.allowedEquipSlotType?.length) return null;
    return (
      <InfoItem>
        <Label>Equip Slots:</Label>
        <Value>{item.allowedEquipSlotType.join(', ')}</Value>
      </InfoItem>
    );
  };

  const renderRequirements = () => {
    if (!item.minRequirements) return null;
    return (
      <StyledCollapsible title="Requirements" defaultOpen={!isMobile}>
        <RequirementsGrid>
          {item.minRequirements.level && (
            <RequirementItem>
              <Label>Level:</Label>
              <Value>{item.minRequirements.level}</Value>
            </RequirementItem>
          )}
          {item.minRequirements.skill && (
            <RequirementItem>
              <Label>{item.minRequirements.skill.name}:</Label>
              <Value>{item.minRequirements.skill.level}</Value>
            </RequirementItem>
          )}
        </RequirementsGrid>
      </StyledCollapsible>
    );
  };

  return (
    <BaseInformationDetails
      name={item.name}
      spriteKey={item.texturePath}
      atlasJSON={itemsAtlasJSON}
      atlasIMG={itemsAtlasIMG}
      onBack={onBack}
    >
      <InfoSection>
        <InfoItem>
          <Label>Type:</Label>
          <Value>{item.type}</Value>
        </InfoItem>
        <InfoItem>
          <Label>Subtype:</Label>
          <Value>{item.subType}</Value>
        </InfoItem>
        <InfoItem>
          <Label>Tier:</Label>
          <Value>{item.tier}</Value>
        </InfoItem>
        <InfoItem>
          <Label>Rarity:</Label>
          <Value>{item.rarity}</Value>
        </InfoItem>
        {renderAllowedSlots()}
      </InfoSection>

      <StyledCollapsible title="Description" defaultOpen={!isMobile}>
        <Description>
          {item.description || 'No description available.'}
        </Description>
      </StyledCollapsible>

      <StyledCollapsible title="Stats" defaultOpen={!isMobile}>
        <StatGrid>
          <StatItem>Weight: {item.weight}</StatItem>
          <StatItem>Stack Size: {item.maxStackSize}</StatItem>
          {item.rangeType && <StatItem>Range Type: {item.rangeType}</StatItem>}
          {item.basePrice > 0 && (
            <StatItem>Base Price: {item.basePrice}</StatItem>
          )}
        </StatGrid>
      </StyledCollapsible>

      {renderRequirements()}

      {item.entityEffects && item.entityEffects.length > 0 && (
        <StyledCollapsible title="Effects" defaultOpen={!isMobile}>
          <EffectsList>
            {item.entityEffects.map((effect, index) => (
              <EffectItem key={index}>
                {effect}
                {item.entityEffectChance && (
                  <EffectChance>({item.entityEffectChance}%)</EffectChance>
                )}
              </EffectItem>
            ))}
          </EffectsList>
          {item.usableEffectDescription && (
            <EffectDescription>
              {item.usableEffectDescription}
            </EffectDescription>
          )}
        </StyledCollapsible>
      )}

      {item.equippedBuff && item.equippedBuff.length > 0 && (
        <StyledCollapsible title="Equipped Buffs" defaultOpen={!isMobile}>
          <BuffsList>
            {item.equippedBuff.map((buff, index) => (
              <BuffItem key={index}>
                <BuffName>
                  {buff.trait.replace(/^\w/, c => c.toUpperCase())}
                </BuffName>
                <BuffValue>+{buff.buffPercentage}%</BuffValue>
              </BuffItem>
            ))}
          </BuffsList>
          {item.equippedBuffDescription && (
            <BuffDescription>{item.equippedBuffDescription}</BuffDescription>
          )}
        </StyledCollapsible>
      )}

      {droppedBy.length > 0 && (
        <StyledCollapsible title="Dropped By" defaultOpen={!isMobile}>
          <DropList>
            {droppedBy.map(npc => {
              const loot = npc.loots.find(l => l.itemBlueprintKey === item.key);
              return (
                <DropItem key={npc.id}>
                  <NPCName>{npc.name}</NPCName>
                  <DropRate>{loot?.chance}%</DropRate>
                </DropItem>
              );
            })}
          </DropList>
        </StyledCollapsible>
      )}
    </BaseInformationDetails>
  );
};

const InfoSection = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
  background: rgba(255, 255, 255, 0.05);
  padding: 12px;
  border-radius: 4px;
`;

const InfoItem = styled.div`
  display: flex;
  align-items: center;
  gap: 8px;
`;

const Label = styled.span`
  color: ${uiColors.yellow};
  font-size: 0.5rem;
  opacity: 0.8;
`;

const Value = styled.span`
  color: ${uiColors.white};
  font-size: 0.5rem;
`;

const StyledCollapsible = styled(Collapsible)`
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: ${uiColors.darkGray} transparent;
`;

const Description = styled.p`
  color: ${uiColors.white};
  font-size: 0.5rem;
  margin: 0;
  padding: 12px;
  line-height: 1.5;
`;

const StatGrid = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  padding: 12px;
`;

const StatItem = styled.div`
  color: ${uiColors.white};
  font-size: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  padding: 8px;
  border-radius: 4px;
`;

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

const EffectItem = styled.div`
  display: flex;
  align-items: center;
  gap: 4px;
  color: ${uiColors.white};
  font-size: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  padding: 4px 8px;
  border-radius: 4px;
`;

const EffectChance = styled.span`
  color: ${uiColors.yellow};
  opacity: 0.8;
`;

const BuffsList = styled.div`
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
`;

const BuffItem = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  padding: 8px;
  border-radius: 4px;
`;

const BuffName = styled.span`
  color: ${uiColors.white};
  font-size: 0.5rem;
`;

const BuffValue = styled.span`
  color: ${uiColors.yellow};
  font-size: 0.5rem;
`;

const BuffDescription = styled.p`
  color: ${uiColors.lightGray};
  font-size: 0.45rem;
  margin: 0;
  padding: 0 12px 12px;
  font-style: italic;
`;

const DropList = styled.div`
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 12px;
`;

const DropItem = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
`;

const NPCName = styled.span`
  color: ${uiColors.white};
  font-size: 0.5rem;
`;

const DropRate = styled.span`
  color: ${uiColors.yellow};
  font-size: 0.5rem;
`;

const RequirementsGrid = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  padding: 12px;
`;

const RequirementItem = styled.div`
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.05);
  padding: 8px;
  border-radius: 4px;
`;

const EffectDescription = styled.p`
  color: ${uiColors.lightGray};
  font-size: 0.45rem;
  margin: 8px 0 0;
  padding: 0 12px;
  font-style: italic;
`;
