import { IItemPack, IProductBlueprint, IPurchase, ItemRarities, ItemSubType, ItemType, MetadataType, PaymentCurrency, PurchaseType, UserAccountTypes } from '@rpg-engine/shared';
import type { Meta, StoryObj } from '@storybook/react';
import React from 'react';
import { RPGUIRoot } from '../../../components/RPGUI/RPGUIRoot';
import customSkinImage from '../../../components/Store/sections/images/custom-skin.png';
import { Store } from '../../../components/Store/Store';
import entitiesAtlasJSON from '../../../mocks/atlas/entities/entities.json';
import entitiesAtlasIMG from '../../../mocks/atlas/entities/entities.png';
import itemsAtlasJSON from '../../../mocks/atlas/items/items.json';
import itemsAtlasIMG from '../../../mocks/atlas/items/items.png';
import { mockItems } from '../../../mocks/informationCenter.mocks';

const meta = {
  title: 'Features/Store/Store',
  component: Store,
  parameters: {
    layout: 'centered',
  },
  decorators: [
    Story => (
      <RPGUIRoot>
        <Story />
      </RPGUIRoot>
    ),
  ],
} satisfies Meta<typeof Store>;

export default meta;
type Story = StoryObj<typeof Store>;

// Create mock items once, with fixed stock values
const storeItems: IProductBlueprint[] = mockItems.map((item, index) => ({
  key: `original-${item.key}-${index}`,
  name: item.name,
  description: item.description,
  price: item.basePrice,
  currency: PaymentCurrency.USD,
  texturePath: item.texturePath,
  textureAtlas: 'items',
  textureKey: item.texturePath,
  type: PurchaseType.Item,
  onPurchase: async () => { },
  itemType: item.type,
  itemSubType: item.subType,
  rarity: item.rarity,
  weight: item.weight,
  isStackable: item.maxStackSize > 1,
  maxStackSize: item.maxStackSize || 1,
  isUsable: true,
  requiredAccountType: item.rarity === 'Legendary' ? [UserAccountTypes.PremiumGold] : [],

}));

// Sample character skins
const availableCharacters = [
  {
    id: 'black-knight',
    name: 'Black Knight',
    textureKey: 'black-knight',
  },
  {
    id: 'dragon-knight',
    name: 'Dragon Knight',
    textureKey: 'dragon-knight',
  },
  {
    id: 'senior-knight-1',
    name: 'Senior Knight',
    textureKey: 'senior-knight-1',
  },
];

// Create character name change item
const characterNameChangeItem: IProductBlueprint = {
  key: 'character-name-change',
  name: 'Character Name Change',
  description: 'Change your character\'s name to something new',
  price: 9.99,
  currency: PaymentCurrency.USD,
  texturePath: 'items/character_customization.png',
  textureAtlas: 'items',
  textureKey: 'items/character_customization.png',
  type: PurchaseType.Item,
  onPurchase: async () => { },
  itemType: ItemType.Other,
  itemSubType: ItemSubType.Other,
  rarity: ItemRarities.Common,
  weight: 0,
  isStackable: false,
  maxStackSize: 1,
  isUsable: true,
  inputPlaceholder: 'Enter new character name',
};

