import {
  IProductBlueprint,
  MetadataType,
  UserAccountTypes,
  ItemType,
} from '@rpg-engine/shared';
import React from 'react';
import styled from 'styled-components';
import { ScrollableContent } from '../../shared/ScrollableContent/ScrollableContent';
import { StoreCharacterSkinRow } from '../StoreCharacterSkinRow';
import { StoreItemRow } from '../StoreItemRow';
import { Dropdown } from '../../Dropdown';
import { SearchBar } from '../../shared/SearchBar/SearchBar';
import { useStoreFiltering } from '../../../hooks/useStoreFiltering';

interface IStoreItemsSectionProps {
  items: IProductBlueprint[];
  onAddToCart: (
    item: IProductBlueprint,
    quantity: number,
    metadata?: Record<string, any>
  ) => void;
  atlasJSON: Record<string, any>;
  atlasIMG: string;
  userAccountType?: UserAccountTypes;
  textInputItemKeys?: string[];
}

export const StoreItemsSection: React.FC<IStoreItemsSectionProps> = ({
  items,
  onAddToCart,
  atlasJSON,
  atlasIMG,
  userAccountType,
  textInputItemKeys = [],
}) => {
  const {
    searchQuery,
    setSearchQuery,
    setSelectedCategory,
    categoryOptions,
    filteredItems,
  } = useStoreFiltering(items);

  const renderStoreItem = (item: IProductBlueprint) => {
    // Prefer a specialized character skin row when needed
    if (item.metadataType === MetadataType.CharacterSkin) {
      return (
        <StoreCharacterSkinRow
          key={item.key}
          item={item}
          atlasJSON={atlasJSON}
          atlasIMG={atlasIMG}
          onAddToCart={onAddToCart}
          userAccountType={userAccountType || UserAccountTypes.Free}
        />
      );
    }
    // Render text input row when configured for this item key
    if (textInputItemKeys.includes(item.key)) {
      return (
        <StoreItemRow
          key={item.key}
          item={item}
          atlasJSON={atlasJSON}
          atlasIMG={atlasIMG}
          onAddToCart={onAddToCart}
          userAccountType={userAccountType || UserAccountTypes.Free}
          showTextInput
        />
      );
    }
    // Fallback to standard arrow-based row
    return (
      <StoreItemRow
        key={item.key}
        item={item}
        atlasJSON={atlasJSON}
        atlasIMG={atlasIMG}
        onAddToCart={onAddToCart}
        userAccountType={userAccountType || UserAccountTypes.Free}
      />
    );
  };

  return (
    <StoreContainer>
      <SearchHeader>
        <SearchBarContainer>
          <SearchBar
            value={searchQuery}
            onChange={setSearchQuery}
            placeholder="Search items..."
          />
        </SearchBarContainer>
        <DropdownContainer>
          <Dropdown
            options={categoryOptions}
            onChange={value => setSelectedCategory(value as ItemType | 'all')}
            width="100%"
          />
        </DropdownContainer>
      </SearchHeader>

      <ScrollableContent
        items={filteredItems}
        renderItem={renderStoreItem}
        emptyMessage="No items match your filters."
        layout="list"
        maxHeight="350px"
      />
    </StoreContainer>
  );
};

const StoreContainer = styled.div`
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0.5rem;
`;

const SearchHeader = styled.div`
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding-top: 0.25rem;
`;

const SearchBarContainer = styled.div`
  flex: 0.75;
`;

const DropdownContainer = styled.div`
  flex: 0.25;
  min-width: 140px;
`;
