import { IStoreItem, UserAccountTypes } from '@rpg-engine/shared';
import React, { useState } from 'react';
import { FaCartPlus } from 'react-icons/fa';
import styled from 'styled-components';
import { SelectArrow } from '../Arrow/SelectArrow';
import { CTAButton } from '../shared/CTAButton/CTAButton';
import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';

interface IStoreItemRowProps {
  item: IStoreItem;
  atlasJSON: Record<string, any>;
  atlasIMG: string;
  onAddToCart: (item: IStoreItem, quantity: number, metadata?: Record<string, any>) => void;
  userAccountType: UserAccountTypes;
}

export const StoreItemRow: React.FC<IStoreItemRowProps> = ({
  item,
  atlasJSON,
  atlasIMG,
  onAddToCart,
  userAccountType,
}) => {
  const [quantity, setQuantity] = useState(1);

  const handleQuantityChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = parseInt(e.target.value) || 1;
    setQuantity(Math.min(Math.max(1, value), 99));
  };

  const handleBlur = () => {
    if (quantity < 1) setQuantity(1);
    if (quantity > 99) setQuantity(99);
  };

  const incrementQuantity = () => {
    setQuantity(prev => Math.min(prev + 1, 99));
  };

  const decrementQuantity = () => {
    setQuantity(prev => Math.max(1, prev - 1));
  };

  const hasRequiredAccount =
    !item.requiredAccountType?.length ||
    item.requiredAccountType.includes(userAccountType);

  const handleAddToCart = () => {
    if (!hasRequiredAccount) return;
    onAddToCart(item, quantity);
    setQuantity(1); // Reset quantity after adding to cart
  };

  return (
    <ItemWrapper>
      <ItemIconContainer>
        <SpriteFromAtlas
          atlasJSON={atlasJSON}
          atlasIMG={atlasIMG}
          spriteKey={item.texturePath}
          width={32}
          height={32}
          imgScale={2}
          centered
        />
      </ItemIconContainer>

      <ItemDetails>
        <ItemName>{item.name}</ItemName>
        <ItemPrice>${item.price}</ItemPrice>
      </ItemDetails>

      <Controls>
        <ArrowsContainer>
          <SelectArrow
            direction="left"
            onPointerDown={decrementQuantity}
            size={24}
          />

          <QuantityInput
            type="number"
            value={quantity}
            onChange={handleQuantityChange}
            onBlur={handleBlur}
            min={1}
            max={99}
            className="rpgui-input"
          />

          <SelectArrow
            direction="right"
            onPointerDown={incrementQuantity}
            size={24}
          />
        </ArrowsContainer>

        <CTAButton
          icon={<FaCartPlus />}
          label="Add"
          onClick={handleAddToCart}
          disabled={!hasRequiredAccount}
        />
      </Controls>
    </ItemWrapper>
  );
};

const ItemWrapper = styled.div`
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

  &:last-child {
    border-bottom: none;
  }
`;

const ItemIconContainer = styled.div`
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  padding: 4px;
`;

const ItemDetails = styled.div`
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
`;

const ItemName = styled.div`
  font-family: 'Press Start 2P', cursive;
  font-size: 0.875rem;
  color: #ffffff;
`;

const ItemPrice = styled.div`
  font-family: 'Press Start 2P', cursive;
  font-size: 0.75rem;
  color: #fef08a;
`;

const Controls = styled.div`
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: fit-content;
`;

const ArrowsContainer = styled.div`
  position: relative;
  display: flex;
  align-items: center;
  width: 120px;
  height: 42px;
  justify-content: space-between;
`;

const QuantityInput = styled.input`
  width: 40px;
  text-align: center;
  margin: 0 auto;
  font-size: 0.875rem;
  background: rgba(0, 0, 0, 0.2);
  color: #ffffff;
  border: none;
  padding: 0.25rem;

  &::-webkit-inner-spin-button,
  &::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
`;