// Create character skin items
const characterSkinItems: IProductBlueprint[] = [
  {
    key: 'skin-character-customization',
    name: 'Character Skin Customization',
    description: 'Customize your character\'s appearance with a variety of skins',
    price: 14.99,
    currency: PaymentCurrency.USD,
    texturePath: 'items/character_customization.png',
    textureAtlas: 'items',
    textureKey: 'items/character_customization.png',
    type: PurchaseType.Item,
    onPurchase: async () => { },
    itemType: ItemType.Other,
    itemSubType: ItemSubType.Other,
    rarity: ItemRarities.Rare,
    weight: 0,
    isStackable: false,
    maxStackSize: 1,
    isUsable: true,
    metadataType: MetadataType.CharacterSkin,
    metadataConfig: {
      availableCharacters,
      atlasJSON: entitiesAtlasJSON,
      atlasIMG: entitiesAtlasIMG,
    },
    store: {
      isHighlighted: true, // Highlight the first character skin item
    },
  },
  {
    key: 'skin-premium-character-pack',
    name: 'Premium Character Skin Pack',
    description: 'A premium collection of exclusive character skins',
    price: 24.99,
    currency: PaymentCurrency.USD,
    texturePath: 'items/premium_character_pack.png',
    textureAtlas: 'items',
    textureKey: 'items/premium_character_pack.png',
    type: PurchaseType.Item,
    onPurchase: async () => { },
    itemType: ItemType.Other,
    itemSubType: ItemSubType.Other,
    rarity: ItemRarities.Epic,
    weight: 0,
    isStackable: false,
    maxStackSize: 1,
    isUsable: true,
    requiredAccountType: [UserAccountTypes.PremiumSilver],
    metadataType: MetadataType.CharacterSkin,
    metadataConfig: {
      availableCharacters,
      atlasJSON: entitiesAtlasJSON,
      atlasIMG: entitiesAtlasIMG,
    },
  }
];

// Create duplicated items once with unique keys
const duplicatedItems: IProductBlueprint[] = [
  ...storeItems,
  characterNameChangeItem,
  ...characterSkinItems,
  ...storeItems.map((item, index) => ({
    ...item,
    key: `copy1-${item.key}-${index}`,
  })),
  ...storeItems.map((item, index) => ({
    ...item,
    key: `copy2-${item.key}-${index}`,
  })),
  ...storeItems.map((item, index) => ({
    ...item,
    key: `copy3-${item.key}-${index}`,
  })),
];

// Mock packs data
const mockPacks: IItemPack[] = [
  // Regular Packs
  {
    key: 'starter-pack',
    title: 'Starter Pack',
    description: 'Perfect for beginners! Get essential items to start your adventure.',
    priceUSD: 4.99,
    image: customSkinImage,
  },
  {
    key: 'custom-skin-pack',
    title: 'Custom Skin Pack',
    description: 'Get a unique look with this custom skin pack! Stand out from the crowd.',
    priceUSD: 7.99,
    image: customSkinImage,
  },

  {
    key: 'ultimate-pack',
    title: '👑 Ultimate Premium Pack',
    description: 'The most exclusive collection of items, effects, and perks. Includes everything from previous tiers plus legendary items!',
    priceUSD: 99.99,
    image: customSkinImage,
  },
  {
    key: 'gold-pack',
    title: '🥇 Gold Premium Pack',
    description: 'The ultimate premium experience with rare items, unique effects, and exclusive content. For true champions!',
    priceUSD: 49.99,
    image: customSkinImage,
  },
  {
    key: 'silver-pack',
    title: '🥈 Silver Premium Pack',
    description: 'Enhanced premium features with more exclusive items and special effects. For dedicated adventurers.',
    priceUSD: 24.99,
    image: customSkinImage,
  },
  {
    key: 'bronze-pack',
    title: '🥉 Bronze Premium Pack',
    description: 'Start your premium journey with exclusive items and basic perks. Perfect for casual players.',
    priceUSD: 14.99,
    image: customSkinImage,
  },

];

// Create the story with the static mock data
export const Default: Story = {
  render: () => (
    <Store
      items={duplicatedItems}
      packs={mockPacks}
      userAccountType={UserAccountTypes.Free}
      onPurchase={(purchase: Partial<IPurchase>) => {
        console.log('Purchase details:', purchase);
        return Promise.resolve(true);
      }}
      onShowHistory={() => console.log('Show History clicked in story')}
      onClose={() => console.log('Store closed')}
      atlasJSON={itemsAtlasJSON}
      atlasIMG={itemsAtlasIMG}
      hidePremiumTab={true}
      tabOrder={['items', 'packs']}
      defaultActiveTab="items"
      textInputItemKeys={['original-greater-life-potion-2', 'original-angelic-sword-1', 'character-name-change']}
    />
  ),
};
