import React, { ReactNode } from 'react';
import { FaTimes } from 'react-icons/fa';
import styled from 'styled-components';
import { uiColors } from '../../../constants/uiColors';
import { SpriteFromAtlas } from '../../shared/SpriteFromAtlas';

export interface IBaseInformationDetailsProps {
  name: string;
  spriteKey: string;
  atlasJSON: Record<string, any>;
  atlasIMG: string;
  onBack: () => void;
  children?: ReactNode;
}

export const BaseInformationDetails: React.FC<IBaseInformationDetailsProps> = ({
  name,
  spriteKey,
  atlasJSON,
  atlasIMG,
  onBack,
  children,
}) => {
  return (
    <Container>
      <Overlay onClick={onBack} />
      <Modal>
        <CloseButton onClick={onBack}>
          <FaTimes />
        </CloseButton>

        <Header>
          <SpriteContainer>
            <SpriteFromAtlas
              atlasJSON={atlasJSON}
              atlasIMG={atlasIMG}
              spriteKey={spriteKey}
              width={32}
              height={32}
              imgScale={1}
            />
          </SpriteContainer>
          <Title>{name}</Title>
        </Header>
        <Content>{children}</Content>
      </Modal>
    </Container>
  );
};

const Container = styled.div`
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
`;

const Overlay = styled.div`
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.8);
`;

const Modal = styled.div`
  position: fixed;
  background-color: rgba(0, 0, 0, 0.95);
  border-radius: 4px;
  padding: 12px;
  overflow: hidden;
  z-index: 1;
  font-family: 'Press Start 2P', cursive;
  border: 1px solid ${uiColors.darkGray};
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  width: 90%;
  height: 90%;
  top: 5%;
  left: 5%;
  max-width: 800px;
  margin: 0 auto;

  @media (max-width: 768px) {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 0;
    padding: 8px;
  }

  &::-webkit-scrollbar {
    width: 2px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: ${uiColors.yellow};
    border-radius: 4px;
    opacity: 0.5;

    &:hover {
      opacity: 1;
    }
  }

  scrollbar-width: thin;
  scrollbar-color: ${uiColors.yellow} transparent;
`;

const CloseButton = styled.button`
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  color: ${uiColors.yellow};
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0;
  z-index: 1;
  transition: transform 0.2s ease;

  &:hover {
    transform: scale(1.1);
  }
`;

const Header = styled.div`
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
`;

const Content = styled.div`
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: calc(100% - 80px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
  margin-right: -6px;

  @media (max-width: 768px) {
    height: calc(100% - 64px);
    gap: 8px;
    padding-right: 4px;
    margin-right: -4px;
  }
`;

const Title = styled.h2`
  color: ${uiColors.yellow};
  font-size: 1rem;
  margin: 0;
`;

const SpriteContainer = styled.div`
  width: 64px;
  height: 64px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

  .sprite-from-atlas-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(2);
    transform-origin: center;
  }
`;
